Texto alternativo en imágenes

¿Qué es el texto alternativo?

El texto alternativo —o atributo alto— se una descripción textual que se asocia a cada imagen del web. Cuando un usuario usa un lector de pantalla, este lee lo texto alternativo en lugar de mostrar la imagen. Cuando la imagen no se carga miedo problemas de conexión, el navegador muestra lo texto alto como sustituto visual.

El criterio WCAG 1.1.1 exige que todo contenido no textual —imágenes, iconos, gráficos, botones con imagen— tenga una alternativa textual que transmita la misma información o función.

¿Por qué es importante?

Una imagen sin texto alternativo es literalmente invisible para una persona que usa un lector de pantalla. El lector puede leer el nombre del fichero («IMG_3847.jpg») o simplemente decir «imagen» sin ningún contexto. En una galería de productos, un portfolio o una página de servicios, esto hace que el contenido sea completamente inaccesible.

Además de la accesibilidad, el texto alternativo tiene un impacto directo en el SEO: Google indexa las imágenes a través del atributo alto. Una imagen muy descrita aparece a los resultados de búsqueda de imágenes y refuerza el posicionamiento de la página.

¿Qué tipos de imágenes existen?

No todas las imágenes necesitan el mismo tratamiento:

Imágenes informativas

Su imágenes que transmiten información relevante que no aparece en el texto adyacente. Necesitan un alto descriptivo y conciso que explique el contenido. Ejemplo: una foto del personal de la empresa necesita el nombre y cargo de la persona.

Imágenes decorativas

Su imágenes puramente estéticas que no añaden información al contenido. Tienen que tener el atributo alto vacío (alt=»») para indicar al lector de pantalla que las ignore. Si no pones el atributo, el lector leerá el nombre del fichero, que es peor.

Imágenes funcionales

Su imágenes que hacen una función, como un botón con icono o un logo que es un enlace al inicio. El texto alt tiene que describir la función, no la apariencia. El logo que puerta al inicio tendría que tener alto=»Volver al inicio» o alt=»Logo NombreEmpresa — Inicio».

Imágenes de texto

Si una imagen contiene texto visible (como un banner promocional con texto), el texto alt tiene que reproducir exactamente el texto de la imagen. Mejor opción: usar texto HTML real en lugar de imagen con texto.

Ejemplos prácticos

<!– Imagen informativa –>
<img src=»equipo.jpg» alt=»El equipo de webaccessible.cat: Rubèn, diseñador web, y Maria, consultora de accesibilidad»>

<!– Imagen decorativa –>
<img src=»separator.png» alt=»»>

<!– Logo que es un enlace –>
<a href=»/»><img src=»logo.png» alt=»webaccessible.cat — Inicio»></a>

<!– MAL: sin alt –>
<img src=»foto-hotel.jpg»>

<!– MAL: alt poco descriptivo –>
<img src=»foto-hotel.jpg» alt=»imagen»>

Como detectar imágenes sin texto alternativo

Hay varias maneras de detectar este error:

• La más rápida es usar la herramienta de autoevaluación de webaccessible.cat: introduce la URL de tu web y en pocos segundos obtienes un informe con todas las imágenes sin alto, su ubicación a la página y la gravedad del problema.
• También puedes usar la extensión WAVE del navegador, que marca con un icono rojo todas las imágenes sin texto alternativo. O abrir las DevTools del navegador y buscar elementos img sin el atributo alt.

Cómo corregirlo en WordPress

En WordPress, puedes añadir el texto alternativo desde la Biblioteca de Medios: selecciona la imagen, busca el campo «Texto alternativo» y escribe la descripción. Este valor se aplica a todas las instancias de aquella imagen al web.

Si usas el bloque de imagen de Gutenberg o el módulo de imagen de Divi, encontrarás el campo de alt texto directamente a las opciones del bloque. Para imágenes en bloques HTML, tienes que añadir el atributo manualmente.

Una cosa importante: WordPress permite dejar el campo alto en blanco para imágenes decorativas, pero tienes que asegurarte que el atributo alto=»» esté presente al código HTML. Si el campo es vacío pero el atributo no existe, el comportamiento depende del tema.

¿Cuánto tiempo tarda a corregirse?

Depende del número de imágenes del web. Añadir alto texto a imágenes nuevas es rápido —pocos minutos por imagen—. El trabajo importante es la auditoría inicial: identificar todas las imágenes existentes sin alt y priorizar las más relevantes para los usuarios.

Si tienes centenares de imágenes, puedes priorizar:

1. Primero las imágenes de productos o servicios.
2. Después las imágenes de contenido.
3. Finalmente las imágenes de fondos o decoración.