Regla de accesibilidad: El texto alternativo de las imágenes no debe repetirse como texto

Acerca de esta regla de accesibilidad

Por qué esto es un problema

Los lectores de pantalla procesan tanto el texto alternativo de una imagen como cualquier texto visible que la rodee. Cuando estos son idénticos, los usuarios escuchan algo como “Página de Inicio Página de Inicio” — la misma frase repetida consecutivamente. Esta redundancia es desorientadora, ralentiza a los usuarios y no añade valor. En algunos casos puede incluso ser confusa, haciendo que los usuarios piensen que hay dos elementos separados cuando solo hay uno.

Este problema afecta principalmente a usuarios ciegos y sordociegos que dependen de los lectores de pantalla para interpretar el contenido de la página. Se marca como una buena práctica de Deque y se alinea con los principios detrás del Criterio de Éxito 1.1.1 de WCAG (Contenido no textual), que requiere que el contenido no textual tenga una alternativa textual que sirva un propósito equivalente — no duplicado.

Cómo solucionarlo

La solución depende del contexto:

Imágenes decorativas o redundantes dentro de enlaces o botones: Si el texto visible ya describe el propósito, establece alt="" en la imagen. La imagen se vuelve decorativa, y el lector de pantalla lee solo el texto visible.
Imágenes que añaden información única: Si la imagen transmite algo que el texto adyacente no hace, escribe texto alt que describa solo la información adicional — no repitas lo que ya está ahí.
Botones de imagen (<input type="image">): El atributo alt sirve como la etiqueta del botón. Asegúrate de que describe claramente la acción (ej., “Enviar,” “Buscar”) y no duplica el texto colocado junto al botón.

Consejos para escribir buen texto alternativo

Describe el propósito o acción, no la apariencia visual de la imagen.
Pregúntate: “Si quitara esta imagen, ¿qué palabras necesitaría para transmitir la misma información?”
Evita palabras de relleno como “imagen de,” “foto de,” o nombres de archivos — añaden ruido sin valor.
Mantenlo conciso y significativo.

Ejemplos

Incorrecto: el texto `alt` duplica el texto del enlace adyacente

El lector de pantalla anuncia “Página de Inicio Página de Inicio” porque tanto el atributo alt como el texto visible dicen lo mismo.

<a href="index.html">
  <img src="home-icon.png" alt="Página de Inicio" width="24" height="25">
  Página de Inicio
</a>

Correcto: `alt` vacío en una imagen redundante dentro de un enlace

Como el texto visible “Página de Inicio” ya describe el enlace, el icono se marca como decorativo con alt="". El lector de pantalla anuncia “Página de Inicio” una vez.

<a href="index.html">
  <img src="home-icon.png" alt="" width="24" height="25">
  Página de Inicio
</a>

Incorrecto: texto del botón duplicado junto a un botón de imagen

La palabra “Buscar” aparece tanto como el texto alt en el botón de imagen como en el texto visible adyacente, causando duplicación.

<input type="image" src="search.png" alt="Buscar">
<span>Buscar</span>

Correcto: eliminar el texto adyacente redundante

Cuando uses un botón de imagen, deja que el atributo alt sea la única etiqueta y elimina el texto duplicado.

<input type="image" src="search.png" alt="Buscar">

Correcto: la imagen añade información única junto al texto

Si la imagen transmite algo que el texto no hace, escribe texto alt que capture solo la información única.

<a href="report.html">
  <img src="chart.png" alt="Gráfico de barras mostrando un aumento del 40% en Q3" width="80" height="60">
  Informe Trimestral
</a>

Aquí, el texto visible dice “Informe Trimestral” mientras que el texto alt de la imagen describe lo que el gráfico realmente muestra — sin duplicación, y ambas piezas de información son útiles.

Learn more: