Todo gráfico necesita una alternativa textual
Resuma la información relevante con palabras, no con píxeles.
Todo gráfico necesita una alternativa textual es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎯
Preguntas frecuentes
¿La lección «Todo gráfico necesita una alternativa textual» es gratis?
Sí — el texto completo de «Todo gráfico necesita una alternativa textual» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Todo gráfico necesita una alternativa textual»?
Resuma la información relevante con palabras, no con píxeles. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Todo gráfico necesita una alternativa textual»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Todo gráfico necesita una alternativa textual
- La alternativa de la tabla de datos
- Color, patrón y etiquetas directas
- Gráficos interactivos navegables con teclado