WCAG Guidelines

Also Known As

TL;DR

Explanation

WCAG 2.2 (current) is organised under four principles — POUR: Perceivable, Operable, Understandable, Robust. Level A is minimum accessibility; AA is the legal requirement in most jurisdictions (ADA, EN 301 549, AODA); AAA is aspirational. Key AA requirements include 4.5:1 colour contrast, keyboard navigability, focus indicators, alt text for images, captions for video, and no keyboard traps. WCAG 3.0 is in development with a different conformance model.

Diagram

flowchart TD
    WCAG[WCAG 2.1] --> POUR[4 Principles]
    POUR --> P[Perceivable<br/>text alternatives<br/>captions colour contrast]
    POUR --> O[Operable<br/>keyboard accessible<br/>no seizure triggers]
    POUR --> U[Understandable<br/>readable predictable<br/>input assistance]
    POUR --> R[Robust<br/>compatible with<br/>assistive technologies]
    subgraph Levels
        A[Level A - minimum]
        AA[Level AA - standard target]
        AAA[Level AAA - enhanced]
        A --> AA --> AAA
    end
style P fill:#1f6feb,color:#fff
style O fill:#238636,color:#fff
style U fill:#d29922,color:#fff
style R fill:#6e40c9,color:#fff
style AA fill:#238636,color:#fff

Common Misconception

Why It Matters

Common Mistakes

• Only testing with automated tools — axe and Lighthouse catch ~30% of accessibility issues; manual testing and screen reader testing are required.
• Colour contrast only — passing contrast ratios while failing keyboard navigation or missing alt text still fails WCAG.
• Not testing with actual assistive technology — NVDA (Windows) and VoiceOver (Mac/iOS) reveal issues automated tools miss.
• Overlaying widgets (AccessiBe) as a WCAG compliance solution — they do not provide true compliance and have been criticised by the disability community.

Code Examples

<!-- Multiple WCAG failures:
<div onclick="submitForm()">Submit</div>  <!-- Not keyboard accessible, no role -->
<img src="logo.png">                      <!-- Missing alt text -->
<input type="text" placeholder="Email">   <!-- No label element -->
<p style="color: #999">Fine print</p>     <!-- Likely fails 4.5:1 contrast -->

<!-- WCAG AA compliant:
<button type="submit">Submit</button>     <!-- Natively keyboard accessible -->
<img src="logo.png" alt="Company Logo">   <!-- Descriptive alt text -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email" required>
<p style="color: #595959">Fine print</p>  <!-- 7:1 contrast ratio — AAA -->

References

• ↗ https://www.w3.org/TR/WCAG22/

Tags

Related Terms