Skip to main content

WCAG Basics: The Accessibility Standard

If accessibility is the goal, WCAG is the map. Its full name is the Web Content Accessibility Guidelines. It is written by the World Wide Web Consortium (W3C), the same group that standardises HTML, and it is the standard that most laws, policies, and testers around the world rely on.

WCAG can look intimidating: dozens of numbered rules, three levels, and long technical writing. This lesson gives you the shape of it, so you can find your way. You will not memorise every rule. You will learn how it is organised, which rules matter first, and how to read the rest when you need them.


What You Will Learn​

  • What WCAG is, and its versions
  • The structure: principles, guidelines, success criteria, techniques
  • The three levels: A, AA, AAA
  • The rules beginners meet most
  • What is new in WCAG 2.2
  • How conformance works, and how to aim for it in practice

The Big Idea​

index.html
<!DOCTYPE html>
<html lang="en">                                   <!-- 3.1.1 Language of Page -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Order bread | The Bread Bin</title>       <!-- 2.4.2 Page Titled -->
</head>
<body>
  <a href="#main">Skip to main content</a>         <!-- 2.4.1 Bypass Blocks -->
  <main id="main">
    <h1>Order bread</h1>                           <!-- 1.3.1 Info and Relationships -->
    <img src="loaf.jpg" alt="A golden sourdough loaf"> <!-- 1.1.1 Non-text Content -->

    <label for="email">Email address</label>       <!-- 3.3.2 Labels or Instructions -->
    <input id="email" type="email" autocomplete="email"> <!-- 1.3.5 Input Purpose -->
    <button type="submit">Order</button>           <!-- 2.1.1 Keyboard, 4.1.2 Name, Role, Value -->
  </main>
</body>
</html>

Notice how many WCAG rules are met just by writing ordinary, honest HTML. Use the explorer to filter by principle and level, or search for a topic such as "keyboard" or "colour".

A Short History​

VersionPublishedNotes
WCAG 1.01999The first version, tied to older technology
WCAG 2.02008A new structure, independent of any one technology. Also an international standard
WCAG 2.12018Added rules for mobile, low vision, and cognitive needs
WCAG 2.22023Added rules for focus, dragging, target size, help, and login
WCAG 3.0In developmentA larger redesign. Not yet a finished standard when this was written, so check the W3C

The 2.x versions are backward compatible: a page that meets WCAG 2.2 also meets 2.1 and 2.0, apart from one rule (4.1.1 Parsing) that was removed in 2.2 because modern browsers handle it. Check which version your law or client requires, and whether newer versions are accepted.

How WCAG Is Organised​

WCAG has four layers, from broad to specific:

LayerWhat it isExample
Principles (4)The big goals: Perceivable, Operable, Understandable, RobustPerceivable
Guidelines (13)Themes under each principle1.1 Text Alternatives
Success criteria (about 80 in 2.2)Testable rules, each with a level1.1.1 Non-text Content (Level A)
TechniquesAdvice and examples for meeting criteria, written by W3C. They are not requirements"Use alt on img"

The success criteria are the heart. Each one is written so that a person can check, "pass" or "fail". The numbers follow the pattern principle . guideline . criterion, so 1.4.3 is principle 1 (Perceivable), guideline 4 (Distinguishable), criterion 3 (Contrast).

Techniques​

For each criterion, W3C publishes three kinds of techniques:

  • Sufficient: ways that are known to meet the criterion.
  • Advisory: extra things that go beyond the minimum.
  • Failures: common mistakes that definitely fail the criterion.

You do not have to use the sufficient techniques, but they are a reliable shortcut.

The Three Levels​

LevelMeaningTypical use
AThe minimum. Without these, some people cannot use the page at allAlways required
AAThe standard target. Removes the biggest remaining barriersWhat most laws and policies ask for: A plus AA
AAAThe highest. Excellent, but some rules cannot be met for every kind of contentPick the ones that fit, but do not expect whole-site AAA

Levels are cumulative: to meet AA, you meet all the A criteria and all the AA ones.

Level is not importance

Level A is not "more important" in a simple way. It reflects how essential the rule is, how widely it applies, and how achievable it is without limiting design. Some AA rules (such as contrast) affect a huge number of people.

The Four Principles in More Detail​

1. Perceivable​

People must be able to take in the information with at least one of their senses.

  • Text alternatives for images and other non-text content (1.1.1)
  • Captions and transcripts for audio and video (1.2.x)
  • Structure in the code, not just in the look (1.3.1)
  • Enough contrast, and not colour alone (1.4.1, 1.4.3, 1.4.11)
  • Resizable and reflowing text (1.4.4, 1.4.10, 1.4.12)

2. Operable​

