🧪 WCAG 2.2 Scanner Validation Suite

This page contains FAIL PASS and MANUAL CHECK examples for nearly all success criteria (A, AA, AAA). Use your scanner to detect issues based on conformance target.

📖 Principle 1: Perceivable

Guideline 1.1: Text Alternatives

1.1.1 (A) ❌ FAIL: Image missing alt attribute

1.1.1 (A) ✅ PASS: Image with descriptive alt

1.1.1 (A) ❌ FAIL: Area element without alt in image map

Guideline 1.2: Time-Based Media

1.2.1 (A) ⚠️ MANUAL: Audio-only (podcast) – needs transcript

Instruction: Provide transcript link.

1.2.2 (A) ❌ FAIL: Video without captions (prerecorded)

No captions track.

1.2.2 (A) ✅ PASS: Video with captions (using track)

1.2.3 (A) ⚠️ MANUAL: Audio description or media alternative

Check if video has audio description or full transcript.

1.2.4 (AA) ⚠️ MANUAL: Live captions – requires real-time test.

1.2.5 (AA) ⚠️ MANUAL: Audio description for prerecorded video.

1.2.6 (AAA) ⚠️ MANUAL: Sign language interpretation.

Guideline 1.3: Adaptable

1.3.1 (A) ❌ FAIL: Heading level skipped (h2 after body, no h1)

This is an h2 without preceding h1

1.3.1 (A) ❌ FAIL: Table without <th>

Name	Age
John	30

1.3.1 (A) ✅ PASS: Table with proper headers

Name	Age
Jane	25

1.3.2 (A) ⚠️ MANUAL: Meaningful sequence – check if CSS reorders content logically.

Item 1 (should be last)

Item 2 (should be first)

1.3.3 (A) ❌ FAIL: Instruction uses only shape: "Click the square button"

Click the square button

1.3.3 (A) ✅ PASS: Instruction uses text: "Click the Submit button"

1.3.4 (AA) ❌ FAIL: Orientation locked to landscape (simulated with CSS)

Content not adaptable – but real lock requires meta viewport? We'll mark as fail if scanner detects orientation lock via CSS media? This is complex. Mark manual.

⚠️ MANUAL: Check if page uses orientation lock (e.g., screen.orientation.lock).

1.3.5 (AA) ❌ FAIL: Input field without autocomplete attribute (where appropriate)

Name: – missing autocomplete="name"

1.3.5 (AA) ✅ PASS: Input with autocomplete

Email:

Guideline 1.4: Distinguishable

1.4.1 (A) ❌ FAIL: Error indicated by color only (red text)

Invalid

1.4.1 (A) ✅ PASS: Error with text and color: "Error: Invalid"

Error: Invalid input

1.4.2 (A) ❌ FAIL: Audio autoplays without control (background loop)

– no pause button initially.

1.4.2 (A) ✅ PASS: Audio with controls

1.4.3 (AA) ❌ FAIL: Low contrast text (light gray on white, ~1.5:1)

This text is barely readable.

1.4.3 (AA) ✅ PASS: Good contrast (dark gray on white, ~5.5:1)

This passes AA.

1.4.6 (AAA) ❌ FAIL (AAA): Contrast 5.5:1 fails AAA (needs 7:1)

This passes AA but fails AAA.

1.4.6 (AAA) ✅ PASS (AAA): White on black (21:1)

Perfect contrast.

1.4.4 (AA) ❌ FAIL: Text cannot be resized because of fixed container? Actually we need a demo that breaks at 200% zoom – we'll simulate by using viewport restriction? Better to mark manual.

⚠️ MANUAL: Test zoom to 200% – check for text clipping or overlapping.

1.4.5 (AA) ❌ FAIL: Image of text used for informative content (not logo)

1.4.5 (AA) ✅ PASS: Real text instead of image

Welcome

1.4.10 (AA) ❌ FAIL: Reflow – horizontal scroll required at 320px (using fixed width)

