A lo largo de los módulos anteriores hemos ido aplazando el detalle de las alternativas textuales "hasta el Módulo 5". Ha llegado el momento de saldar esa deuda. El criterio 1.1.1 (Contenido no textual) es de nivel A y es, probablemente, el más incumplido de toda la web: exige que toda imagen tenga una alternativa textual apropiada... y "apropiada" no siempre significa "describir lo que se ve". El mismo archivo de imagen puede necesitar un alt largo, un alt vacío o describir una acción, según su función en la página. En esta lección construimos un árbol de decisión que aplicaremos a las imágenes reales de Cursalia: la miniatura del curso, el logo, los iconos de categoría y el gráfico de progreso del alumno. Con ella cerramos el Módulo 5.

1. Por qué el alt correcto depende de la función, no de la imagen
2. Árbol de decisión del alt
3. Imágenes decorativas, informativas, funcionales, de texto y complejas
4. Cómo redactar un buen alt
5. figure y figcaption
6. SVG, iconos e imágenes de fondo CSS
7. Aplicación a Cursalia
8. Errores comunes, ejercicios y conclusión

Marta, con NVDA, no ve la imagen: oye lo que pongas en el alt. Y aquí está la idea que lo cambia todo: la misma foto puede requerir alternativas completamente distintas según para qué esté ahí. Una foto de un candado puede ser:

• pura decoración junto a un titular → alt="" (que la TA la ignore),
• la ilustración de un artículo sobre seguridad → alt="Candado cerrado sobre un teclado" (informa),
• el icono de un botón de "bloquear cuenta" → alt="Bloquear cuenta" (describe la acción).

Por eso no existe un alt "correcto" en abstracto: primero decides qué función cumple la imagen y de ahí sale la alternativa.

Recorre este árbol para cada imagen. La primera pregunta —"¿aporta algo o es solo adorno?"— es la más importante y la que más gente se salta.

No aporta información: separadores, fondos ornamentales, una foto genérica de relleno junto a un texto que ya lo dice todo. Debe ser ignorada por la tecnología de asistencia, y para eso el alt va vacío pero presente:

La diferencia entre alt="" y no poner alt es enorme: alt="" dice explícitamente "no hay nada que anunciar"; omitir el atributo hace que muchos lectores lean la URL del archivo. Alternativa equivalente: role="presentation" (o role="none"), aunque el alt="" es lo más simple y robusto.

Transmite información que el texto circundante no da. El alt debe comunicar esa información, de forma concisa:

Pregúntate: "si quitara la imagen y la sustituyera por este texto, ¿el lector recibiría lo mismo?". Si la respuesta es sí, tu alt es bueno.

La imagen está dentro de un enlace o un botón y representa su acción. Aquí el alt no describe la imagen, describe lo que hace:

Si un <button> solo contiene un icono SVG, oculta el SVG con aria-hidden="true" y pon el nombre en el propio botón con aria-label (como vimos en el reproductor de 05-03).

Una imagen cuyo contenido es texto (un botón "Comprar" renderizado como imagen, un titular en un JPG). Se debe evitar: no escala, no se puede seleccionar, empeora con el zoom de Sofía y viola el criterio 1.4.5 (Imágenes de texto). Usa texto real con CSS. Si es inevitable (un logo con un lema), el alt debe contener el texto exacto:

Gráficos, diagramas, mapas, infografías: contienen demasiada información para un alt corto. La técnica es doble: un alt breve que dé el titular, y una descripción larga adyacente (o vinculada con aria-describedby):

El alt corto ("Progreso del alumno por módulo") permite a Marta decidir si quiere el detalle; la descripción larga, referenciada con aria-describedby, le da los datos completos. Esa descripción, además, beneficia a todos: es texto real, indexable y seleccionable.

Reglas prácticas:

• Conciso. Una frase suele bastar. Los lectores no permiten pausar a mitad de un alt larguísimo.
• Sin "imagen de" / "foto de". La TA ya anuncia que es una imagen; añadir "imagen de..." es redundante y molesto. Escribe directamente el contenido.
• Contextual. El mismo dibujo lleva un alt distinto en un artículo que en un botón. Piensa en la función.
• Sin relleno de palabras clave. El alt no es para SEO forzado; rellenarlo de keywords perjudica a Marta y penaliza igualmente.
• Puntúa. Un punto final hace que el lector haga una pausa natural.

Cuando una imagen lleva un pie visible para todos, usa <figure> con <figcaption>. Ojo: el figcaption no sustituye al alt; cumplen funciones distintas. El alt describe la imagen para quien no la ve; el figcaption es una leyenda para todos.

A veces el figcaption ya describe todo y el alt puede ser breve o vacío para no duplicar; pero por defecto rellena ambos con contenido complementario.

SVG inline. Un <svg> no tiene atributo alt. Para hacerlo accesible como imagen, dale role="img" y un nombre con <title> o aria-label; si es decorativo, aria-hidden="true":

