Testing your site's accessibility #

This page is for website creators who check a site before launch and after changes. Automatic tools find part of the problems; the rest needs a person with a keyboard and a screen reader. This routine takes a few hours for a typical site and catches most issues.

Contents #

1. Choose the pages
2. Automatic checks
3. Keyboard pass
4. Screen reader pass
5. Zoom, color and motion
6. Recording findings
7. After launch

Choose the pages #

Test one page of every template, not every page:

• the front page and each landing page layout;
• one full view of every class (article, event, product ...);
• a folder list with paging;
• search results, with and without hits;
• every form: contact, registration, login, newsletter, checkout;
• error pages (not found, access denied);
• each language siteaccess, including right-to-left ones.

Automatic checks #

Run an automatic accessibility checker (for example a browser extension or a command-line tool based on axe) on each page. Fix every error it reports; read its warnings. Run it on your color schemes and at a phone width too. Automatic tools find missing alternative texts, labels, contrast problems and wrong ARIA, not whether the order makes sense.

Keyboard pass #

Put the mouse away and use Tab, Shift+Tab, Enter, Space, Escape and the arrow keys:

• To do: The skip link appears on the first Tab and works.
• To do: Every link and control is reachable, in a sensible order.
• To do: The focus is always visible.
• To do: Menus open and close with the keyboard; Escape closes pop-ups and returns focus.
• To do: Nothing traps the focus (embedded maps, video players, CAPTCHAs).

Screen reader pass #

With a screen reader your operating system offers:

• To do: The page title says where you are.
• To do: Landmarks and headings give a usable outline.
• To do: Images are described or skipped as intended.
• To do: Form fields announce their label, required state and errors.
• To do: The language switches are announced in the right language.

Zoom, color and motion #

• To do: 200% zoom and 320 CSS pixels width: no horizontal scrolling, nothing cut off.
• To do: Contrast at least 4.5:1 for text, 3:1 for large text and controls.
• To do: Information is not given by color alone.
• To do: With reduced motion requested, sliders and animations stop.

Recording findings #

Sort fixes into template work (once, for every page) and content work (editors, page by page).

After launch #

• Re-run the automatic checks after every design change, as part of your release checks (Testing applications).
• Teach editors the content rules (Accessibility for site builders).
• Give visitors a way to report barriers (a contact form), and answer them.

Related pages #

• Accessibility for site builders
• The launch checklist
• Quality gates and acceptance
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.