0Pricing
Web Accessibility Academy · Leçon

Chaque graphique a besoin d'une alternative textuelle

Résumez l'information essentielle avec des mots, pas des pixels.

Chaque graphique a besoin d'une alternative textuelle est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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 users

Quick 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. 🎯

Questions Fréquemment Posées

La leçon « Chaque graphique a besoin d'une alternative textuelle » est-elle gratuite ?

Oui — le texte complet de « Chaque graphique a besoin d'une alternative textuelle » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Chaque graphique a besoin d'une alternative textuelle » ?

Résumez l'information essentielle avec des mots, pas des pixels. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?

Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Chaque graphique a besoin d'une alternative textuelle » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?

Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Chaque graphique a besoin d'une alternative textuelle
  2. La solution de repli sous forme de tableau de données
  3. Couleur, motif et libellés directs
  4. Graphiques interactifs navigables au clavier
← Retour à Web Accessibility Academy