WCAG Success Criteria HTML and Design Examples

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

If you are struggling with learning how to implement Success Criteria (SC) for the Web Content Accessibility Guidelines (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!

Abbreviations and Definitions

WCAG

Web Content Accessibility Guidelines

SC

Success Criterion

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 (SC).

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