Tipos de imagen: decorativa, informativa, funcional, compleja y texto en imagen

Antes de escribir un texto alternativo hay que responder a una pregunta: ¿qué hace esta imagen en la página? La respuesta determina si el alt debe estar vacío, ser una frase corta, describir una acción o remitir a una descripción larga. Esta lección presenta la clasificación de imágenes que usa la WAI en su tutorial de imágenes, los criterios WCAG implicados y una tabla de decisión que podrás aplicar a cualquier contenido.

Lo que exige WCAG

El criterio 1.1.1 Contenido no textual (nivel A) establece que todo contenido no textual que se presenta a la persona usuaria tiene una alternativa textual que cumple el mismo propósito, con excepciones concretas: controles (necesitan un nombre), multimedia (se trata en otros criterios), pruebas o ejercicios que dejarían de tener sentido en texto, experiencias sensoriales, CAPTCHA (alternativas en distintas modalidades) y decoración (debe poder ignorarse por la tecnología de apoyo).

El criterio 1.4.5 Imágenes de texto (nivel AA) añade que, si la tecnología permite presentar un texto con la apariencia visual deseada, se usa texto real y no una imagen de texto, salvo que la imagen sea personalizable por la persona usuaria o la presentación concreta sea esencial (un logotipo, por ejemplo).

Las cinco categorías

1. Imagen decorativa

No aporta información: separadores, texturas de fondo, una foto de ambiente junto a un texto que ya lo dice todo. Su alternativa correcta es un alt vacío (alt=""), que indica al lector de pantalla que la ignore. Ojo: vacío no es lo mismo que ausente. Sin atributo alt, muchos lectores de pantalla leerán el nombre del fichero («IMG_20240312.jpg»). Si la imagen se pone con CSS como fondo, ya es invisible para la tecnología de apoyo, lo cual es apropiado solo si de verdad es decorativa.

2. Imagen informativa

Transmite un concepto o información sencilla: la foto del producto, la imagen de una persona en una noticia, un pictograma de «prohibido fumar». El alt describe lo que aporta la imagen en ese contexto, de forma breve (una frase, idealmente menos de 125 caracteres, aunque no es un límite técnico).

3. Imagen funcional

Es la imagen que actúa como control: el logotipo que enlaza a la portada, el icono de lupa que es el botón de buscar, la imagen de una papelera para borrar. Aquí el alt no describe la imagen, sino la función: «Inicio», «Buscar», «Eliminar». Describir el dibujo («lupa») es un error típico. Los casos combinados (imagen y texto en el mismo enlace, botones con imagen, grupos de imágenes y galerías) tienen su propia lección más adelante.

4. Imagen compleja

Gráficos, diagramas, infografías, mapas, planos. Contienen más información de la que cabe en una frase. Necesitan un alt breve que identifique la imagen y una descripción larga en texto (en la propia página, en un desplegable o en una página enlazada). Lo veremos en detalle en la lección «Imágenes complejas: gráficos, infografías, mapas y descripciones largas».

5. Texto en imagen

Una imagen que contiene texto: el banner de una campaña, una cita maquetada como imagen, una tabla escaneada. La regla principal es evitarla (1.4.5): el texto se maqueta con HTML y CSS. Si no se puede evitar, el alt debe contener exactamente el mismo texto que se ve en la imagen. Las excepciones, los carteles, los banners y las imágenes de fondo con CSS se tratan a fondo en la lección «Texto en imágenes e imágenes de fondo».

Tabla de decisión

Código de referencia

<!-- Decorativa -->
<img src="separador.png" alt="">

<!-- Informativa -->
<img src="producto-4532.jpg"
     alt="Silla de oficina ergonómica en tela gris con reposabrazos">

<!-- Funcional (la imagen es el único contenido del enlace) -->
<a href="/"><img src="logo.svg" alt="ADDAW - Inicio"></a>

<!-- Incorrecto: sin alt, el lector leerá el nombre del fichero -->
<img src="DSC_0412.jpg">

Cómo comprobarlo

• WAVE marca con iconos distintos las imágenes sin alt, con alt vacío, con alt sospechoso (nombre de fichero, «imagen», «foto») y las imágenes enlazadas sin texto.
• En las herramientas de desarrollo o con la extensión «Web Developer», muestra los alt junto a cada imagen y léelos sin mirar las imágenes.
• Un lector de pantalla recorriendo la página con la tecla G (gráficos, en NVDA) revela enseguida qué se oye realmente.

Resumen

• 1.1.1 Contenido no textual (A): toda imagen necesita una alternativa que cumpla su mismo propósito, o ignorarse si es decorativa.
• Decorativa: alt="". Informativa: una frase. Funcional: la acción o el destino. Compleja: alt breve más descripción larga.
• 1.4.5 Imágenes de texto (AA): usa texto real salvo logotipos o presentaciones esenciales.
• Un alt ausente suele hacer que se lea el nombre del fichero; un alt vacío hace que la imagen se ignore.
• El contexto decide la categoría: la misma imagen puede ser decorativa en una página e informativa en otra.