Regla de accesibilidad: Las imágenes deben tener texto alternativo

Acerca de esta regla de accesibilidad

Las imágenes son una parte fundamental del contenido web, pero son inherentemente visuales. Los lectores de pantalla no pueden interpretar los píxeles de una imagen: dependen completamente de una alternativa de texto para describir el contenido y propósito de la imagen al usuario. Sin texto alternativo, un lector de pantalla puede leer el nombre del archivo de la imagen (por ejemplo, “IMG_20230415_093012.jpg”), lo cual no tiene sentido y resulta confuso. En el peor caso, la imagen se omite silenciosamente, y el usuario pierde información crítica.

Esta regla afecta principalmente a personas ciegas o sordociegas, que dependen de lectores de pantalla o pantallas braille para acceder al contenido. Los usuarios con visión reducida que dependen de amplificación de texto o modos de alto contraste también pueden beneficiarse de texto alternativo bien escrito.

Por qué esto importa

Esta regla se corresponde con el Criterio de Éxito 1.1.1 de WCAG 2.2: Contenido No Textual (Nivel A), que requiere que todo el contenido no textual presentado al usuario tenga una alternativa de texto que sirva un propósito equivalente. También es requerido por la Sección 508 y EN 301 549. Como es un requisito de Nivel A, representa la línea base mínima absoluta para la accesibilidad: no cumplirlo significa que tu contenido es fundamentalmente inaccesible para muchos usuarios.

Cómo proporcionar texto alternativo

Existen tres técnicas principales para proporcionar texto alternativo accesible a una imagen:

El atributo alt — el método más común y preferido para elementos <img>.
El atributo aria-label — proporciona un nombre accesible directamente en el elemento.
El atributo aria-labelledby — apunta al id de otro elemento que contiene el texto descriptivo.

Escribiendo buen texto alternativo

Al escribir texto alternativo, considera estas preguntas:

¿Por qué está aquí esta imagen? ¿Qué papel desempeña en el contenido?
¿Qué información transmite? ¿Qué información obtendría un usuario vidente de ella?
Si quitaras la imagen, qué palabras la reemplazarían para preservar el mismo significado?

Mantén el texto alternativo conciso y descriptivo. Evita frases como “imagen de” o “foto de”: los lectores de pantalla ya anuncian que el elemento es una imagen. No uses el nombre del archivo como texto alternativo. Enfócate en el propósito y significado de la imagen, no en una descripción píxel por píxel.

Manejando imágenes decorativas

No todas las imágenes tienen significado. Las imágenes decorativas — como separadores visuales, adornos de fondo, o imágenes cuyo contenido está completamente descrito en el texto circundante — deben ocultarse de la tecnología de asistencia. Para hacer esto, usa un atributo alt vacío: alt="".

No omitas el atributo alt por completo. Si falta alt, los lectores de pantalla a menudo recurrirán a leer el nombre del archivo, lo que crea una experiencia peor que no tener ningún anuncio. Un alt="" vacío explícitamente le dice al lector de pantalla que omita la imagen.

También puedes usar role="presentation" o role="none" para marcar una imagen como decorativa, pero un atributo alt vacío es más simple y tiene mayor compatibilidad.

Ejemplos

Incorrecto: texto alternativo faltante

El atributo alt está completamente ausente. Un lector de pantalla puede anunciar el nombre del archivo en su lugar.

<img src="team-photo.jpg">

Incorrecto: texto alternativo inútil

El texto alternativo contiene el nombre del archivo en lugar de una descripción significativa.

<img src="chart-q3.png" alt="chart-q3.png">

Correcto: texto alternativo descriptivo usando el atributo `alt`

<img src="team-photo.jpg" alt="El equipo de ingeniería reunido alrededor de una pizarra durante una sesión de planificación">

Correcto: texto alternativo usando `aria-label`

<img src="revenue-chart.png" aria-label="Gráfico de barras que muestra los ingresos trimestrales aumentando de $2M en Q1 a $3.5M en Q4">

Correcto: texto alternativo usando `aria-labelledby`

<p id="chart-desc">Gráfico de barras que muestra el crecimiento de ingresos trimestrales de Q1 a Q4 2024.</p>
<img src="revenue-chart.png" aria-labelledby="chart-desc">

Correcto: imagen decorativa con alt vacío

Esta línea separadora no sirve ningún propósito informativo y debe ocultarse de los lectores de pantalla.

<img src="decorative-line.svg" alt="">

Correcto: imagen decorativa usando `role="presentation"`

<img src="decorative-swirl.png" role="presentation">

Qué verifica esta regla

Esta regla de axe-core (image-alt) inspecciona cada elemento <img> en la página y verifica que tenga una alternativa de texto accesible. Específicamente, comprueba que cada <img> tenga al menos uno de los siguientes:

Un atributo alt no vacío
Un atributo aria-label
Un atributo aria-labelledby que referencie un elemento válido
Un alt="" vacío (o role="presentation" / role="none") para indicar que la imagen es decorativa

Si no se cumple ninguna de estas condiciones, la regla marca la imagen como una violación crítica de accesibilidad.

Learn more: