{"id":"l-a11y-1-3","courseId":"web-accessibility","lang":"en","kind":"lesson","summary":"Read WCAG 2.2 the way auditors do, apply the six success criteria new at levels A and AA, and know which laws point to it in 2026.","html":"

“Is it accessible?” is a question with no answer until you agree on what accessible means. For web content, the agreed answer is the Web Content Accessibility Guidelines (WCAG), published by the W3C. Laws in Europe, the US and many other countries point to it, and audit reports are written in its language. You don’t need to memorise it, but you do need to read it fluently.

\n

How WCAG is organised

\n

WCAG has four layers, from broad to testable:

\n
    \n
  1. Four principles, remembered as POUR. Content must be Perceivable (users can sense it), Operable (users can work the controls), Understandable (users can make sense of it and predict it), and Robust (it works with current and future assistive technology).
    2. \n
  2. 13 guidelines under those principles, such as 1.1 Text Alternatives or 2.1 Keyboard Accessible.
    3. \n
  3. Success criteria under each guideline: the testable rules. Each has a number, a name and a level: A, AA or AAA. For example, “1.4.3 Contrast (Minimum), AA”.
    4. \n
  4. Understanding documents and techniques that explain intent and show known ways to pass or fail.
    5. \n
\n

Conformance is claimed at a level, and each level includes the ones below it. Level AA is the target used by nearly every law and company policy, and it is the target for Ticketly. W3C itself advises against requiring AAA for whole sites, because some AAA criteria can’t be met for all kinds of content.

\n\n

What changed in 2.2

\n

WCAG 2.0 came out in 2008, 2.1 in 2018 and 2.2 in October 2023. Each version is backwards compatible: a page that meets 2.2 also meets 2.1 and 2.0. Version 2.2 removed one criterion, 4.1.1 Parsing, because modern browsers handle broken markup consistently. It added nine. Six are at level A or AA, and every one of them catches a real Ticketly bug:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CriterionLevelTicketly today
2.4.11 Focus Not Obscured (Minimum)AAThe sticky cookie banner hides focused links at the bottom of the screen.
2.5.7 Dragging MovementsAAThe price-range slider only works by dragging.
2.5.8 Target Size (Minimum)AAThe ticket quantity “−” and “+” buttons are 16 px squares, side by side.
3.2.6 Consistent HelpAThe “Contact us” link moves between pages.
3.3.7 Redundant EntryACheckout asks for the email address again on step 3.
3.3.8 Accessible Authentication (Minimum)AAThe account password field blocks paste.

Target size deserves a closer look because it is easy to measure. A pointer target must be at least 24 by 24 CSS pixels, unless it has enough spacing (a 24 px circle centred on it doesn’t overlap another target), an equivalent control elsewhere meets the size, it sits inline in a sentence, its size is set by the browser, or that exact presentation is essential (a legally required form, say). Making Ticketly’s quantity buttons 24 px squares, or spacing them apart, fixes it:

\n
ticketly/styles.css
.qty button {\n  min-inline-size: 24px;\n  min-block-size: 24px;\n}
\n

Accessible authentication is the one that surprises teams. It says login can’t depend on a “cognitive function test”, such as remembering a password or transcribing a code, unless there is an alternative or a mechanism to help. Allowing paste and autofill so password managers work is usually enough. Blocking paste on a password field fails it.

\n\n

The law, briefly

\n

This is the landscape in 2026, not legal advice; check with your own counsel for specifics.

\n\n

The practical conclusion is simple: build to WCAG 2.2 AA and you meet every one of these, because 2.2 includes everything in 2.1 and 2.0. WCAG 3.0 is in development as a W3C working draft with a different scoring model; it isn’t a standard yet, and nothing in law requires it.

\n

Now that you can read the rulebook, Section 2 starts the actual repair work on Ticketly, beginning with the skeleton of the page: landmarks and headings.

\n","toc":[{"id":"sec-1","text":"How WCAG is organised","level":2},{"id":"sec-2","text":"What changed in 2.2","level":2},{"id":"sec-3","text":"The law, briefly","level":2}],"takeaways":["WCAG is organised as four principles (perceivable, operable, understandable, robust), then guidelines, then testable success criteria at levels A, AA and AAA.","Level AA is the target almost every law and policy uses; AAA is aspirational and not required for whole sites.","WCAG 2.2 added focus not obscured, dragging alternatives, a 24 by 24 pixel minimum target size, consistent help, redundant entry and accessible authentication.","The European Accessibility Act has applied since 28 June 2025, and US rules under the ADA point to WCAG 2.1 AA, so WCAG 2.2 AA covers both."],"further":[{"title":"W3C: What's New in WCAG 2.2","url":"https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/"},{"title":"W3C: How to Meet WCAG 2.2 (Quick Reference)","url":"https://www.w3.org/WAI/WCAG22/quickref/"},{"title":"W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"}],"quiz":[{"q":"

Ticketly’s sticky “Your basket” footer covers the whole of a focused “Add to calendar” link when you Tab to it near the bottom of the screen. Which WCAG 2.2 criterion does this fail?

","options":[{"text":"2.4.7 Focus Visible","why":"The link does have a focus indicator; it is hidden behind other content. Focus Visible is about whether an indicator exists at all."},{"text":"2.5.8 Target Size (Minimum)","why":"Target size is about how big the pointer target is, not whether it is covered while it has keyboard focus."},{"text":"1.4.10 Reflow","why":"Reflow is about content fitting a 320 CSS pixel wide viewport without two-dimensional scrolling, not about overlapping sticky elements."},{"text":"2.4.11 Focus Not Obscured (Minimum)","why":"Correct. At level AA, a focused component must not be entirely hidden by author-created content such as sticky headers, footers or banners."}],"answer":3},{"q":"

Which change satisfies 2.5.7 Dragging Movements for Ticketly’s price-range slider, which currently only works by dragging its handle?

","options":[{"text":"Make the handle larger so it is easier to grab","why":"A bigger handle still requires a drag. People with tremor or using a head pointer may not be able to hold a press while moving at all."},{"text":"Add a tooltip that says “drag to adjust”","why":"Instructions don’t remove the need to drag. The criterion asks for a way to do the same thing with single clicks or taps."},{"text":"Let users click points on the track or use plus and minus buttons to set the value","why":"Correct. A single-pointer alternative, such as clicking a point on the track or pressing buttons, meets the criterion."}],"answer":2},{"q":"

A product manager asks, “Do we have to meet every AAA criterion to be compliant?” What is the accurate answer?

","options":[{"text":"No; the usual target is Level AA, and W3C itself says AAA is not recommended as a general policy for entire sites","why":"Correct. Some AAA criteria can’t be met for all content, so they are used selectively where they matter most."},{"text":"Yes, because WCAG conformance means meeting every success criterion at every level","why":"Conformance is claimed at a level. Laws and policies almost always require Level AA, which means all A and AA criteria."},{"text":"No, Level A is enough for EU and US law","why":"The EU harmonised standard and US rules reference Level AA, which includes every A and AA criterion."}],"answer":0},{"q":"

Which Ticketly login flow meets 3.3.8 Accessible Authentication (Minimum)?

","options":[{"text":"The password field blocks paste, so the password must be typed from memory","why":"Blocking paste stops password managers, which forces a memory test. That fails the criterion."},{"text":"The password field allows paste and autofill, and there is a “email me a sign-in link” option","why":"Correct. Password managers and email links mean nobody has to memorise or transcribe anything."},{"text":"Users must retype a six-character code shown as a distorted image, with no alternative","why":"Transcribing a distorted code is a cognitive function test, and without an alternative it fails the criterion."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["seat-drag","focus-hidden","tiny-qty","focus-thin","reverse-code","inline-link"],"correct":["seat-drag","focus-hidden","tiny-qty","reverse-code"],"title":"Triage Ticketly against WCAG 2.2 AA","prompt":"

A tester sent you six findings from Ticketly’s checkout. Your team targets WCAG 2.2 Level AA. Select every finding that is a real AA (or A) failure and belongs in the bug tracker. Leave out anything that passes, or that only fails a AAA criterion.

\n","hints":["For each finding, name the success criterion first, then check its level in the quick reference.","Focus Appearance (2.4.13) is AAA. Target Size (Minimum) has an exception for links inside a sentence.","Four of the six are AA or A failures."],"explanation":"

Four findings fail Level AA: the drag-only seat range (2.5.7 Dragging Movements), the banner that fully covers a focused button (2.4.11 Focus Not Obscured), the 16 px adjacent quantity buttons (2.5.8 Target Size), and the reverse-the-letters login challenge, a cognitive function test with no alternative (3.3.8 Accessible Authentication). The thin dotted focus ring is visible, so it passes 2.4.7 Focus Visible; the stricter 2.4.13 Focus Appearance is AAA. The small link inside the terms paragraph is covered by the inline exception in 2.5.8. Triage matters: a report that mixes AAA nice-to-haves with AA failures gets ignored.

\n","checkLabels":{},"optionText":{"seat-drag":{"text":"Choosing a block of seats only works by dragging a selection rectangle across the seat map.","why":"Fails 2.5.7 Dragging Movements (AA). Users need a single-pointer way, such as clicking seats one at a time."},"focus-hidden":{"text":"When you Tab to the “Checkout” button, the sticky cookie banner covers it completely.","why":"Fails 2.4.11 Focus Not Obscured (Minimum) (AA): the focused component is entirely hidden by author content."},"tiny-qty":{"text":"The ticket quantity “−” and “+” icon buttons are 16 × 16 px and touch each other.","why":"Fails 2.5.8 Target Size (Minimum) (AA). They are under 24 × 24 px and have no spacing to compensate."},"focus-thin":{"text":"The focus ring is a 1 px dotted outline with good contrast against the background.","why":"Passes AA. Focus is visible (2.4.7). Only 2.4.13 Focus Appearance, a AAA criterion, asks for a thicker indicator."},"reverse-code":{"text":"To sign in, users must type the letters of a displayed word in reverse order, with no other option.","why":"Fails 3.3.8 Accessible Authentication (Minimum) (AA): it is a cognitive function test with no alternative or helper."},"inline-link":{"text":"A “refund policy” link inside a paragraph of terms is only 14 px tall.","why":"Passes. Targets inside a sentence or block of text are exempt from 2.5.8 under the inline exception."}}},"words":931,"readMinutes":4}