WCAG in plain language
The four principles behind the guidelines, what the conformance levels mean, and the failures that account for most real-world barriers.
Four principles, no jargon
WCAG is a long document built on four ideas. Almost every success criterion is a specific way of applying one of them, and understanding the ideas lets you judge new situations that no checklist covers.
| Principle | In one sentence | Typical failure |
|---|---|---|
| Perceivable | Information must reach the user through some sense | A chart described only by colour, an image with no text alternative |
| Operable | Every control must be usable with keyboard, touch and assistive input | A menu that only opens on hover |
| Understandable | Content and behaviour must be predictable and legible | An error message that says "invalid input" with no explanation |
| Robust | It must work with current and future user agents | A custom dropdown built from divs that exposes nothing to a screen reader |
Levels and what they cost
Level A is the minimum - failing it means some users simply cannot use the site. Level AA is the realistic target and the one most legal requirements reference: contrast, resize, keyboard access, labels, focus visibility. Level AAA is aspirational and not required site-wide; it includes things like sign-language versions of media.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Order history</title>
</head>
<body>
<!-- first tab stop on every page: let keyboard users skip the menu -->
<a class="skip-link" href="#main">Skip to main content</a>
<nav aria-label="Main">
<a href="/">Home</a>
<a href="/orders">Orders</a>
</nav>
<main id="main">
<h1>Order history</h1>
</main>
</body>
</html>- Text contrast of at least 4.5:1 for normal text and 3:1 for large text is the single most commonly failed criterion.
- Everything must still work at 200% zoom and in a 320 px wide viewport.
- Never convey meaning with colour alone - add text, an icon or a pattern.
- Every form input needs a programmatically associated label, not just placeholder text.
Where to start on an existing site
- Try to complete the primary task using only the Tab, Shift+Tab, Enter and Space keys. Note every point where you get stuck.
- Check every image: decorative ones get an empty
alt, informative ones get a description of their purpose. - Run one automated scan to catch the mechanical issues (missing labels, contrast, duplicate ids).
- Zoom to 200% and check for content that is clipped or that requires horizontal scrolling.
- Fix the primary flow first, then the template, then the long tail.
💡
Automated tools find roughly a third of accessibility problems, and they are the easy third. A keyboard pass and one screen-reader session find the issues that actually block people.
FAQ
Is accessibility only for people with disabilities?
No. Captions help in noisy rooms, keyboard access helps power users, big targets help on phones, and clear labels help everyone. It is ordinary usability with a legal floor under it.
How do I know which level to target?
Level AA. It is achievable, it is what procurement and regulation usually demand, and the remaining AAA criteria are best added where they make sense rather than everywhere.
Related
Semantic HTML and keyboard access
Last refreshed 2026-09-18.