-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (174 loc) · 10.7 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
---
meta: true
id: a11y-smoke-test
script: true
title: Accessibility Smoke Test
---
<h1 class="heading-small">{{ page.title }} {{ site.version }}</h1>
<button class="disclosure--btn" data-disclosure-icon>Testing Tools</button>
<div class="disclosure--content">
<div class="qa-info">
<h2 class="info-heading">Automated Testing</h2>
<p>Web pages must always be validated. Errors presented in WAVE and the W3C (World Wide Web Consortium) Validator are the most critical issues to address. Accessibility and QA (Quality Assurance) engineers should link directly to validation reports when logging issues.</p>
<p><b>Who is responsible?</b> Everybody</p>
<ul>
<li><a class="validate-a11y new-tab" href="https://wave.webaim.org/">WAVE Validation</a></li>
<li><a class="validate-html new-tab" href="https://validator.w3.org/nu/">W3C Validation</a>
<details>
<summary>Advanced Validation</summary>
<ul>
<li><button class="new-tab" data-script="https://radancy.dev/a11y-smoke-test/local/dom-validate.js">W3C Validation (Serialized DOM)</button>
- <span>Runs validation on entire DOM (Document Object Model), including <strong>script generated content</strong>. Cannot be linked to.</span>
</li>
<li>
<button data-script="https://radancy.dev/a11y-smoke-test/local/wcag-parsing.js">WCAG Parsing</button>
- <span>Not all errors may affect accessibility. Run on W3C Validator <em>results page</em> to remove non-WCAG issues.</span>
</li>
</ul>
</details>
</li>
<li><a class="validate-heading new-tab" href="heading.html">Heading Validation</a></li>
</ul>
<h2>Other Validation Tests (Not Mandatory)</h2>
<ul>
<li><a class="validate-css new-tab" href="http://jigsaw.w3.org/css-validator/">Validate CSS</a></li>
<li><a class="validate-links new-tab" href="https://validator.w3.org/checklink">Validate Links</a></li>
<li><a class="validate-spelling new-tab" href="https://www.w3.org/2002/01/spellchecker">Validate Spelling</a></li>
<li><a class="validate-structured-data new-tab" href="https://search.google.com/test/rich-results">Validate Structured Data</a></li>
</ul>
<h2 class="info-heading">Manual Testing</h2>
<p>Web pages may have deeper problems that automated tools cannot find, so manual testing methods will need to be performed instead. The following are common and useful tools you may use for closer analysis.</p>
<p><b>Who is responsible?</b> Engineers, Specialists</p>
<h3>Validate HTML by Direct Input</h3>
<details>
<summary>Show Form</summary>
<form action="https://validator.w3.org/nu/?showsource=yes" enctype="multipart/form-data" id="submitPartialPage" method="post" target="_blank">
<input name="showsource" type="hidden" value="yes">
<label for="contentToValidate">Enter the Markup to validate:</label>
<textarea cols="60" name="contentToValidate" id="contentToValidate" placeholder="e.g., <p>Hello World!</p>" required rows="5"></textarea>
<button class="btn" id="submitValidate" type="submit">Validate</button>
</form>
</details>
<h3>Magnification</h3>
<ul>
<li><button data-script="{{ site.git-url }}/a11y-smoke-test/local/reflow-320x256.js">Test Page Reflow (320x256)</button></li>
<li><button data-script="{{ site.git-url }}/a11y-smoke-test/local/reflow-1280x1024.js">Test Page Reflow (1280x1024)</button></li>
</ul>
<h3>Color</h3>
<ul>
<li><button data-script="contrast" data-fragment="color-contrast">Test Contrast</button>
<li><button data-script="contrast" data-fragment="link-contrast">Test Link & Text Contrast</button>
</ul>
<h3>Typography</h3>
<ul>
<li><button data-script="typography" data-fragment="default-font">Change Default Font Size</button>
<li><button data-script="{{ site.git-url }}/a11y-smoke-test/local/text-spacing.js">Text Spacing</button></li>
</ul>
<h3>Internationalization</h3>
<ul>
<li><button data-script="{{ site.git-url }}/a11y-smoke-test/local/i18n-rtl.js">Show Right-to-left (RTL)</button>
<li><button data-script="{{ site.git-url }}/a11y-smoke-test/local/i18n-ltr.js">Show Left-to-right (LTR)</button>
<li><button data-script="{{ site.git-url }}/a11y-smoke-test/local/i18n-lang.js">Show Document Language</button>
</ul>
<h3>Animation</h3>
<ul>
<li><a class="new-tab" href="https://trace.umd.edu/peat/">Download PEAT (Photosensitive Epilepsy Analysis Tool)</a></li>
</ul>
<p><strong>Note:</strong> Animations that fail PEAT should be brought to the attention of your team immediately. Please contact <a href="mailto:{{site.owner-email}}">{{site.owner-name}}</a> for more information.</p>
<h3>Visual</h3>
<ul>
<li><button data-script="https://radancy.dev/a11y-bookmarklets/focus.js">Force Focus</button></li>
</ul>
<h3>PDF</h3>
<ul>
<li><a class="new-tab" href="https://pdfua.foundation/en/pdf-accessibility-checker-pac/register">Download PAC (PDF Accessibility Checker)</a></li>
</ul>
<p><strong>Note:</strong> PDF remediation is unlike web remediation and will need to go through a third party. Please contact <a href="mailto:{{site.owner-email}}">{{site.owner-name}}</a> for more information.</p>
<h2>Other</h2>
<ul>
<li><button data-script="https://radancy.dev/a11y-smoke-test/local/isolator.js">Isolate Code Blocks</button></li>
</ul>
</div>
<div class="reminder-info">
<h2>Reminder!</h2>
<p>Have you tested your page in Axe? All developers should have the Axe devTools extension installed and be using it regularly, during development, to address any critical and serious accessibility issues.</p>
<ul>
<li><a class="new-tab" href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US">Chrome</a></li>
<li><a class="new-tab" href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">FireFox</a></li>
<li><a class="new-tab" href="https://microsoftedge.microsoft.com/addons/detail/axe-devtools-web-access/kcenlimkmjjkdfcaleembgmldmnnlfkn">Edge</a></li>
</ul>
</div>
</div>
{% include baselines.html %}
<button class="disclosure--btn" data-disclosure-icon>Other Tools and Resources</button>
<div class="disclosure--content">
<details>
<summary>Additional Browser Extensions</summary>
<p>More advanced automated testing can be performed with the following tools:</p>
<ul>
<li><button data-script="https://www.ssa.gov/accessibility/andi/andi.js">ANDI</button></li>
<li><button data-script="https://rawgit.com/pauljadam/bookmarklets/master/axe.js">aXe Results</button> (Experimental, open console to see results)</li>
<li><button data-script="https://khan.github.io/tota11y/dist/tota11y.min.js">Tota11y</button></li>
</ul>
</details>
<details>
<summary>Advanced Testing</summary>
<p>More advanced tools and resources for specialized accessibility testers.</p>
<ul>
<li><a class="new-tab" href="https://amp.levelaccess.net/login.php">Level Access AMP</a>
<h2>Access Assistant</h2>
<ul>
<li><a class="new-tab" href="https://amp.levelaccess.net/download/assistant.php?version=2&browser=chrome">Chrome Extension</a></li>
<li><a class="new-tab" href="https://amp.levelaccess.net/download/assistant.php?version=2&browser=firefox">Firefox Plugin</a></li>
<li><a class="new-tab" href="https://amp.levelaccess.net/download/assistant.php?version=2&browser=edge">Edge Extension (Beta)</a></li>
<li><a class="new-tab" href="https://amp.levelaccess.net/download/assistant.php?version=2&browser=ie">Internet Explorer 11 Plugin</a></li>
</ul>
<h2>Continuum Explorer Pro</h2>
<ul>
<li><a class="new=tab" href="https://chrome.google.com/webstore/detail/continuum-explorer-pro/pgkgokkkoamjdmbnegbedepbhbgecplj?hl=en-US">Chrome Extension</a></li>
</ul>
<h2>Accessible Color Tools</h2>
<ul>
<li><a class="new-tab" href="https://chrome.google.com/webstore/detail/accessible-color-picker/bgfhbflmeekopanooidljpnmnljdihld">Accessible Color Picker for Chrome</a></li>
<li><a class="new-tab" href="https://www.levelaccess.com/reference/index.php/Color-Contrast-Checker">Color Contrast Checker</a></li>
</ul>
</li>
</ul>
</details>
<details>
<summary>Third-party Testing</summary>
<p>While automated and manual testing techniques can take us far, they will never equal the lived experience of individuals who are disabled, so having people with disabilites test your websites and products is a must.</p>
<ul>
<li><a class="new-tab" href="https://access-works.com/">Access Works</a></li>
<li><a class="new-tab" href="https://theweco.com/">WeCo Digital Accessibility</a></li>
</ul>
</details>
<details>
<summary>Screen Readers</summary>
<p>Accessibility testing is not complete until the work has been engaged with via a screen reader. Listening to your work is just as important as visual inspection.</p>
<ul>
<li><a class="new-tab" href="https://support.freedomscientific.com/Downloads/JAWS">JAWS (Paid, 30 Minute Mode)</a>
<ul>
<li><a href="https://webaim.org/resources/shortcuts/jaws">Keyboard Shortcuts for JAWS</a></li>
</ul>
</li>
<li><a class="new-tab" href="https://www.nvaccess.org/download/">NVDA (Free)</a>
<ul>
<li><a href="https://webaim.org/resources/shortcuts/nvda">Keyboard Shortcuts for NVDA</a></li>
</ul>
</li>
<li><a class="new-tab" href="https://support.apple.com/guide/mac-help/change-voiceover-preferences-accessibility-mh40578/mac">VoiceOver for Mac</a></li>
<li><a class="new-tab" href="https://support.microsoft.com/en-us/windows/hear-text-read-aloud-with-narrator-040f16c1-4632-b64e-110a-da4a0ac56917">Windows Narrator</a></li>
</ul>
</details>
<details>
<summary>Testing Resources</summary>
<ul>
<li><a class="new-tab" href="https://www.w3.org/WAI/people-use-web/">How People with Disabilities Use the Web (User Stories)</a></li>
<li><a class="new-tab" href="https://thepaciellogroup.github.io/AT-browser-tests/">HTML Element Test File Index</a></li>
<li><a class="new-tab" href="https://www.powermapper.com/tests/screen-readers/">PowerMapper - Screen Reader Reliability</a></li>
</ul>
</details>
</div>
{% include a11y-overlays.html %}
<!-- TODO: include label in name 2.5.3 Label in Name -->