svglisted

# SVG Accessibility Skill > **Canonical source**: `examples/SVG_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when creating, optimising, or reviewing SVG graphics. **Only load this skill if the project contains SVGs.** --- ## Core Mandate SVG accessibility depends on the graphic's purpose and how it is embedded. A decorative icon, an informative image, an icon inside a button, and an interactive diagram require different patterns. Start by deciding what users need from the graphic, then provide the simplest semantic implementation that delivers the same information or function. The presence of `<title>`, `<desc>`, `role="img"`, or `aria-label` does not by itself make an SVG accessible — test the result in its final context. SVG is also an active XML format that can contain scripts, event handlers, and external resource references. **Untrusted SVG (uploads, pasted markup, AI-generated output) must be sanitized before rendering** — see the Security section below. --- ## Severity Scale (this skill) | Level | Meaning | | --- | --- | | **Critical** | SVG conveys essential information with no accessible alternative; untrusted SVG rendered without sanitization | | **Serious** | SVG is interactive but unreachable or unlabelled for AT users | | **Moderate** | AT experience degraded but content still partially accessible | | **Minor** | Best-practice gap; ma