Accessibility Lab

1. Start dev server: script/dev
2. Visit localhost:8000
3. Test screen reader & keyboard usability 😬
4. Make accessibility improvements! ✨
5. Try out improvements 🎉

Screen reader & keyboard use

Keyboard

Action	Command
Next (link, button)	Tab
Prev (link, button)	Shift + Tab
Trigger interactive (link, button)	Enter
Toggle interactive (checkbox, accordion)	Spacebar

VoiceOver (Mac built-in screen reader)

Action	Command
Turn on / off	Command + triple-press Touch ID or Command + Fn + F5
Start reading	Control + Option + A
Stop reading	Control
Next interactive	Tab
Prev interactive	Shift + Tab
Trigger interactive	Control + Option + Spacebar
Next heading	Control + Option + command + H
Prev heading	Control + Option + command + Shift + H
Next sibling element	Control + Option + Shift + →
Prev sibling element	Control + Option + Shift + ←
Next child element	Control + Option + Shift + ↓
Next parent element	Control + Option + Shift + ↑
Open web rotor	Control + Option + U
- Next menu	→
- Prev menu	←
- Next item	↓
- Prev item	↑
- Go to selected item	Enter
- Close web rotor	Esc
Screen curtain on / off	Control + Option + Shift + Fn + _

Accessibility Improvements

Auditing Accessibilty

Lighthouse

1. In Chrome, open the Developer Tools.
2. Go to the Audits tab.
3. Run an audit that includes Accessibility.

Focus Outline

Never remove the outline on focus! It makes is difficult to navigate with a keyboard.

1. Restore the focus outline.

Alternative Text for Images

Add alternative text for image

The alt text should describe the image and be kept short (under 16 words). Use empty alt attributes for presentational content like background images. Note: an empty alt is not the same as a missing alt attribute. If the alt attribute is missing, the screen reader will read out the image filename, which is usually not useful.

Add labels to links and buttons without text

Add aria-label to links and buttons that do not have text, such as icon buttons.

<button aria-label="Next" />

Skip Links

Allow users to skip repetitive elements repeated on every page, such as the navigation menu.

Add a "Skip to Main Content" link. The link should be hidden until the user tabs to it.

Forms

Accessible Form Controls

1. Match for and id values associate the label with the appropriate form control.

<label for="name">Name:</label>
<input id="name" type="text" name="textfield">

2. Group checkboxes and radio buttons in a <fieldset> element. Add a <legend> element to provide a description for the grouping.

<fieldset>
  <legend>Choose a shipping method:</legend>
  <input id="overnight" type="radio" name="shipping" value="overnight">
  <label for="overnight">Overnight</label><br>
  <input id="twoday" type="radio" name="shipping" value="twoday">
  <label for="twoday">Two day</label><br>
  <input id="ground" type="radio" name="shipping" value="ground">
  <label for="ground">Ground</label>
</fieldset>

3. Add aria-describedby to the textarea for describing your buffalo.

Non-label text is not read by the screen reader, so field instructions outside a label will be missed.

<label for="resetpass">Reset Password:</label>
<input type="password" name="resetpass" id="resetpass" aria-describedby="newpass">
<br>
<span id="newpass">New password must be 8-15 characters and include letters and numbers</span>

Landmarks

Landmarks allow the user to jump to sections of a page. Even if you use semantic HTML elements like main and nav, not all screen readers will include them in the landmarks list, You should add a role attribute to main sections of the page, like the main content, navigation and search.

1. Add a role attribute to the main content.
2. Add a role attribute to the navigation.
3. Add a role attribute to the search form.

Dynamic Content Updates

1. Add an aria-live region for the search results.

Resources

1. I Used The Web For A Day With Just A Keyboard
2. I Used The Web For A Day Using A Screen Reader
3. Inclusive Components
4. WebAIM (web accessibility in mind)
5. Web Content Accessibility Guidelines (WCAG)