Quick accessibility audit for developers

This guide is the developer-centric remake of “Quick accessibility audit for designers”, and is intended to provide direction for anyone reviewing a PR that requires an accessibility review.

It’s not intended to be exhaustive since thorough accessibility testing is difficult to encapsulate in a codified process, if not impossible. If you would like to learn more about more advanced ways to test accessibility, join the Accessibility Guild channel on Mattermost and let us know!

This guide requires no specialist knowledge of screen readers or other assistive tech.

Basic a11y QA

Heading hierarchy

Browser extension: headingsMap (Chrome / Firefox)
WCAG references: 1.3.1, 1.3.2, 2.4.2

  • All pages should have a <h1> with an appropriate page title
  • There should be no skipped heading levels. A <h2> should be followed by a <h3>, a <h3> by <h4> and so on.

If you see red, there’s a problem. Often these problems can be solved with Vanilla, which provides heading classes (.p-heading--3 etc) that can be applied to any heading element, in cases where the design requires a heading level to look like another.

image

Detectable errors

Browser extension: WAVE
WCAG references: 1.1.1, 1.4.3

Run the extension and check there are:

  • Zero errors. WAVE will flag up easily resolved issues such as:
  • Minimal contrast errors. There are exceptions, especially around plugins we have less control over, like chatbots, etc. Assess these on a case-by-case basis. Ask in the Accessibility Guild channel if you need advice.
  • Minimal alerts. There are exceptions, especially around links to PDF documents and <noscript> elements, but again should be assessed on a case-by-case basis. Ask in the Accessibility Guild channel if you need advice.

image

Keyboard navigation

WCAG references: 2.1.1, 2.4.1, 2.4.3, 2.4.7

Using the Tab key

  • Check the “Skip to content” link is present on the page as first focusable item
  • Check the “Skip to content” link takes the page’s main content when Enter is pressed
  • Tab through the page
    • Focus order should be logical e.g. it should be possible to navigate through links on a page sequentially.
    • You should be able to navigate to and interact with everything that a mouse user can e.g. it should be possible to trigger all links and CTAs with the Enter key
    • All elements that can receive focus this way should have a focus state, typically a blue outline: