{
    "slug": "wcag_guidelines",
    "term": "WCAG Guidelines",
    "category": "accessibility",
    "difficulty": "intermediate",
    "short": "Web Content Accessibility Guidelines — the international standard defining how to make web content accessible to people with disabilities, organised into three conformance levels (A, AA, AAA).",
    "long": "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.",
    "aliases": [
        "WCAG",
        "WCAG 2.2",
        "accessibility guidelines",
        "POUR"
    ],
    "tags": [
        "accessibility",
        "compliance",
        "frontend"
    ],
    "misconception": "Accessibility is for a small minority of users — 15% of the world population has a disability; additionally, accessible design benefits all users (captions, keyboard navigation, high contrast).",
    "why_it_matters": "WCAG AA compliance is a legal requirement in many jurisdictions — lawsuits under ADA and similar legislation target inaccessible websites, and failure to comply exposes organisations to significant liability.",
    "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."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "accessibility_aria",
        "keyboard_navigation",
        "colour_contrast",
        "html_accessibility"
    ],
    "prerequisites": [
        "html_accessibility",
        "keyboard_navigation",
        "screen_reader_basics"
    ],
    "refs": [
        "https://www.w3.org/TR/WCAG22/"
    ],
    "bad_code": "<!-- Multiple WCAG failures:\n<div onclick=\"submitForm()\">Submit</div>  <!-- Not keyboard accessible, no role -->\n<img src=\"logo.png\">                      <!-- Missing alt text -->\n<input type=\"text\" placeholder=\"Email\">   <!-- No label element -->\n<p style=\"color: #999\">Fine print</p>     <!-- Likely fails 4.5:1 contrast -->",
    "good_code": "<!-- WCAG AA compliant:\n<button type=\"submit\">Submit</button>     <!-- Natively keyboard accessible -->\n<img src=\"logo.png\" alt=\"Company Logo\">   <!-- Descriptive alt text -->\n<label for=\"email\">Email address</label>\n<input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" required>\n<p style=\"color: #595959\">Fine print</p>  <!-- 7:1 contrast ratio — AAA -->",
    "quick_fix": "Target WCAG 2.1 AA — it requires: text contrast 4.5:1, all functionality keyboard accessible, no content flashing >3Hz, and all non-decorative images having alt text",
    "severity": "high",
    "effort": "high",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/wcag_guidelines",
        "html_url": "https://codeclaritylab.com/glossary/wcag_guidelines",
        "json_url": "https://codeclaritylab.com/glossary/wcag_guidelines.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[WCAG Guidelines](https://codeclaritylab.com/glossary/wcag_guidelines) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/wcag_guidelines"
            }
        }
    }
}