Textos alternativos en imágenes: principios y aplicación práctica

Qué es el texto alternativo y para qué sirve

El texto alternativo (atributo alt en HTML) es una descripción textual de una imagen que cumple dos funciones principales: permite a los lectores de pantalla transmitir el contenido visual a usuarios con discapacidad visual, y proporciona información cuando la imagen no puede cargarse.

El criterio de éxito 1.1.1 de WCAG 2.1 (Contenido no textual), de nivel A (el más básico), exige que todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito. Este criterio es uno de los más incumplidos en auditorías de accesibilidad web.

Tipos de imágenes y cómo tratarlas

La elección del texto alternativo depende del propósito de la imagen en su contexto, no de sus características visuales intrínsecas. WCAG distingue los siguientes tipos de imágenes:

Imágenes informativas

Transmiten información que complementa o es parte del contenido textual circundante. El texto alternativo debe describir la información que la imagen proporciona, no los detalles visuales por sí mismos.

Imágenes decorativas

No añaden información relevante al contenido y existen únicamente por razones estéticas. Estas imágenes deben tener el atributo alt presente pero con valor vacío (alt=""). Esto indica al lector de pantalla que debe ignorar el elemento.

Importante: omitir el atributo alt no equivale a alt="". Si el atributo alt está ausente, muchos lectores de pantalla leerán el nombre del archivo de imagen, lo que resulta en una experiencia desorientadora.

Imágenes funcionales

Son imágenes que actúan como botones, enlaces o controles de interfaz. El texto alternativo debe describir la función del control, no el aspecto de la imagen. Si un icono de lupa actúa como botón de búsqueda, el alt debe ser "Buscar", no "Icono de lupa".

Imágenes de texto

Imágenes que contienen texto visible. El texto alternativo debe incluir el mismo texto que aparece en la imagen. WCAG recomienda, cuando sea posible, utilizar texto real en lugar de imágenes de texto, ya que el texto real es escalable, traducible y buscable.

Imágenes complejas

Gráficos, diagramas y mapas que contienen información compleja. Para estas imágenes, el atributo alt debe proporcionar un resumen breve, y el contenido completo debe estar disponible mediante una descripción larga (atributo longdesc, o más comúnmente, mediante texto en la página o un enlace a una página con la descripción).

Criterios para redactar textos alternativos efectivos

La redacción del texto alternativo debe seguir criterios de concisión y relevancia contextual:

• Describe el propósito, no el aspecto: salvo que el aspecto visual sea la información relevante (por ejemplo, en una imagen que ilustra la diferencia entre dos paletas de color).
• Evita frases introductorias redundantes: "Imagen de…", "Foto de…", "Ilustración que muestra…" son redundantes porque los lectores de pantalla ya anuncian que se trata de una imagen.
• Longitud moderada: no existe un límite técnico estricto, pero los textos alternativos excesivamente largos dificultan la navegación con lector de pantalla. Para descripciones extensas, usar descripción larga.
• Contexto como factor determinante: la misma imagen puede necesitar textos alternativos distintos según el contexto en que aparezca.
• No repitas el texto circundante: si el texto adyacente ya describe la imagen, el alt puede ser vacío (alt="") para evitar duplicaciones.

SVG e iconos en línea

Las imágenes SVG incluidas directamente en el HTML (inline SVG) o como elemento <img> requieren un tratamiento específico:

• Para SVG como <img src="icono.svg" alt="...">: el atributo alt funciona igual que en imágenes de mapa de bits.
• Para SVG inline usados como iconos decorativos: añadir aria-hidden="true" para ocultarlos de los lectores de pantalla.
• Para SVG inline con contenido informativo: usar <title> dentro del SVG y referenciarla con aria-labelledby.

Imágenes en CSS (background-image)

Las imágenes de fondo definidas mediante la propiedad CSS background-image no son accesibles para los lectores de pantalla. Por este motivo, las imágenes con contenido informativo no deben implementarse como fondo CSS. Las imágenes puramente decorativas, en cambio, son candidatas apropiadas para la implementación como fondo CSS.

Herramientas de auditoría

Las siguientes herramientas permiten identificar imágenes sin texto alternativo o con alt inadecuado:

• axe DevTools: extensión de navegador que detecta violaciones de accesibilidad, incluidas imágenes sin alt o con alt vacío que deberían tenerlo.
• WAVE (wave.webaim.org): herramienta en línea y extensión de navegador que visualiza la estructura de accesibilidad de la página.
• Lighthouse de Google: auditoria automatizada integrada en Chrome DevTools que incluye comprobaciones de accesibilidad.

Las herramientas automáticas identifican la ausencia del atributo alt y algunos casos evidentes de alt inadecuado, pero no pueden evaluar si el contenido del alt es semánticamente correcto para un contexto dado. La revisión manual sigue siendo necesaria.

Referencias y fuentes

• W3C: WCAG 2.1 — Criterio 1.1.1 Contenido no textual
• W3C WAI: Images Tutorial — Web Accessibility Tutorials
• WebAIM: Alternative Text — WebAIM
• W3C: H37: Using alt attributes on img elements

Actualizado: 19 de junio de 2026