Skip to main content
Deep dive into any WCAG criterion with examples, user impact, and remediation guidance.

​
Description

This prompt provides comprehensive education about a specific WCAG criterion, including its purpose, impact on users, code examples, testing strategies, and common mistakes. Perfect for learning, documentation, and team training. Best for: Learning, documentation, team training, understanding specific WCAG requirements.

​
Arguments

ArgumentTypeRequiredDefaultDescription
criterionstring✅-WCAG criterion ID (e.g., 1.1.1, 2.4.4, 1.4.3)

​
Example Usage

​
Basic Usage

Use the explain-wcag-criterion prompt with criterion: 1.4.3

​
Natural Language

Explain WCAG criterion 1.1.1 in detail

​
Common Criteria to Explore

Explain WCAG 2.4.4 (Link Purpose)

​
Output Includes

The prompt generates an educational deep dive with:

​
1. Criterion Overview

  • Full name and description
  • Conformance level (A, AA, or AAA)
  • WCAG principle (Perceivable, Operable, Understandable, Robust)

​
2. What It Means

Plain language explanation of the requirement

​
3. Why It Matters

Real-world impact on users with disabilities:
  • Which users are affected
  • How the issue impacts them
  • Real-world examples and user quotes

​
4. Code Examples

Before/after implementations showing:
  • Failing example (what violates the criterion)
  • Passing example (compliant implementation)
  • Better example (best practice)

​
5. Testing Strategies

  • Manual testing approaches
  • Automated testing tools
  • Edge cases to watch for

​
6. Common Mistakes

Frequent errors and how to avoid them

​
7. Official Resources

Links to WCAG documentation and related criteria

​
Example Output Structure

## WCAG 1.4.3: Contrast (Minimum)

### Overview
- **Level**: AA
- **Principle**: Perceivable
- **Guideline**: 1.4 Distinguishable

### What It Means

Text and images of text must have a contrast ratio of at least:
- **4.5:1** for normal text (< 18pt or < 14pt bold)
- **3:1** for large text (≥ 18pt or ≥ 14pt bold)

### Why It Matters

**Affected Users:**
- Low vision users (estimated 246 million worldwide)
- Color blind users (8% of men, 0.5% of women)
- Users in bright environments (outdoor, sunny rooms)
- Older adults with age-related vision changes

**Real-World Impact:**
> "When text has poor contrast, I have to zoom in 400% and still struggle
> to read. It gives me headaches and makes simple tasks exhausting."
> — User with low vision

### Code Examples

#### ❌ Failing Example

