Checklist: accessibility #

This page is for designers who review a design for accessibility. Run it on every page type: front page, article, list, search results, a form, an error page, a layouts page.

Contents #

1. Structure
2. Keyboard and focus
3. Visual
4. Content the design prints
5. Forms
6. Automated check

Structure #

• To do: lang on <html>, dir="rtl" for right-to-left languages.
• To do: Landmarks: header, navigation (each labeled), main, footer (Landmarks and headings).
• To do: One h1; headings without skipped levels.
• To do: A skip link as the first focusable element, working (Skip links).
• To do: The page title names the page, then the site.

Keyboard and focus #

• To do: Every link, button and field reachable with Tab, in a sensible order (Keyboard and focus).
• To do: Focus always visible, with 3:1 contrast.
• To do: Menus, dialogs, sliders work with the keyboard; Escape closes; focus returns.
• To do: No keyboard trap.

Visual #

• To do: Text contrast at least 4.5:1 (3:1 for large text) in light and dark (Color contrast).
• To do: Information not by color alone (errors, required fields, links in text).
• To do: 200% zoom and 320 px wide: nothing lost, no horizontal page scroll (Testing at zoom levels).
• To do: Motion respects prefers-reduced-motion; no autoplay without a pause (Reduced motion).
• To do: Forced colors (Windows high contrast): borders, focus and icons still visible.

Content the design prints #

• To do: Images: alt text from the image field, alt="" for decoration.
• To do: Icon-only buttons have a name.
• To do: Link texts make sense out of context ("Read more about X", not "here").
• To do: Embedded videos have captions available (an editor's task; the player must show them).

Forms #

• To do: Every field has a visible label tied to it (Accessible forms).
• To do: Required fields marked in text, not only by color.
• To do: Errors listed in a summary and next to the field; focus moves to the summary.
• To do: autocomplete on personal data fields.

Automated check #

• To do: axe (browser extension or a test script) finds no serious or critical issues on each page type, light and dark.
• To do: No errors in the browser console.

Automated checks find only part of the problems; the keyboard and zoom checks above are not optional.

Related pages #

• Accessibility basics for themes
• Checklist: theme launch
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.