Accessibility Checklist

 

As a whole, the content in this site is largely derived from the Web Content Accessibility Guidelines. In this checklist format, we've tried to group items together by the types of content you may have on your site. Following this checklist does not guarantee that you will have a fully accessible site, but it should give you a starting point of things to consider for your site.

While this site is largely focused on websites, many of the concepts are relevant for other types of electronic communications you produce, such as social media posts or email newsletters.

Our page on remediation can help you test and identify possible issues on your page.

Text

• Headings outline the structure and content of the site (1.3.1 Info and Relationships (A), 2.4.6 Headings and Labels (AA), and 2.4.10 Section Headings (AAA)).
• Text must have sufficient contrast with its background (1.4.3 Contrast (Minimum) (AA) and 1.4.6 Contrast (Enhanced) (AAA)). The WebAIM Color Contrast Checker is a great resource for checking color contrasts.
• Text can be resized by up to 200% without loss of content or functionality. This can be most easily achieved by using actual text rather than images of text and using "em" or "rem" units rather than "px" for font sizes (1.4.4 Resize Text (AA)).
• Images of text should not be used unless they can be customized by the user or the specific presentation of the text is essential (1.4.5 Images of Text (AA) and 1.4.9 Images of Text (No Exception) (AAA)). A logo image that contains text is fine as long as the image contains alt text. An image used to stylize a heading in a specific way should be replaced with actual text and the relevant CSS.
• Text on a page must have sufficient spacing (1.4.12 Text Spacing (AA) and 1.4.8 Visual Presentation (AAA)).
• Link text describes the purpose and target of the link (2.4.4 Link Purpose (In Context (A) and 2.4.9 Link Purpose Link Only (AAA)).
• The page defines the language used on the page (3.1.1 Language of Page (A)), with other languages on the page denoted where they appear (3.1.2 Language of Parts (AA).
• Definitions are given for unusual words or abbreviations (3.1.3 Unusual Words (AAA) and 3.1.4 Abbreviations (AAA)).
• Simple language is used on the page, or a version with simple language is available (3.1.5 Reading Level (AAA)).
• Pronunciations are given for words with multiple meanings and pronunciations (3.1.6 Pronunciation (AAA)).

Images

• All images are accompanied by descriptive text near the image on the page or alt text attributes that convey all meaning within the image (1.1.1 Non-text Content (A)).
• Text must have sufficient contrast with its background (1.4.3 Contrast (Minimum) (AA) and 1.4.6 Contrast (Enhanced) (AAA)). The WebAIM Color Contrast Checker is a great resource for checking color contrasts.
• Images of text should not be used unless they can be customized by the user or the specific presentation of the text is essential (1.4.5 Images of Text (AA) and 1.4.9 Images of Text (No Exception) (AAA)). A logo image that contains text is fine as long as the image contains alt text. An image used to stylize a heading in a specific way should be replaced with actual text and the relevant CSS.

Audio and Video

The Described and Captioned Media Program's Captioning Key is a great reference on how to create effective captions. Auto-generated captions, like those produce from Zoom, YouTube, or Teams, can be a great starting point but are not accurate enough to be used without verification.

• Prerecorded and live media have captions that accurately reflect their visual and auditory content (1.2.2 Captions (Prerecorded) (A) and 1.2.4 Captions (Live) (AA)).
• Dialogue within prerecorded video describes important visual elements. The video can also have a separate audio track taht describes these visual elements between gaps in dialogue. The video's transcript contains these descriptions (1.2.3 Audio Description or Media Alternative (Prerecorded) (A), 1.2.5 Audio Description (Prerecorded) (AA), and 1.2.8 Media Alternative (Prerecorded) (AAA)).
• A page with auto-playing audio must have controls to pause, stop, or mute this audio (1.4.2 Audio Control (A))
• Users can control, pause, stop, or hide any video that plays automatically (2.2.2 Pause, Stop, Hide (A)).
• Sign language interpretation is included with prerecorded media (1.2.6 Sign Language (Prerecorded) (AAA)
• Eliminate or reduce background audio in prerecorded media (1.4.7 Low or No Background Audio (AAA))
• No content on the site should flash more than 3 times in a 1-second period (2.3.1 Three Flashes or Below Threshold (A) and 2.3.2 Three Flashes (AAA)).

Color

• Color used to convey information must be accompanied by text, shapes, or patterns to further convey this meaning (1.4.1 Use of Color (A)).
• Text must have sufficient contrast with its background (1.4.3 Contrast (Minimum) (AA) and 1.4.6 Contrast (Enhanced) (AAA)). The WebAIM Color Contrast Checker is a great resource for checking color contrasts.
• All uses of color, such as in boundaries of input fields or focus states as well as when two colors are adjacent, must meet a 3:1 contrast ratio with its background or related colors (1.4.11 Non-text Contrast (AA)).

Forms

• A form with required fields has instructional text at the top of the form stating how required fields are indicated on the form. Required fields are denoted by something other than a change of color (1.3.1 Info and Relationships (A)).
• Form fields use the appropriate type and autocomplete attributes to define their purpose and expected data (1.3.5 Identify Input Purpose (AA)).
• All uses of color, such as in boundaries of input fields or focus states as well as when two colors are adjacent, must meet a 3:1 contrast ratio with its background or related colors (1.4.11 Non-text Contrast (AA)).
• If a user becomes logged out, they can still continue their work after logging back in (2.2.5 Re-authenticating (AAA)). An application tells users if a period of inactivity will cause a loss of data (2.2.6 Timeouts (AAA)).
• Form input labels describe their expected values (2.4.6 Headings and Labels (AA), 2.5.3 Label in Name (A), 3.3.2 Labels or Instructions (A), and 4.1.2 Name, Role, Value (A)).
• A form should describe how interacting with its elements will cause changes to the page or a user's focus (3.2.2 On Input (A)).
• Provide help and instruction to minimize errors on a form (3.3.5 Help (AAA)). Notify users if they have completed a form field incorrectly (3.3.1 Error Identification (A)). When errors are detected, provide guidance on how to correct the errors (3.3.3 Error Suggestion (AA)).
• Users can verify, confirm, or cancel a form submission, especially those that would lead to legal or financial obligations (3.3.4 Error Prevention (Legal, Financial, Data) (AA) and 3.3.6 Error Prevention (All) (AAA)).
• A form shouldn't ask for the same information twice (3.3.7 Redundant Entry (A)).
• Login processes should be simple and not rely on puzzles or other cognitive function tests (3.3.8 Accessible Authentication (Minimum) (AA) and Accessible Authentication (Enhanced) (AAA)).

Interactive Elements

• Descriptions of interactive elements identify it by more than the element's shape, color, size, location, or other similar properties (1.3.3 Sensory Characteristics (A)).
• Content revealed by hovering or focusing on an element should be dismissable, hoverable, and persistent (1.4.13 Content on Hover or Focus (AA)).
• An application with a time limit should allow a user to turn off, adjust, or extend the time limit (2.2.1 Timing Adjustable (A)). Ideally, timing is not an essential part of any element or activity (2.2.3 No Timing (AAA)).
• Users can control, pause, stop, or hide any content that updates, moves, blinks, or scrolls automatically (2.2.2 Pause, Stop, Hide (A)).
• Users can choose to disable system alerts unless there is an emergency (2.2.4 Interruptions (AAA)).
• No content on the site should flash more than 3 times in a 1-second period (2.3.1 Three Flashes or Below Threshold (A) and 2.3.2 Three Flashes (AAA)).
• Animations that would be triggered by interactions on the site can be disabled (2.3.3 Animation from Interactions (AAA)).
• Interactions on a site can be cancelled easily (2.5.2 Pointer Cancellation (A)).
• Interactive elements have appropriate labels (2.5.3 Label in Name (A) and 4.1.2 Name, Role, Value (A)).
• Interactive elements are sufficiently large (2.5.8 Target Size (Minimum) (AA) and 2.5.5 Target Size (Enhanced) (AAA)).
• Interactive elements can be controlled by multiple different user input devices (2.5.6 Concurrent Input Mechanisms (AAA)).
• Focusing on an element of the page should not change that page (3.2.1 On Focus (A)).
• Components with the same functionality are labeled the same across all pages (3.2.4 Consistent Identification (AA)).
• Only a user can initiate change of content on the website (3.2.5 Change on Request (AAA)
• Users are aware of content changes on a page (4.1.3 Status Messages (AA)).

User Inputs

• All tasks and operations on a site can be done with just a keyboard (2.1.1 Keyboard (A) and 2.1.3 Keyboard (No Exception) (AAA)).
• If you can give an element focus with the keyboard, you should be able to remove that focus as well (2.1.2 No Keyboard Trap (A)).
• If an application has single-key keyboard shortcuts, a user should be able to turn off, remap, or only use those shortcuts when certain elements have focus (2.1.4 Character Key Shortcuts (A)).
• Elements of a page receive focus in a sensible order (2.4.3 Focus Order (A)).
• Users know which element has keyboard focus (2.4.7 Focus Visible (AA), 2.4.11 Focus Not Obscured (Minimum) (AA), 2.4.12 Focus Not Obscured (Enhanced) (AAA), and 2.4.13 Focus Appearance (AAA))
• Multi-touch gestures can be completed with a single touch action (2.5.1 Pointer Gestures (A)).
• A user's motion or ability to drag elements are not required to control the site (2.5.4 Motion Actuation (A) and 2.5.7 Dragging Movements (AA)).

Layout and Structure

• Semantic HTML is used to define regions and groups of content on the page (1.3.1 Info and Relationships (A)).
• The content on a web page is structured such that the meaningful order of the content does not change. As an example, a page with two articles should not have paragraphs of those articles interwoven visually or when read by a screen reader (1.3.2 Meaningful Sequence (A)).
• A device's orientation has no effect on the content or functionality of the page (1.3.4 Orientation (AA)).
• A page should not scroll both horizontally and vertically (1.4.10 Reflow (AA)).
• Users should be able to skip over content that is repeated on multiple pages (2.4.1 Bypass Blocks (A)).
• Web pages have a meaningful title (2.4.2 Page Titled (A)).
• There is more than one way to get to any given web page (2.4.5 Multiple Ways (AA)).
• Users can tell what part of a site they are on (2.4.8 Location (AAA)).
• Navigational and help elements always appear in the same place (3.2.3 Consistent Navigation (AA) and 3.2.6 Help (A)).

Finding Issues

1. Confirm all colors meet sufficient contrast ratios. The WebAIM Color Contrast Checker is a great resource for checking color contrasts.
2. Put your mouse aside and make sure you can fully interact with your site with just a keyboard.
3. Listen to your page with one or more screen reading tools.
4. Check that the content of photo, audio, and video is present in textual formats through descriptions, captions, and transcripts.
5. Do all of the checks above with different devices, browsers, screen sizes, and screen orientations.