```html
<p style="color: #777777; background: #ffffff;">
  This gray text on white fails contrast (ratio: 4.48:1)
</p>

​
✅ Passing Example

<p style="color: #767676; background: #ffffff;">
  This darker gray passes AA (ratio: 4.54:1)
</p>

​
✅ Better Example

<p style="color: #595959; background: #ffffff;">
  This even darker gray provides comfortable reading (ratio: 7.0:1)
</p>

​
Testing Strategies

​
Manual Testing

  1. Use browser DevTools color picker to check contrast
  2. Test with high contrast mode enabled
  3. View page in grayscale to spot issues
  4. Check in bright light conditions

​
Automated Testing

  • AccesibilityHub: analyze-contrast tool
  • Browser extensions: axe DevTools, WAVE
  • Design tools: Figma contrast plugins

​
Tools

​
Common Mistakes

  1. Relying only on color to convey info
    • Fix: Add text labels, icons, or patterns
  2. Placeholder text as labels
    • Placeholders often have low contrast by default
  3. Focus states with poor contrast
    • Focus indicators need 3:1 contrast too
  4. Text over images without overlay
    • Add semi-transparent background behind text
  5. Forgetting disabled state contrast
    • Disabled elements are exempt but should still be visible

​
Official Resources


## Popular WCAG Criteria

<CardGroup cols={2}>
  <Card title="1.1.1 Non-text Content" icon="image">
    **Level A** - Images need alt text
  </Card>
  
  <Card title="1.3.1 Info and Relationships" icon="sitemap">
    **Level A** - Semantic HTML structure
  </Card>
  
  <Card title="1.4.3 Contrast (Minimum)" icon="adjust">
    **Level AA** - Text contrast ratios
  </Card>
  
  <Card title="2.1.1 Keyboard" icon="keyboard">
    **Level A** - Keyboard accessibility
  </Card>
  
  <Card title="2.4.4 Link Purpose" icon="link">
    **Level A** - Descriptive link text
  </Card>
  
  <Card title="4.1.2 Name, Role, Value" icon="code">
    **Level A** - ARIA and semantic HTML
  </Card>
</CardGroup>

## When to Use

| Scenario | Recommended |
|----------|-------------|
| Learning WCAG | ✅ Yes |
| Team training | ✅ Yes |
| Understanding specific issue | ✅ Yes |
| Creating documentation | ✅ Yes |
| Understanding audit results | ✅ Yes |
| Fixing specific violations | Check first, then use appropriate tool |

<Tip>
  When you encounter a WCAG violation in an audit, use this prompt to **understand the criterion** before implementing fixes. This helps you avoid similar issues in the future.
</Tip>

## WCAG Principles

<AccordionGroup>
  <Accordion title="1. Perceivable">
    Information and UI components must be presentable to users in ways they can perceive.
    
    **Examples:**
    - 1.1.1 Non-text Content (alt text)
    - 1.4.3 Contrast (Minimum)
    - 1.4.5 Images of Text
  </Accordion>
  
  <Accordion title="2. Operable">
    UI components and navigation must be operable.
    
    **Examples:**
    - 2.1.1 Keyboard
    - 2.4.4 Link Purpose (In Context)
    - 2.4.7 Focus Visible
  </Accordion>
  
  <Accordion title="3. Understandable">
    Information and operation of UI must be understandable.
    
    **Examples:**
    - 3.1.1 Language of Page
    - 3.2.1 On Focus
    - 3.3.2 Labels or Instructions
  </Accordion>
  
  <Accordion title="4. Robust">
    Content must be robust enough to be interpreted reliably by assistive technologies.
    
    **Examples:**
    - 4.1.1 Parsing
    - 4.1.2 Name, Role, Value
    - 4.1.3 Status Messages
  </Accordion>
</AccordionGroup>

## WCAG Levels

| Level | Meaning | Typical Requirement |
|-------|---------|--------------------|
| **A** | Minimum | Essential for basic accessibility |
| **AA** | Standard | Industry standard, legal requirement in many jurisdictions |
| **AAA** | Enhanced | Highest level, may not be achievable for all content |

<Note>
  Most organizations target **WCAG 2.1 Level AA** compliance. Level AAA is aspirational and may not be feasible for all content types.
</Note>

## Common Criteria by Category

### Images & Media

- **1.1.1** - Non-text Content (alt text)
- **1.4.5** - Images of Text
- **1.2.1** - Audio-only and Video-only

### Color & Contrast

- **1.4.1** - Use of Color
- **1.4.3** - Contrast (Minimum)
- **1.4.6** - Contrast (Enhanced)
- **1.4.11** - Non-text Contrast

### Keyboard & Navigation

- **2.1.1** - Keyboard
- **2.1.2** - No Keyboard Trap
- **2.4.3** - Focus Order
- **2.4.7** - Focus Visible

### Forms & Inputs

- **3.3.1** - Error Identification
- **3.3.2** - Labels or Instructions
- **4.1.2** - Name, Role, Value

### Structure & Semantics

- **1.3.1** - Info and Relationships
- **2.4.6** - Headings and Labels
- **3.1.1** - Language of Page

## Learning Path

Recommended order for learning WCAG criteria:

<Steps>
  <Step title="Start with Level A Basics">
    - 1.1.1 Non-text Content
    - 2.1.1 Keyboard
    - 4.1.2 Name, Role, Value
  </Step>
  
  <Step title="Add Level AA Essentials">
    - 1.4.3 Contrast (Minimum)
    - 2.4.4 Link Purpose
    - 3.3.2 Labels or Instructions
  </Step>
  
  <Step title="Deepen Understanding">
    - 1.3.1 Info and Relationships
    - 2.4.6 Headings and Labels
    - 3.1.1 Language of Page
  </Step>
  
  <Step title="Advanced Topics">
    - 1.4.11 Non-text Contrast
    - 2.4.7 Focus Visible
    - 4.1.3 Status Messages
  </Step>
</Steps>

## Technical Details

This prompt uses:

- Built-in WCAG criteria database for instant lookups
- Official W3C WCAG 2.1 documentation links
- Real-world user impact data
- Common remediation patterns

<Note>
  The prompt includes data for **78 WCAG 2.1 criteria** (Level A, AA, and AAA). If a criterion is not in the database, it will still provide a comprehensive explanation based on general WCAG knowledge.
</Note>

## Related Prompts

<CardGroup cols={2}>
  <Card title="Full Accessibility Audit" icon="clipboard-list" href="/prompts/full-accessibility-audit">
    Identify which criteria are violated
  </Card>
  
  <Card title="Contrast Check" icon="adjust" href="/prompts/contrast-check">
    Deep dive into contrast issues (1.4.3)
  </Card>
  
  <Card title="Quick Wins Report" icon="sparkles" href="/prompts/quick-wins-report">
    See which criteria are easy to fix
  </Card>
  
  <Card title="Lighthouse Audit" icon="lighthouse" href="/prompts/lighthouse-audit">
    See which criteria Lighthouse tests
  </Card>
</CardGroup>

## Related Resources

- [WCAG Criteria Resource](/resources/wcag-criteria) - Complete reference data
- [W3C WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/) - Official documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us