This wide content forces horizontal scroll at 320px viewport.

1.4.11 (AA) ❌ FAIL: Non-text contrast – button border and background too close

1.4.11 (AA) ✅ PASS: Button with sufficient contrast (dark border)

1.4.12 (AA) ⚠️ MANUAL: Text spacing override – apply user styles and check if content breaks.

1.4.13 (AA) ⚠️ MANUAL: Content on hover/focus – ensure dismissible, hoverable, persistent.

⌨️ Principle 2: Operable

Guideline 2.1: Keyboard Accessible

2.1.1 (A) ❌ FAIL: Mouse-only event (div onclick without role or tabindex)

Click me (mouse only)

2.1.1 (A) ✅ PASS: Native button works with keyboard

2.1.2 (A) ❌ FAIL: Keyboard trap (simulated modal)

2.1.2 (A) ✅ PASS: No trap – can tab out.

2.1.4 (A) ⚠️ MANUAL: Character key shortcuts – check if single-key shortcuts can be remapped/disabled.

Guideline 2.2: Enough Time

2.2.1 (A) ❌ FAIL: Timeout without warning (5 seconds redirect)

Page will timeout in 5 sec. No extend option.

2.2.2 (A) ❌ FAIL: Auto-moving carousel without pause button

Slide 1

No pause control.

2.2.2 (A) ✅ PASS: Carousel with pause button

Guideline 2.3: Seizures and Physical Reactions

2.3.1 (A) ❌ FAIL: Flashing content (>3 flashes per second)

Red square flashes at 10Hz.

2.3.1 (A) ✅ PASS: No flashing.

Guideline 2.4: Navigable

2.4.1 (A) ❌ FAIL: No skip to main content link

Many navigation links...

Main content starts here but no bypass link.

2.4.1 (A) ✅ PASS: Skip link present

Main content with skip link.

2.4.2 (A) ❌ FAIL: Missing <title>? But we have title – this is pass. We'll add an iframe without title.

– missing title attribute (success criteria applies to iframes as well).

2.4.3 (A) ❌ FAIL: Illogical tabindex order

2.4.3 (A) ✅ PASS: Logical DOM order

2.4.4 (A) ❌ FAIL: Ambiguous link text "click here"

click here for details.

2.4.4 (A) ✅ PASS: Descriptive link "Download annual report"

Download annual report (PDF, 2MB)

2.4.5 (AA) ❌ FAIL: No multiple ways to find pages (only nav menu, no search, no sitemap)

Only one navigation menu. No search, no sitemap link.

2.4.5 (AA) ✅ PASS: Has search and sitemap (simulate link)

Search | Sitemap

2.4.6 (AA) ❌ FAIL: Unclear heading "Section 3.2"

Section 3.2

Content here...

2.4.6 (AA) ✅ PASS: Descriptive heading "Contact Us"

Contact Us

2.4.7 (AA) ❌ FAIL: Focus indicator invisible (outline:none)

2.4.7 (AA) ✅ PASS: Default focus ring visible

2.4.11 (AA) ❌ FAIL: Sticky header obscures focused element

Sticky header

Guideline 2.5: Input Modalities

2.5.1 (A) ❌ FAIL: Pointer gesture (swipe) without alternative button

Swipe me (no button alternative)

2.5.1 (A) ✅ PASS: Same action available via button

(instead of swipe)

2.5.2 (A) ❌ FAIL: Pointer cancellation – mousedown triggers action immediately (e.g., onmousedown)

Click on down

2.5.2 (A) ✅ PASS: Action on click (not mousedown)

Click me

2.5.3 (A) ❌ FAIL: Visible label and accessible name mismatch

– visible label "Send", accessible name "Submit form" – mismatch may confuse.

2.5.3 (A) ✅ PASS: Label matches accessible name

2.5.4 (A) ❌ FAIL: Motion actuation (device shake) without alternative

Shake to undo (no button alternative)

