-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
112 lines (112 loc) · 10.3 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JavaScript Bookmarklets for Accessibility Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<h1>JavaScript Bookmarklets for Accessibility Testing</h1>
<p>Bookmarklets for Accessibility Testing use JavaScript to highlight roles, states, and properties of accessibility elements on the page. They are accessible to screen reader users and work on any browser including mobile phones. </p>
<p>Drag and drop the Install Link into your bookmarks bar to use in any browser. Most bookmarklets have an inaccessible Demo Page where you can test how the bookmarklet works live.</p>
<p>On Android devices bookmarklets must be activated via the browser search bar typing in the name of the bookmark otherwise it will not work just by tapping the bookmark normally like on iOS. </p>
<p>Bookmarklets now support accessibility testing of same-domain <iframe> elements but not cross-domain iframes.</p>
<p>Bookmarklets are also available as a standalone <a href="http://pauljadam.com/extension.html">a11yTools Extension for Safari macOS</a>.</p>
<table>
<caption>
Bookmarklet Demo Pages and Installation Links
</caption>
<tbody>
<tr>
<th scope="col">Bookmarklet</th>
<th scope="col">Demo Page</th>
<th scope="col">Install Link</th>
</tr>
<tr>
<th scope="row">ARIA</th>
<td><a href="http://pauljadam.com/bookmarklets/aria.html">ARIA</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/aria.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/aria.js';}})();">ARIA</a></td>
</tr>
<tr>
<th scope="row">Images</th>
<td><a href="http://pauljadam.com/bookmarklets/images.html">Images</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/images.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/images.js';}})();">Images</a></td>
</tr>
<tr>
<th scope="row">Forms</th>
<td><a href="http://pauljadam.com/bookmarklets/forms.html">Forms</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/forms.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/forms.js';}})();">Forms</a></td>
</tr>
<tr>
<th scope="row">Headings</th>
<td><a href="http://pauljadam.com/bookmarklets/headings.html">Headings</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/headings.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/headings.js';}})();">Headings</a></td>
</tr>
<tr>
<th scope="row">Tables</th>
<td><a href="http://pauljadam.com/bookmarklets/tables.html">Tables</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/tables.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/tables.js';}})();">Tables</a></td>
</tr>
<tr>
<th scope="row">Landmarks</th>
<td><a href="http://pauljadam.com/bookmarklets/landmarks.html">Landmarks</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/landmarks.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/landmarks.js';}})();">Landmarks</a></td>
</tr>
<tr>
<th scope="row">Page Title</th>
<td> </td>
<td><a href="javascript:(function(){prompt('Press Command + C to Copy Page Title', document.title);})();">Page Title</a></td>
</tr>
<tr>
<th scope="row">Lang</th>
<td><a href="http://www.freedomscientific.com/training/Surfs-Up/Languages.htm">Lang</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/lang.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/lang.js';}})();">Lang</a></td>
</tr>
<tr>
<th scope="row">Tabindex</th>
<td><a href="http://pauljadam.com/bookmarklets/tabindex.html">Tabindex</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/tabindex.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/tabindex.js';}})();">Tabindex</a></td>
</tr>
<tr>
<th scope="row">Title Attributes</th>
<td><a href="http://pauljadam.com/bookmarklets/title.html">Title Attributes</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/title.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/title.js';}})();">Title Attr</a></td>
</tr>
<tr>
<th scope="row">Iframes</th>
<td><a href="http://pauljadam.com/bookmarklets/iframes.html">Iframes</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/iframes.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/iframes.js';}})();">Iframes</a></td>
</tr>
<tr>
<th scope="row">Lists</th>
<td><a href="http://pauljadam.com/bookmarklets/lists.html">Lists</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/lists.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/lists.js';}})();">Lists</a></td>
</tr>
<tr>
<th scope="row">Force Show Focus</th>
<td><a href="http://pauljadam.com/bookmarklets/focus.html">Force Show Focus</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/focus.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/focus.js';}})();">Force Focus</a></td>
</tr>
<tr>
<th scope="row">Reset Page</th>
<td><a href="http://pauljadam.com/bookmarklets/reset.html">Reset Page</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/reset.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/reset.js';}})();">Reset Page</a></td>
</tr>
<tr>
<th scope="row">Grayscale</th>
<td><a href="http://pauljadam.com/demos/svg-line-chart.html">Grayscale</a></td>
<td><a href="javascript:void%20function(){(function(){function%20i(i){document.body.style.filter=i,document.body.style.webkitFilter=i}window.isGrayscale%3F(i(%22none%22),window.isGrayscale=!1):(i(%22grayscale(1)%22),window.isGrayscale=!0)})()}();">Grayscale</a></td>
</tr>
<tr>
<th scope="row">aXe Console.log</th>
<td><a href="http://pauljadam.com/bookmarklets/axe.html">aXe Console.log</a></td>
<td><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.staticaly.com/gh/pauljadam/bookmarklets/master/axe.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.staticaly.com/gh/pauljadam/bookmarklets/master/axe.js';}})();">aXe Console</a></td>
</tr>
</tbody>
</table>
<p><a href="http://pauljadam.com/bookmarklets/">http://pauljadam.com/bookmarklets/</a></p>
<p>GitHub Repo: <a href="https://github.com/pauljadam/bookmarklets">https://github.com/pauljadam/bookmarklets</a></p>
<p>TODO: <select onchange>?, & Visual Icons. Disable CSS? <audio><video>?, onclick events?, Potential Headings? </p>
</body>
</html>