Las imágenes son un componente fundamental del diseño web: comunican ideas, rompen bloques de texto y generan impacto visual que retiene a los usuarios. Junto a ellas debemos añadir siempre texto alternativo (alt text), ya que facilita el acceso a quienes no pueden ver las imágenes y aporta señales útiles para SEO.
Las imágenes desempeñan múltiples funciones en una página y, por tanto, el texto alternativo debe redactarse pensando en su propósito concreto. El alt text ayuda tanto a la accesibilidad como a la indexación por los motores de búsqueda.
El texto alternativo describe una imagen para el usuario y aporta contexto sobre la información o la acción representada. En este artículo analizamos por qué es importante el texto alternativo y proponemos métodos prácticos para redactar descripciones eficaces para el atributo alt.
¿Qué entendemos por texto alternativo?
El texto alternativo, también llamado Alternative Text o alt text, es la representación textual de una imagen que utilizan los lectores de pantalla para describir su contenido a personas con discapacidad visual. Los screen readers leen ese texto en voz alta, lo que facilita la comprensión del contenido visual a usuarios con baja visión o discapacidad.
Con frecuencia encontramos sitios inaccesibles porque no se añade alt text a las imágenes. En esos casos, los lectores de pantalla no proporcionan descripción alguna, lo que impide que muchos usuarios comprendan el contenido visual del sitio.
¿Cómo se emplea el texto alternativo?
No existe una única fórmula para un buen alt text, pero la descripción debe ser breve, precisa y útil para el contexto. Redactar un alt convincente no es complicado: no hace falta narrar cada detalle, sino describir lo relevante según la función de la imagen.
Al escribir alt text, lo primero que debemos valorar es la función de la imagen en la página. Si la imagen no aporta información relevante al mensaje, cabe plantearse eliminarla. Las imágenes meramente decorativas que no añaden contenido suelen poder suprimirse sin afectar la experiencia.
Si no es posible eliminar una imagen decorativa, conviene describirla de forma alternativa. Por ejemplo, si se usa una imagen como encabezado, podemos reutilizar el texto del encabezado como atributo alt. Esto no perjudica nuestro SEO porque las keywords ya aparecen en el encabezado.
¿Por qué es importante el texto alternativo?
La importancia del texto alternativo radica en que hace nuestro sitio accesible para quienes usan lectores de pantalla. Esos usuarios pueden no ver las imágenes por baja visión o por limitaciones del navegador. Al proporcionar descripciones en el alt para todas las imágenes relevantes, garantizamos que cualquier persona pueda acceder y aprovechar la información. A continuación resumimos las razones principales que explican su relevancia.
Accesibilidad
El alt text es una vía alternativa para que usuarios con imágenes desactivadas o que emplean lectores de pantalla obtengan el contenido de la página, por lo que debe transmitir información precisa y contextual. También debemos tener en cuenta la compatibilidad con distintos navegadores y screen readers para facilitar la comprensión.
Optimización para motores de búsqueda
Hace años se creía que los motores no podían leer el texto alternativo y muchos desarrolladores empleaban descripciones genéricas como «imagen (número)». Eso no aporta valor: hoy los motores de búsqueda reconocen keywords dentro del alt y las usan para entender la relevancia de la imagen respecto a las consultas de los usuarios.
Consistencia de diseño
Las descripciones deben evitar palabras para imágenes puramente decorativas y centrarse en el contenido esencial que el usuario necesita conocer. Esto ayuda a mantener coherencia en el diseño y una experiencia homogénea en todas las páginas.
Asegurar claridad
Conviene que las etiquetas alt sean claras, sin abreviaturas confusas ni jerga técnica innecesaria. Describan la imagen en sí, no información exterior a ella; así facilitamos el acceso a cualquiera y, como consecuencia, favorecemos el engagement.
¿Cuál debe ser nuestro texto alternativo?
No hay una única respuesta: depende del propósito de la imagen. Pregúntese si la imagen transmite información importante o ilustra un concepto. Si la respuesta es afirmativa, el alt text es imprescindible y debe aportar contexto relevante al contenido.
Si la imagen responde a un fin estético, puede optar por una descripción genérica, aunque esto no contribuye al valor informativo ni al SEO. En cualquier caso, evaluemos la importancia de la imagen para el tema y el mensaje que deseamos transmitir.
Valorando el propósito, podremos decidir si el alt debe ser descriptivo, funcional o vacío (alt=»») en el caso de elementos puramente decorativos.
Por ejemplo:
Si la imagen es el logotipo de su empresa, debe ser identificable y accesible. Incluiremos un alt que describa tanto la marca como el mensaje, por ejemplo: «Company X – Celebrando 15 años en el mercado».
¿Qué aporta el alt a una imagen?
El alt ayuda a los motores de búsqueda a entender el contenido visual y a evaluar la relevancia de una página frente a una consulta. Por ejemplo, si un usuario busca información sobre tortugas, una imagen etiquetada correctamente facilitará la aparición de esa página en resultados relevantes. Además, el alt puede incluir información contextual, como el autor de la imagen: «El famoso cuadro de la lata de sopa Campbell de Andy Warhol». En definitiva, el alt contribuye a la accesibilidad y a la comprensión del contenido.
¿Cómo generamos texto alternativo a partir de una imagen?
Existen herramientas en línea que nos ayudan a generar alt text para nuestras imágenes.
Tras subir las imágenes, tome el nombre de archivo original y péguelo en el campo correspondiente; al aceptar, la herramienta propondrá tanto un título como un atributo alt para cada imagen.
Otra alternativa es usar servicios que generan el alt automáticamente durante la subida y enlazan la imagen con su descripción, lo que resulta útil cuando los usuarios no pueden ver la imagen.
¿Qué es el atributo alt?
El atributo alt se aplica en HTML para proporcionar la descripción que se mostrará cuando la imagen no pueda cargarse, por ejemplo por enlaces rotos o si JavaScript está deshabilitado. No es necesario incluir un valor alt para imágenes puramente decorativas empleadas como background en CSS.
Por defecto, algunas funciones relacionadas con información emergente están desactivadas en varios navegadores. Si necesita ver información adicional, consulte la documentación del navegador; las combinaciones de teclado varían según la plataforma.
¿Qué debe incluir el texto alternativo?
1. Texto único y descriptivo
Cada imagen debe tener un alt único que la describa de forma específica y transparente. Esto permitirá que los lectores de pantalla transmitan con precisión lo que aparece a quienes no pueden ver la imagen.
2. Puntuación correcta
Use la puntuación adecuada en el alt, ya que mejora la lectura por parte de los screen readers y evita ambigüedades en la interpretación del texto.
3. No utilice caracteres especiales
Evite incluir etiquetas HTML, enlaces o marcado dentro del alt, porque esto puede confundir a los lectores de pantalla.
4. Nombres de archivo cuando sea útil
Si el sujeto de la imagen es claro fuera de contexto, considere incluir el nombre de archivo original en la descripción para facilitar la referencia desde herramientas de gestión de activos.
¿Qué es el texto alternativo en HTML?
La etiqueta HTML <img> admite el atributo alt para definir esa descripción.
Debe usar el atributo alt en HTML para crear el texto alternativo; se introduce como una cadena de texto que describa la imagen de forma concisa.
¿Qué es el atributo alt en un sitio web?
El atributo alt en un sitio web contiene la descripción que queremos mostrar cuando una imagen no se carga o no es visible para el usuario.
Los atributos alt también son útiles con estrategias de diseño que recurren a CSS para mostrar imágenes cuando no están disponibles. Si desea optimizar el atributo alt para motores de búsqueda, incluya keywords relevantes pero sin caer en keyword stuffing; evite duplicar el nombre de archivo o el pie de foto.
Conclusión:
El atributo alt forma parte integral de la estrategia SEO y de accesibilidad de cualquier sitio web. Implementado correctamente, facilita la navegación tanto a usuarios como a los crawlers de los motores de búsqueda en sitios con contenido visual. Esperamos que estas recomendaciones le resulten prácticas y aplicables.
Fuentes y enlaces externos
Páginas a las que los resultados de búsqueda enlazan (excluyendo enlaces internos):
Microsoft Edge puede generar alt text para imágenes en la web – XDA Developers
March 18, 2022 –
XDA Developers
Microsoft Edge puede ahora generar alt text para imágenes sin etiquetar y añadir etiquetas automáticas que ayudan a screen readers y a usuarios con baja visión.
Las descripciones ocultas de imágenes que hacen accesible Internet – The New York Times
February 18, 2022 –
The New York Times
Reportaje sobre cómo las descripciones de imágenes mejoran la accesibilidad en la red y la experiencia de usuarios con discapacidad visual.
