This checklist serves as a list of criteria for both designers and QA regarding making an accessibly-designed page. When QA reviews a design (such as one in Figma) for accessibility, these criteria are what they are thinking about while inspecting components.
This list of criteria is largely focused on the presence of important components, or strictly visual checks. For instance, a form is inspected for proper labels, but the programmatic association between a field and its label is more an implementation and development matter.
Visuals and Layout
Color & Contrast
For information about contrast ratios, see this resource.
For calculating color contrast between two colors, you can use this web resource or try the Colour Contrast Checker program.
- [ ] The following components have a contrast ratio of at least 3:1:
- [ ] Text (and images of) that are at least 24px size normal weight or 19px bold weight.
- [ ] Interactive UI components.
- [ ] Custom states for elements, such as hover, active, or focus.
- [ ] The following components have a contrast ratio of at least 4.5:1:
- [ ] Text (and images of) under 24px normal weight or 19px bold weight.
- [ ] Links should always be easily identifiable through non-color means, including both default and hover states.
- [ ] Information is conveyed by more means than color alone.
Layout & Navigation
- [ ] Each website should include at least two of the following:
- [ ] a list of related pages
- [ ] table of contents
- [ ] site map
- [ ] search
- [ ] list of all pages.
- [ ] The user's location is displayed either by breadcrumbs, a site map, or indication in a navigation menu.
- [ ] When a navigation menu is presented on multiple pages, the links should appear in the same order on each page.
- [ ] A "skip to main content" button is available on every page.
- [ ] There is a highly visible keyboard focus style provided.
- [ ] Images of text are avoided, except in cases such as logos.
- [ ] Components with the same functionality across multiple pages have consistent labeling on each page.
- [ ] Components repeated across pages appear in the same relative order where they appear.