1 · Perceivable
1.1.1
Non-text Content
A
Hybrid
Every non-text element (image, icon, chart, CAPTCHA) must have a text alternative that serves the same purpose, or be marked as decorative.
Quick test: turn images off in the browser — does the page still make sense?
Web Checker: detects missing alt, empty alt="" on meaningful images, filename-as-alt patterns. Quality of alt text is surfaced in Manual Review.
1.2.1
Audio-only and Video-only (Prerecorded)
A
Manual
Prerecorded audio-only needs a transcript; prerecorded video-only (no sound) needs either a transcript or an audio track describing the visuals.
Quick test: for every media element, is the same information available in text or in an alternate media track?
1.2.2
Captions (Prerecorded)
A
Manual
All prerecorded video with sound needs synchronised captions that include dialogue and important non-speech audio cues.
Quick test: mute the video and turn captions on — can you still follow the story?
1.2.3
Audio Description or Media Alternative (Prerecorded)
A
Manual
Prerecorded video with sound needs either an audio description track or a full text media alternative that covers the visuals.
Quick test: close your eyes and listen — do you miss key information shown only on screen?
1.2.4
Captions (Live)
AA
Manual
All live audio content — webinars, broadcasts, press briefings — needs real-time captions.
Quick test: join the live stream with sound off — do captions appear within a second or two of speech?
1.2.5
Audio Description (Prerecorded)
AA
Manual
Prerecorded video must have an audio description track explaining on-screen action that isn't already in the dialogue.
Quick test: watch with screen off — is the audio description turned on and does it fill the gaps?
1.3.1
Info and Relationships
A
Hybrid
Structure conveyed visually (headings, lists, tables, form labels) must also be programmatically exposed in the markup.
Quick test: use a screen reader's heading list (VoiceOver rotor, NVDA H) — does it match the visual structure?
Web Checker: flags missing form labels, table headers without scope, heading hierarchy gaps (e.g. h2 → h4), empty headings.
1.3.2
Meaningful Sequence
A
Hybrid
When the reading order matters, the DOM order must match the visual order so AT users hear content in the intended sequence.
Quick test: disable CSS — does the content still read in a logical order?
Web Checker: detects common DOM vs. visual mismatches (CSS order, absolute positioning). Full reading-order judgement goes to Manual Review.
1.3.3
Sensory Characteristics
A
Manual
Instructions must not rely on shape, size, colour, or position alone (“click the green button on the right”).
Quick test: search the page copy for “above”, “below”, “left”, “right”, “green”, “red” — any risks?
1.3.4
Orientation
AA
Hybrid
Content must not lock to a single orientation (portrait or landscape) unless the orientation is essential.
Quick test: rotate your phone — does the page rotate too?
Web Checker: detects CSS that locks orientation via media queries.
1.3.5
Identify Input Purpose
AA
Auto
Form fields collecting personal info must declare their purpose via autocomplete tokens (e.g. name, email, tel).
Quick test: inspect every <input> that asks for personal data — is autocomplete set?
Web Checker: detects personal-data fields without autocomplete.
1.4.1
Use of Color
A
Hybrid
Colour must not be the only way to convey information, indicate an action, or distinguish a visual element.
Quick test: convert the page to greyscale — are required fields, errors, and links still obvious?
Web Checker: detects links without underline that rely only on colour, form errors without text or icon.
1.4.2
Audio Control
A
Auto
Audio that starts automatically and plays longer than 3 seconds must have a mechanism to pause, stop, or control volume.
Quick test: look for <audio autoplay> / <video autoplay> without controls.
Web Checker: detects autoplaying media without controls.
1.4.3
Contrast (Minimum)
AA
Hybrid
Body text must have a contrast ratio of at least 4.5:1 against its background; large text (18pt or 14pt bold) at least 3:1.
Quick test: use any contrast picker on body copy, headings, links, and button labels.
Web Checker: computes contrast on real rendered CSS (including dropdowns and accordions). Gradient / image backgrounds go to Manual Review.
1.4.4
Resize Text
AA
Hybrid
Text must be resizable up to 200% without loss of content or functionality, without needing assistive technology.
Quick test: set the browser zoom to 200% — is anything cut off or overlapping?
Web Checker: detects fixed pixel sizes that prevent reflow; visual overflow judgement goes to Manual Review.
1.4.5
Images of Text
AA
Manual
Use real text rather than images of text, except for logos and cases where presentation is essential.
Quick test: right-click an image — can you select the text? If not, it's an image of text.
Content must reflow to a 320 CSS pixel-wide viewport without a two-dimensional scrollbar — except for data tables, maps, and similar.
Quick test: resize your window to 320 px wide at 100% zoom — do you get a horizontal scrollbar on normal content?
Web Checker: runs every page in Puppeteer at 320 px and flags horizontal-scroll failures.
1.4.11
Non-text Contrast
AA
Auto
Interactive UI components (buttons, form borders, focus indicators) and meaningful graphics must have a 3:1 contrast ratio.
Quick test: check the border of unfilled form fields and default buttons against the page background.
Web Checker: analyses borders, icons, and focus indicators for the 3:1 threshold.
1.4.12
Text Spacing
AA
Auto
Content must survive user-applied line-height 1.5, paragraph spacing 2×, letter-spacing 0.12em, and word-spacing 0.16em without content loss.
Quick test: run a text-spacing bookmarklet — does anything clip or overlap?
Web Checker: programmatically applies the required spacing and detects clipped / overlapped content.
1.4.13
Content on Hover or Focus
AA
Hybrid
Tooltips and hover popovers must be dismissible (Esc), hoverable (stay open when moving into them), and persistent (not time-out).
Quick test: hover a tooltip — can you move into it without it closing? Does Esc close it?
Web Checker: detects tooltips without dismiss / hover-persist behaviour; interaction quality is flagged for Manual Review.
2 · Operable
All functionality must be available using a keyboard alone — no mouse-only interactions.
Quick test: unplug the mouse and Tab through the page — can you reach and operate every control?
Web Checker: detects onclick handlers on non-interactive elements, missing tabindex. Full keyboard walkthrough goes to Manual Review.
2.1.2
No Keyboard Trap
A
Manual
Keyboard focus must not get stuck in any part of the page — users must always be able to Tab away.
Quick test: open every modal, dropdown, and embed (iframe, video player) — can Tab always exit?
2.1.4
Character Key Shortcuts
A
Manual
Single-character shortcuts must be off by default, remappable, or only active when a component has focus.
Quick test: does pressing a single letter (j, k, /) trigger an action globally? That's a failure.
2.2.1
Timing Adjustable
A
Manual
Time limits must be adjustable, extendable (×10), or turn-off-able — with a few tightly scoped exceptions.
Quick test: any session timeout? Is the user warned and given a one-click extension?
2.2.2
Pause, Stop, Hide
A
Hybrid
Moving, blinking, or auto-updating content that runs longer than 5 seconds must have a control to pause, stop, or hide.
Quick test: carousels, news tickers, notification toasts — is there a pause button?
Web Checker: flags common carousel / ticker patterns without controls.
2.3.1
Three Flashes or Below Threshold
A
Manual
Nothing on the page must flash more than three times per second — higher rates can trigger seizures.
Quick test: inspect animations, loaders, and video intros for rapid flashes.
2.4.1
Bypass Blocks
A
Auto
A mechanism (skip link, landmark, frame title) must let users bypass repeated blocks like the main navigation.
Quick test: press Tab on page load — does a “Skip to content” link appear first?
Web Checker: detects missing skip-link and missing <main> / landmark regions.
Every page must have a <title> that describes its topic or purpose.
Quick test: look at the browser tab — does the title tell you where you are?
Web Checker: detects missing, empty, or duplicate <title> across the sampled pages.
2.4.3
Focus Order
A
Hybrid
Keyboard focus must move through interactive elements in an order that preserves meaning and operability.
Quick test: Tab through the page — does focus jump around in a way that doesn't match the visual layout?
Web Checker: detects positive tabindex anti-patterns. Order correctness flagged for Manual Review.
2.4.4
Link Purpose (In Context)
A
Hybrid
A link's purpose must be clear from its text, or from text that's programmatically associated (surrounding sentence, parent list item).
Quick test: read just the link text aloud — do you know where it goes?
Web Checker: flags generic link text (“click here”, “read more”), empty links, links that are just URLs.
2.4.5
Multiple Ways
AA
Manual
Each page within a set must be reachable by at least two different means — e.g. navigation menu plus search or sitemap.
Quick test: can you reach a given page both via the menu and via a search or sitemap?
2.4.6
Headings and Labels
AA
Hybrid
Headings and form labels must describe the topic or purpose clearly — not generic (“Section 2”, “Field 3”).
Quick test: use the screen reader heading list — could a stranger guess what each page is about from headings alone?
Web Checker: detects empty and placeholder-only labels; quality of heading text flagged for Manual Review.
2.4.7
Focus Visible
AA
Auto
A visible focus indicator must appear on every keyboard-focusable component.
Quick test: Tab through the page — can you always see where focus is?
Web Checker: detects outline: none / outline: 0 without a replacement indicator.
2.4.11
Focus Not Obscured (Minimum)
AA
Auto
New in 2.2
When an item receives keyboard focus, it must not be entirely hidden behind other content — e.g. a sticky footer or cookie banner.
Quick test: Tab from the top of the page down — does any focused element disappear under a sticky header or footer?
Web Checker: detects focused elements covered by fixed / sticky overlays.
2.5.1
Pointer Gestures
A
Hybrid
Multipoint or path-based gestures (pinch, two-finger swipe, drawing a shape) must have a single-point alternative, unless the gesture is essential.
Quick test: can every gesture-based action be achieved with a single tap or click?
Web Checker: detects common pinch-zoom and two-finger swipe listeners without alternatives.
2.5.2
Pointer Cancellation
A
Auto
Actions must trigger on the up event, not down — so users can move off and cancel.
Quick test: mousedown on a button, move away, release — does nothing happen? Good.
Web Checker: flags mousedown / touchstart handlers that trigger irreversible actions.
2.5.3
Label in Name
A
Auto
For components with visible text, the accessible name must include that text — so voice-control users can say what they see.
Quick test: does the aria-label of a button that reads “Search” actually say “Search”? Not “Submit”?
Web Checker: compares visible text vs. accessible name and flags mismatches.
2.5.4
Motion Actuation
A
Auto
Functionality triggered by device motion (shake, tilt) must have a UI alternative and must be disable-able.
Quick test: any shake-to-undo or tilt-to-scroll? Is there a button for it?
Web Checker: detects devicemotion / deviceorientation listeners without UI alternatives.
2.5.7
Dragging Movements
AA
Auto
New in 2.2
Any drag-based interaction must have a single-pointer alternative (tap, click, arrow keys) unless dragging is essential.
Quick test: every slider, sortable list, drag-and-drop — is there a non-drag way?
Web Checker: detects native and library drag handlers without keyboard / button alternatives.
2.5.8
Target Size (Minimum)
AA
Auto
New in 2.2
Clickable targets must be at least 24×24 CSS pixels, with exceptions for inline targets, spaced targets, UA defaults, and essential small controls.
Quick test: measure small icons (close buttons, pagination) in devtools — are they at least 24 px each side?
Web Checker: measures rendered target boxes and flags anything below 24×24 without an exception.
3 · Understandable
3.1.1
Language of Page
A
Auto
The default human language of the page must be declared via <html lang="...">.
Quick test: view source — is there a lang attribute on <html>?
Web Checker: detects missing or invalid lang attributes.
3.1.2
Language of Parts
AA
Manual
Passages in a different language than the page default must be marked with their own lang attribute.
Quick test: quoted foreign phrases, proper names in other scripts — are they wrapped with lang?
Receiving focus must not trigger a change of context (e.g. auto-submit, new window).
Quick test: Tab through every field — does anything auto-submit or navigate?
Web Checker: detects onfocus handlers that navigate, submit, or open windows.
Changing a form control's value must not cause a change of context unless the user was warned first.
Quick test: change a dropdown — does the form auto-submit without warning?
Web Checker: detects onchange handlers on selects that navigate or submit without warning.
3.2.3
Consistent Navigation
AA
Manual
Navigation blocks that repeat across pages must appear in the same relative order.
Quick test: compare main menu across three different pages — same items in the same order?
3.2.4
Consistent Identification
AA
Manual
Components with the same functionality must be identified consistently across pages (same icon, same label for “Search” everywhere).
Quick test: is your “Download” button labelled “Download” everywhere, or sometimes “Get file”?
3.2.6
Consistent Help
A
Auto
New in 2.2
If a set of pages provides help mechanisms (contact, chat, FAQ link), they must appear in the same relative order on each page.
Quick test: is the contact / chat link always in the same place (footer bottom-right, say)?
Web Checker: compares help-mechanism positions across sampled pages.
3.3.1
Error Identification
A
Hybrid
Input errors must be identified in text and the field in error must be named.
Quick test: submit an invalid form — do error messages point to the right fields?
Web Checker: detects forms with validation but no programmatic error associations; wording quality flagged for Manual Review.
3.3.2
Labels or Instructions
A
Auto
Form fields must have visible labels or clear instructions.
Quick test: every <input> — is there a visible label (not just placeholder)?
Web Checker: detects fields without <label>, fields labelled only via placeholder.
3.3.3
Error Suggestion
AA
Manual
When an input error is detected and suggestions are known, the suggestions must be provided to the user.
Quick test: enter a malformed email — does the error explain what a valid one looks like?
3.3.4
Error Prevention (Legal, Financial, Data)
AA
Manual
For legal, financial, or data-deletion transactions, users must be able to reverse, check, or confirm submissions.
Quick test: on a checkout or account-delete flow — is there a review step or a cancellation window?
3.3.7
Redundant Entry
A
Hybrid
New in 2.2
Information previously entered must be auto-populated, or available for selection, in the same process.
Quick test: a checkout that asks for your address on step 2, then again on step 3 with no pre-fill is a failure.
Web Checker: detects repeated input patterns across a form flow; correctness flagged for Manual Review.
3.3.8
Accessible Authentication (Minimum)
AA
Auto
New in 2.2
Authentication must not rely on a cognitive function test (remembering a password, solving a puzzle CAPTCHA) without an alternative.
Quick test: can users log in with a password manager (no typing from memory) and does your CAPTCHA have an accessible alternative?
Web Checker: detects login forms that block paste / autofill, and visual-only CAPTCHAs.