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
- Cameron Cundiff, "How-to: Use skip navigation links", The A11Y Project, May 11, 2013.
- "CSS in Action: Invisible Content Just for Screen Reader Users", WebAIM, December 11, 2014
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
- "Functionality is Available from the Keyboard", W3C Accessibility Principles
- "Keyboard and Visual Focus", W3C Test & Evaluate: Easy Checks
- Caitlin Geier, "Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators", Deque Blog, June 29, 2016.
- "Outline", MDN Web Docs, August 13, 2019.
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
- "Using Tabindex", Google Web Fundamentals
- W3C Accessibility Principles, "Functionality is Available from the Keyboard"
- W3C Test & Evaluate: Easy Checks, "Keyboard and Visual Focus"
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
- "Using Tabindex", Google Web Fundamentals
- W3C Accessibility Principles, "Functionality is Available from the Keyboard"
- W3C Test & Evaluate: Easy Checks, "Keyboard and Visual Focus"
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
- "Text Alternatives for Non-text Content", W3C Accessibility Principles
- Susan Robertson, "Quick tip: Using alt text properly", A11Y Project, November 24, 2018
- Scott Vinkle, "Considerations When Writing Alt Text", Shopify UX, June 18, 2018
Are there any animations that are outside the user’s control?
Users should be able to request reduced motion and pause videos.
Learn More
- "What’s New in WCAG 2.1: 2.3.3 Animation from Interactions (AAA)", W3C, Web Content Accessibility Guidelines
- Val Head, "Designing Safer Web Animation For Motion Sensitivity", A List Apart, September, 8, 2015.
- Eric Bailey, "An Introduction to the Reduced Motion Media Query", CSS Tricks, February 10, 2017.
- Anna Monus, "A Guide to Creating Accessible Animations," Envato Tuts+, December 3, 2018.
- Gray Ghost Visuals, "A Primer to Vestibular Disorders," The A11Y Project, May 15, 2013.
- W3C Web Accessibility Initiative, "Understanding Success Criterion 2.3.3: Animation from Interactions", Understanding WCAG 2.1, 2018.
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
- W3C, "G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them", Techniques and Failures for Web Content Accessibility Guidelines, 2016.
- Princeton University Digital Accessibility, "Color Alone"
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
- "Form Labels," BBC Future Media Standards and Guidelines
- "Forms, Labels, and Errors." W3C Test & Evaluate: Easy Checks
Do links convey their purpose in their text?
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