El texto alternativo es uno de los elementos de la accesibilidad digital que más se pasan por alto, pero que más impacto tienen.
Tanto si estás diseñando un sitio web, escribiendo un blog o programando una publicación en las redes sociales, añadir un texto alternativo reflexivo y descriptivo marca una verdadera diferencia para las personas que dependen de lectores de pantalla u otras tecnologías de asistencia.
Pero escribir un texto alternativo eficaz no siempre es sencillo. ¿Qué dices de un gráfico? ¿Las imágenes de los productos necesitan detalles? ¿Cuándo es mejor dejar el texto alternativo en blanco?
En esta guía, trataremos todo lo que necesitas saber sobre las mejores prácticas de texto alternativo, con ejemplos reales de texto alternativo. En unos instantes, estarás mejor preparado para escribir descripciones de imágenes que mejoren la accesibilidad, impulsen el SEO y cumplan las normas de conformidad clave.
El texto Alt, abreviatura de “texto alternativo”, es una descripción escrita de una imagen. Suele aparecer en el código HTML como una línea visible de texto junto a la imagen, o como una descripción más larga en una página aparte a la que se accede a través de un enlace.
El texto alternativo es increíblemente importante para las personas con discapacidad visual, ya que les proporciona un contexto esencial que, de otro modo, perderían. Convierte lo visual en palabras, haciendo que el contenido sea más inclusivo y más fácil de navegar.
El texto Alt se creó originalmente para mejorar la accesibilidad digital, y esa sigue siendo su función más importante hoy en día. Para los usuarios ciegos o con baja visión, los lectores de pantalla utilizan el texto alternativo para describir las imágenes en voz alta, ayudándoles a navegar y comprender el contenido visual.
Pero el texto alternativo no sólo sirve para la tecnología de asistencia. Cuando está bien escrito, también contribuye a mejorar el SEO.
Esto se debe a que los motores de búsqueda no pueden “ver” las imágenes. Dependen del texto alternativo, junto con los nombres de los archivos, para interpretar lo que muestra una imagen. Esto significa que un texto alternativo relevante, que utilice palabras clave de forma natural, puede mejorar la clasificación de tus páginas en los resultados de búsqueda de imágenes.
El mejor texto alternativo es específico, conciso y relevante para el propósito de la imagen. He aquí algunos consejos prácticos para guiar tu escritura:
Si sigues estas prácticas recomendadas, crearás un texto alternativo que sea realmente útil para los usuarios. Para ver estos principios en acción, echa un vistazo a los siguientes ejemplos de texto alternativo.
Lo que puede sorprenderte es que no todos los textos alternativos deben escribirse de la misma manera.
¿Por qué? Porque los distintos tipos de imágenes requieren enfoques diferentes.
Pero tanto si trabajas con gráficos como con contenido de redes sociales o fotos de productos, el objetivo es siempre el mismo: describir lo que importa, de forma que esté conectado con el contexto de la imagen y favorezca la experiencia del usuario.
Examinemos cómo enfocar el texto alternativo para cada tipo de imagen:
Como su nombre indica, las imágenes informativas transmiten información clave que no está escrita en ninguna otra parte de la página.
[Imagen:] La pantalla de un ordenador portátil muestra el dashboard de configuración de privacidad de un usuario.
Texto alternativo: El dashboard de configuración de la privacidad muestra las opciones de seguimiento de la ubicación, preferencias de marketing e intercambio de datos.
Esta descripción se centra en lo que es visible y relevante para el contexto de la imagen, sin dar demasiadas explicaciones.
Las imágenes decorativas no añaden contenido significativo. Están ahí por pura estética y deben ser omitidos por los lectores de pantalla y otras tecnologías de asistencia.
[Imagen:] Un fondo de ondas azules.
Texto alternativo: alt=”” (vacío)
Utiliza un atributo alt nulo, como en el ejemplo anterior, para que la tecnología de asistencia pueda ignorar la imagen y seguir adelante.
Los cuadros y gráficos transmiten datos complejos, que pueden parecer difíciles de condensar en un texto alternativo.
¿La respuesta? Tu texto alternativo debe resumir simplemente la conclusión clave del gráfico.
[Imagen:] Gráfico de barras que muestra las tasas de participación en los banners de cookies por diseño.
Texto alternativo: Gráfico de barras que muestra que los banners con menos opciones tienen mayores índices de consentimiento que los banners con opciones granulares.
Si hay más detalles, puedes plantearte ofrecer una descripción más larga en texto cercano o enlazar a una alternativa de texto.
Las imágenes de los productos deben describirse con detalles visuales clave que ayuden a los usuarios a entender lo que se vende.
[Imagen:] Un par de auriculares inalámbricos sobre fondo blanco.
Texto alternativo: Auriculares inalámbricos over-ear negros con almohadillas acolchadas y diadema ajustable.
Esto es especialmente importante para la accesibilidad y usabilidad del comercio electrónico.
Las redes sociales no son una excepción cuando se trata de escribir texto alternativo. Cuando compartas contenido visual en los canales sociales, incluye un texto alternativo conciso pero descriptivo que describa la imagen de forma relacionada con el contexto de la publicación.
[Imagen:] Un equipo reunido en torno a una pizarra durante una reunión.
Texto alternativo: El equipo de marketing hace un brainstorming de ideas de campaña en torno a una pizarra cubierta de notas adhesivas.
La mayoría de las plataformas, como X, LinkedIn e Instagram, admiten ahora el texto alternativo, así que no hay excusa para saltárselo, garantizando que todos los miembros de la comunidad puedan acceder a tu contenido.
Incluso con las mejores intenciones, es fácil equivocarse con el texto alternativo. He aquí algunos de los escollos más comunes, y cómo evitarlos:
Un texto alternativo como “Imagen de un gráfico” o “Foto de un producto” no ofrece ningún contexto útil. Sé concreto. ¿Qué muestra el gráfico? ¿Qué tipo de producto es?
El texto alternativo no es lugar para ensayos completos. Las descripciones demasiado detalladas pueden abrumar a los usuarios de lectores de pantalla e interrumpir el flujo. Que sea breve y dulce: bastarán unas pocas palabras, o dos frases claras y centradas como máximo.
Un texto alternativo repleto de palabras clave y sin una descripción real no ayuda a los usuarios ni a los motores de búsqueda. Recuerda centrarte primero en la claridad: cuando el texto alternativo sea realmente útil, puedes estar seguro de que las ventajas SEO no tardarán en llegar.
Si el pie de foto o el texto cercano ya dicen lo mismo, no hace falta repetirlo en el texto alternativo. Céntrate en lo que aporta la propia imagen.
Los botones, iconos y enlaces con imágenes deben tener un texto alternativo descriptivo que explique su función, como “Enviar formulario” o “Descargar PDF”, no sólo “flecha” o “icono”.
Si gestionas contenido en distintas plataformas, asegúrate de que el texto alternativo funciona de forma coherente en todas ellas, incluidos los móviles y las publicaciones en redes sociales. La accesibilidad no debe limitarse a tu sitio web.
Si evitas estos errores comunes y utilizas las herramientas adecuadas, estarás más cerca de crear una experiencia más accesible y fácil de usar.
Una vez que has escrito el texto alternativo, ¿cómo sabes que funciona?
Es importante probar lo bien que funciona en la práctica tu texto alternativo, tanto para los lectores de pantalla como para la experiencia general del usuario.
He aquí cómo probar y mejorar las descripciones de tus imágenes:
Prueba a navegar por tu web con un lector de pantalla como NVDA (Windows) o VoiceOver (macOS). Esto te da una idea directa de cómo se lee en voz alta tu texto alternativo y si tiene sentido en su contexto.
Desactivar las imágenes en tu navegador es una forma rápida de previsualizar el texto alternativo que aparece en lugar de cada visual. Puede ser una buena forma de descubrir descripciones que resulten confusas o redundantes y necesiten edición.
Utiliza herramientas automatizadas para ayudar a descubrir cualquier error que pueda afectar a los lectores de pantalla, junto con otros problemas de accesibilidad.
Si tienes acceso a probadores que utilicen tecnología de apoyo, sus comentarios son lo mejor que puedes conseguir. Pregunta si tu texto alternativo te parece útil, conciso y coherente, y ajústalo en función de sus sugerencias.
Una vez que hayas optimizado el texto alternativo, controla el tráfico de búsqueda relacionado con imágenes en Google Search Console. Si tus imágenes empiezan a aparecer en los resultados relevantes, sabrás que tus descripciones también están funcionando para los motores de búsqueda.
Optimizar el texto alternativo es un proceso continuo, pero seguir estos pasos te ayudará a mantenerte en el buen camino y a construir una experiencia digital más inclusiva.
Si quieres cumplir las normas de accesibilidad, el texto alternativo no es opcional. Las Pautas de Accesibilidad al Contenido en la Web (WCAG) establecen expectativas claras sobre cómo deben tratarse las imágenes para ayudar a los usuarios con discapacidades visuales, entre ellas:
Cumplir estas normas te ayuda a crear un sitio más inclusivo. Y también podría ayudar a reducir el riesgo legal, especialmente para las organizaciones que operan en zonas donde se aplican leyes de accesibilidad, como la Ley Europea de Accesibilidad.
El texto alternativo puede ser un pequeño detalle, pero tiene un gran impacto.
Hace que tu contenido sea más inclusivo. Te ayuda a cumplir las normas de accesibilidad. Potencia el SEO.
Pero lo más importante es que mejora la experiencia de las personas reales que confían en la tecnología de asistencia cada día.
Si sigues las mejores prácticas y evitas los errores comunes descritos anteriormente, podrás empezar a hacer de la accesibilidad una parte natural de tu proceso de contenidos.
Más información sobre Echa un vistazo a nuestro WayWidget y ayuda a que más gente acceda a tu sitio.
