Accessibility
Generic
Content
Markup
Keyboard
Images
Forms
Color contrast
Mobile

Accessibility

This is an accessibility checklist used by the core team when designing and developing new features. It helps us improve the experience for everyone who uses our products and ensures our high standards are met.

Generic

Passes the automated WCAG 2.1 AA scan

Run npm run build && npm run test:a11y. It runs axe-core against every component’s docs demos and writes the report to reports/a11y/, which is the accessibility evidence of record. CI runs the same scan with --strict, so a new violation fails the build.

Passes a manual review with Accessibility Insights for Web

Download and install Accessibility Insights for Web, then run its FastPass on the page. It runs axe-core underneath, so what you see on screen matches what CI reports.

Works with NVDA screen reader on Windows

Download and install NVDA for Windows to check off this item.

Works with JAWS screen reader on Windows

Download and install Jaws for Windows to check off this item.

Works with VoiceOver on macOS

macOS ships with VoiceOver which can be enabled through preferences.

Works with TalkBack on Android

Android ships with TalkBack which can be enabled by following these instructions.

Works with Windows high contrast mode

High contrast mode uses a limited color palette with contrasting colors to make an interface easier to use.

Works when text size is increased to 200%

Follow the instructions to change the default text size in Chrome.

Works when zoomed in 400%

Content

Content is written in a plain and clear language

Accessible writing ensures your content is understandable for everyone to read. Use Readability Analyzer set to ‘8th grade level’ to check your writing.

<button>, <a>, and <label> contents are unique and descriptive

There is only one <h1> heading per page

The h1 element should be used to communicate the high-level purpose of the page or view.

Heading elements appear i logical order

Heading levels aren’t skipped

List elements (<ol>, <ul>, <dl>) are used for list content

Main content’s line height is at least 1.5 times the font size

Markup

HTML has been validated with W3 validator

Valid HTML helps to provide a consistent, expected experience across all browsers.

<html> element has correct lang attribute

This helps assistive technologies, such as screen readers, to pronounce content correctly.

Each page has a unique <title>

This helps people using assistive technologies to understand what view they are going to start navigating.

Markup uses landmarks to indicate content regions

Landmarks help communicate the layout, and allow direct access to these regions.

No tabindex attribute values other than 0 or -1

Elements that are inherently focusable don’t require a tabindex.

No title attribute tooltips in markup

The title attribute has multiple issues and should not be used.

<a> element is used for all links

<button> element is used for all buttons

<table> is used to describe tabular data

<caption> element is used to provide titles for tables

Keyboard

Tested to be keyboard accessible

All interactive elements have visible focus styles

Can a person navigating with a keyboard, switch, voice control, or screen reader see where they currently are?

Keyboard focus layout matches the visual layout

There are no invisible focusable elements

Buttons are accessible using space and enter keys

Dialogs and overlays can be closed using Esc key

Images

All <img> elements have alt attribute values

Complex charts and graphs have text alternatives

Decorative <svg> elements use aria-hidden=‘true’

<img> elements with an <svg> source use role=‘img’ attribute

If your are using embedded SVGs, always set role=“img” and give the element a label.

Forms

All inputs are associated with a corresponding label element

<fieldset> and <legend> elements are used where appropriate

Form input fields support autocomplete where appropriate

Input error messages are associated with the inputs they correspond to

Color contrast

All text contents have a contrast ratio of at least 4.5:1

All UI components have a contrast ratio of at least 3:1

Interface has been tested with a color blindness simulator

Color isn’t the only way information/meaning is conveyed

Mobile

Website can be rotated to any orientation

Website works on 320px wide viewport

The whole page doesn’t scroll horizontally

All touch targets are at least 44x44px, except when placed inline

Ensure that touch target sizes are large enough for users to activate them.

Viewpoint zooming isn’t disabled