すべてのグラフにテキストによる代替手段を用意する

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.

Nobody needs to hear about gridlines and axes first. Lead with the takeaway: what does this chart actually tell the reader?

If your chart is an image, its alt attribute should state the conclusion, not say chart. 📊

A short alt gives the headline. When the data is rich, pair it with a longer description nearby for the full story.

SVG charts are not images by default. Add role="img" plus a name so assistive tech treats the whole graphic as one labeled unit.

A title element as the first child of an SVG also names it. Reference it with aria-labelledby for solid support across screen readers.

Most charts exist to show a trend or comparison. Write it in plain words: rising, falling, flat, or one bar towering over the rest.

Call out the high and low points by name and value. That single sentence often carries the chart's whole meaning for a listener.

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.

Put a short text summary right under the chart as a visible caption. Sighted users skim it too, so it is never wasted effort. ✨

A tiny decorative spark beside a number adds no new meaning. Hide it with aria-hidden so it does not clutter the listening experience.

What should a chart's text alternative lead with?

You learned that every chart needs a text alternative that states the insight, names extremes with real numbers, and hides purely decorative graphics. 🎯