Home / WCAG / The Complete WCAG Checklist
#WCAG #WCAGchecklist #webcompliance
February 28, 2022
5 minutes

The Complete WCAG Checklist

This WCAG 2.1 checklist will ensure that your website meets the latest accessibility standards and guidelines, helping you achieve ADA compliance. 

People with disabilities can easily use web tools and access websites. However, many advanced tools and sites can create accessibility barriers, making them harder to navigate.

Fortunately, removing these barriers is easier than it once was and WCAG is helping with this.

WCAG is a set of comprehensive compliance guidelines designed to create a more accessible online space for all. To make these guidelines even easier to understand, we’ve created a simplified checklist that you can use throughout the ADA compliance process.

What is WCAG?

What is WCAG?

WCAG (WCAG) 2.0 is a series of guidelines that show website owners how to create web content that’s accessible to people with disabilities. This includes a broad range of disabilities such as speech, auditory, visual, learning, neurological, and more. 

These guidelines also ensure online content is accessible to older users with diminishing abilities, improving general usability and understanding.

WCAG Checklist vs the Guidelines

As you start this journey, you might be wondering about the differences between this WCAG checklist and the actual guidelines.

A WCAG checklist interprets and simplifies the guidelines and success criteria. Meanwhile, the full set of WCAG guidelines is more detailed and not technically specific.

It’s beneficial to have a WCAG checklist while working through the guidelines as it can help you keep track of your progress in attaining web accessibility.

The WCAG Checklist

The WCAG Checklist

One of the most important things a business can do is make sure its website, marketing materials, and brand aren’t inaccessible to people with disabilities. An accessibility checklist helps marketers and designers meet the necessary web content accessibility requirements

In addition, guidelines for beginners, intermediate, and advanced levels exist. Let us discuss the compliance checklist in more detail.

Beginner WCAG Checklist

Beginner WCAG Checklist

Level A is for beginners and is only linked to the essential requirements. If these are not followed, assistive technology cannot view or operate a web page.

Non-text content

Alternative text needs to be applied to non-text content serving an identical purpose.

How to apply:

  • Add a name to any non-text input fields or controls
  • Add alternative text to images
  • Add short media text and transcripts to videos and audio files
 Pre-recorded video-only and audio-only 

Video-only or audio-only content should have alternatives.

How to apply:

  • Supply audio tracks for video-only media
  • Supply text transcripts for video-only and audio-only media
Pre-recorded captions

Pre-recorded captions need to be added to videos with audio

How to apply:

  • Identify each speaker
  • Add captions to videos with sounds
  • Provide captions for sound effects (non-speech information)
  • Provide captions for all spoken words
Pre-recorded media alternatives or audio descriptions

Supply text transcripts or audio descriptions for videos with sounds.

How to apply:

  • Provide a video version for audio descriptions
  • Provide the video’s whole text transcript
Relationships and information

Content structure and relationships should be obvious.

How to apply:

  • Use tables and lists where necessary
  • Organize content using sections and subheadings
  • Use HTML header tags to mark headings
  • Use alternative text and clear labels on forms
Meaningful sequences

Content should be presented in a logical order.

How to apply:

  • Use paragraphs in sequence
  • Present content in a logical and easy-to-understand order
  • Nest headings according to importance
  • Separate content from the navigation menu
Sensory characteristics

Instructions should not fully rely on sensory characteristics.

How to apply:

  • Avoid solely auditory instructions
  • Use text labels and sensory characteristics
  • Don’t include instructions that only rely on sensory characteristics
Color usage

Do not let presentation rely on color alone.

How to apply:

  • Create non-color reliant instructions
  • Provide non-color reliant charts and graphs 
Audio control

Ensure audio does not play automatically.

How to apply:

  • Do not insert audio files that play automatically
Keyboard

 Functionalities must be keyboard-accessible without specific timings.

How to apply:

  • Ensure website elements are accessible when using a keyboard alone
  • Do not include keystrokes like holding down “Alt” for a few seconds to finish form submissions
No keyboard traps

Avoiding keyboard traps helps users easily navigate all content with a keyboard.

How to apply:

  • A website should be easily navigable using arrow and tab keys
Character key shortcuts

All users must be able to remap or turn off one-key character shortcuts.

How to apply:

  • Provide options to turn off keyboard shortcuts
  • Allow users to remap shortcuts to stick to non-character keys
  • Ensure shortcuts work when an element is focused
Adjustable timing

Users should be allowed to turn off controls and extend or adjust time limits.

How to apply:

  • Notify users and provide options for time adjustment
  • Give user option to turn off time limits before they start
  • Give user time extension options before 20-second expiration