El focusable="false" evita que algunos navegadores (viejos Edge/IE) den foco al SVG y creen paradas de tab fantasma.

Iconos. Dos técnicas:

• Icon fonts (una <i> con un carácter de fuente de iconos): siempre aria-hidden="true" porque el carácter puede leerse como un símbolo raro. El significado va en texto aparte.
• SVG es preferible: escala nítido y se controla mejor. Mismo principio: si el icono acompaña a un texto, aria-hidden; si el icono es la única información (un botón solo-icono), dale nombre con aria-label en el control.

Imágenes de fondo CSS (background-image). No son accesibles: no están en el árbol de accesibilidad y no admiten alt. Por eso son correctas para pura decoración, pero nunca deben portar información. Si un background-image transmite algo (un icono de estado, un gráfico), es un error: pásalo a un <img> con alt o añade texto alternativo visible/oculto.

Recorramos las imágenes reales de la plataforma con el árbol de decisión:

El caso de la miniatura es el más instructivo: en una tarjeta de catálogo, el título del curso casi siempre ya está en texto, así que darle alt con el mismo título hace que Marta lo oiga dos veces. La miniatura pasa a ser decorativa (alt="") precisamente porque su información ya está cubierta por el texto. De nuevo: la función manda sobre el contenido visual.

• Omitir el alt en lugar de alt="". Sin alt, muchos lectores leen la URL del archivo. Para decorativas, alt="" explícito.
• Escribir "imagen de..." / "foto de...". Redundante: la TA ya anuncia que es una imagen.
• Describir la imagen en un elemento funcional. En un logo-enlace, alt="logo" no dice a dónde lleva. Describe la acción.
• Meter un gráfico complejo en un alt de 300 caracteres. Nadie puede oír eso de un tirón. Usa alt breve + descripción larga.
• Información en background-image. No llega a la TA. Los fondos CSS solo para decoración.
• Duplicar título de curso en la miniatura. Marta lo oye dos veces. Si el texto ya está, alt="".
• Consejo: ante cualquier imagen, hazte dos preguntas en orden: (1) ¿aporta información o función, o es decoración? y (2) ¿es interactiva?. Con esas dos respuestas, el árbol de decisión te da el alt correcto.

Ejercicio 1. Para cada imagen de Cursalia, indica el tipo y el alt (o técnica) adecuado: (a) una línea divisoria ornamental entre secciones; (b) el logo dentro del enlace al inicio; (c) el gráfico de barras del progreso del alumno.

Ejercicio 2. Este código de una tarjeta de catálogo tiene un problema de accesibilidad. Detéctalo y corrígelo.

Ejercicio 3. Tienes un botón que solo contiene un SVG de una papelera para eliminar un elemento. Escribe el HTML accesible.

Solución 1. (a) Decorativa → <img src="linea.svg" alt=""> (o un fondo CSS, ya que es pura decoración). (b) Funcional → <a href="/"><img src="logo.svg" alt="Cursalia, ir al inicio"></a>; el alt describe la acción, no "logo". (c) Compleja → alt="Progreso por módulo" breve + una descripción larga adyacente con los porcentajes de cada módulo, vinculada con aria-describedby.

Solución 2. El problema es la duplicación: el alt de la miniatura repite el título que ya está en el <h3>. Marta oiría "Accesibilidad Web" dos veces. Como la información ya está en texto, la miniatura es decorativa:

Solución 3. El botón solo-icono necesita nombre en el control y el SVG oculto a la TA:

El aria-label="Eliminar" da el nombre accesible (describe la acción); aria-hidden="true" evita que el SVG se anuncie; focusable="false" evita paradas de tab fantasma.

Con esta lección cerramos el Módulo 5. Ya no ves una imagen y te preguntas "¿qué pongo en el alt?": recorres el árbol de decisión —decorativa, informativa, funcional, de texto o compleja— y la función de la imagen te dicta la respuesta. Y con ello cerramos también la fase de construcción del curso: en los módulos 1 a 5 hemos aprendido qué es la accesibilidad, por qué importa, qué exige WCAG y cómo implementarla —estructura semántica, formularios, ARIA, contraste, widgets con JavaScript, teclado, multimedia e imágenes—. Sabemos construir accesible.

Ahora falta la pregunta decisiva: ¿realmente funciona lo que hemos construido? Un aria-expanded puede estar mal sincronizado, un focus trap puede tener una fuga, un alt puede sonar fatal con NVDA. Todo eso hay que verificarlo. En el Módulo 6 aprenderemos a comprobar la accesibilidad de forma sistemática: pruebas manuales (teclado y lector de pantalla), herramientas automatizadas (axe, Lighthouse) y sus límites, pruebas con usuarios reales y tecnologías de asistencia, e interpretación de informes de auditoría. Pasamos de construir a demostrar que Cursalia es accesible de verdad.