Contenido no textual

Qué exige este criterio

El contenido no textual — imágenes, iconos, gráficos, animaciones, CAPTCHAs, elementos de audio incrustados, experiencias sensoriales — debe llevar una alternativa textual que transmita la misma información o función. Dicha alternativa es lo que la tecnología de apoyo presentará al usuario cuando el original no pueda ser percibido.

Las cuatro categorías que WCAG distingue:

• Las imágenes informativas necesitan un texto alternativo que describa la información que transmiten.
• Las imágenes funcionales (enlaces, botones) necesitan un texto alternativo que describa la acción, no el aspecto visual.
• Las imágenes decorativas deben llevar un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.
• Las imágenes complejas (gráficos, diagramas) necesitan un texto alternativo breve más una descripción más extensa en el cuerpo del texto, en un bloque <details> o mediante aria-describedby.

Cómo cumplirlo

• Añadir el atributo alt a todo elemento <img>. Vacío si es decorativo; descriptivo si es informativo.
• Asignar un nombre accesible a todo <button> de icono sin texto visible, mediante aria-label, texto visible o un <title> en SVG.
• Para gráficos e infografías, redactar un texto alternativo de una frase resumen e incluir los datos en una tabla accesible inmediatamente antes o después de la figura.
• Para los CAPTCHAs, proporcionar al menos una alternativa no visual (CAPTCHA de audio, verificación por correo electrónico, limitación de tasa en el servidor).
• Para el audio que transmite información (avance de un pódcast, sonido de interfaz), facilitar un equivalente textual.

Fallos habituales

• alt="image" o alt="foto de una persona" — describe el medio, no el contenido.
• Botones de icono sin nombre accesible (<button><svg /></button>). Los lectores de pantalla anuncian únicamente «botón» sin información adicional.
• Imágenes decorativas sin alt="" — los lectores de pantalla recurren a leer el nombre del archivo.
• Elementos <img> de gráficos cuyo texto alternativo es solo el título del gráfico y los datos subyacentes no aparecen en ningún lugar de la página.
• Imágenes de fondo CSS con significado informativo y sin etiqueta de texto en el marcado.

Por qué es importante

Este criterio es el fundamento de la accesibilidad para lectores de pantalla. Un sitio que no cumple 1.1.1 es inutilizable para los usuarios con ceguera: cada imagen se convierte en un callejón sin salida. Es además el fallo más frecuente que detectan axe y Lighthouse, porque las herramientas automatizadas pueden señalar la ausencia de textos alternativos, pero no pueden juzgar si el texto alternativo presente es significativo.