Understanding WCAG: Structure, Principles, Guidelines, and Success Criteria

WCAG (Web Content Accessibility Guidelines) is an essential guideline when discussing web accessibility.

While it might seem overwhelming at first, all the content is actually consolidated into a single page.

If you find accessibility challenging, don't worry. While this single page is content-rich, its beauty lies in the fact that you can easily check accessibility basics without constantly referring to multiple pages.

As of December 28, 2024, WCAG 2.2 is the latest version. You can access it here:

https://www.w3.org/TR/WCAG22/

This article explains WCAG's overview and structure, detailing the roles of its Principles, Guidelines, Success Criteria, and Supporting Documents.

WCAG Overview and Purpose

WCAG (Web Content Accessibility Guidelines) is an international accessibility standard developed by WAI (Web Accessibility Initiative), a branch of W3C (World Wide Web Consortium), the international standards organization for the internet.

The primary goal of these guidelines is to ensure equal access and usability of web content for all people, regardless of their disabilities, limitations, or usage environment.

WCAG specifically aims to:

• Address diverse disabilities including visual (blindness, low vision), auditory (deaf, hard of hearing), motor, speech, cognitive/learning disabilities, and photosensitive seizures
• Consider broader user groups including elderly people and those with temporary disabilities
• Ensure accessibility for people using the web in various environments and situations
• Improve overall usability

WCAG is an international standard created through global collaboration, designed to be applicable across current and future web technologies. It serves as a comprehensive guide for creating "universally usable" web content.

WCAG's Hierarchical Structure and How to Read It

WCAG is organized in a three-tier hierarchical structure.
Understanding this structure makes WCAG easier to comprehend.

Hierarchical Structure

Level	Description
Principles	Top-level concepts
Guidelines	Concrete objectives under principles
Success Criteria	Detailed requirements under guidelines

Each top-level "Principle" contains multiple "Guidelines," and each Guideline includes multiple "Success Criteria."

Example

• Principle 1
  • Guideline 1.1
  • Success Criterion 1.1.1
  • Guideline 1.2
  • Success Criterion 1.2.1
  • Guideline 1.3
  • Success Criterion 1.3.1
  • Success Criterion 1.3.2
• Principle 2
  • Guideline 2.1
  • Success Criterion 2.1.1
    • ...etc.

How to Read the Table of Contents

WCAG document numbers follow the format "Principle.Guideline.Success Criterion".

For example, looking at this WCAG document:
https://www.w3.org/TR/WCAG22/#audio-description-or-media-alternative-prerecorded

The reference number 1.2.3 indicates:

• Under the 1st principle (Perceivable)
• Under the 2nd guideline (Time-based Media)
• The 3rd success criterion (Audio Description or Media Alternative (Prerecorded))

Understanding this structure helps locate items efficiently within the WCAG documentation.

Principles

WCAG is built on four core principles.

Principle	Description
Perceivable	Information and UI components must be presentable to users in ways they can perceive.
Operable	User interface components and navigation must be operable.
Understandable	Information and operation must be understandable.
Robust	Content must be robust enough to work with current and future technologies.

These principles are sometimes referred to as the POUR principles.

If you would like to learn more about the principles, please also read the following article.

Understanding the 4 Principles of WCAG (Perceivable, Operable, Understandable, Robust)

OE Haruki ・ Feb 11

#a11y #wcag

Guidelines

Under each principle, guidelines define goals for improving accessibility. WCAG 2.2 contains 13 guidelines.

Guidelines provide context and purpose for understanding specific success criteria.
While principles represent abstract concepts, guidelines provide general directions for achieving these principles.
(The specific implementation details are covered in the success criteria.)

For example, under the "Perceivable" principle, these guidelines are provided:

• Text Alternatives: Provide text alternatives for non-text content.
• Time-based Media: Provide alternatives for time-based media.
• Adaptable: Create content that can be presented in different ways without losing structure.
• Distinguishable: Make it easier for users to see and hear content.

Success Criteria

While guidelines provide context and purpose, success criteria are specific, testable requirements.
They serve as the basis for determining WCAG conformance.

Three Conformance Levels

Success criteria are categorized into three conformance levels,
indicating different degrees of web content accessibility.

Level A

• Meets minimum standards
• Must satisfy all Level A success criteria
• Meets basic requirements but may still present barriers for some users

Level AA

• Target level for most organizations and government agencies
• Must satisfy all Level A and AA success criteria
• Makes content accessible to most users
• Widely adopted as legal requirements and industry standards

Level AAA

• Represents the highest standard
• Must satisfy all Level A, AA, and AAA success criteria
• Very challenging to achieve and may not be possible in all situations
• Not recommended as a general policy for entire sites

Implementation Example

Success criteria provide practical standards for web development.
Here's an example:

Success Criterion 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.¹

To meet this criterion, implement something like:

<img src="logo.png" alt="W3C" />

This implementation satisfies the success criterion by providing alt text (text alternative) for the image (non-text content).

Supporting Documents

Supporting documents exist below success criteria to provide detailed explanations and implementation guidance.

https://www.w3.org/WAI/WCAG22/Understanding/

For example, the following page explains the intent, benefits, examples, and techniques for "Success Criterion 1.1.1 Non-text Content":

https://www.w3.org/WAI/WCAG22/Understanding/non-text-content

Difference Between Supporting Documents and Success Criteria

Success criteria define "requirements to be met" for ensuring accessibility.
These are normative parts used to evaluate WCAG compliance.
Supporting documents provide "supplementary information" to help understand and implement the criteria.
These are non-normative materials used as references.

Success Criteria

• Normative
• Provides WCAG conformance criteria
• Mandatory requirements

Supporting Documents

• Non-normative
• Supports understanding and implementation
• Explanations, examples, reference information (including failures)

WCAG Versions and Evolution

WCAG has evolved with technological advances while maintaining its core purpose of "making web content accessible to all."

WCAG 2.1 and 2.2 are backward compatible with previous versions.
Conforming to WCAG 2.2 automatically means conformance to WCAG 2.1 and 2.0.

Version	Year	Key Features
1.0	1999	Initial version. HTML/CSS focused with 14 guidelines.
2.0	2008	Technology-agnostic approach with 4 principles, 12 guidelines, 61 success criteria.
2.1	2018	Added 17 success criteria focusing on mobile devices, low vision, and cognitive disabilities.
2.2	2023	Added 9 success criteria including authentication methods and focus indicators.
3.0	Draft	Considering changes to evaluation metrics and conformance levels.

---

1. "Web Content Accessibility Guidelines (WCAG) 2.2", W3C, October 5, 2023, https://www.w3.org/TR/WCAG22/#non-text-content (accessed 2024-12-27) ↩