{
    "slug": "accessible_svg",
    "term": "Accessible SVGs",
    "category": "accessibility",
    "difficulty": "intermediate",
    "short": "Decorative SVGs need aria-hidden=true; informative SVGs need role=img and aria-label or title+desc elements.",
    "long": "Decorative (icon in labelled button): aria-hidden=true. Informative (standalone chart): role=img, aria-labelledby pointing to title inside SVG. Interactive: full ARIA widget pattern. Inline SVG: add title as first child, desc for description, aria-labelledby to title id. Img tag SVG: alt attribute works normally.",
    "aliases": [
        "SVG accessibility",
        "aria-hidden SVG"
    ],
    "tags": [
        "accessibility",
        "html",
        "svg"
    ],
    "misconception": "SVG icons are automatically read correctly — without aria-hidden, browsers may read file paths or class names.",
    "why_it_matters": "SVGs used as images without title and desc elements are either announced as their filename or completely skipped by screen readers, depending on the browser. Inline SVGs used for interactive controls — charts, diagrams, custom checkboxes — require ARIA roles and keyboard handlers that are easy to omit. Decorative SVGs should explicitly have aria-hidden='true' to avoid cluttering the accessibility tree. Getting this right matters most for data visualisations, where the information exists only in the graphic.",
    "common_mistakes": [
        "No aria-hidden on decorative SVGs",
        "No alt on informative SVGs",
        "title not first child of svg"
    ],
    "when_to_use": [
        "Add aria-hidden=\"true\" to purely decorative SVGs — icons inside labelled buttons, dividers, background flourishes.",
        "Add role=\"img\" and aria-label (or <title>+<desc>) to informative SVGs that convey meaning independently.",
        "For interactive SVGs (charts, maps), add focusable elements with keyboard handlers and descriptive labels."
    ],
    "avoid_when": [
        "Do not add aria-label to a decorative SVG already inside a button with visible text — it creates redundant announcements.",
        "Avoid embedding critical data only inside SVG paths with no text alternative — screen readers cannot parse drawn content."
    ],
    "related": [
        "screen_reader_basics",
        "accessible_forms"
    ],
    "prerequisites": [
        "wcag_guidelines",
        "screen_reader_basics",
        "html_semantic"
    ],
    "refs": [
        "https://www.w3.org/TR/SVG-access/"
    ],
    "bad_code": "<button><svg><!-- icon --></svg>Search</button>",
    "good_code": "<button><svg aria-hidden=\"true\" focusable=\"false\"><!-- icon --></svg>Search</button>\n<svg role=\"img\" aria-labelledby=\"t\"><title id=\"t\">Monthly Revenue</title></svg>",
    "example_note": "The bad button has an SVG icon with no label; a screen reader announces \"button\" with no name. The fix adds aria-label to the button so the action is clearly announced.",
    "quick_fix": "Decorative SVGs: aria-hidden=true. Informative SVGs: role=img + aria-label or title+desc. Interactive SVGs: full ARIA widget pattern with tabindex and keyboard handlers",
    "severity": "medium",
    "effort": "low",
    "created": "2026-03-16",
    "updated": "2026-03-31",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/accessible_svg",
        "html_url": "https://codeclaritylab.com/glossary/accessible_svg",
        "json_url": "https://codeclaritylab.com/glossary/accessible_svg.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": "[Accessible SVGs](https://codeclaritylab.com/glossary/accessible_svg) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/accessible_svg"
            }
        }
    }
}