What Is WCAG?
WCAG stands for Web Content Accessibility Guidelines. It is a set of technical standards published by the World Wide Web Consortium (W3C) — the same body that maintains the HTML and CSS specifications. WCAG defines how to make web content accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
WCAG is not a law itself, but it is the standard that most accessibility laws reference. The ADA (US), Section 508 (US federal), the European Accessibility Act (EU), AODA (Canada), and the UK Equality Act all point to WCAG as the measure of web accessibility. When a court says "your website must be accessible," what they usually mean is "your website must conform to WCAG Level AA."
WCAG Versions
WCAG has evolved through several versions. Each version adds new success criteria while preserving backward compatibility:
- WCAG 2.0 (2008) — The foundation. 12 guidelines, 61 success criteria. Still referenced by some laws (e.g., Section 508 originally referenced 2.0).
- WCAG 2.1 (2018) — Added 17 new success criteria focusing on mobile accessibility, low vision, and cognitive disabilities. This is the version most current laws reference (including the DOJ's 2024 ADA rule).
- WCAG 2.2 (2023) — The current version. Added 9 new success criteria with a focus on cognitive accessibility, authentication, and consistent help. This is what Accesseon tests against.
WCAG 3.0 is in early draft and will eventually replace the 2.x line with a different scoring model, but it is years away from adoption. For all practical purposes, WCAG 2.2 Level AA is the standard you should target today.
Conformance Levels: A, AA, AAA
Every WCAG success criterion is assigned one of three levels:
- Level A — The absolute minimum. Failure to meet Level A means the site has fundamental barriers that make it impossible for some users. Example: images with no alt text (SC 1.1.1), no keyboard access (SC 2.1.1).
- Level AA — The legal baseline. This is what courts, regulators, and procurement standards require. It covers most practical accessibility needs. Example: 4.5:1 colour contrast (SC 1.4.3), visible focus indicators (SC 2.4.7).
- Level AAA — Enhanced accessibility. Recommended for organisations that want the best possible experience, but not legally required. Very few websites achieve full AAA conformance. Example: 7:1 colour contrast (SC 1.4.6), sign language for video (SC 1.2.6).
Target Level AA. It covers all Level A criteria (AA is a superset of A) and satisfies all major legal requirements worldwide.
Principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive. This means content cannot depend solely on a single sense (sight, hearing).
Guideline 1.1 — Text Alternatives
SC 1.1.1 Non-text Content (Level A): Every image, icon, chart, and media element must have a text alternative. For <img> elements, this is the alt attribute. For SVG icons, use aria-label or <title>.
Example: A product photo should have alt="Blue running shoes, side view". A decorative divider should have alt="" (empty alt).
Guideline 1.2 — Time-Based Media
SC 1.2.1–1.2.5 (Levels A & AA): Pre-recorded audio needs transcripts. Pre-recorded video needs captions and audio descriptions. Live video needs captions.
Common mistake: Auto-generated YouTube captions are not sufficient for compliance — they contain errors and lack punctuation. Captions must be reviewed and accurate.
Guideline 1.3 — Adaptable
Content must be structured so it can be presented in different ways without losing information. This means using semantic HTML: headings (<h1>–<h6>), lists (<ul>, <ol>), tables with <th>, and form labels. Do not use visual styling alone to convey structure.
SC 1.3.1 Info and Relationships (Level A): Headings must use heading tags, not just bold text. Tables must have headers. Forms must have labels.
Guideline 1.4 — Distinguishable
SC 1.4.1 Use of Colour (Level A): Colour cannot be the only way to convey information. Error messages cannot rely on red colour alone — they must also have text like "Error" or an icon.
SC 1.4.3 Contrast (Minimum) (Level AA): Normal text must have a 4.5:1 contrast ratio. Large text (18pt+) must have 3:1. This is the single most-failed WCAG criterion — over 81% of websites fail it. Use our color contrast checker to test your colours.
SC 1.4.4 Resize Text (Level AA): Text must be resizable to 200% without loss of functionality. Test by zooming your browser to 200%.
SC 1.4.10 Reflow (Level AA): Content must reflow at 320px width without horizontal scrolling. Test by narrowing your browser window.
SC 1.4.11 Non-text Contrast (Level AA): UI components (buttons, form borders, focus rings) must have at least 3:1 contrast against their background.
Principle 2: Operable
Users must be able to operate the interface. This means all functionality must work with a keyboard, users must have enough time, and navigation must be predictable.
Guideline 2.1 — Keyboard Accessible
SC 2.1.1 Keyboard (Level A):Every interactive element must be reachable and operable using only the keyboard. Tab moves focus forward, Shift+Tab backward, Enter/Space activates, Escape closes. If you can't Tab to it, keyboard users can't use it.
SC 2.1.2 No Keyboard Trap (Level A): Focus must never get stuck. If a user Tabs into a component, they must be able to Tab out.
Guideline 2.2 — Enough Time
SC 2.2.1 Timing Adjustable (Level A): If there is a time limit (session timeout, form countdown), users must be able to extend or turn it off.
SC 2.2.2 Pause, Stop, Hide (Level A): Auto-playing carousels, animations, and scrolling content must have a visible pause button.
Guideline 2.3 — Seizures and Physical Reactions
SC 2.3.1 Three Flashes (Level A): Nothing on the page should flash more than three times per second. This can trigger photosensitive seizures.
Guideline 2.4 — Navigable
SC 2.4.1 Bypass Blocks (Level A): Provide a "Skip to main content" link so keyboard users can bypass repeated navigation.
SC 2.4.2 Page Titled (Level A): Every page needs a descriptive <title>.
SC 2.4.3 Focus Order (Level A): Tab order should be logical — usually left-to-right, top-to-bottom. Never use tabindex greater than 0.
SC 2.4.4 Link Purpose (Level A): Link text must describe where the link goes. "Click here" and "Read more" without context are failures.
SC 2.4.7 Focus Visible (Level AA): The keyboard focus indicator must be clearly visible. Never add outline: none without a replacement.
Guideline 2.5 — Input Modalities
SC 2.5.8 Target Size (Minimum) (Level AA — new in 2.2): Interactive targets must be at least 24×24 CSS pixels, or have sufficient spacing. This helps users with motor impairments.
Principle 3: Understandable
Users must be able to understand the content and how the interface works.
Guideline 3.1 — Readable
SC 3.1.1 Language of Page (Level A): The <html> element must have a lang attribute (e.g., lang="en"). Without it, screen readers may pronounce content using the wrong language rules.
SC 3.1.2 Language of Parts (Level AA): Passages in a different language (e.g., a French quote on an English page) must be marked with the lang attribute.
Guideline 3.2 — Predictable
SC 3.2.1 On Focus (Level A): Receiving focus should not trigger a change of context (page navigation, form submission).
SC 3.2.2 On Input (Level A):Changing a form element's value should not automatically submit or navigate.
SC 3.2.3 Consistent Navigation (Level AA): Navigation menus should appear in the same order on every page.
Guideline 3.3 — Input Assistance
SC 3.3.1 Error Identification (Level A): When an input error is detected, the item must be identified and the error described in text.
SC 3.3.2 Labels or Instructions (Level A): Form inputs must have labels. Placeholder text is not a label.
SC 3.3.3 Error Suggestion (Level AA): If an error is detected and suggestions for correction are known, provide them.
SC 3.3.7 Redundant Entry (Level A — new in 2.2): Information the user has already entered should be auto-populated or available for selection rather than requiring re-entry.
SC 3.3.8 Accessible Authentication (Minimum) (Level AA — new in 2.2): Authentication must not rely on cognitive function tests (CAPTCHAs, memorisation, puzzles) unless an alternative is provided.
Principle 4: Robust
Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.
SC 4.1.2 Name, Role, Value (Level A): Every UI component must have an accessible name and its role must be programmatically determinable. Native HTML elements get this for free — custom components need ARIA.
SC 4.1.3 Status Messages (Level AA): Messages that provide information about action outcomes (success, error, progress) must be programmatically determinable via role="status" or aria-live regions.
What's New in WCAG 2.2
WCAG 2.2, published in October 2023, added 9 new success criteria (and removed one from 2.1). The most impactful additions for most websites are:
- SC 2.4.11 Focus Not Obscured (Minimum) (AA) — Focused elements must not be completely hidden behind sticky headers, modals, or cookie banners.
- SC 2.5.7 Dragging Movements (AA) — Any action achieved by dragging must also be achievable with a single pointer action (click/tap).
- SC 2.5.8 Target Size (Minimum) (AA) — Touch/click targets must be at least 24×24 CSS pixels or have sufficient spacing.
- SC 3.3.7 Redundant Entry (A)— Don't ask users to re-enter information they already provided.
- SC 3.3.8 Accessible Authentication (Minimum) (AA) — No cognitive function tests for login unless an alternative exists.
- SC 3.2.6 Consistent Help (A) — Help mechanisms (chat, FAQ, phone) must appear in the same relative location on every page.
How to Test Your Website Against WCAG 2.2
A practical testing approach combines automated and manual testing:
- Automated scan first — Run a free Accesseon scan. It checks against 50+ WCAG criteria using axe-core and flags exact elements with fix suggestions. Automated tools catch ~30-40% of WCAG issues, including the most commonly cited violations.
- Keyboard test — Tab through every page. Can you reach every interactive element? Can you see where focus is? Can you escape from modals?
- Screen reader test — Use NVDA (Windows, free), VoiceOver (Mac/iOS, built-in), or TalkBack (Android, built-in). Navigate your key user flows.
- Zoom test — Set your browser to 200% zoom. Is any content cut off or overlapping? Does the layout still work at 320px width?
- Colour contrast audit — Use our colour contrast checker or run a full scan that tests every text element.
No single tool catches everything. The combination of automated scanning, keyboard testing, and screen reader testing covers the vast majority of real-world accessibility barriers.