The Complete WCAG Checklist

This WCAG 2.2  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.2 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 is what all major global disability acts are based on in terms of web accessibility. These guidelines are designed to remove barriers that are often present online, ensuring a more inclusive experience for all. Businesses that comply with these guidelines can not only increase sales and brand loyalty, but avoid costly penalties and lawsuits too.

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 (1). 

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

Beginner WCAG Checklist (Level A)

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. These are the minimum requirements that every website should meet when starting their web accessibility journey.

• Non-text content. Alternative text needs to be applied to non-text content serving an identical purpose.
• Pre-recorded video-only and audio-only. Video-only or audio-only content should have alternatives such audio tracks or text transcripts.
• Pre-recorded captions. Pre-recorded captions need to be added to videos with audio. Be sure to identify speakers and provide captions for any non-speech information.
• Pre-recorded media alternatives or audio descriptions. Supply text transcripts or audio descriptions for videos with sounds. You should also provide a video version for audio descriptions and the entire video’s text transcript.
• Relationships and information. Content structure and relationships should be obvious. Use tables and lists where necessary, organize content using sections and subheadings, use HTML header tags, and alternative text and clear labels on forms.
• Meaningful sequences. Content should be presented in a logical order. Paragraphs should be used in sequence and content should be presented in a logical and easy-to-understand order.
• Sensory characteristics. Instructions should not fully rely on sensory characteristics. Avoid solely auditory instructions, use text labels and sensory characteristics, and don’t include instructions that only rely on sensory characteristics
• Color usage. Do not let presentation rely on color alone. Create non-color reliant instructions and provide non-color reliant charts and graphs
• Audio control. Ensure audio does not play automatically. Do not insert audio files that play automatically
• Keyboard. Functionalities must be keyboard-accessible without specific timings. 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. 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. 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. Notify users and provide options for time adjustment.
• Stop, pause, and hide. Allows users to stop, hide, and pause auto-updating and moving content. Ensure all scrolling, moving, and blinking content can be paused, hidden, or stopped and 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. Don’t include something that will flash more than 3 times every second
• Bypass blocks. This allows users to skip repeated content blocks. 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 and links at the beginning of repeated content to skip it
• Page titles. Users must engage with clear and understandable page titles. Ensure every website page has a descriptive and unique meta title
• Page order. Components are arranged in a logical sequence.
• In-text link purpose. Every link should have a clear purpose. Use the context of surrounding text to give a link purpose
• Visible Focus. Keyboard focus should be visible when accessed. 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 and use <span id=”pg1”> to add designations.
• Pointer gestures. A user should be able to operate path-based and multipoint gestures using a single pointer. 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. Stop actions when pointer can be released beyond the target’s boundary and 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.
• Motion actuation. Motions should operate motion actuation functions, and interface and motion responses should have the ability to be turned off. Provide buttons with gesture and motion controls and ensure movement-based controls can be turned on and off
• Page language. Every web page must be assigned a default language. Choose the default language using the relevant HTML attribute.
• On focus. Elements should stay the same after enhancing focus. Do not include visual and behavioral modifications.
• On input. An element should stay the same after an input. Filled forms must not auto-submit and the focus must stay on the current field even after being filled
• Error identification. Errors should be easily identifiable. Identify and provide instructions to users on how mistakes are detected and include explanations for error solutions
• Instructions or labels. Provide instructions for labeled elements.
• Parsing. Your website must be error-free. HTML must have correct start and end tags, HTML elements must be nested, and special IDs must be used.
• Value, role, and name. All elements must be built for accessibility. Use elements and plugins with an HTML markup if provided by a third party and HTML specifications for all website scripts

Intermediate WCAG Checklist (Level AA)

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

• Live captions. Include live video captions.
• Pre-recorded audio descriptions. Add pre-recorded videos and audio descriptions.
• Orientation. Your website must be able to adjust to landscape and portrait orientations. Content must retain meaning in all positions.
• Identify input purpose. Input fields must be programmatically identifiable. 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.
• 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. Ensure vertical content doesn’t need a horizontal scroll at a 320 CSS pixel width and 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.
• Text spacing. Function and content should retain meaning when users change text spacing. 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.
• Multiple ways. Provides different ways to find website pages by providing a consistent and clear main menu and adding a search function to all pages
• Headings and labels. Labels and headings should describe the purpose or topic.
• Focus appearance (Minimum). Focus indicators should be easily distinguishable when active. 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. Choose the default language for every web page section using HTML “lang” attribute
• Consistent navigation. Menus and standard controls should be consistently positioned.
• Consistent identification. Components must be identifiable with the same function. Elements with the same functions should have consistent text alternatives.
• Error suggestions. Suggest solutions when users cause errors. 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. Test responses, financial transactions, changes, and legal commitments to user-controlled data should be reversible.

Advanced WCAG Checklist (Level AAA)

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

• 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 need to be provided for pre-recorded videos. Full-text transcripts should be provided for links and videos
• Live audio-only. There should be alternatives for live audio. Include script text if the live broadcasts are from prepared scripts
• Identify the purpose. All components’ purposes must be programmatically determinable. 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.
• 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 must be able to suppress or postpone unnecessary interruptions. 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 should be warned about timeouts that may cause data loss.
• Three flashes. There should be no content that flashes more than 3 times per second.
• Animation from interactions. Users should have the option to disable motion animation.
• Location. Users should always know where they are on the website. 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. 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. 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. 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.

Recommended Web Accessibility Tools

To make compliance even easier, there are a range of web accessibility tools that you can use. Here are some of our recommended suggestions.

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:

• Top Examples of ADA Compliant Websites You Can Learn From
• ADA Compliance Level AA Explained
• How to Test Your Website for ADA Compliance