Accessibility Standards

All in one: every standard, principle and number, side by side

What this example compares

What WCAG is: Web Content Accessibility Guidelines (W3C, WAI) vs the wrong names; versions 2.0 vs 2.1 vs 2.2
How WCAG is built: principle vs guideline vs success criterion; reading 1.4.3
POUR: Perceivable vs Operable vs Understandable vs Robust, with a click-to-reveal scenario quiz
Perceivable in HTML: alt vs no alt; <track kind="captions"> and a transcript
Operable in HTML: <button> vs a <div>; focus ring vs none; the skip link
Understandable in HTML: lang vs none; <label for> vs placeholder; clear vs vague error
Robust in HTML: native checkbox vs a drawn tick; unique vs duplicate id; name, role, value
Levels: A inside AA inside AAA, and the “Level B” trap
Contrast: 1 : 1 to 21 : 1; normal (4.5 : 1) vs large text (3 : 1); AA vs AAA (7 : 1)
Beyond text: non-text contrast 3 : 1; colour only vs colour + words; zoom to 200%
ARIA's first rule: <button> vs <div role="button"> vs <button role="button">
ARIA words: aria-label vs aria-labelledby vs aria-describedby vs aria-hidden; states aria-expanded, aria-checked
The family of standards: WCAG vs WAI-ARIA vs ATAG vs UAAG
The law: India (RPwD Act 2016, GIGW, IS 17802) vs USA (ADA, Section 508) vs EU (EN 301 549)
Testing: automated vs keyboard vs screen reader vs zoom + contrast vs validate

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fifteen panels of labelled boxes. Panel 3 has a second row of four questions that open when clicked. In panel 4 the two campus pictures look exactly alike, although only the first has alt text. Panel 6 shows the same Hindi greeting twice, again identical to the eye. Panel 8 shows box A inside box AA inside box AAA. Panel 9 has three rows of the line “Asha scored 82” or “Rahul 76”: the first card’s text is invisible, white on white, and in the last row the same grey appears small, large, and bold. In panel 10 the colour-only card marks the phone box with only a red border, while its neighbour adds “✗ Error: phone needs 10 digits.” Panels 11 and 12 show buttons and labels that look ordinary: what ARIA changes is heard, not seen. There is no Console panel: the page has no JavaScript and prints nothing.

Quick check: in panel 9, why does the same grey #949494 fail in one card and pass in the next?

Because WCAG sets the rule by text size. #949494 on white is 3 : 1. Normal text needs 4.5 : 1 at Level AA, so it fails at 13px. Large text (at least 18pt, about 24px, or 14pt bold) needs only 3 : 1, so the same colour passes at 24px or 19px bold.