Skip to main content

The A11y Path

This blog aims to cover: W3C Guidelines, Assistive Technologies (AT), European Accessibility (EN 301 549), and more.

Understanding WCAG

Published

#was #wcag #tutorial

So what is WCAG (W3C Accessibility Guideline)?

WCAG which stands for Web Content Accessibility Guidelines, a set of guidelines from the W3C (World Wide Web Consortium) designed to provide guidelnes that help ensure web platforms are accessible.

The name might seem self-explanatory (it didn’t seem that clear to me earlier, lol), but WCAG provides specific, structured guidance to help make the web inclusive.

How WCAG Works

WCAG isn't static—it gets updated over time. The current version is WCAG 2.2, and importantly, new versions are backward-compatible so you don’t need to relearn old versions just follow the latest guidelines.

WCAG Structure: Layers of Guidance

The WCAG framework follows a layered structure:

Principles → Guidelines → Success Criteria (SC) → Conformance Levels → Techniques

Each layer builds on the previous one, making accessibility guidance more actionable.

WCAG Principles (POUR)

  1. Perceivable: Information and UI components must be presented in ways users can perceive (e.g., text alternatives for images).
  2. Operable: Users must be able to navigate and interact with the interface (e.g., keyboard navigation).
  3. Understandable: The interface must be clear, predictable, and easy to understand.
  4. Robust: Content should be compatible across different technologies, including browsers, assistive technologies (AT), and future devices.

Note: If your web platform doesn’t meet these principles, it's not truly accessible.

Each Principle contains Guidelines that help meet its goal. For example, under the Perceivable principle, Guideline 1.1 - Text Alternatives states that non-text content must have a text alternative for users who can’t see or hear it.

To make this more actionable, WCAG provides Success Criteria (SC): SC 1.1.1 - Non-text Content (Level A) Requires all non-text content should have a text alternative (except for things like decorative images or CAPTCHA).

Every Success Criterion (SC) has a Conformance Level (A, AA, AAA), which tells you how essential it is for accessibility.

WCAG Conformance Levels: A, AA, AAA

Conformance levels define how well a website or app meets WCAG accessibility standards:

  • A – This is the minimum level of conformance, in other words, the least you can do to ensure your website meets the accessibility standard. If your website fails Level A criteria, it's likely completely inaccessible for disabled users.
  • AA: The recommended standard of conformance, this includes all A + AA SCs, most people and organization aim for this
  • AAA: The highest level of conformance, includes A + AA + AAA SCs, However, this level isn't always pratical and sometimes could be unnecessary for your project

So, if you ever see "Our website meets WCAG 2.2 AA", now you know what it means!

Techniques: How to Meet Success Criteria

Each SC have techniques you can follow, they are recommendations on how to meet the SC. For example, for SC 1.1.1 Non-text content (Level A) one technique is using the alt attribute on img elements to provide text alternatives for images.

Techniques aren’t mandatory (non-normative), but they’re best practices to help meet WCAG requirements.

What's with the numbering?

If you ever wonder why WCAG uses numbered labels like 1.1.1 or 2.1.1. We use the numbers to identify which principle a guideline or SC fall under. Here's how to read them:

1.1.1 → Principle 1: Perceivable → Guideline 1.1: Text Alternatives → SC 1.1.1: Non-text Content

2.1.1 → Principle 2: Operable → Guideline 2.1: Keyboard Accessible → SC 2.1.1: Keyboard

So if a user gets trapped in a modal and can’t exit using the keyboard, that means the site fails Principle 2 (Operable) and Guideline 2.1 (Keyboard Accessible).

Do We Need to Memorize All WCAG Guidelines?

Well, if you're like Mike Ross or Sheldon Cooper then absolutely!

But realistically, no, you don’t need to memorize everything. Instead, focus on understanding the principles and guidelines so you can quickly identify accessibility failures, then understand how to reference WCAG 2.2 documentation when needed, You should also try understanding common patterns, so you intuitively apply accessibility best practices.

I hope this made WCAG easier to understand. Thanks for reading

Resources