People must be able to use all the controls and navigate the content, however they interact.

  • Everything works with a keyboard (2.1.1), with no traps (2.1.2)
  • Enough time, and control over moving content (2.2.x)
  • No dangerous flashing (2.3.1)
  • Ways to find your way: page titles, skip links, headings, focus order, visible focus (2.4.x)
  • Easy pointer use: no dependence on tricky gestures or tiny targets (2.5.x)

3. Understandable​

People must be able to make sense of the content and how the interface works.

  • Readable: the language is set and marked (3.1.x)
  • Predictable: things behave consistently, and nothing surprising happens on focus or input (3.2.x)
  • Input assistance: labels, clear errors, and suggestions for fixing them (3.3.x)

4. Robust​

The content must work for many tools, now and in the future.

  • Name, role, and value for every control (4.1.2)
  • Status messages announced without moving focus (4.1.3)

What Is New in WCAG 2.2​

WCAG 2.2 added nine criteria at A and AA (and a few at AAA). The ones beginners are most likely to meet:

NumberNameLevelWhat it asks
2.4.11Focus Not Obscured (Minimum)AAA focused item is not completely hidden behind sticky headers or banners
2.5.7Dragging MovementsAAAnything you can drag also has a click or tap alternative
2.5.8Target Size (Minimum)AAClick and tap targets are at least 24 by 24 CSS pixels, or have enough space around them
3.2.6Consistent HelpAHelp links appear in the same place on each page
3.3.7Redundant EntryADo not make people enter the same information twice in one process
3.3.8Accessible Authentication (Minimum)AALogging in does not depend only on remembering or retyping something

In 3.3.8, allowing paste and password managers, and offering other login methods, helps a great deal.

Try It: A Rule You Can Feel (1.4.12 Text Spacing)​

Some people with dyslexia or low vision set their own text spacing to read comfortably. Criterion 1.4.12 says your page must still work when they do. The most common failure is a fixed-height box: the text grows, and the box does not, so words are cut off.

text-spacing.css
/* Fails: the box cannot grow, so extra spacing cuts off the text */
.notice {
  height: 8.5rem;
  overflow: hidden;
}

/* Passes: the box grows with its content */
.notice {
  min-height: 8.5rem;
}

The general lesson: leave room to grow. Avoid fixed heights and overflow: hidden on anything that holds text.

Try It: Which Level?​

Test what you have learned so far:

levels.html
<!-- 3.1.1 Language of Page (A) -->
<html lang="en">

<!-- 3.1.2 Language of Parts (AA) -->
<p>The French say <span lang="fr">bon appétit</span>.</p>

<!-- 4.1.3 Status Messages (AA) -->
<div role="status">3 results found</div>

Conformance: What "Meeting WCAG" Means​

To claim conformance to a level, you must meet the following:

  1. All success criteria at that level (and the levels below it).
  2. Whole pages. You cannot claim conformance for half a page.
  3. Complete processes. If a page is a step in a process (such as checkout), all the steps must conform.
  4. Only accessibility-supported uses of technology, meaning ways that work with real assistive technology.
  5. Non-interference. Technologies that do not meet the rules must not block users from the rest of the page.

Alternatives, such as a separate "accessible version", are allowed in limited cases, but they come with strict conditions, and are rarely a good idea.

Most teams do not claim perfection. Instead, they aim for WCAG 2.2 AA, test regularly, publish an accessibility statement, and fix problems in order of impact.

A Practical Way to Use WCAG​

  1. Decide your target. For most projects, WCAG 2.2 Level AA.
  2. Build with semantic HTML. It meets many criteria automatically.
  3. Use a checklist (like the explorer above) while designing, building, and reviewing.
  4. Test with automatic tools to catch the easy things. They find only part of the problems.
  5. Test by hand: keyboard, zoom, screen reader, and contrast.
  6. Include real users with disabilities when you can.
  7. Record what you find, and fix the highest-impact problems first.
  8. Keep checking. Every new feature is a chance to introduce a new barrier.

Good Habits​

  1. Learn the four principles first, and the numbered rules gradually.
  2. Use semantic HTML, which satisfies many criteria for free.
  3. Read the official wording of any criterion you are unsure about.
  4. Aim for AA, and add AAA rules where they are easy.
  5. Do not confuse a tool's pass with accessibility.
  6. Document your decisions and known issues.
  7. Test at the design stage, not just at the end.
  8. Keep up with new versions.

