Texto alternativo para imágenes

Un adorno en espiral y un gráfico de ventas usan el mismo elemento img, pero el texto alt correcto para el primero es una cadena vacía y para el segundo, una oración completa.

Para qué sirve el texto alt

Un lector de pantalla convierte una página en voz o en braille. Cuando llega a una imagen no puede mirar los píxeles, así que lee el atributo alt. Ese mismo texto aparece cuando una imagen no carga, y es lo que recibe un buscador o un navegador de solo texto. WCAG 2.2 pone esto en primer lugar: el criterio de conformidad 1.1.1 Contenido no textual, de nivel A, pide que toda imagen, ícono o gráfico que transmita información tenga una alternativa textual que cumpla el mismo propósito.

Las palabras clave son "el mismo propósito". El texto alt no es un pie de foto ni una lista de todo lo que sale en el cuadro. Pregúntate qué obtiene de la imagen, en ese lugar, un lector que ve, y escribe eso. La foto de un pan en la página de inicio de una panadería quizá solo necesite "Pan de masa madre, rebanado". La misma foto en un artículo sobre el color de la corteza podría necesitar "Pan de masa madre con la corteza oscura, casi negra, y una miga abierta". El mismo archivo, otra función, otro texto.

Cuatro casos frecuentes

El tutorial de imágenes del W3C clasifica la mayoría de las imágenes en unos pocos grupos. Las imágenes informativas, como una foto o un diagrama sencillo, llevan una descripción breve de lo que muestran. Las imágenes decorativas, como una línea divisoria o una textura de fondo, llevan un alt vacío, escrito alt="", que le indica a la tecnología de apoyo que las salte. Las imágenes funcionales, como un logotipo que enlaza al inicio o una lupa que envía una búsqueda, llevan un texto que dice qué pasa: "Inicio de Corner Bakery" o "Buscar", no "logotipo" ni "lupa". Las imágenes de texto llevan las palabras que aparecen en la imagen.

Omitir el atributo no es lo mismo que dejarlo vacío. Sin ningún alt, algunos lectores de pantalla recurren a leer el nombre del archivo, y quien escucha puede oír algo como "IMG guion bajo 4032 punto jpeg". Un alt vacío es una decisión consciente que dice "aquí no hay nada que ver". Para un gráfico complejo, deja el alt corto ("Gráfico de barras de las ventas mensuales, descrito abajo") y pon los números en una tabla o un párrafo al lado, donde todos puedan leerlos.

Imágenes que no son elementos img

Las imágenes también pueden llegar como SVG en línea o como imágenes de fondo de CSS. Un fondo de CSS no tiene ningún lugar para el texto alt, así que solo debe usarse como decoración; todo lo que tenga significado va en el HTML. Un svg en línea que sea pura decoración se puede ocultar con aria-hidden="true", como explica la unidad 6. WCAG no fija un límite de caracteres para el texto alt, pero el tutorial del W3C vuelve una y otra vez al mismo consejo: sé breve y da lo que importa en ese contexto. Si te ves escribiendo tres oraciones, probablemente ese contenido debe ir en el texto de la página, donde todos puedan leerlo.

Puedes revisar tus propias páginas sin programas especiales. Mira el código fuente de la página y busca <img: cada resultado debe tener un atributo alt, vacío o no. Las herramientas para desarrolladores de los navegadores principales también incluyen un panel de accesibilidad que muestra el nombre que recibe cada imagen. Leer esos nombres seguidos, fuera de contexto, es una buena prueba. Si la lista dice "imagen, imagen, gráfico, logotipo", eso es exactamente lo que oye quien usa un lector de pantalla.