In today’s digital age, having a website that is accessible to everyone is not just a moral imperative, but also a legal one.
To ensure that your website is inclusive and usable by people with disabilities, it’s important to follow the Web Content Accessibility Guidelines (WCAG). These guidelines provide a set of standards for creating content that can be accessed by people with a range of abilities, including those who are blind or visually impaired, deaf or hard of hearing, and those with mobility impairments.
Mastering WCAG guidelines can be challenging, especially for those who are new to accessibility. However, there are several resources available to help you navigate these guidelines, including checklists that are organized by guideline and WCAG level.
These checklists, which are available for free through the Wuhcag newsletter, have been used by thousands of subscribers and can help you ensure that your website meets the necessary accessibility standards.
In this article, we’ll explore the different WCAG levels and guidelines, as well as provide additional resources and tips for creating accessible content.
Key Takeaways
- WCAG checklists are organized by guideline and provided for each level (A, AA, AAA).
- Each level has a different set of guidelines, with AAA being the most advanced.
- Guidelines cover a range of accessibility features such as captions, keyboard accessibility, and contrast ratio.
- Other resources for WCAG guidelines include WebAIM, W3C, and Penn State University.
WCAG Levels and Guidelines
The WCAG Levels (A, AA, and AAA) and their respective guidelines are crucial components of accessibility checklists provided by various resources such as Wuhcag, WebAIM, and W3C.
Each level has a different set of guidelines, with Level A being the beginner level, Level AA being the intermediate level, and Level AAA being the advanced level. The requirements for each level include non-text content, captions, audio description, keyboard accessibility, contrast ratios, target sizes for pointer inputs, and more.
Level A guidelines focus on making content accessible to the widest possible audience, including those with disabilities.
Level AA guidelines build upon Level A and provide additional requirements such as resizable text, contrast ratio, multiple ways to find pages, and more.
Level AAA guidelines go even further, requiring sign language translations, extended audio descriptions, no time limits, and more. The purpose of all components must be programmatically determinable at Level AAA, and the contrast ratio between text and background must be at least 7:1.
The location of users on the website must be clear at Level AAA, and users can disable motion animation.
WCAG Checklists
Here are WCAG Checklists that will help you ensure that your digital content is accessible to everyone, including people with disabilities. To make this task easier to understand and follow, we’ve broken down the guidelines into three distinct levels – A (Beginner), AA (Intermediate), and AAA (Expert). Each level corresponds to increasing levels of web accessibility and includes specific guidelines, titles, and summaries. The following WCAG checklists provide the guideline, title and summary.
WCAG Checklist Level A (Beginner)
The Level A (Beginner) checklist covers fundamental aspects of web accessibility, such as providing text alternatives for non-text content, ensuring content can be navigated via keyboard, and specifying the language of the webpage.
| Guideline | Title | Summary |
|---|---|---|
| 1.1.1 | Non-text Content | Provide text alternatives for non-text content that serves the same purpose. |
| 1.2.1 | Audio-only and Video-only (Pre-recorded) | Provide an alternative to video-only and audio-only content. |
| 1.2.2 | Captions (Pre-recorded) | Provide captions for videos with audio. |
| 1.2.3 | Audio Description or Media Alternative (Pre-recorded) | Provide audio description or text transcript for videos with sound. |
| 1.3.1 | Info and Relationships | Content, structure and relationships can be programmatically determined. |
| 1.3.2 | Meaningful Sequence | Present content in a meaningful order. |
| 1.3.3 | Sensory Characteristics | Instructions don’t rely solely on sensory characteristics. |
| 1.4.1 | Use of Colour | Don’t use presentation that relies solely on colour. |
| 1.4.2 | Audio Control | Don’t play audio automatically. |
| 2.1.1 | Keyboard | All functionality is accessible by keyboard with no specific timings. |
| 2.1.2 | No Keyboard Trap | Users can navigate to and from all content using a keyboard. |
| 2.1.4 | Character Key Shortcuts | Allow users to turn off or remap single-key character shortcuts. |
| 2.2.1 | Timing Adjustable | Provide user controls to turn off, adjust or extend time limits. |
| 2.2.2 | Pause, Stop, Hide | Provide user controls to pause, stop and hide moving and auto-updating content. |
| 2.3.1 | Three Flashes or Below Threshold | No content flashes more than three times per second. |
| 2.4.1 | Bypass Blocks | Provide a way for users to skip repeated blocks of content. |
| 2.4.2 | Page Titled | Use helpful and clear page titles. |
| 2.4.3 | Focus Order | Components receive focus in a logical sequence. |
| 2.4.4 | Link Purpose (In Context) | Every link’s purpose is clear from its text or context. |
| 2.4.7 | Focus Visible | Keyboard focus is visible when used. |
| 2.4.3 | Page Break Navigation | Provide a way to navigate between page break locators. |
| 2.5.1 | Pointer Gestures | Multi-point and path-based gestures can be operated with a single pointer. |
| 2.5.2 | Pointer Cancellation | Functions don’t complete on the down-click of a pointer. |
| 2.5.3 | Label in Name | Where a component has a text label, the name of the component also contains the text displayed. |
| 2.5.4 | Motion Actuation | Functions operated by motion can also be operated through an interface and responding to motion can be disabled. |
| 3.1.1 | Language of Page | Each webpage has a default human language assigned. |
| 3.2.1 | On Focus | Elements do not change when they receive focus. |
| 3.2.2 | On Input | Elements do not change when they receive input. |
| 3.2.6 | Consistent Help | Help options are presented in the same order. |
| 3.3.1 | Error Identification | identify and describe input errors for users. |
| 3.3.2 | Labels or Instructions | Provide labels or instructions for user input. |
| 3.3.7 | Redundant Entry | Auto-fill or provide information that’s required more than once in the same process. |
| 4.1.1 | Parsing | No major code errors |
| 4.1.2 | Name, Role, Value | The name and role of user components can be understood by technology. |
WCAG Checklist Level AA (Intermediate)
The Level AA (Intermediate) checklist introduces more nuanced principles like adding captions to live videos, ensuring sufficient color contrast, and consistent identification of components.
| Guideline | Title | Summary |
|---|---|---|
| 1.2.4 | Captions (Live) | Add captions to live videos. |
| 1.2.5 | Audio Description (Pre | Provide audio descriptions for pre-recorded videos. |
| 1.3.4 | Orientation | Your website adapts to portrait and landscape views. |
| 1.3.5 | Identify Input Purpose | The purpose of input fields must be programmatically determinable. |
| 1.4.3 | Contrast (Minimum) | Contrast ratio between text and background is at least 4.5:1. |
| 1.4.4 | Resize Text | Text can be resized to 200% without loss of content or function. |
| 1.4.5 | Images of Text | Don’t use images of text. |
| 1.4.10 | Reflow | Content retains meaning and function without scrolling in two dimensions. |
| 1.4.11 | Non | The contrast between user interface components, graphics and adjacent colours is at least 3:1. |
| 1.4.12 | Text Spacing | Content and function retain meaning when users change elements of text spacing. |
| 1.4.13 | Content on Hover or Focus | When hover or focus triggers content to appear, it is dismissible, hoverable and persistent. |
| 2.4.5 | Multiple Ways | Offer at least two ways to find pages on your website. |
| 2.4.6 | Headings and Labels | Headings and labels describe topic or purpose. |
| 2.4.11 | Focus Appearance (Minimum) | Focus indicators are clearly distinguishable when active. |
| 2.5.7 | Dragging Movements | Functionality that uses dragging movements can be achieved with a single pointer without dragging. |
| 2.5.8 | Target Size (Minimum) | The target size for pointer inputs is at least 24 by 24 CSS pixels. |
| 3.1.2 | Language of Parts | Each part of a webpage has a default human language assigned. |
| 3.2.3 | Consistent Navigation | Position menus and standard controls consistently. |
| 3.2.4 | Consistent Identification | Identify components with the same function consistently. |
| 3.2.7 | Visible Controls | Give users a way to identify controls without mouse hover or keyboard focus. |
| 3.3.3 | Error Suggestion | Suggest corrections when users make mistakes. |
| 3.3.4 | Error Prevention (Legal, Financial, Data) | Check, confirm and allow reversal of pages that cause important commitments. |
| 2.5.2 | Pointer Cancellation | Functions don’t complete on the down-click of a pointer. |
| 2.5.3 | Label in Name | Where a component has a text label, the name of the component also contains the text displayed. |
| 2.5.4 | Motion Actuation | Functions operated by motion can also be operated through an interface and responding to motion can be disabled. |
| 3.1.1 | Language of Page | Each webpage has a default human language assigned. |
| 3.2.1 | On Focus | Elements do not change when they receive focus. |
| 3.2.2 | On Input | Elements do not change when they receive input. |
| 3.2.6 | Consistent Help | Help options are presented in the same order. |
| 3.3.1 | Error Identification | identify and describe input errors for users. |
| 3.3.2 | Labels or Instructions | Provide labels or instructions for user input. |
| 3.3.7 | Redundant Entry | Auto-fill or provide information that’s required more than once in the same process. |
| 4.1.1 | Parsing | No major code errors |
| 4.1.2 | Name, Role, Value | The name and role of user components can be understood by technology. |
WCAG Checklist Level AAA (Expert)
The Level AAA (Expert) checklist delves into advanced web accessibility features such as providing sign language translations, removing timing limits, and allowing users to disable motion animations.
| Guideline | Title | Summary |
|---|---|---|
| 1.2.6 | Sign Language (Pre | Provide sign language translations for pre-recorded videos. |
| 1.2.7 | Audio description (Pre | Provide extended audio descriptions for pre-recorded videos. |
| 1.2.8 | Media Alternative (Pre | Provide text alternatives for pre-recorded videos. |
| 1.2.9 | Audio Only (Live) | Provide alternatives for live audio. |
| 1.3.6 | Identify Purpose | The purpose of all components must be programmatically determinable. |
| 1.4.6 | Contrast (Enhanced) | Contrast ratio between text and background is at least 7:1. |
| 1.4.7 | Low or No Background Audio | Audio-only content is clear with no or minimal background noise. |
| 1.4.8 | Visual Presentation | Offer users a range of presentation options for blocks of text. |
| 1.4.9 | Images of Text (No Exception) | Don’t use images of text. |
| 2.1.3 | Keyboard (No Exception) | All functionality is accessible by keyboard with no exceptions. |
| 2.2.3 | No Timing | No time limits on your website. |
| 2.2.4 | Interruptions | Users can postpone or supress non-emergency interruptions. |
| 2.2.5 | Re-authenticating | Save user data when re-authenticating. |
| 2.2.6 | Timeouts | Warn users about timeouts that cause data loss. |
| 2.3.2 | Three Flashes | No content flashes more than three times per second. |
| 2.3.3 | Animation from Interactions | Users can disable motion animation. |
| 2.4.8 | Location | Let users know where they are on your website. |
| 2.4.9 | Link Purpose (Link Only) | Every link’s purpose is clear from its text. |
| 2.4.10 | Section Headings | Organise content with headings. |
| 2.4.12 | Focus Appearance (Enhanced) | Focus indicators are more clearly distinguishable when active. |
| 2.5.5 | Error Prevention (Legal, Financial, Data) | The target size for pointer inputs is at least 44 by 44 CSS pixels. |
| 2.5.6 | Concurrent Input Mechanisms | No restrictions on modes of input. |
| 3.1.3 | Unusual Words | Define any unusual words or phrases. |
| 3.1.4 | Abbreviations | Define any abbreviations. |
| 3.1.5 | Reading Level | Users with nine years of schooling can read your content. |
| 3.1.6 | Pronunciation | Define words where meaning is ambiguous without pronunciation. |
| 3.2.5 | Change on Request | Elements do not change without a request. |
| 3.3.5 | Help | Provide help to users. |
| 3.3.6 | Error Prevention (All) | Check, confirm and allow reversal of pages that require users to submit information. |
| 3.3.9 | Accessible Authentication (Enhanced) | Don’t authenticate users through memory, transcription or cognitive tests. |
| 3.3.2 | Labels or Instructions | Provide labels or instructions for user input. |
| 3.3.7 | Redundant Entry | Auto-fill or provide information that’s required more than once in the same process. |
| 4.1.1 | Parsing | No major code errors |
| 4.1.2 | Name, Role, Value | The name and role of user components can be understood by technology. |
By following these WCAG checklists, you can ensure your web content is user-friendly, inclusive, and accessible to the widest possible audience.
Other Checklist Resources
Various resources are available to aid in the implementation of WCAG guidelines, including checklists provided by WebAIM, W3C, and Penn State University. These resources offer summaries of the guidelines and specific items to check for compliance.
Here are three useful checklist resources:
- WebAIM Checklist: This checklist is organized by guideline and WCAG level, making it easy to navigate and understand. It includes explanations and examples for each item on the list, as well as links to relevant WCAG guidelines.
- W3C Checklist: The W3C checklist is similar to the WebAIM checklist in its organization and level of detail. It also includes links to additional resources and tools for testing accessibility.
- Penn State University Summary: This summary provides a concise overview of the WCAG guidelines and their implications for web accessibility. It includes examples and explanations for each guideline, making it a useful resource for those new to WCAG.
Other Accessibility Tips
Additional considerations for improving web accessibility include providing alternative text for images, ensuring proper color contrast, using clear and simple language, and allowing keyboard navigation for all functionality.
Alternative text for images is essential for users who are visually impaired or who have difficulty interpreting images. It provides a text-based description of the image, allowing the user to understand the content of the image without seeing it.
Proper color contrast is important for users with color blindness or visual impairments, as it makes the content easier to read and understand.
Using clear and simple language is important for users with cognitive or language disabilities, as it makes the content easier to comprehend.
Allowing keyboard navigation for all functionality is important for users who have mobility impairments or who cannot use a mouse, as it allows them to navigate the website using only the keyboard.
In addition to these considerations, it is important to provide captions and transcripts for audio and video content, as well as providing descriptive labels for form elements.
Captions and transcripts allow users who are deaf or hard of hearing to understand the content, while descriptive labels for form elements allow users to understand the purpose of each field and input.
It is also important to avoid using flashing or blinking content, as it can trigger seizures in users with epilepsy.
Providing a consistent and predictable layout can also help users with cognitive or learning disabilities, as it makes it easier for them to navigate and comprehend the content.
By implementing these additional considerations, web developers can improve the accessibility of their website and ensure that all users have equal access to the content.
