Web Accessibility Guidelines - WCAG 2 Checklist

Guideline

Summary

1.2.4 – Captions (Live)

For users with a hearing disability captions help them consume your video content. By adding captions to live videos, everyone can use your website.

1.2.5 – Audio Description (Pre-recorded)

Consider adding an audio description to your pre-recorded videos so that users with a visual or a cognitive disability can also have access to the information in the content.

1.3.4 – Orientation

Your website should adapt to either portrait or landscape views, depending on the users’ preferences and requirements.

1.3.5 – Identify Input Purpose

For users with cognitive disabilities, programmatically determinable* input fields make it easier to process the information. For example, contact forms using icons for the individuals’ name or home address helps them visually identify the input purpose. 

1.4.3 – Contrast (Minimum)

A good contrast between your website’s text and background color will help any user but especially those with visual disabilities. The W3C’s recommendation is to have a contrast ratio between text and background of at least 4.5:1. The USA's GSA website on accessibility recommends that for color and contrast you can use a color contrast tool.

1.4.4 – Resize Text

Oftentimes users with visual disabilities need to enlarge the text in order to be able to read it. Your website should allow for a resize up to 200% without loss of content or function.

1.4.5 – Images of Text

You should never use images of text. Users with visual disabilities most often rely on the possibility to change the font size, color, alignment, or spacing when navigating a web page. Images of text remove this option for them.

1.4.10 – Reflow

When a user with a visual disability resizes the content on your website they should not need to scroll horizontally, only vertically. Reflow means your website has to use responsive web design to help the content fit the users’ viewpoint.

1.4.11 – Non-Text Contrast

A good contrast between your website’s components and surrounding color will help any user but especially those with visual disabilities. The W3C’s recommendation is to have a contrast ratio between components, graphics and surrounding colors of at least 3:1.

1.4.12 – Text Spacing

Web content accessibility means that your website users should be able to adjust text spacing in order to make it easier to read. If your website is written in good HTML or CSS this should be perfectly possible so that content and function retain their meaning even when users change elements of text spacing.

1.4.13 – Content on Hover or Focus

When a user hovers with their mouse over a piece of content or engages with content via keyboard focus, and this triggers additional content, this may cause issues to users with cognitive or visual disabilities because it may surprise them or even prevent them from completing a task on your website. To avoid this, for the purpose of content accessibility, the content has to be dismissible, hoverable, and persistent.

2.4.5 – Multiple Ways

Your users should have at least two ways to find pages on your website. For example, users with visual disabilities may find a search function helpful, while those with cognitive disabilities will appreciate a sitemap.

2.4.6 – Headings and Labels

For users with cognitive disabilities, having descriptive headings helps them predict and understand what each section of your web page is about. Additionally, using labels that clearly describe the form input controls helps them successfully complete the form.

2.4.11 – Focus Appearance (Minimum)

When focus indicators are used for page navigation, these should be clearly visible and distinguishable. 

2.5.7 Dragging Movements

Users with a mobility impairment might not be able to perform dragging actions via mouse or touch, instead relying on accessibility input mechanisms. Your website needs to provide them with an alternative for this, for example, a map allows both dragging the view and up/down/left/right navigation controls.

2.5.8 Target Size (Minimum)

Users with physical disabilities might find it difficult or impossible to click on small buttons that are too close together. To make it easier for them, the W3C recommends that the size of the target for pointer inputs should be at least 24 by 24 CSS pixels.

3.1.2 – Language of Parts

Each passage of text on your website should be correctly identified as belonging to some language or another so that phrases, passages, or even words written in multiple languages can be correctly rendered by assistive technologies or user agents such as screen readers.

3.2.3 – Consistent Navigation

Your website should have a consistent design throughout so that, for example, users with visual disabilities can find the same elements in the same place on every page. For that purpose, you should be consistent about the position of the menus and standard controls (i.e. Search box).

3.2.4 – Consistent Identification

For users with disabilities familiarity is key. Your website should be consistent in terms of icons used for actions such as ‘Print page’ and elements that have the same functions should be labeled and named consistently.

3.2.7 – Visible Controls

Your website has to give users a way to identify controls. Users with cognitive or visual disability and those with motor limitations would find it difficult to navigate a website where components are hidden until hovered over or displayed only on focus. The same way, users that navigate through speech cannot use a component if they cannot speak its name. 

3.3.3 – Error Suggestion

Where possible, user errors should receive correction suggestions to help, for example, users with learning disabilities, to fill out a form successfully. Examples include providing the acceptable values for the date format when this is input wrong by the user. 

3.3.4- Error Prevention (Legal, Financial, Data)

Users with a disability that affects their reading, writing, or motor ability are likely to type words incorrectly or press some keys in error. Where there are serious legal, financial, or data privacy implications users should have a way to correct any such mistakes. You should allow for a way they can check, confirm and navigate back to previous pages when their actions may cause important commitments.

3.3.8 Accessible Authentication (Minimum)

Users with cognitive disabilities will find it impossible to remember a username and/or password when logging in, which is commonly referred to as a cognitive function test. Instead of authenticating users through memory, transcription or cognitive tests, offer alternatives, such as enabling the ‘Paste’ function, password autofill, or an MFA.

4.1.3 – Status Messages

For blind users or those with low vision that use assistive technologies, your website needs to make them aware of important changes in content that are not given focus, but in a way that doesn’t interrupt their work. The way to do this is via status messages, and one example offered by the W3C is as follows: After a user enters incorrect text in an input called Postal Code, a message appears above the input reading "Invalid entry". The screen reader announces, "Invalid entry" or "Postal code, invalid entry".