General Documentation

Accessibility Checklist

HTML is valid

Paste your markup into a validator a fix any reported issues. As well as reporting markup issues, the W3C Markup Validation Service will also report incorrect use of ARIA attributes.

Tools

Learn more

HTML is well structured

Think about the structure of tags used, are elements like header and section used appropriately? Are headings structured in a logical order according to level of importance? Correct type of lists used? i.e. ordered / unordered.

Tools

Learn more

Reference

HTML is well ordered

Turn off CSS and read page from top to bottom, is it possible to read the document? Does it make sense?

Use heading order to show importance.

Tools

HTML is semantic

Ensure semantics are conveyed with tags or roles (if necessary), not with style, e.g. em not class="italic" and button or role="button" not div.

Learn more

Reference

HTML is labelled

Controls and images are labelled.

Form elements have an associated label, even those with placeholder, the label must always be visible. Alternatively they may make use of ARIA attributes such as aria-described-by or aria-label.

Images must have an alt attribute, even if it's empty. Think about the context of the image; is it followed by descriptive text? Is it contained within a link? Is it a decorative image?

Learn more

Reference

Passed an accessibility audit

Run an in-browser audit and fix any issues.

Paste your markup into a validator such as the Web Accessibility Checker and fix any reported issues. The W3C Markup Validation Service will also report some accessibility related issues.

Tools

Keyboard is supported

Using only the keyboard; you can action links and buttons with Space or Enter; dialogues may be dismissed and menus closed with Escape; composite components (such as dropdown menus) support arrow keys. Follow the conventions in native web components.

Learn more

Reference

Tab stops in place

Use only the keyboard. You should be able to navigate to every interactive element (and only interactive elements) with the Tab key. Use tabindex="0" on interactive elements that aren't natively focusable.

Learn more

Reference

Focus is managed

Using only the keyboard, interact with any scripted components and ensure focus is never 'dropped'. For example opening a dialogue (Space or Enter) focusses a button within that dialogue, dismissing the dialogue (Escape) hands focus back to the element which opened it.

Learn more

Reference

States are updated

Examine the live DOM (devtools) and manipulate the site (open, close, expand elements). Any states, such as aria-valuenow and aria-expanded, update accordingly.

Reference

Page is well spoken


Use the site with a screen reader (and if you can, switch off your monitor). Landmarks mean it is easy to navigate the page. Semantic elements and attributes tell a meaningful story. Dynamic content is spoken as a live region. All content and functionality is available without seeing or using a mouse/trackpad.

Tools

Learn more

Reference

Examples

Adding text for assistive software

Use a class helper to hide text visually:

<button>Add <span class="is-visuallyHidden">burger to basket</span></button>

When you have an element which uses a graphic to indicate its purpose, make sure you label it as w=such

<button aria-label="Add burger to basket">Add</button>

Only the aria-label value will be used