Accessible Online Content QA Checklist

How to Use This Checklist

This checklist is a tool for website or document quality assurance (QA) roles to verify the accessibility compliance of content within a webpage or document according to the WCAG 2.1 A/AA success criteria before it is published or shared. This checklist can’t guarantee that your content is accessible, but it does address the issues that will improve the experience for everyone accessing your content. 

Refer to the How To: Accessible Website Content for guidance on creating accessible content according to the WCAG success criteria.

Use these tools to evaluate a webpage:

• Wave Evaluation Tool, Chrome Web Store
• Siteimprove Accessibility Checker, Chrome Web Store
• WebAIM Color Contrast Checker, WebAIM
• Link Contrast Checker, WebAIM

Content

• Use plain language and avoid figures of speech, idioms and complicated metaphors. 3.1.5 Reading Level, W3C
• Make sure that buttons and labels are unique and descriptive. The text indicates what will happen if navigated to or activated. 1.3.1 Info And Relationships, W3C
• Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages. Centered-aligned or justified text is difficult to read. 1.4.8 Visual Presentation, W3C
• Check to see that the keyboard focus order of the content matches the visual layout. Can a person navigating with a keyboard or screen reader move around the page in a predictable way? 1.3.2 Meaningful Sequence, W3C

Images

• Make sure that all images have alt text. When an alt attribute isn't present on an image, a screen reader may announce the image's filename and path instead of the image’s content. 1.1.1 Non-Text Content, W3C
• Make sure that images already described in the text of the page and/or decorative images use null alt (empty) text. Null alt text is not read aloud by a screen reader and can be added by using empty quotation marks (“”). 1.1.1 Non-Text Content, W3C
• Provide a text alternative for complex images such as charts, graphs and maps. Use long descriptions where needed. 1.1.1 Non-Text Content, W3C
• For images containing text, including logos, make sure the alt description includes the image's text. 1.1.1 Non-Text Content, W3C

Headings

• Use descriptive heading elements to introduce content and not for decorative purposes or to create extra space. 2.4.6 Headings Or Labels, W3C
• Use only one h1 element per page or view on websites to communicate the high-level purpose of the page. 2.4.6 Headings Or Labels, W3C
• Heading elements should be written in a logical sequence, properly nesting headings in the correct order. 2.4.6 Headings Or Labels, W3C
• Don't skip heading levels. For example, don't jump from a h2 to a h4, skipping an h3 element for a specific visual effect. 2.4.6 Headings Or Labels, W3C

Lists

• Use list elements (ol, ul, and dl elements) for list content to break related content into easily readable chunks. 1.3.1 Info And Relationships, W3C

Links

• Ensure that links are recognizable as links. Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly understood way to communicate the presence of link content. 1.4.1 Use Of Color, W3C
• Make sure links are unique and descriptive. Terms like “click here” and “read more” do not provide any context. 1.3.1 Info And Relationships, W3C

Tables

• Use tables to describe tabular data and for layout or visual effects. 1.3.1 Info And Relationships, W3C

Forms

• Each form field has a label associated with its field. 3.2.2 On Input, W3C

Media (audio, video, animations and image carousels)

• Make sure that audio, including video with audio, does not auto-play. 1.4.2 Audio Control, W3C
• Check to see that all media can be paused by ensuring that the media has a pause function that can be used by pressing the spacebar when it’s in focus. 2.1.1 Keyboard, W3C
• Confirm the presence of captions in videos to ensure people that cannot hear will still understand the content. 1.2.2 Captions, W3C
• Confirm that transcripts are available where audio is used. 1.1.1 Non-Text Content, W3C
• Remove seizure triggers like strobing or flashing animations. 2.3.1 Three Flashes Or Below Threshold, W3C
• Make sure that moving content (moving background images or horizontal scrolling text) can be paused. 2.2.2 Pause, Stop, Hide, W3C

Color Contrast

• Check the contrast (WebAIM) for all normal-sized text. Level AA compliance requires a contrast ratio of 4.5:1. 1.4.3 Contrast, W3C
• Check the contrast (WebAIM) for all large-sized text. Level AA compliance requires a contrast ratio of 3:1. 1.4.3 Contrast, W3C
• Check the contrast (WebAIM) for all icons. Level AA compliance requires a contrast ratio of 4.5:1. 1.4.3 Contrast, W3C
• Check the contrast (WebAIM) for all borders for input elements (text input, radio buttons, checkboxes, etc.). Level AA compliance requires a contrast ratio of 3:1. 1.4.3 Contrast, W3C
• Check text that overlaps images or video. Is the text still legible? 1.4.3 Contrast, W3C

Appearance

• Check your content in specialized browsing modes like high contrast or inverted colors (a11yproject.com). Are the icons, borders, links, form fields, etc. still visible? 1.4.1 Use Of Color, W3C
• Increase text size to 200% to make sure content is still readable and doesn’t overlap or cause horizontal scrolling. 1.4.4 Resize Text, W3C
• Double-check that good proximity between content is maintained. Use the straw test to ensure people who depend on screen zoom software can still easily discover all content. 1.3.3 Sensory Characteristics, W3C
• Make sure color isn't the only way information is conveyed. Links should be visible if all content is grayscale. 1.4.1 Use Of Color, W3C
• Make sure instructions are not visual- or audio-only (e.g., don’t use “on the right”, “the yellow button” or “after the tone”). 1.3.3 Sensory Characteristics, W3C
• Use a simple, straightforward and consistent layout. 1.4.10 Reflow, W3C
• Make sure that all help or support content (e.g., support contacts, accessibility statement, links to help pages, chat widget) can be found on multiple pages and can be found consistently in the same place on all pages throughout the site. 3.2.6 Consistent Help, W3C

Mobile and touch

• Check that the page can be rotated to any orientation. Does the site only allow portrait orientation? 1.3.4 Orientation, W3C
• Remove horizontal scrolling. Requiring someone to scroll horizontally can be difficult for some, irritating for all. 1.4.10 Reflow, W3C