F13Gráficos con información en colores que su texto alternativo no explica

Por qué es importante

El texto alternativo (descripción de una imagen que leen los lectores de pantalla) debe dar la misma información que la imagen. Si omite lo que indica el color, el mensaje llega incompleto.

• Una persona ciega oye las cifras, pero no sabe cuáles están en rojo.
• Una persona con daltonismo ve la imagen, pero puede confundir el rojo con el verde.

Cómo evitarlo

1. Antes de escribir el texto alternativo, piense qué significa cada color de la imagen.
2. Diga ese significado con palabras: «Los meses con pérdidas son marzo y julio», no «los meses en rojo».
3. Si la imagen tiene muchos datos, ponga un resumen breve en el alt. Dé la información completa en una tabla o un texto junto a la imagen.
4. No haga que el texto alternativo dependa del color: «las zonas rojas del mapa» no sirve a quien no las ve.
5. Mejor aún, no use solo el color en la propia imagen. Añada etiquetas, tramas o iconos, que también ayudan a quien sí la ve.

Cómo comprobarlo

1. Localice las imágenes que usan colores con significado: gráficos, mapas, planos, leyendas o semáforos de estado.
2. Lea su texto alternativo. Puede inspeccionar la imagen con F12 y mirar el atributo alt, o usar un lector de pantalla.
3. Compruebe que el texto dice con palabras lo que indica cada color, y no se limita a nombrar el color.
4. Si la información está en una tabla o un texto cercano, compruebe que está completa.

Ejemplo

Gráfico de un informe municipal en el que el color rojo marca los barrios que superan el límite de ruido.

<!-- Incorrecto: no dice qué barrios están en rojo -->
<img src="ruido.png"
  alt="Ruido por barrios. En rojo, los que superan el límite.">

<!-- Correcto: el significado del color está en el texto -->
<img src="ruido.png"
  alt="Ruido por barrios. Superan el límite de 65 dB: Centro y San Antón.">