Pattern Library

Accessibility

Accessibility Checklist

Who's Responsible For It?
Accessibility Principle Product Owner UX Developer QA Content Producer
Does the page title clearly describe the page’s purpose?
Is there a "Skip to Main Content" link?
Does the heading structure convey the page structure and content?
Is the reading order logical?
Is keyboard focus visible?
Does keyboard focus move in a logical order?
Can elements and content that can be accessed with the mouse, be accessed with the keyboard in the expected way?
Do media have text alternatives that convey their purpose?
Are there any animations that are outside the user’s control?
Is color alone used to convey any information?
Does color contrast meet AA standards?
Do form fields have labels that convey their purpose?
Do links convey their purpose in their text?
Accessibility Principle Product Owner UX Developer QA Content Producer

More Information About These Principles

Does the page title clearly describe the page’s purpose?

Page Titles show up in your browser's tabs. They should quickly describe the page and differentiate the page from others

Learn More

Is there a "Skip to Main Content" link?

When using a keyboard to tab through the site, you should include a skip link that allows you to skip to the main part of the page.

Learn More

Does the heading structure convey the page structure and content?

A page should have a heading that conveys the meaning of the page and text that looks like a heading should be a heading.

Learn More

Is the reading order logical?

A page's HTML should be in the same order as what is displayed by the browser.

Learn More

Is keyboard focus visible?

When you are using the keyboard to navigate the page, you need to be able to see what element has focus so you can select it.

Learn More

Does keyboard focus move in a logical order?

As you use the tab key to move through a page, it should take you through the page in a logical order.

Learn More

Can elements and content that can be accessed with the mouse, be accessed with the keyboard in the expected way?

You should be able to reach all the elements on the page using the keyboard.

Learn More

Do media have text alternatives that convey their purpose?

Media tags should have alt attributes that describe what is in the image/video/etc.

Learn More

Are there any animations that are outside the user’s control?

Users should be able to request reduced motion and pause videos.

Learn More

Is color alone used to convey any information?

Not everyone can distinguish between colors, so if you rely on color alone to convey meaning, then someone can't use part of your site.

Learn More

Does color contrast meet AA standards?

The colors between the page's content and background should contrast enough so everyone can consume it. We are looking for a contrast ration of at least 4.5:1

How to figure out the contrast ratio

Do form fields have labels that convey their purpose?

If you don't have labels, not everyone will know what a form field is for.

Learn More

Rather than just have a link that says something like Click Here, you should write some text that describes what the link is. To learn more about accessible links, checkout the A11y Project's page on accessible links

Learn More