El texto alternativo (o alt text) es uno de los elementos más simples pero más poderosos para lograr una web accesible. Aunque muchos lo asocian solo con el SEO, su verdadera función es mucho más importante: El texto alternativo accesible sirve para garantizar que todas las personas, incluidas aquellas que usan lectores de pantalla, puedan comprender el contenido visual de una página. Pero… ¿Cómo saber qué poner y qué no? Esta guía práctica, con ejemplos claros, te lo explica paso a paso.
¿Qué es el texto alternativo y quién lo “lee”?
El texto alternativo es un atributo del HTML que describe el contenido de una imagen. Lo “leen” principalmente:
- Lectores de pantalla, usados por personas ciegas o con baja visión.
- Motores de búsqueda, como Google, para indexar correctamente la imagen.
- Navegadores, cuando la imagen no se carga.
También es requerido por normativas como las WCAG (Web Content Accessibility Guidelines) y la EN 301 549 en Europa.
En el código HTML, se ve así:
<img src=”equipo.jpg” alt=”Equipo de diseño trabajando en una pizarra blanca”>
La Regla de Oro: Contexto, Contexto y Contexto
El mayor error al escribir texto alternativo es describir la imagen de forma literal y aislada. El contexto lo es todo. Piensa: ¿Qué aporta esta imagen al contenido? ¿Qué necesita saber el usuario si no puede verla?
Por ejemplo:
- Incorrecto: “Una mujer con laptop sonriendo.”
- Correcto: “Diseñadora revisando prototipo en laptop durante reunión de equipo.”
La segunda opción contextualiza la imagen en relación al contenido del sitio.
Caso 1: Imágenes Informativas
Estas son imágenes que comunican información esencial: fotos de personas, gráficos de datos, ilustraciones explicativas.
Ejemplo 1: Foto de equipo
- Incorrecto: “Cinco personas de pie.”
- Correcto: “Equipo de atención al cliente posando en la oficina principal.”
Ejemplo 2: Gráfico de ventas
- Incorrecto: “Gráfico de barras de colores.”
- Correcto: “Gráfico que muestra aumento del 30% en ventas trimestrales de 2024.”
Consejo clave: Sé conciso, pero informativo. Si la imagen es muy compleja, acompáñala de una descripción larga en el texto principal o con aria-describedby.
Caso 2: Imágenes Funcionales
Estas no muestran información visual, sino que ejecutan acciones: botones, iconos, enlaces.
Aquí no se describe lo que se ve, sino lo que hace.
Ejemplo 1: Icono de búsqueda
- Incorrecto: “Lupa”
- Correcto: “Buscar”
Ejemplo 2: Botón con ícono de sobre
- Incorrecto: “Sobre”
- Correcto: “Enviar mensaje”
*Usa frases como: “Ir al inicio”, “Descargar informe”, “Cerrar menú”.
Caso 3: Imágenes Decorativas
Si una imagen no aporta información y está ahí solo por estética o relleno visual, no debe tener texto alternativo.
Ejemplo: adornos de fondo, bordes florales, sombras.
Lo correcto es:
<img src=”decorativo.png” alt=””>
Este alt=”” indica al lector de pantalla que puede ignorarla, evitando confusión o redundancia.
Checklist Rápido para Evaluar tu Texto Alternativo
Antes de publicar, hazte estas 5 preguntas:
- ¿Describe el propósito de la imagen, no solo su apariencia?
- ¿Tiene sentido dentro del contexto del contenido?
- ¿Es breve pero informativo (máximo 125 caracteres)?
- ¿Evita frases como “imagen de…” o “foto de…” innecesarias?
- ¿Es diferente según el tipo de imagen (informativa, funcional o decorativa)?
Si respondes “sí” a todas, ¡vas por buen camino!
Conclusión
El texto alternativo no es solo una casilla técnica que hay que llenar: es una oportunidad para crear una web más inclusiva y, de paso, mejorar tu posicionamiento en buscadores. Piensa en el contexto, en la intención y en la persona que no puede ver la imagen pero sí quiere entenderla.
Preguntas Frecuentes (FAQs)
Si la imagen no tiene alt, los lectores de pantalla pueden anunciar solo la palabra “imagen” o leer el nombre del archivo, lo que resulta confuso. También pierdes oportunidades de SEO.
Sí, según las WCAG y normativas como la EN 301 549. Toda imagen debe tener un alt adecuado o vacío si es decorativa.
El texto alternativo es breve. Si la imagen es compleja (gráfico, mapa, infografía), se recomienda una descripción larga adicional, por ejemplo en el contenido o mediante aria-describedby.
Los motores de búsqueda lo usan para entender el contenido visual. Un buen alt puede mejorar la relevancia de la página en resultados de búsqueda.
Puedes consultar directamente las WCAG en W3C o explorar guías prácticas en sitios especializados como WebAIM.