Skip to content

<blog>
WCAG Principles, Guidelines, and Success Criteria

Chris Mauck

May 8, 2024 • 6 minute read

Image credit: Generated using Microsoft Designer

Originally appeared in LinkedIn AccessABILITY

In my last post I introduced the Web Content Accessibility Guidelines, or WCAG. The “guidelines” are a set of recommendations for making web content more accessible to disabled persons. The World Wide Web Consortium (W3C) established these as part of their Web Accessibility Initiative.

This time around I'll explore each of the four POUR principles (perceivable, operable, understandable, and robust) more granularly. I'll look at some of the specific guidelines under each principle, along with the testable success criteria that websites must meet for conformance.

A Closer Look at the Principles

The four foundational principles in WCAG encompass the specific guidelines and success criteria for creating a universally accessible user experience on the web for people with diverse abilities and disabilities.

Perceivable: Can users perceive the content? Information and user interface components must be presented to users in a way they can understand. In other words, it cannot be completely invisible to their senses. Perceivability should consider the available senses, including sight, hearing, and/or touch.

This principle's guidelines include offering text alternatives for non-text content, captioning multimedia, and guaranteeing content adaptability and distinguishability.

Examples include:

  • Text alternatives: Provide text alternatives for non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language
  • Time-based Media: Provide text alternatives for time-based media
  • Adaptable: Create content that can be presented in different ways without losing information or structure
  • Distinguishable: Make it easier for users to see and hear content including separating foreground from background

Success criteria include offering alternate text for photos and other non-text information, captioning and audio descriptions for multimedia, and guaranteeing adequate color contrast and text resizing options.

Operable: Can users use UI components and navigate the content? User interface components and navigation must be operable, or able to be used. This can include things like forms, controls, and navigation. This means that a user must be able to operate interface elements by first identifying them, and then interacting with them either physically or with assistive technology.

This principle's guidelines include making all functionality accessible by keyboard, giving users adequate time to read and use content, and eliminating design features that could provoke seizures or physical reactions.

Examples include:

  • Keyboard Accessible: Make all functionality available from a keyboard
  • Enough Time: Provide users enough time to read and use content
  • Seizures/Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions
  • Navigable: Provide ways to help users navigate, find content, and determine where they are
  • Input Modalities: Make it easier for users to operate functionality through various inputs beyond keyboard

Success requirements include assuring keyboard accessibility, allowing users enough time to communicate, and avoiding flashing information that may trigger seizures.

Understandable: Can users understand the content? Can users understand the interface and is it consistent enough to avoid confusion? Information and the operation of user interface must be understandable. This means that technology should have predictable usage patterns and design, as well as clear and consistent presentation and format.

This principle's guidelines include making text material clear and comprehensible, making web sites appear and run predictably, and giving tools to help users avoid and remedy errors.

Examples include:

  • Readable: Make text content readable and understandable
  • Predictable: Make Web pages appear and operate in predictable ways
  • Input Assistance: Help users avoid and correct mistakes

Success criteria include clear and consistent navigation, easy-to-understand terminology, and methods to detect and remedy input errors.

Robust: Can the content be consumed by a wide variety of user agents (browsers)? Does it work with assistive technology? Content must be robust enough that it can be interpreted by a wide variety of devices and user agents, including assistive technologies.

This concept includes guidelines for maximizing compatibility with present and future user agents, including assistive technologies.

For example:

  • Compatible: Maximize compatibility with current and future user agents, including assistive technologies

Success criteria include adhering to web standards, assuring interoperability with assistive technology, and providing alternative content versions for outdated browsers or user agents.

To comply with WCAG, websites and online apps must meet a set of testable success criteria for each of these principles. The success requirements are divided into three levels: A (the lowest), AA (the middle), and AAA (the highest). The compliance level is determined by the number and severity of success criteria met.

Conformance

The concept of fully fulfilling and satisfying a set of defined rules or standards is known as conformance. Conformance in the context of online accessibility and WCAG refers to a website's or web application's adherence to and compliance with all pertinent accessibility norms and standards specified by the WCAG guidelines.

A website that complies with WCAG essentially indicates that it has been created, tested, and adapted so that individuals with different disabilities—such as those who have cognitive, mobility, hearing, or vision impairments—can readily access, utilize, and understand it.

Ensuring that every element of the website—text, photos, multimedia, navigation, input fields, and coding—complies with the precise technical requirements specified by WCAG constitutes meeting compliance. This includes following web standards for assistive technology compliance, guaranteeing appropriate color contrast, enabling keyboard navigation, offering text alternatives for non-text content, and adding transcripts and captions.

Different conformance levels (A, AA, AAA) exist based on how many of the success criteria the website satisfies across the four main WCAG principles (perceivable, operable, understandable, robust). The higher the conformance level achieved, the more accessible the website is considered to be.

Conformance Levels

Conformance levels refer to the different levels or thresholds that indicate how accessible a website or web content is based on meeting certain accessibility criteria. The higher the conformance level (A to AA to AAA), the more accessible features and assistive technology compatibility the website provides to accommodate users with a wider range of disabilities and impairments. Let’s take a look at the three levels.

Level A: This is the minimum level of conformance. For Level A conformance, the web page or application must meet all of the Level A Success Criteria (which vary by primary guideline). If this level is not met or difficulties are not fixed, certain groups or users will be unable to access the information. Unresolved issues at this level constitute severe hurdles that are unlikely to provide workarounds. An example Level A barrier would be the lack of alternative text to describe an image. Without a text description, a blind person has little ability to interpret the content of an image.

Level AA: This is the target level of conformance. For Level AA conformance, the web page or application must meet all of the Level A and Level AA Success Criteria. If difficulties at this level are not fixed, certain groups or users will be unable to access the information. These difficulties can be addressed, or at least worked around, with some effort. However, including workarounds may result in a more complex usability. An example Level AA barrier would be the inability to follow the cursor's focus while moving through material with a keyboard. A person with limited vision navigating with a keyboard, or a fully able keyboard user for that matter, can find it difficult to navigate through material if they cannot see where the cursor is and is unsure when to press the Enter key to activate a link or button.

Level AAA: This is above and beyond conformance. For Level AAA conformance, the Web page meets all of the Level A, Level AA, and Level AAA Success Criteria. While level AAA offers the fullest accessibility conformance, the WCAG does not advocate striving to achieve it across an entire website or application. Simply because it is not "technically" possible and may cause delays and issues in execution. Issues at this level could be addressed to improve usability for all groups. Although Level AA conformity ensures technical accessibility of web content, satisfying AAA conformance criteria might improve usability. Level AAA barriers include presenting acronyms or abbreviations without providing complete words. For a blind individual, an acronym read via a screen reader may seem like nonsense. For a fully able user who is unfamiliar with a short form, an acronym or abbreviation may have no meaningful significance, at least not without needing to look it up elsewhere.

Again, in simple terms, conformance is about making sure a website rigorously follows established accessibility practices so that it is usable and inclusive for as many people as possible, regardless of their physical or cognitive abilities.

Hopefully this helps provide a better understanding of what the WCAG principles are, how to achieve them, and an overall description of conformance.


Useful Resources

The Web Content Accessibility Guidelines (WCAG) are a set of technical standards developed by the World Wide Web Consortium (W3C) that help make web content more accessible to people with disabilities. https://www.w3.org/TR/WCAG22/

Google’s inclusive marketing aims to eliminate biases and increase representation in all stages of the creative process to better reflect diverse perspectives. Check out the guides. https://all-in.withgoogle.com/