Stop, pause, and hide

Allows users to stop, hide, and pause auto-updating and moving content.

 How to apply:

  • Ensure all scrolling, moving, and blinking content can be paused, hidden, or stopped
  • Ensure all auto-updating content can be paused, hidden, managed, or stopped
Below threshold of three flashes

All content flashes must be less than 3 times per second.

How to apply:

  • Don’t include something that will flash more than 3 times every second
Bypass blocks

This allows users to skip repeated content blocks.

How to apply:

  • Add a “skip to content” option to every web page to send users to the content they’re interested in
  • Include a link at the beginning of the page to each content area
  • Include links at the beginning of repeated content to skip it
Page titles

Users must engage with clear and understandable page titles.

How to apply:

  • Ensure every website page has a descriptive and unique meta title
Page order

Components are arranged in a logical sequence.

How to apply:

  • Ensure web page order is logical and meaningful.
In-text link purpose

Every link should have a clear purpose.

How to apply:

  • Use the context of surrounding text to give a link purpose
Visible Focus

Keyboard focus should be visible when accessed.

How to apply:

  • Provide a visible indication when elements have keyboard focus 
Page break navigation  

Users should be able to navigate using page break locators.

  • Add <nav role=”doc-pagelist”> to the page navigation in the HTML
  • Use <span id=”pg1”> to add designations
Pointer gestures  

A user can operate path-based and multipoint gestures using a single pointer.

How to apply:

  • Maps should be pinchable, zoomable, and controllable with one tap or click
Pointer cancellation 

Pointer cancellations should not be completed with a single pointer click.

How to apply:

  • Stop actions when pointer can be released beyond the target’s boundary
  • Ensure actions are completed after the pointer is clicked and released around the target boundary
Name label

Components should have a text label, and the component name should contain visible text.

How to apply:

  • Avoid actions where pointer can be released outside the target boundary
  • Ensure matching component programmatic names and text labels
Motion actuation

Motions should operate motion actuation functions, and interface and motion responses should have the ability to be turned off.

How to apply:

  • Provide buttons with gesture and motion controls
  • Ensures movement-based controls can be turned on and off
Page language 

Every web page must be assigned a default language.

How to apply:

  • Choose the default language using the relevant HTML attribute
On focus 

Elements should stay the same after enhancing focus.

How to apply:

  • Do not include visual and behavioral modifications
On input 

An element should stay the same after an input.

How to apply:

  • Filled forms must not auto-submit 
  • The focus must stay on the current field even after being filled
Error identification

Errors should be easily identifiable.

How to apply:

  • Identify and provide instructions to users on how mistakes are detected
  • Include explanations for error solutions
Instructions or labels 

Provide instructions for labeled elements.

How to apply:

  • Add a label to all input fields
  • Give an example of fields that need a format
  • Explain icons in the form
Parsing

Your website must be error-free.

How to apply:

  • HTML must have correct start and end tags
  • HTML elements must be nested
  • Use special IDs 
Value, role, and name

All elements must be built for accessibility.

How to apply:

  • Use elements and plugins with an HTML markup if provided by a third party
  • Use HTML specifications for all website scripts

Intermediate WCAG Checklist

Level AA is the intermediate accessibility level and the one that all website owners should aim to achieve. 

Intermediate WCAG Checklist

Live captions  

Include live video captions.

Pre-recorded audio descriptions 

Add pre-recorded videos and audio descriptions.

How to apply:

  • Provide audio descriptions as alternative versions
Orientation

Your website must be able to adjust to landscape and portrait orientations.

How to apply:

  • Content must retain meaning in all positions.
Identify input purpose

Input fields must be programmatically identifiable.

How to apply:

  • Specify the intention of input fields using “input type=type.”
Minimum contrast

The contrast ratio between backgrounds and texts must be at least 4.5:1.

How to apply:

  • Use a dark text and light background 
  • Use light text and a dark background 
Text resize

Texts should be resizable to 200% without losing content or function.

Text images

Don’t use text images.

Reflow

Content should retain function and meaning without scrolling in different dimensions.

How to apply:

  • Ensure vertical content doesn’t need a horizontal scroll at a 320 CSS pixel width
  • Ensure horizontal content doesn’t need a vertical scroll at a 256 CSS pixel height 
Non-text contrast

The contrast between adjacent colors, user interface components, and graphics should be at least 3:1.

How to apply:

  • Ensure graphics have at least a 3:1 contrast to the background color 
Text spacing

Function and content should retain meaning when users change text spacing.

