WCAG Success Criteria HTML and Design Examples

Real-world Examples for both WCAG Level A and Level AA Success Criterion

If you are struggling with learning how to implement Success Criteria for the WCAG guidelines, and have a hard time finding detailed examples, we got you covered!

We are in the proccess of creating a comprehensive list of real-world HTML and Design examples.

We will add new examples on a regular basis. Get notified as soon as we publish them, just sign up to get notified!

Filter Results

Introduced with WCAG Version

-- WCAG 2.1 --

WCAG Level (A, AA, AAA)

-- Level A and AA -- All Levels (A, AA, AAA) Only Level A Only Level AA Only Level AAA

Success Criteria

-- All Success Criteria -- Success Criteria with HTML and Design Examples

Success Criterion (SC) Title

Enter a single keyword (label, keyboard, etc.)

The right pointing white arrow inside a red circle icon is used to indicate newly added WCAG HTML and Design example pages.

The right top corner pointing white arrow inside a black square icon is used to indicate an external link to the WCAG success criterion.

• Newly Added 1.1.1 SC Non-text Content (Level A)
• 1.2.1 SC Audio-only and Video-only (Prerecorded) (Level A)
• 1.2.2 SC Captions (Prerecorded) (Level A)
• 1.2.3 SC Audio Description or Media Alternative (Prerecorded) (Level A)
• 1.2.4 SC Captions (Live) (Level AA)
• 1.2.5 SC Audio Description (Prerecorded) (Level AA)
• 1.3.1 SC Info and Relationships (Level A)
• 1.3.2 SC Meaningful Sequence (Level A)
• Newly Added 1.3.3 SC Sensory Characteristics (Level A)
• 1.3.4 SC Orientation (Level AA)
• 1.3.5 SC Identify Input Purpose (Level AA)
• 1.4.1 SC Use of Color (Level A)
• 1.4.2 SC Audio Control (Level A)
• 1.4.3 SC Contrast (Minimum) (Level AA)
• 1.4.4 SC Resize Text (Level AA)
• Newly Added 1.4.5 SC Images of Text (Level AA)
• 1.4.10 SC Reflow (Level AA)
• 1.4.11 SC Non-text Contrast (Level AA)
• 1.4.12 SC Text Spacing (Level AA)
• 1.4.13 SC Content on Hover or Focus (Level AA)
• 2.1.1 SC Keyboard (Level A)
• 2.1.2 SC No Keyboard Trap (Level A)
• 2.1.4 SC Character Key Shortcuts (Level A)
• 2.2.1 SC Timing Adjustable (Level A)
• 2.2.2 SC Pause, Stop, Hide (Level A)
• 2.3.1 SC Three Flashes or Below Threshold (Level A)
• 2.4.1 SC Bypass Blocks (Level A)
• Newly Added 2.4.2 SC Page Titled (Level A)
• 2.4.3 SC Focus Order (Level A)
• 2.4.4 SC Link Purpose (In Context) (Level A)
• 2.4.5 SC Multiple Ways (Level AA)
• 2.4.6 SC Headings and Labels (Level AA)
• 2.4.7 SC Focus Visible (Level AA)
• 2.5.1 SC Pointer Gestures (Level A)
• 2.5.2 SC Pointer Cancellation (Level A)
• 2.5.3 SC Label in Name (Level A)
• 2.5.4 SC Motion Actuation (Level A)
• Newly Added 3.1.1 SC Language of Page (Level A)
• Newly Added 3.1.2 SC Language of Parts (Level AA)
• 3.2.1 SC On Focus (Level A)
• 3.2.2 SC On Input (Level A)
• 3.2.3 SC Consistent Navigation (Level AA)
• 3.2.4 SC Consistent Identification (Level AA)
• 3.3.1 SC Error Identification (Level A)
• 3.3.2 SC Labels or Instructions (Level A)
• 3.3.3 SC Error Suggestion (Level AA)
• 3.3.4 SC Error Prevention (Legal, Financial, Data) (Level AA)
• 4.1.1 SC Parsing (Obsolete and removed) (Level A)
• 4.1.2 SC Name, Role, Value (Level A)
• 4.1.3 SC Status Messages (Level AA)