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 Outcome-based, not checklist-driven. Measure against real usage context: is the SVG perceivable, operable, and compatible with assistive technologies? Pattern recommendations in this skill are grounded in cross-browser/screen reader testing by Carie Fisher (published on Smashing Magazine, updated at <https://cariefisher.com/a11y-svg-updated/>). When a pattern is labelled **"Best in Show"**, **"Use Caution"**, or **"Not Recommended"** below, those labels reflect her testing results across OS/browser/screen reader combinations. --- ## Severity Scale (this skill) | Level | Meaning | | --- | --- | | **Critical** | SVG conveys essential information with no accessible alternative | | **Serious** | SVG is interactive but unreachable or unlabelled for AT users | | **Moderate** | AT experience degraded but content still partially accessible | | **Minor** | Best-practice gap; marginal impact | --- ## Decorative SVGs — Hide Completely from AT A decorative SVG that is not hidden from AT is a **Moderate** issue — it adds noise to the accessibility tree and forces screen reader users to listen to meaningless announcements.