In this practical primer on the Web Content Accessibility Guidelines, we get right to the point and tell you exactly what you need to know about WCAG.
Jump to any section by clicking a link in our table of contents.
Table of Contents
WCAG Overview
The Web Content Accessibility Guidelines (WCAG) are technical standards designed to make the internet accessible to everyone, including people with disabilities. These guidelines are developed by the World Wide Web Consortium (W3C) under the Web Accessibility Initiative (WAI). The W3C is responsible for creating standards that ensure the web remains interoperable, like HTML and CSS.
Impact
WCAG has become a globally recognized standard that facilitates digital access for millions with disabilities. This set of guidelines is the culmination of extensive work by hundreds of experts worldwide, aiming to integrate people with disabilities into the digital world seamlessly.
Versions
WCAG has evolved through multiple versions to enhance its comprehensiveness:
- WCAG 1.0: Introduced in 1999.
- WCAG 2.0: Released in 2008, bringing significant updates.
- WCAG 2.1: Launched in 2018, adding more refinements.
- WCAG 2.2: Most recent, published in 2023.
Each version is backward compatible, meaning new versions build on the previous ones without negating their validity.
Conformance Levels
WCAG categorizes accessibility into three levels of conformance:
- Level A (Single A): Basic accessibility features.
- Level AA (Double A): Intermediate, more comprehensive accessibility features.
- Level AAA (Triple A): Advanced accessibility features for the highest level of accessibility.
These levels are defined by success criteria that are designed to accommodate various disabilities including visual, auditory, motor, and cognitive impairments.
Backwards Compatible
Once you understand the backwards compatible rule of WCAG, it will enable you to make more sense of the different versions and conformance levels.
What backwards compatible means is nothing is undone in new versions or higher conformance level. Rather, each new version of the WCAG builds upon the previous one, maintaining all previous success criteria and then adding to them.
For instance, when WCAG 2.1 was released, it did not change WCAG 2.0. Instead, it built upon the 38 success criteria from WCAG 2.0 AA and added 12 new criteria, bringing the total to 50.
Note that this rule was broken in the recent WCAG 2.2 release as the WAI made success criterion 4.1.1 obsolete. However, this removal of 4.1.1 did not harm any efforts made towards previous conformance as 4.1.1 merely required clean code. Nevertheless, 4.1.1 is still a success criterion under versions 2.0 and 2.1, just not in 2.2.
Understanding Success Criteria
Success criteria are the specific requirements needed to meet the WCAG standards. Think of success criteria as things to do or things to account for for accessibility.
Each success criterion addresses different aspects of accessibility. Let’s briefly summarize all of the conformance level AA success criteria.
WCAG 2.0 AA
Here is a quick table of the 38 success criteria that comprise WCAG 2.0 AA.
| Success Criterion | Description |
|---|---|
| 1.1.1 Non-text Content | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | For prerecorded audio-only and video-only media, an alternative providing equivalent information must be provided. |
| 1.2.2 Captions (Prerecorded) | Captions are provided for all prerecorded audio content in synchronized media. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media. |
| 1.2.4 Captions (Live) | Captions are provided for all live audio content in synchronized media. |
| 1.2.5 Audio Description (Prerecorded) | Audio description is provided for all prerecorded video content in synchronized media. |
| 1.3.1 Info and Relationships | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| 1.3.2 Meaningful Sequence | When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. |
| 1.3.3 Sensory Characteristics | Instructions for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. |
| 1.4.1 Use of Color | Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. |
| 1.4.2 Audio Control | If any audio on a web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. |
| 1.4.3 Contrast (Minimum) | The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Large Text, Incidental, Logotypes). |
| 1.4.4 Resize text | Text can be resized up to 200 percent without loss of content or functionality. |
| 1.4.5 Images of Text | If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Customizable, Essential). |
| 2.1.1 Keyboard | All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. |
| 2.1.2 No Keyboard Trap | If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and if it requires more than unmodified arrow or tab keys, the user is advised of the method for moving focus away. |
| 2.2.1 Timing Adjustable | For each time limit that is set by the content, the user can turn off, adjust, or extend the limit except for those necessary for security purposes or where timing is essential and not extendable. |
| 2.2.2 Pause, Stop, Hide | For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Moving, Blinking, Scrolling, Auto-updating). |
| 2.3.1 Three Flashes or Below Threshold | Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. |
| 2.4.1 Bypass Blocks | A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. |
| 2.4.2 Page Titled | Web pages have titles that describe topic or purpose. |
| 2.4.3 Focus Order | If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. |
| 2.4.4 Link Purpose (In Context) | The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. |
| 2.4.5 Multiple Ways | More than one way is available to locate a webpage within a set of webpages except where the Webpage is the result of, or a step in, a process. |
| 2.4.6 Headings and Labels | Headings and labels describe topic or purpose. |
| 2.4.7 Focus Visible | Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. |
| 3.1.1 Language of Page | The default human language of each Web page can be programmatically determined. |
| 3.1.2 Language of Parts | The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. |
| 3.2.1 On Focus | When any component receives focus, it does not initiate a change of context. |
| 3.2.2 On Input | Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. |
| 3.2.3 Consistent Navigation | Navigational mechanisms that are repeated on multiple pages within a set of webpages occur in the same relative order each time they are repeated, unless a change is initiated by the user. |
| 3.2.4 Consistent Identification | Components that have the same functionality within a set of webpages are identified consistently. |
| 3.3.1 Error Identification | If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. |
| 3.3.2 Labels or Instructions | Labels or instructions are provided when content requires user input. |
| 3.3.3 Error Suggestion | If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. |
| 3.3.4 Error Prevention (Legal, Financial, Data) | For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: (Reversible, Checked, Confirmed). |
| 4.1.1 Parsing | Elements must have complete start and end tags, elements must be nested according to their specifications, elements must not contain duplicate attributes, and any IDs must be unique. |
| 4.1.2 Name, Role, Value | For all user interface components (including but not limited to: form elements, links, and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. |
WCAG 2.1 AA
Here are the additional 12 success criteria in WCAG 2.1 AA.
| Success Criteria | Description |
|---|---|
| 1.3.4 Orientation | Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. |
| 1.3.5 Identify Input Purpose | The purpose of each input field collecting information about the user can be automatically determined when the field serves a common purpose. |
| 1.3.6 Identify Purpose | In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined. |
| 1.4.10 Reflow | Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: |
| 1.4.11 Non-text Contrast | The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent colors: User Interface Components, graphical objects conveying information. |
| 1.4.12 Text Spacing | No loss of content or functionality occurs when the following text style properties are set to specified values: line height, paragraph spacing, letter spacing, word spacing. |
| 1.4.13 Content on Hover or Focus | Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: |
| 2.1.4 Character Key Shortcuts | If a keyboard shortcut is implemented using letter (including upper- and lower-case), punctuation, number, or symbol characters, then at least one of the following is true: Turn off, Remap, Active only on focus. |
| 2.5.1 Pointer Gestures | All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. |
| 2.5.2 Pointer Cancellation | For functionality that can be operated using a single pointer, at least one of the following is true: No Down-Event, Abort or Undo, Up Reversal, Essential. |
| 2.5.3 Label in Name | For user interface components with labels that include text or images of text, the name contains the text that is presented visually. |
| 2.5.4 Motion Actuation | Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when: |
| 2.5.5 Target Size | The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: |
| 2.5.6 Concurrent Input Mechanisms | Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings. |
WCAG 2.2 AA
Here are the six new success criteria introduced in WCAG 2.2 AA.
| Success Criteria | Description |
|---|---|
| 2.4.11 Focus Appearance (Minimum) | When a user interface component displays a visible keyboard focus, the following are true: Minimum area, Change of contrast, Unobscured. |
| 2.4.12 Focus Appearance (Enhanced) | This criterion provides enhanced requirements for the visibility of the keyboard focus indicator above the minimum requirement. |
| 2.4.13 Page Break Navigation | Blocks of content that are repeated on multiple pages of a set of web pages have a mechanism to skip to the next block of content or the next page. |
| 2.5.7 Dragging Movements | Functionality that can be operated by a dragging movement can be operated by a single pointer without dragging, unless dragging is essential. |
| 3.3.7 Accessible Authentication | Steps in an authentication process that rely on a cognitive function test have at least one mode that does not require a cognitive function test, or a mechanism is available to assist the user in completing the cognitive function test. |
| 3.3.8 Redundant Entry | For steps in a process where the user must enter information that has previously been entered by the user in the same process, at least one of the following is true: Information is auto-populated, confirmed, simplified. |
These criteria are enable developers, designers, and content editors to understand how to create websites, pages, content, and applications that are accessible to all users.
One common mistake is many people conflate the open requirement(s) of success criteria with what are termed sufficient techniques and advisory techniques published in the official documentation.
Let’s go over both techniques.
Sufficient Techniques
Sufficient techniques are specific methods that meet the success criteria of the WCAG. By applying these techniques, developers and content creators can be confident that they comply with the accessibility standards. These techniques are essentially the building blocks of accessibility, ensuring that websites and digital content can be used by as many people as possible, including those with disabilities. Each technique addresses specific issues and outlines practical steps for implementation.
For example, a sufficient technique for providing text alternatives for non-text content (like images) is to use the alt attribute in HTML. This technique is crucial for visually impaired users who rely on screen readers to access information. By adding a simple alt text, the content becomes accessible, fulfilling the WCAG criteria and making the web a more inclusive space. This approach not only meets legal and ethical standards but also enhances the user experience for a broader audience.
Advisory Techniques
Advisory techniques provide additional guidance on how to improve web accessibility, going beyond the basic requirements set by the Web Content Accessibility Guidelines (WCAG). These techniques are not strictly necessary for compliance, but implementing them can enhance user experience and make content more accessible to people with disabilities. For instance, these techniques might suggest ways to make web content more understandable or navigable, even in contexts not fully addressed by the WCAG.
An example of an advisory technique is providing a glossary for terms that might be unfamiliar to the audience. This is particularly beneficial for content that is technical or specialized. While not required, adding a glossary can help users with cognitive disabilities or those who are not native speakers of the language used on the website. It’s a way of going the extra mile to ensure that everyone, regardless of their ability level, can understand and benefit from the content.
Principles
The Web Content Accessibility Guidelines are structured around four principles, encapsulated by the acronym “POUR”:
- Perceivable: Information must be presentable in ways that users can perceive.
- Operable: User interface components and navigation must be operable.
- Understandable: Information and operation of the user interface must be understandable.
- Robust: Content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies.
Each principle is supported by guidelines, which in turn are operationalized through specific success criteria.
What Does Conformance Mean?
Conformance in the context of the Web Content Accessibility Guidelines (WCAG) refers to the extent to which web content, websites, and web applications meet the specified criteria set out in the guidelines. Achieving conformance ensures that digital content is accessible to all users, including those with disabilities. Here’s a detailed breakdown of what conformance entails:
Levels of Conformance
| Level | Classification | Description |
|---|---|---|
| Level A | Foundational | Ensures essential considerations are in place. |
| Level AA | Comprehensive | Addresses all common barriers and enhances accessibility. |
| Level AAA | Exemplary | Most stringent; even partial conformance is commendable. |
As we touched on above, WCAG defines three levels of conformance that indicate the degree to which a website or application adheres to the accessibility standards:
- Level A (Minimum Level): Level A conformance means that the most basic web accessibility features are in place. While foundational, there are many more accessibility considerations.
- Level AA (Mid Range Level): This level addresses the major and most common barriers for users with disabilities. Level AA is comprehensive and referenced as a best practice.
- Level AAA (Highest Level): The highest threshold for accessibility and includes even more stringent provisions than AA. Even partial AAA conformance is praise worthy.
Measuring Conformance
Conformance to WCAG is measured by fulfilling specific success criteria that are associated with each of the aforementioned levels:
- Success Criteria: These are testable conditions that must be met to conform to WCAG. Each criterion is essential for addressing the particular needs of users with disabilities, such as visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
- Full Pages: Conformance must be achieved for entire pages or sites as a whole to ensure that the entire user experience is accessible.
- Complete Processes: All interfaces and stages of user interaction, including navigation and entering information, must be accessible.
Understanding Conformance Claims
Organizations can make a conformance claim if their site or application meets all the requirements of a specified WCAG level. A conformance claim should include the following details:
- Date of the claim
- Guidelines title, version, and level of conformance (e.g., WCAG 2.1 Level AA)
- Scope of the claim (which pages or features do the claim cover)
- Technologies that are relied upon to meet the conformance (such as HTML, CSS, JavaScript, etc.)
Conformance vs. Compliance
When discussing the Web Content Accessibility Guidelines (WCAG), the terms “conformance” and “compliance” are often mistakenly used interchangeably, yet they represent distinctly different concepts.
| Aspect | Conformance | Compliance |
|---|---|---|
| Meaning | Adhering to voluntary standards or policies | Meeting requirements set by laws and regulations |
| Example | WCAG conformance | Section 508 compliance |
| Quality | Voluntary, recommended as a best practice | Mandatory, penalties for non-compliance |
Conformance
Conformance relates to adhering to standards or policies set by non-governmental bodies, which are voluntary rather than mandated. Within the context of web accessibility, conformance specifically refers to the WCAG, a series of guidelines developed by the World Wide Web Consortium (W3C) through its Web Accessibility Initiative (WAI). The W3C uses the term “conformance” to signify that while these guidelines are highly recommended and broadly adopted, following them is not enforced by law but is a matter of good practice and ethical responsibility.
For example, the W3C issues a “Statement of Conformance” which clearly indicates that entities are expected to align with these guidelines voluntarily. This document is called a conformance statement, further emphasizing the non-mandatory nature of adhering to WCAG.
Compliance
In contrast, compliance refers to fulfilling the requirements set by laws and regulations that are enforced by governmental authorities. Compliance is obligatory and carries legal implications for failure to meet the standards. In the realm of web accessibility, compliance often refers to laws like Section 508 of the Rehabilitation Act in the United States, which integrates WCAG principles but carries the weight of legal enforcement.
Section 508, for example, mandates that all federal information and electronic technology be accessible to people with disabilities, incorporating WCAG guidelines into its legal framework. Therefore, when organizations adhere to Section 508, they are not just conforming to best practices but are complying with federal law.
Common Misconceptions
Despite the clear distinctions, there is widespread confusion, with many professionals and even legal experts incorrectly referring to “WCAG compliance.” Such terminology is inaccurate since WCAG by itself does not constitute law but rather a set of guidelines intended to support compliance with laws like the Americans with Disabilities Act (ADA) and Section 508.
WCAG Certification
Many website owners want to know how they can certify their website as accessible. The W3C version of WCAG certification is called a statement of conformance or a conformance statement.
A conformance statement is a sterile document that speaks to a website’s full conformance with a version and conformance level of WCAG. If any page within the named is non-conformant with even one success criterion, the conformance statement can not include the non-conformant page(s).
Application to Web and Non-Web Assets
As the name indicates, the Web Content Accessibility Guidelines are for web assets like websites, web content, web pages, and web applications. When it comes to web assets, just think of anything that can be accessed by a web browser:
- Email clients like Gmail.
- Social media platforms.
- Multimedia content like videos and podcasts.
- Web-based integrations such as calendars and maps.
However, the principles and guidelines of WCAG can also be adapted to non-web assets such as PDFs, Word documents, and mobile apps, although the fit may not be perfect and may require specific adaptations.
WCAG for Beginners
Our WCAG for beginners guide contains more practical information along with a checklist to cement your understanding of the Web Content Accessibility Guidelines – even if you’re a complete beginner who is non-technical.
WCAG Training
Recent updates to regulation have underscored the importance of WCAG 2.1 AA training. Although there are numerous helpful resources available online for free. An organized and structured training program like our WCAG Course will save your digital team valuable time in learning all of the success criteria.
Conclusion
The Web Content Accessibility Guidelines are a critical resource for building accessible digital environments. They offer a foundation for developers and content creators to integrate accessibility into their work from the outset, rather than retrofitting accessibility features later. While WCAG sets a high standard, there is always room to exceed these guidelines and aim for even greater accessibility in digital content.
Resources
Learn the Web Content Accessibility Guidelines in just 3 hours with the WCAG Course available at WCAGCourse.com. This on-demand training includes video and text explanations, examples, code examples, accessibility workflows cheatsheets, and an Excel spreadsheet WCAG checklist for 2.0 AA, 2.1 AA, and 2.2 AA.
Do you need help with website accessibility services? Accessible.org offers audit, remediation, and user testing services. Also, if you need 1-on-1 help, we offer consultation.
