-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
133 lines (126 loc) · 11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible Wordle</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
p {
font-size: 14pt;
}
.space {
margin: 40px;
}
input {
font-family: monospace;
width: 80%;
}
</style>
</head>
<body>
<div class="container" role="main">
<div class="jumbotron">
<h1>Accessible Wordle</h1>
</div>
<p>
If you're using Chrome on the desktop (Mac, PC, Linux), install this
Chrome extension to make Wordle accessible to your screen reader:
</p>
<p class="space">
<a href="https://chrome.google.com/webstore/detail/make-wordle-accessible/okpjjdhfccnkdhcbbpmigemhfeeacdpl">
Make Wordle Accessible Chrome Extension
</a>
</p>
<p>
Last updated: June 26, 2022, because the New York Times totally rewrote
Wordle and the bookmarklet and extension needed to be changed.
</p>
<p>
Once you install the extension, you're done.
Reload the page if you already have Wordle open, but otherwise from
now on every time you open Wordle it will be automatically accessible,
you won't have to do anything.
</p>
<p>
If you want to use Wordle on Android or iOS or on another
browser, keep reading - but none of the rest of the instructions
on this page are necessary if you use the extension.
</p>
<p>
This is a little bookmarklet to make Wordle accessible to screen
reader users. It's not a replacement for the game, rather you can
use it to modify Wordle in-place to make it accessible - that way
you can play the same game as everyone else.
</p>
<p>
Works on both desktop and mobile browsers and screen readers.
</p>
<p>
It's a few steps to set up the first time but then it's very easy
to use any time you want to play Wordle. This is the only way
to modify a website in-place, especially on a mobile browser.
</p>
<p>
Note: if you installed the bookmarklet prior to June 26, 2022 then you'll
need to delete the old one and install it again, because unfortunately
the NY Times rewrote Wordle and the bookmarklet needed to change. If you
use the Chrome extension, you don't need to do anything, it updates
automatically once a day or so.
</p>
<p>
If you're on Android or on a desktop browser, below is a link called Make
Wordle Accessible. Instead of clicking the link, right-click it
and choose Copy Link Address, then keep reading for the next
step.
</p>
<p class="space">
<a class="bookmarklet" href='javascript:let%20s=()=>{let%20a=(a,b,c)=>{a.setAttribute(b,c)},b=(c,d,e)=>{c.className.toString().indexOf(d)>=0&&e.push(c);for(let%20a=c.firstElementChild;a;a=a.nextElementSibling)b(a,d,e)},c=(c,d)=>{let%20a=[];return%20b(c,d,a),a[0]||null},d=(c,d)=>{let%20a=[];return%20b(c,d,a),a},e=(b,f,d,e)=>{d&&("tile"==d?(a(b,"role","img"),a(b,"aria-roledescription","tile")):a(b,"role",d),"dialog"==d&&a(b,"aria-modal",!1)),e&&a(b,"aria-label",e),f&&0!=b.tabIndex&&(b.tabIndex=0,b.addEventListener("keydown",a=>{if("Enter"==a.code||"Space"==a.code){a.stopPropagation(),a.preventDefault();let%20d=c(b,"div.switch");d?d.click():b.click()}},!1))},f=c=>{let%20b="";["letter","evaluation","data-key","data-state"].forEach(d=>{let%20a=c.getAttribute(d);a&&"\u2190"!=a&&"tbd"!=a&&(b+="%20"+a)}),""!=(b=c.textContent+b)&&b!=c.getAttribute("aria-label")&&a(c,"aria-label",b)},g=c=>{let%20b=d(c,"Tile-module");for(let%20a=0;a<b.length;a++)e(b[a],!0,"tile","Tile"),f(b[a])},h=new%20MutationObserver((a,c)=>{for(let%20b%20of%20a)f(b.target)}),i=b=>{e(b,!1,"tile","Empty"),f(b),h.observe(b,{attributes:!0}),setTimeout(()=>{a(b,"aria-live","polite")},1e3)},j=a=>{h.observe(a,{attributes:!0})},k=new%20MutationObserver((d,f)=>{for(let%20e%20of%20d){let%20b=e.target,c=""+b.hasAttribute("checked");c!=b.getAttribute("aria-checked")&&a(b,"aria-checked",c)}}),l=b=>{b.hasAttribute("aria-checked")||(e(b,!0,"checkbox",b.getAttribute("name")),a(b,"aria-checked",b.hasAttribute("checked"))),k.observe(b,{attributes:!0})},m,n,o=b=>{e(b,!1,"dialog","Game%20Modal"),setTimeout(()=>{let%20h=c(b,"close");h&&e(h,!0,"button","Close");let%20f=c(m,"Settings-module_setting");if(f){f=f.parentElement,a(b,"aria-label","Settings%20Modal");let%20j=d(f,"Settings-module_setting");for(let%20i=0;i<j.length;i++)l(j[i]);let%20k=c(f,"Settings-module_setting");if(k){k.focus();return}}let%20n=c(m,"Help-module_instructions");n&&(a(b,"aria-label","Help%20Modal"),g(n)),h&&h.focus()},500)},p=new%20MutationObserver((a,b)=>{let%20d=a[0].target;setTimeout(()=>{let%20a=c(d,"Page-module_page");if(a||(a=c(d,"Modal-module_modalOverlay"))){o(a);return}n&&n.focus()},500)}),q=a=>{p.observe(a,{childList:!0})},r=()=>{if(m=c(document.body,"App-module_game")){let%20u=c(document.body,"AppHeader-module_appHeader");if(u){var%20A;u.querySelectorAll("[tabindex]").forEach(a=>a.setAttribute("tabIndex",0))}q(m);let%20v=c(m,"Modal-module_modalOverlay");v&&o(v);let%20w=c(m,"Help-module_page");w&&g(w);let%20x=d(m,"ToastContainer-module_toaster");for(let%20p=0;p<x.length;p++)a(x[p],"aria-live","polite");let%20y=c(m,"Keyboard-module_keyboard");e(y,!1,"group","Keyboard");let%20b=d(y,"Key-module_key");for(let%20k=0;k<b.length;k++)n||(n=b[k]),j(b[k]);for(var%20l=0;l<b.length;l++)"\u2190"==b[l].getAttribute("data-key")&&e(b[l],!1,null,"backspace");let%20f=d(m,"Row-module_row");for(let%20h=0;h<f.length;h++){e(f[h],!1,"group","Row%20"+(h+1));let%20z=d(f[h],"Tile-module_tile");for(let%20r=0;r<z.length;r++)i(z[r])}let%20t=document.createElement("p");t.style.color="var(--color-tone-1)",t.innerHTML="Wordle%20screen%20reader%20accessibility%20extension%20running.",f[f.length-1].parentElement.appendChild(t)}};setTimeout(()=>{r()},1e3)};s()'>Make Wordle Accessible</a>
</p>
<p>
If you're on your phone, especially iOS Safari, do this instead:
navigate to the following text field and select all of the code,
then press Copy.
</p>
<p class="space">
<input value='javascript:let%20s=()=>{let%20a=(a,b,c)=>{a.setAttribute(b,c)},b=(c,d,e)=>{c.className.toString().indexOf(d)>=0&&e.push(c);for(let%20a=c.firstElementChild;a;a=a.nextElementSibling)b(a,d,e)},c=(c,d)=>{let%20a=[];return%20b(c,d,a),a[0]||null},d=(c,d)=>{let%20a=[];return%20b(c,d,a),a},e=(b,f,d,e)=>{d&&("tile"==d?(a(b,"role","img"),a(b,"aria-roledescription","tile")):a(b,"role",d),"dialog"==d&&a(b,"aria-modal",!1)),e&&a(b,"aria-label",e),f&&0!=b.tabIndex&&(b.tabIndex=0,b.addEventListener("keydown",a=>{if("Enter"==a.code||"Space"==a.code){a.stopPropagation(),a.preventDefault();let%20d=c(b,"div.switch");d?d.click():b.click()}},!1))},f=c=>{let%20b="";["letter","evaluation","data-key","data-state"].forEach(d=>{let%20a=c.getAttribute(d);a&&"\u2190"!=a&&"tbd"!=a&&(b+="%20"+a)}),""!=(b=c.textContent+b)&&b!=c.getAttribute("aria-label")&&a(c,"aria-label",b)},g=c=>{let%20b=d(c,"Tile-module");for(let%20a=0;a<b.length;a++)e(b[a],!0,"tile","Tile"),f(b[a])},h=new%20MutationObserver((a,c)=>{for(let%20b%20of%20a)f(b.target)}),i=b=>{e(b,!1,"tile","Empty"),f(b),h.observe(b,{attributes:!0}),setTimeout(()=>{a(b,"aria-live","polite")},1e3)},j=a=>{h.observe(a,{attributes:!0})},k=new%20MutationObserver((d,f)=>{for(let%20e%20of%20d){let%20b=e.target,c=""+b.hasAttribute("checked");c!=b.getAttribute("aria-checked")&&a(b,"aria-checked",c)}}),l=b=>{b.hasAttribute("aria-checked")||(e(b,!0,"checkbox",b.getAttribute("name")),a(b,"aria-checked",b.hasAttribute("checked"))),k.observe(b,{attributes:!0})},m,n,o=b=>{e(b,!1,"dialog","Game%20Modal"),setTimeout(()=>{let%20h=c(b,"close");h&&e(h,!0,"button","Close");let%20f=c(m,"Settings-module_setting");if(f){f=f.parentElement,a(b,"aria-label","Settings%20Modal");let%20j=d(f,"Settings-module_setting");for(let%20i=0;i<j.length;i++)l(j[i]);let%20k=c(f,"Settings-module_setting");if(k){k.focus();return}}let%20n=c(m,"Help-module_instructions");n&&(a(b,"aria-label","Help%20Modal"),g(n)),h&&h.focus()},500)},p=new%20MutationObserver((a,b)=>{let%20d=a[0].target;setTimeout(()=>{let%20a=c(d,"Page-module_page");if(a||(a=c(d,"Modal-module_modalOverlay"))){o(a);return}n&&n.focus()},500)}),q=a=>{p.observe(a,{childList:!0})},r=()=>{if(m=c(document.body,"App-module_game")){let%20u=c(document.body,"AppHeader-module_appHeader");if(u){var%20A;u.querySelectorAll("[tabindex]").forEach(a=>a.setAttribute("tabIndex",0))}q(m);let%20v=c(m,"Modal-module_modalOverlay");v&&o(v);let%20w=c(m,"Help-module_page");w&&g(w);let%20x=d(m,"ToastContainer-module_toaster");for(let%20p=0;p<x.length;p++)a(x[p],"aria-live","polite");let%20y=c(m,"Keyboard-module_keyboard");e(y,!1,"group","Keyboard");let%20b=d(y,"Key-module_key");for(let%20k=0;k<b.length;k++)n||(n=b[k]),j(b[k]);for(var%20l=0;l<b.length;l++)"\u2190"==b[l].getAttribute("data-key")&&e(b[l],!1,null,"backspace");let%20f=d(m,"Row-module_row");for(let%20h=0;h<f.length;h++){e(f[h],!1,"group","Row%20"+(h+1));let%20z=d(f[h],"Tile-module_tile");for(let%20r=0;r<z.length;r++)i(z[r])}let%20t=document.createElement("p");t.style.color="var(--color-tone-1)",t.innerHTML="Wordle%20screen%20reader%20accessibility%20extension%20running.",f[f.length-1].parentElement.appendChild(t)}};setTimeout(()=>{r()},1e3)};s()'>
</p>
<p>
OK, if you followed either of the above instructions and copied
something, the next step is to make it into a bookmark. Open your
browser's bookmark manager and click on the option to create a
new bookmark.
</p>
<p>
Name the new bookmark Make Wordle Accessible or something like
that. In the URL or link address field, paste what you just
copied. It's super long and should start with the word
javascript. If it doesn't, something went wrong.
</p>
<p>
On iOS Safari, the easiest solution might be to tap the Share icon to
bookmark the current page, then open the Bookmark Manager and edit the
bookmark to paste the bookmarklet code in as the address, instead of
this page.
</p>
<p>
Now all you need to do is visit Wordle and then after the page
loads, open this bookmark you just saved, and the page will
become accessible instantly. If you keep the tab open it should
keep working for as long as you want, but if you reopen or
reload the page you'll have to also open the bookmark again.
</p>
<p>
Written by Dominic Mazzoni, and released under the terms of the
<a href="https://opensource.org/licenses/BSD-3-Clause">
3-clause BSD license</a>.
<a href="https://github.com/minorninth/accessible-wordle">
Source code on GitHub.</a>
</p>
</div>
</body>
</html>