Accessibility Checklist (A Beginner's Top Ten)​

  • Page lang and a unique <title> (3.1.1, 2.4.2)
  • Alt text for meaningful images, and empty alt for decoration (1.1.1)
  • Headings, lists, and landmarks that reflect the real structure (1.3.1)
  • Contrast of at least 4.5 to 1 for text, and 3 to 1 for controls (1.4.3, 1.4.11)
  • Information not shown by colour alone (1.4.1)
  • Everything works with the keyboard, with no traps (2.1.1, 2.1.2)
  • A visible focus, and a logical order (2.4.7, 2.4.3)
  • Labels for every field, and helpful error messages (3.3.1, 3.3.2, 3.3.3)
  • The page works at 200 percent zoom and 320 CSS pixels wide (1.4.4, 1.4.10)
  • Controls have a name, a role, and a state (4.1.2)

Security and Privacy Notes​

  • A compliance report may expose details of your system. Do not publish internal addresses, tools, or unfixed vulnerabilities in an accessibility statement.
  • Accessible authentication (3.3.8) is a security gain, not a risk. Allowing paste and password managers leads to stronger, unique passwords. Do not block paste in password fields.
  • Time limits (2.2.1) should be extended, not removed, for secure sessions. Warn people, and let them continue. Never silently log someone out in the middle of a form.
  • Do not log assistive technology use. Information about how people use your site can reveal a disability, which is sensitive personal data.
  • Third-party "instant compliance" tools may load scripts and collect data. Review what they do before adding them, and remember that they do not guarantee conformance.
  • Error messages (3.3.1) should help without giving away secrets, such as whether a certain email address has an account.

Global Audience Notes​

  • WCAG is used worldwide. Many countries reference or adopt it. The European standard EN 301 549 includes WCAG 2.1 AA for web content, and many national laws point to WCAG levels. Laws change, so check your region. This is not legal advice.
  • WCAG has official and unofficial translations in many languages. Using one can help local teams, but check that it matches the English wording for exact requirements.
  • Language of page and parts (3.1.1, 3.1.2) are especially important on multilingual sites.
  • Reading level: the Level AAA criterion for reading level is about simple language. Plain writing is useful in every language.
  • Different writing systems may need different spacing and sizes. Test text spacing and zoom in each script you support.
  • Networks and devices vary. An accessible page is usually a light one, and that helps people on limited connections.

Common Mistakes to Avoid​

  1. Believing WCAG is only for large companies.
  2. Treating A as enough, when most policies expect A and AA together.
  3. Relying only on an automatic score.
  4. Memorising numbers instead of understanding the reasons.
  5. Fixed heights and widths that break text spacing and zoom.
  6. Contrast measured once, and then broken by a new colour.
  7. Dragging, hover, or gestures as the only way to do something.
  8. Hiding the focus, or covering it with a sticky header.
  9. Tiny tap targets next to each other.
  10. Making people retype information, or remember a code, to log in.
  11. Claiming conformance for pages you have not tested.
  12. Forgetting to retest after changes.

Practice Time​

Try these in your browser and your editor:

  1. Use the explorer, and list every Level A criterion about keyboards or focus.
  2. Find three criteria that are new in WCAG 2.2, and explain each in your own words.
  3. Use the text spacing test, and fix the failing box in your own CSS.
  4. Pick a page you built, and check it against the "top ten" list above.
  5. Open the W3C's official "How to Meet WCAG" quick reference, and find criterion 1.4.3.
  6. Read the "Understanding" document for one criterion, and note one technique and one failure.
  7. Check the size of the smallest button on one of your pages. Is it at least 24 by 24 CSS pixels?
  8. Try logging in to a site with a password manager. Does it work?
  9. Write a short accessibility statement for an imaginary site, with a contact address for reporting problems.
  10. Bonus: compare what your country's law says about accessibility with the WCAG level it requires.

Quick Recap​

Click a question to check your answer.

1. What are the four WCAG principles?

Perceivable, Operable, Understandable, and Robust, remembered as POUR.

2. What is a success criterion?

A testable rule in WCAG, with a number, a name, and a level (A, AA, or AAA). For example, 1.4.3 Contrast (Minimum) at level AA.

3. Which level do most laws and policies require?

Level AA, which includes all the Level A criteria as well.

4. Are WCAG techniques requirements?

No. Techniques are helpful ways to meet the criteria, written by W3C. Only the success criteria are requirements.

5. Name two things that are new in WCAG 2.2.

For example, Target Size (Minimum) of 24 by 24 CSS pixels, Dragging Movements needing an alternative, Focus Not Obscured, Consistent Help, Redundant Entry, and Accessible Authentication.

6. Why should you avoid fixed-height text boxes?

When people increase text spacing or size, the text grows, and a fixed-height box cuts it off. That fails text spacing and resize rules.

Key Takeaways​

  • WCAG is the W3C's international standard for accessible web content. The current version is 2.2.
  • It has 4 principles, 13 guidelines, and about 80 success criteria, plus techniques that help but are not required.
  • Levels A, AA, AAA are cumulative. AA is the usual target.
  • Many criteria are met by honest, semantic HTML: language, title, headings, labels, buttons, and links.
  • WCAG 2.2 added rules for focus, dragging, target size, consistent help, redundant entry, and authentication.
  • Conformance applies to whole pages and complete processes.
  • Use automatic tools, manual tests, and real people. No single method is enough.
  • Leave room to grow: avoid fixed heights and clipped text.

Now see how structure helps everyone, with Semantic Accessibility.