2.5.4 (A) ✅ PASS: Alternative button exists

2.5.7 (AA) ❌ FAIL: Dragging movement without alternative

Drag me

No alternative buttons for drag-and-drop.

2.5.7 (AA) ✅ PASS: Alternative buttons provided

2.5.8 (AA) ❌ FAIL: Target size smaller than 24x24px

(20x20 clickable)

2.5.8 (AA) ✅ PASS: Target size 44x44

📘 Principle 3: Understandable

Guideline 3.1: Readable

3.1.1 (A) ✅ PASS: Language set in html lang="en"

3.1.2 (AA) ❌ FAIL: Part of page in different language without lang attribute

English text. Bonjour le monde – French phrase missing lang="fr".

3.1.2 (AA) ✅ PASS: Proper lang attribute on foreign phrase

Bonjour le monde has lang attribute.

3.1.3 (AAA) ⚠️ MANUAL: Unusual words – provide definitions.

3.1.5 (AAA) ⚠️ MANUAL: Reading level – lower secondary education level.

Guideline 3.2: Predictable

3.2.1 (A) ❌ FAIL: On focus, page automatically submits (simulate)

Focus this input → unexpected submit.

3.2.1 (A) ✅ PASS: Focus does not cause context change.

3.2.2 (A) ❌ FAIL: Change of setting (select) causes immediate navigation

3.2.2 (A) ✅ PASS: Select does not auto-submit

3.2.3 (AA) ❌ FAIL: Inconsistent navigation order (different pages – can't test here, but we can mark)

Manual check: Verify menu order same across pages.

⚠️ MANUAL: Check consistent navigation across multiple pages.

3.2.4 (AA) ❌ FAIL: Same icon used for different functions (e.g., star for favorite and also for bookmark)

Use star icon for two different actions – manual check.

⚠️ MANUAL: Consistent identification of components.

3.2.6 (A) ❌ FAIL: No consistent help location (help link sometimes at top, sometimes at bottom)

Help link in different places on different pages – mark manual.

⚠️ MANUAL: Ensure help mechanisms are in consistent location.

Guideline 3.3: Input Assistance

3.3.1 (A) ❌ FAIL: Error message missing (just red border)

3.3.1 (A) ✅ PASS: Error with descriptive text

Invalid email

3.3.2 (A) ❌ FAIL: Input without label, placeholder, or aria-label

3.3.2 (A) ✅ PASS: Label present

Username:

3.3.3 (AA) ❌ FAIL: Error but no suggestion how to fix

Invalid

3.3.3 (AA) ✅ PASS: Error with suggestion

Error: Enter email as name@example.com

3.3.4 (AA) ❌ FAIL: No error prevention for legal/financial data (no review/submit confirmation)

3.3.4 (AA) ✅ PASS: Has confirm step

Multi-step with review.

3.3.7 (A) ❌ FAIL: Redundant entry – asks for same info twice without auto-fill

Shipping address: Billing address: (same info, no option to copy)

3.3.7 (A) ✅ PASS: Checkbox "Same as shipping"

Same as shipping address

3.3.8 (AA) ❌ FAIL: CAPTCHA without alternative (image only)

3.3.8 (AA) ✅ PASS: CAPTCHA with audio alternative

⚙️ Principle 4: Robust

Guideline 4.1: Compatible

4.1.2 (A) ❌ FAIL: Custom control missing role and accessible name

Fake button

4.1.2 (A) ✅ PASS: Custom button with role="button", tabindex="0", aria-label

Submit

4.1.3 (AA) ❌ FAIL: Status message without role="status" or aria-live

4.1.3 (AA) ✅ PASS: Status message with role="status"

Note: This test page includes over 100 deliberate failures and many correct examples. Your scanner should detect violations based on selected conformance level (A, AA, AAA). Some criteria are marked MANUAL because they cannot be fully automated. This suite covers >85% of WCAG 2.2 success criteria. Use it to validate your scanner's accuracy.