How to apply:

  • Paragraph spacing should be at least two times the font size
Content on hover or focus

When hover or focus triggers content to appear, it should be persistent, dismissible, and hoverable.

How to apply:

  • Content should be hoverable by the mouse pointer, so it’s moveable
Multiple ways

Provides different ways to find website pages.

How to apply:

  • Provide a consistent and clear main menu
  • Add a search function to all pages
Headings and labels

Labels and headings should describe the purpose or topic.

How to apply:

  • Provide label descriptions for input fields and controls 
Focus appearance (Minimum)

Focus indicators should be easily distinguishable when active.

How to apply:

  • The focus indicator should have a contrast ratio of at least 3:1 against surrounding colors
Dragging movements

Dragging movement functionalities must be achieved with a single pointer without drags.

 Minimum target size 

The pointer input’s target size should be at least 24 by 24 CSS pixels.

Part languages

Webpage sections should have a default language assigned to them.

How to apply:

  • Choose the default language for every web page section using HTML “lang” attribute
Consistent navigation

Menus and standard controls should be consistently positioned.

How to apply:

  • Place the navigation menus in the same location on every page 
Consistent identification

Components must be identifiable with the same function.

How to apply:

  • Elements with the same functions should have consistent text alternatives
Error suggestions

Suggest solutions when users cause errors.

How to apply:

  • If users commit errors, provide a link list so that they can jump back to modify their inputs.
Error prevention (data, financial, and legal)

Decrease input error risks for sensitive data.

How to apply:

  • Test responses, financial transactions, changes, and legal commitments to user-controlled data should be reversible

Advanced WCAG Checklist

Level AAA is the most advanced level and includes specialized support. It is usually reserved for website parts and applications serving specific audiences.

Advanced WCAG Checklist

 

Pre-recorded sign language

Sign language translations should be provided for pre-recorded videos.

Extended audio description (Pre-recorded)

Extended audio descriptions should be available for pre-recorded videos.

Pre-recorded media alternatives 

Text alternatives are provided for pre-recorded videos.

How to apply:

  • Full-text transcripts should be provided for links and videos
Live audio-only

There should be alternatives for live audio.

How to apply:

  • Include script text if the live broadcasts are from prepared scripts
Identify the purpose

All components’ purposes must be programmatically determinable.

How to apply:

  • Utilize ARIA landmarks to identify every page’s region
Contrast (Enhanced)

Contrast ratios between background and texts should be at least 7:1.

Low or no background sound

Audio-only content should be clear without any or minimal background noise.

How to apply:

  • Ensure pre-recorded audios don’t contain background noises
Visual presentation

This offers users a range of presentation options for text blocks.

Text images

Text images must not be used.

Keyboard (No Exception)

All functionalities must be accessible by keyboard without exceptions.

No timing

There should be no time limits on your website.

Interruptions

Users can suppress or postpone unnecessary interruptions.

How to apply:

  • Refrain from using automatic redirects or refresh functions based on time delays
Reauthentication

All users should be able to save data when re-authenticating.

Timeouts

Users are warned about timeouts that may cause data loss.

How to apply:

  • Users should be aware of the duration of timeout periods at the beginning of each task
Three flashes

There should be no content that flashes more than 3 times per second.

Animation from interactions

Users have the option to disable motion animation.

Location

This ensures users know where they are on the website.

How to apply:

  • Use breadcrumbs to aid with navigation.
Link purpose

All link purposes must be clear from the text.

Section headings

Content must be organized according to section headings.

Enhanced focus appearance

A focus indicator should be distinguishable when active.

How to apply:

  • The element within focus should not be hidden
Target Size

The pointer’s target size should be 44 x 44 CSS pixels.

Concurrent input mechanisms

There should be no restrictions on input modes.

Unknown words

Unusual words or phrases should be defined.

Abbreviations

Abbreviations must be defined. 

How to apply:

  • Use the “abbr” HTML tag
Reading levels

Users with 9 years of schooling should see your content as readable.

Pronunciation

Words with ambiguous meanings and pronunciations should have a definition.

How to apply:

  • Words must be linked to a phonetic guide
Request changes

The elements should not change without requests.

Help

 There should be detailed instructions when help is needed.

Error prevention

The risk for all input errors must be kept to a minimum.

Wrapping up

Following WCAG 2.0 guidelines may be overwhelming at first, but this checklist can make the process a little easier.

The best way to start your ADA compliance journey is by auditing your website to detect accessibility issues. You can do this on Accessibility Checker.

Found this blog insightful? Please check out our other relevant guides here:

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
#

Your feedback has been sent. Thank you :)