Quick links

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?
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
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
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.
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
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 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
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
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
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
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
Do not let presentation rely on color alone.
How to apply:
- Create non-color reliant instructions
- Provide non-color reliant charts and graphs
Ensure audio does not play automatically.
How to apply:
- Do not insert audio files that play automatically
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
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
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
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
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
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
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
Users must engage with clear and understandable page titles.
How to apply:
- Ensure every website page has a descriptive and unique meta title
Components are arranged in a logical sequence.
How to apply:
- Ensure web page order is logical and meaningful.
Every link should have a clear purpose.
How to apply:
- Use the context of surrounding text to give a link purpose
Keyboard focus should be visible when accessed.
How to apply:
- Provide a visible indication when elements have keyboard focus
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
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 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
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
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
Every web page must be assigned a default language.
How to apply:
- Choose the default language using the relevant HTML attribute
Elements should stay the same after enhancing focus.
How to apply:
- Do not include visual and behavioral modifications
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
Errors should be easily identifiable.
How to apply:
- Identify and provide instructions to users on how mistakes are detected
- Include explanations for error solutions
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
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
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
Include live video captions.
Add pre-recorded videos and audio descriptions.
How to apply:
- Provide audio descriptions as alternative versions
Your website must be able to adjust to landscape and portrait orientations.
How to apply:
- Content must retain meaning in all positions.
Input fields must be programmatically identifiable.
How to apply:
- Specify the intention of input fields using “input type=type.”
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
Texts should be resizable to 200% without losing content or function.
Don’t use text images.
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
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
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
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
Provides different ways to find website pages.
How to apply:
- Provide a consistent and clear main menu
- Add a search function to all pages
Labels and headings should describe the purpose or topic.
How to apply:
- Provide label descriptions for input fields and controls
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 movement functionalities must be achieved with a single pointer without drags.
The pointer input’s target size should be at least 24 by 24 CSS pixels.
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
Menus and standard controls should be consistently positioned.
How to apply:
- Place the navigation menus in the same location on every page
Components must be identifiable with the same function.
How to apply:
- Elements with the same functions should have consistent text alternatives
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.
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
Sign language translations should be provided for pre-recorded videos.
Extended audio descriptions should be available for pre-recorded videos.
Text alternatives are provided for pre-recorded videos.
How to apply:
- Full-text transcripts should be provided for links and videos
There should be alternatives for live audio.
How to apply:
- Include script text if the live broadcasts are from prepared scripts
All components’ purposes must be programmatically determinable.
How to apply:
- Utilize ARIA landmarks to identify every page’s region
Contrast ratios between background and texts should be at least 7:1.
Audio-only content should be clear without any or minimal background noise.
How to apply:
- Ensure pre-recorded audios don’t contain background noises
This offers users a range of presentation options for text blocks.
Text images must not be used.
All functionalities must be accessible by keyboard without exceptions.
There should be no time limits on your website.
Users can suppress or postpone unnecessary interruptions.
How to apply:
- Refrain from using automatic redirects or refresh functions based on time delays
All users should be able to save data when re-authenticating.
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
There should be no content that flashes more than 3 times per second.
Users have the option to disable motion animation.
This ensures users know where they are on the website.
How to apply:
- Use breadcrumbs to aid with navigation.
All link purposes must be clear from the text.
Content must be organized according to section headings.
A focus indicator should be distinguishable when active.
How to apply:
- The element within focus should not be hidden
The pointer’s target size should be 44 x 44 CSS pixels.
There should be no restrictions on input modes.
Unusual words or phrases should be defined.
Abbreviations must be defined.
How to apply:
- Use the “abbr” HTML tag
Users with 9 years of schooling should see your content as readable.
Words with ambiguous meanings and pronunciations should have a definition.
How to apply:
- Words must be linked to a phonetic guide
The elements should not change without requests.
There should be detailed instructions when help is needed.
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: