This checklist is based on WCAG Level A and other common best practices. The standards will be updated as our organization continues on our journey toward accessibility.
Text is easy to read
- Use our Color Contrast Grids to measure the readability of text against its background. Lean toward higher contrast (4.5:1 and above) for maximum readability.
- Avoid small font sizes and use sufficient line spacing and space between paragraphs. See the Typography and Spacing standards for details.
- Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS. Too many fonts and font variations are confusing and more difficult to read.
- Use a maximum of 70 to 80 characters per line in paragraphs (about 16 words per line).
More than one sense is used to convey meaning
- Don't use presentation that relies on color alone. As many as 1 in 12 men have some degree of color blindness.
- Don't rely on shape, font variation, placement, or other aspects of text appearance to convey meaning.
- Use more than one sense for instructions, and avoid instructions that rely on sound.
- Write content in text format instead of incorporating text within graphics.
- Provide meaningful alt text for important images. For purely decorative images, still include a blank
- Provide labels to describe the purpose of all controls, such as Search and Submit.
- Provide transcripts of video and audio content and text descriptions of important visuals within videos.
- Include closed captions for videos.
Clear labels and instructions are provided
- Use descriptive and clear page titles to help users identify the content they need.
- Include page language in the markup. Setting a language is important: Screen readers will pronounce words depending on the HTML language assigned to your website.
- Clearly label form fields. Avoid placeholder text within the form field as a replacement for a visual label outside the form field.
- Links must make sense out of context. Use short, descriptive labels. Avoid the use of labels like "Click here."
Clear visual cues are provided
- Links must stand out. In addition to color contrast, make sure it's apparent what is clickable based on context, calls to action, and/or underlining.
- Show a clearly bound target area for form field inputs.
- Include an obvious hover state, highlighting the element the user has control over using mouse navigation.
- Include an obvious focus state, highlighting the element the user is focused on using keyboard navigation.
Logical structure and support for keyboard-only navigation are used
- Structure your website logically, using semantic HTML structure in a meaningful order. Use valid HTML and check with W3C's markup validator.
- Separate navigation menus from the main content and include a skip to content function for screen reader users.
- Use headings to show hierarchy and break up content into sections. Mark those headings with the appropriate level of HTML header tags. Decouple semantic hierarchy and visual appearance with design tokens.
- Use properly structured tables with captions and header rows when organizing data.
- Don't make people hover to find things. This helps keyboard users navigate the page and supports a mobile first approach.
- Unplug your mouse and verify that you can use the Tab key to navigate every part of the website and use every function. Ensure that keyboard focus moves in a logical order.
Timing and animation should be applied with a careful strategy
- Avoid blinking and flickering. No content should flash more than 3 times per second. Stay outside 2 Hz - 55 Hz, the triggering range for most forms of epilepsy.
- Repeat animations more than once to make them more noticeable to users with low peripheral vision.
- Don't autoplay video or audio.
- Avoid automatically moving content that the user may want to read (e.g. auto-rotating carousels).
- When a timed response is required, make it clear to the user. Allow sufficient time and the ability to indicate more time is required.
- Turn off animation and movement when users select the "Reduce Motion" setting in their operating system.