Accessibility Lab

Start dev server: script/dev
Visit localhost:8000
Test screen reader & keyboard usability 😬
Make accessibility improvements! ✨
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

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

Focus Outline

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

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

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">

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>

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.

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

Dynamic Content Updates

Add an aria-live region for the search results.

substantial/accessibility-lab