Every Chart Needs a Text Alternative
Summarize the insight in words, not pixels.
Every Chart Needs a Text Alternative is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
A Chart Is Just Pixels
To a screen reader, a chart is often a silent image. The insight lives in the picture, so blind users get nothing unless you spell it out in text.
Describe the Point, Not the Paint
Nobody needs to hear about gridlines and axes first. Lead with the takeaway: what does this chart actually tell the reader?
Alt Text for an img Chart
If your chart is an image, its alt attribute should state the conclusion, not say chart. 📊
<img src="sales.png" alt="Sales rose 40% from Q1 to Q4, peaking in December.">Short Alt, Long Description
A short alt gives the headline. When the data is rich, pair it with a longer description nearby for the full story.
Inline SVG Charts Need Naming
SVG charts are not images by default. Add role="img" plus a name so assistive tech treats the whole graphic as one labeled unit.
<svg role="img" aria-label="Revenue doubled over five years."> ... </svg>title Inside SVG
A title element as the first child of an SVG also names it. Reference it with aria-labelledby for solid support across screen readers.
<svg role="img" aria-labelledby="t1"><title id="t1">Visitors per month</title></svg>State the Trend
Most charts exist to show a trend or comparison. Write it in plain words: rising, falling, flat, or one bar towering over the rest.
Name the Extremes
Call out the high and low points by name and value. That single sentence often carries the chart's whole meaning for a listener.
Give Real Numbers
Vague words like a lot help nobody. Include the actual figures so a listener can reason about the data the way a sighted reader does.
A Visible Caption Helps Everyone
Put a short text summary right under the chart as a visible caption. Sighted users skim it too, so it is never wasted effort. ✨
<figure><svg>...</svg><figcaption>Sales climbed steadily all year.</figcaption></figure>Skip Decorative Sparklines
A tiny decorative spark beside a number adds no new meaning. Hide it with aria-hidden so it does not clutter the listening experience.
<span aria-hidden="true"><svg>...spark...</svg></span> 1,204 usersQuick Check
What should a chart's text alternative lead with?
Recap: Words Over Pixels
You learned that every chart needs a text alternative that states the insight, names extremes with real numbers, and hides purely decorative graphics. 🎯
Frequently asked questions
Is the “Every Chart Needs a Text Alternative” lesson free?
Yes — the full text of “Every Chart Needs a Text Alternative” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Every Chart Needs a Text Alternative”?
Summarize the insight in words, not pixels. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Every Chart Needs a Text Alternative” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Every Chart Needs a Text Alternative
- The Data Table Fallback
- Color, Pattern, and Direct Labels
- Keyboard-Navigable Interactive Charts