charts-graphslisted

# Charts and Graphs Accessibility Skill > **Canonical source**: `examples/CHARTS_GRAPHS_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 or reviewing any data visualisation. **Only load this skill if the project contains charts or graphs.** --- ## Core Mandate Every chart that conveys meaningful information must have an accessible alternative communicating the same data and insights. This includes static images, SVGs, canvas graphics, and JavaScript charting libraries. --- ## Severity Scale (this skill) | Level | Meaning | | --- | --- | | **Critical** | Chart conveys essential data with no accessible alternative whatsoever | | **Serious** | Alternative exists but is incomplete or significantly misleading | | **Moderate** | Alternative present; colour independence or contrast gaps create friction | | **Minor** | Best-practice gap; marginal impact on access | --- ## Critical: Every Chart Must Have a Text Alternative A chart with no text alternative is **Critical** — blind users and users with images disabled receive no data at all. **Simple chart — brief `alt`:** ```html <img src="quarterly-sales.png" alt="Bar chart: Q4 2024 highest at $2.3M, up 18% from Q3."> ``` **Complex chart — long description via `<figcaption>`:** ```html <figure> <img src="trends.png" alt="Accessibility adoption rates 2019–2024 — see description