Skip to content

Commit d7ff217

Browse files
sirkitreesirkitree
committed
deploy: b9d2fd2 
1 parent 03c2663 commit d7ff217

File tree

1 file changed

+116
-50
lines changed
  • ebooks/how-to-web-accessibility-audit/pages/page-5

1 file changed

+116
-50
lines changed

‎ebooks/how-to-web-accessibility-audit/pages/page-5/index.html‎

Lines changed: 116 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -208,56 +208,122 @@
208208
<div class="copy-paragraph"><p><a href="https://docs.google.com/spreadsheets/d/1EDh0nzHF-LroFjLmSGLib4ylLaNe8_Tm-J1KcSSIf4I/edit?gid=0#gid=0">Keep track of your progress with this manual audit spreadsheet</a>.</p>
209209
<p>Make sure your website works for everyone by checking these key areas:</p>
210210
<ol>
211-
<li><strong>Screen reader:</strong> Test with popular screen readers like JAWS, NVDA, or VoiceOver. Ensure all elements provide context, can be* accessed easily, and don’t “trap” users.</li>
212-
<li><strong>Keyboard:</strong> Ditch the mouse and navigate only with your keyboard. Note the elements you cannot access or interact with, and watch for lost focus—it may signal a missing focus state or movement to a hidden element.
213-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html">WCAG 2.2 Level A: Keyboard</a>
214-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html">WCAG 2.2 Level A: No Keyboard Trap</a></li>
215-
<li><strong>Usability &amp; flow:</strong> Is everything intuitive and predictable? Buttons should look and function like buttons, links should look and function like links, and so on. Check the tab order to ensure a smooth, logical experience.
216-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html">WCAG 2.2 Level A: Focus Order</a></li>
217-
<li><strong>Forms:</strong> Ensure all forms have the appropriate semantic elements and attributes and have a label to provide context. If a captcha is used, be sure there are alternatives to accommodate different disabilities.
218-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a>
219-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">WCAG 2.2 Level AA: Headings and Labels</a>
220-
c. <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">WCAG 2.2 Level A: Non-text Content</a></li>
221-
<li><strong>Dialog boxes and popups:</strong> Make sure dialogs are accessible by using proper semantic elements and managing focus—moving it in when opened, looping within, and returning it when closed.
222-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a>
223-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html">WCAG 2.2 Level A: Keyboard</a>
224-
c. <a href="https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html">WCAG 2.2 Level A: No Keyboard Trap</a></li>
225-
<li><strong>Multimedia:</strong> Make media accessible—audio should have transcripts, videos should have captions and descriptions along with pause options for autoplay, and all text-based graphics should have alt text.
226-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html">WCAG 2.2 Level A: Audio-only and Video-only (Prerecorded)</a>
227-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html">WCAG 2.2 Level A: Captions (Prerecorded)</a>
228-
c. <a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html">WCAG 2.2 Level A: Audio Description or Media Alternative (Prerecorded)</a>
229-
d. <a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html">WCAG 2.2 Level A: Captions (Live)</a>
230-
e. <a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html">WCAG 2.2 Level A: Audio Description (Prerecorded)</a></li>
231-
<li><strong>Links and buttons:</strong> Make sure links and buttons use the correct semantic elements and have text that provides enough context to describe the link or action.
232-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a>
233-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html">WCAG 2.2 Level A: Link Purpose (In Context)</a>
234-
c. <a href="https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only.html">WCAG 2.2 Level AAA: Link Purpose (Link Only)</a></li>
235-
<li><strong>Logical headings:</strong> Use headings correctly—there should only be one H1 per page, and they should follow a logical order. This helps screen reader users navigate efficiently.
236-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a>
237-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html">WCAG 2.2 Level A: Bypass Blocks</a></li>
238-
<li><strong>Skip navigation links:</strong> The “skip to main content” link should be the first focusable element on the page, helping users skip past the main menu.
239-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html">WCAG 2.2 Level A: Bypass Blocks</a></li>
240-
<li><strong>Images:</strong> Add alt text to all images—use empty alt for decorative ones. You should avoid text in images, but if needed, include it in the alt text.
241-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">WCAG 2.2 Level A: Non-text Content</a>
242-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html">WCAG 2.2 Level AA: Images of text</a></li>
243-
<li><strong>Data tables:</strong> Ensure tables have necessary column and row headings, groups, captions, and summaries to aid navigation for all users.
244-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a>
245-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html">WCAG 2.2 Level A: Sensory Characteristics</a></li>
246-
<li><strong>iFrame titles:</strong> Include descriptive title attributes for iFrames on the page.
247-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">WCAG 2.2 Level AA: Heading and Labels</a></li>
248-
<li><strong>Colors and contrast:</strong> Ensure text has at least 4.5:1 contrast with the background, and UI elements meet a 3:1 ratio. Don’t rely on color alone to show actions—use additional cues.
249-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">WCAG 2.2 Level AA: Contrast (Minimum)</a>
250-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">WCAG 2.2 Level A: Use of Color</a>
251-
c. <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">WCAG 2.2 Level A: Non-text Contrast</a></li>
252-
<li><strong>Font size/zoom:</strong> Users should be able to scale text without breaking the design when adjusting their browser’s font-size settings.
253-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html">WCAG 2.2 Level AA: Resize Text</a></li>
254-
<li><strong>Touch-friendly elements:</strong> Ensure buttons and inputs are a minimum of 24 by 24 pixels for mobile users.
255-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 Level AA: Target Size (Minimum)</a></li>
256-
<li><strong>Animations:</strong> Give users control over the animation and respect their system preferences for reduced motion. (Level AAA).
257-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html">WCAG 2.2 Level A: Pase, Stop, Hide</a>
258-
b. <a href="https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html">WCAG 2.2 Level AAA: Animation from Interaction</a></li>
259-
<li><strong>Focus states:</strong> Every focusable element must have a focus state. Focus should never be “lost” while tabbing through the page.
260-
a. <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">WCAG 2.2 Level AA Focus Visible</a></li>
211+
<li>
212+
<p><strong>Screen reader:</strong> Test with popular screen readers like JAWS, NVDA, or VoiceOver. Ensure all elements provide context, can be* accessed easily, and don't &quot;trap&quot; users.</p>
213+
</li>
214+
<li>
215+
<p><strong>Keyboard:</strong> Ditch the mouse and navigate only with your keyboard. Note the elements you cannot access or interact with, and watch for lost focus—it may signal a missing focus state or movement to a hidden element.</p>
216+
<ul>
217+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html">WCAG 2.2 Level A: Keyboard</a></li>
218+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html">WCAG 2.2 Level A: No Keyboard Trap</a></li>
219+
</ul>
220+
</li>
221+
<li>
222+
<p><strong>Usability &amp; flow:</strong> Is everything intuitive and predictable? Buttons should look and function like buttons, links should look and function like links, and so on. Check the tab order to ensure a smooth, logical experience.</p>
223+
<ul>
224+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html">WCAG 2.2 Level A: Focus Order</a></li>
225+
</ul>
226+
</li>
227+
<li>
228+
<p><strong>Forms:</strong> Ensure all forms have the appropriate semantic elements and attributes and have a label to provide context. If a captcha is used, be sure there are alternatives to accommodate different disabilities.</p>
229+
<ul>
230+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a></li>
231+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">WCAG 2.2 Level AA: Headings and Labels</a></li>
232+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">WCAG 2.2 Level A: Non-text Content</a></li>
233+
</ul>
234+
</li>
235+
<li>
236+
<p><strong>Dialog boxes and popups:</strong> Make sure dialogs are accessible by using proper semantic elements and managing focus—moving it in when opened, looping within, and returning it when closed.</p>
237+
<ul>
238+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a></li>
239+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html">WCAG 2.2 Level A: Keyboard</a></li>
240+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html">WCAG 2.2 Level A: No Keyboard Trap</a></li>
241+
</ul>
242+
</li>
243+
<li>
244+
<p><strong>Multimedia:</strong> Make media accessible—audio should have transcripts, videos should have captions and descriptions along with pause options for autoplay, and all text-based graphics should have alt text.</p>
245+
<ul>
246+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html">WCAG 2.2 Level A: Audio-only and Video-only (Prerecorded)</a></li>
247+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html">WCAG 2.2 Level A: Captions (Prerecorded)</a></li>
248+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html">WCAG 2.2 Level A: Audio Description or Media Alternative (Prerecorded)</a></li>
249+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html">WCAG 2.2 Level A: Captions (Live)</a></li>
250+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html">WCAG 2.2 Level A: Audio Description (Prerecorded)</a></li>
251+
</ul>
252+
</li>
253+
<li>
254+
<p><strong>Links and buttons:</strong> Make sure links and buttons use the correct semantic elements and have text that provides enough context to describe the link or action.</p>
255+
<ul>
256+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a></li>
257+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html">WCAG 2.2 Level A: Link Purpose (In Context)</a></li>
258+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only.html">WCAG 2.2 Level AAA: Link Purpose (Link Only)</a></li>
259+
</ul>
260+
</li>
261+
<li>
262+
<p><strong>Logical headings:</strong> Use headings correctly—there should only be one H1 per page, and they should follow a logical order. This helps screen reader users navigate efficiently.</p>
263+
<ul>
264+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a></li>
265+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html">WCAG 2.2 Level A: Bypass Blocks</a></li>
266+
</ul>
267+
</li>
268+
<li>
269+
<p><strong>Skip navigation links:</strong> The &quot;skip to main content&quot; link should be the first focusable element on the page, helping users skip past the main menu.</p>
270+
<ul>
271+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html">WCAG 2.2 Level A: Bypass Blocks</a></li>
272+
</ul>
273+
</li>
274+
<li>
275+
<p><strong>Images:</strong> Add alt text to all images—use empty alt for decorative ones. You should avoid text in images, but if needed, include it in the alt text.</p>
276+
<ul>
277+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html">WCAG 2.2 Level A: Non-text Content</a></li>
278+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html">WCAG 2.2 Level AA: Images of text</a></li>
279+
</ul>
280+
</li>
281+
<li>
282+
<p><strong>Data tables:</strong> Ensure tables have necessary column and row headings, groups, captions, and summaries to aid navigation for all users.</p>
283+
<ul>
284+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">WCAG 2.2 Level A: Info and Relationships</a></li>
285+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html">WCAG 2.2 Level A: Sensory Characteristics</a></li>
286+
</ul>
287+
</li>
288+
<li>
289+
<p><strong>iFrame titles:</strong> Include descriptive title attributes for iFrames on the page.</p>
290+
<ul>
291+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">WCAG 2.2 Level AA: Heading and Labels</a></li>
292+
</ul>
293+
</li>
294+
<li>
295+
<p><strong>Colors and contrast:</strong> Ensure text has at least 4.5:1 contrast with the background, and UI elements meet a 3:1 ratio. Don't rely on color alone to show actions—use additional cues.</p>
296+
<ul>
297+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">WCAG 2.2 Level AA: Contrast (Minimum)</a></li>
298+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">WCAG 2.2 Level A: Use of Color</a></li>
299+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">WCAG 2.2 Level A: Non-text Contrast</a></li>
300+
</ul>
301+
</li>
302+
<li>
303+
<p><strong>Font size/zoom:</strong> Users should be able to scale text without breaking the design when adjusting their browser's font-size settings.</p>
304+
<ul>
305+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html">WCAG 2.2 Level AA: Resize Text</a></li>
306+
</ul>
307+
</li>
308+
<li>
309+
<p><strong>Touch-friendly elements:</strong> Ensure buttons and inputs are a minimum of 24 by 24 pixels for mobile users.</p>
310+
<ul>
311+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 Level AA: Target Size (Minimum)</a></li>
312+
</ul>
313+
</li>
314+
<li>
315+
<p><strong>Animations:</strong> Give users control over the animation and respect their system preferences for reduced motion. (Level AAA).</p>
316+
<ul>
317+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html">WCAG 2.2 Level A: Pase, Stop, Hide</a></li>
318+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html">WCAG 2.2 Level AAA: Animation from Interaction</a></li>
319+
</ul>
320+
</li>
321+
<li>
322+
<p><strong>Focus states:</strong> Every focusable element must have a focus state. Focus should never be &quot;lost&quot; while tabbing through the page.</p>
323+
<ul>
324+
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">WCAG 2.2 Level AA Focus Visible</a></li>
325+
</ul>
326+
</li>
261327
</ol>
262328
<p>As you did with the automated audit, list the issues you find in a document or as tickets in your project management system of choice.</p>
263329
</div>

0 commit comments

Comments
 (0)