Caso práctico, ejercicios y lista de comprobación

Es el momento de aplicar todo lo aprendido. En esta lección vas a revisar las imágenes de una página real de un ayuntamiento, a clasificarlas, a proponer su alternativa y a decidir qué hay que cambiar más allá del alt. Después tienes ejercicios de autoevaluación con su solución y una lista de comprobación para tus propios proyectos.

Caso práctico: la página de las fiestas de Sierra Alta

El Ayuntamiento de Sierra Alta (municipio ficticio de 18.000 habitantes) va a publicar la página «Fiestas Patronales 2026» y ha pedido revisar sus imágenes antes. Como organismo del sector público, su web está sujeta al RD 1112/2018 (PDF, se abre en una ventana nueva), que exige cumplir la norma EN 301 549 (PDF, se abre en una ventana nueva) (cuyos requisitos web equivalen a los criterios A y AA de WCAG 2.1); tú trabajarás ya con WCAG 2.2.

Paso 1. Hacer el inventario

Recorres la página y anotas todo el contenido no textual con su alternativa actual. Combinas tres vistas: la página tal como se ve, WAVE y la página con los estilos desactivados (extensión Web Developer), que revela las imágenes de fondo. Encuentras diez elementos:

1. Logotipo del ayuntamiento en la cabecera, enlazado a la portada, con alt="logo".
2. Panorámica del pueblo en la cabecera, como imagen de fondo con CSS.
3. Cartel oficial de las fiestas en JPG, único lugar donde aparece el programa, con alt="cartel".
4. Botón de búsqueda con un icono de lupa de una fuente de iconos, sin nombre.
5. Tres tarjetas de «Noticias relacionadas»: foto y titular en el mismo enlace, con el titular repetido en el alt.
6. Galería «Fiestas 2025» con 12 fotos, todas con alt="Galería de fotos de las fiestas".
7. Gráfico de barras en PNG con el presupuesto de las fiestas por partidas, con alt="gráfico".
8. Mapa estático del recinto ferial con alt="mapa".
9. Iconos de redes sociales en el pie, en SVG en línea, sin nombre.
10. Formulario de inscripción al concurso de carrozas con un CAPTCHA de texto distorsionado sin alternativa.

Paso 2. Clasificar y proponer la alternativa

Elemento	Tipo	Alternativa propuesta	Criterio
1. Logotipo enlazado	Funcional	«Ayuntamiento de Sierra Alta, inicio»	1.1.1, 2.4.4
2. Panorámica de cabecera	Decorativa	Se queda como fondo CSS: es correcto	Ninguno
3. Cartel	Texto en imagen	Programa en HTML y cartel con «Cartel de las Fiestas Patronales 2026, del 5 al 13 de septiembre; programa completo a continuación»	1.1.1, 1.4.5
4. Botón de lupa	Funcional	Icono con aria-hidden="true" y botón con nombre «Buscar»	1.1.1, 4.1.2
5. Tarjetas de noticias	Decorativa dentro de enlace	alt=""	1.1.1
6. Galería	Informativa	Un alt distinto por foto: «Desfile de carrozas por la avenida de la Constitución al anochecer»	1.1.1
7. Gráfico del presupuesto	Compleja	«Gráfico de barras: presupuesto de las fiestas 2026 por partidas; datos en la tabla siguiente» y tabla HTML	1.1.1
8. Mapa del recinto	Compleja	Dirección, accesos, aparcamiento reservado y aseos accesibles, en texto	1.1.1
9. Iconos de redes	Funcional	aria-hidden="true" en el SVG y enlace con nombre «Ayuntamiento de Sierra Alta en Instagram»	1.1.1, 2.4.4
10. CAPTCHA	CAPTCHA	Sustituirlo por un campo trampa y un límite de envíos	1.1.1

Paso 3. Lo que el alt no arregla

Cuatro elementos necesitan cambios en el contenido, no solo en el atributo:

• El cartel: el programa se publica como una tabla por días (hora, acto, lugar). Así se puede ampliar, traducir, buscar y copiar.
• El gráfico: la tabla con las partidas y sus importes va justo debajo, con una frase de conclusión («la partida mayor es la de actuaciones musicales, con el 40 % del total»).
• El mapa: lo que la persona necesita es llegar. El texto con la dirección y las referencias es la alternativa más útil para todo el mundo.
• El CAPTCHA: incumple 1.1.1 porque no ofrece alternativa en otra modalidad. Observa que 3.3.8 Autenticación accesible (mínimo) no se aplica aquí, porque el formulario no es un inicio de sesión; aun así, la mejor opción es eliminar la prueba.

Paso 4. Verificar

Con los cambios hechos, compruebas: WAVE ya no marca imágenes sin alternativa ni enlaces vacíos; con NVDA, la tecla G recorre las imágenes y cada una se oye con sentido; Ctrl + F encuentra «carrozas» en el programa; con zoom al 400 % el programa se lee en una columna.

Paso 5. Evitar que vuelva a pasar

Propones al ayuntamiento tres medidas: una guía de estilo de una página para el área de comunicación, configurar el gestor de contenidos para que el alt sea obligatorio con la opción explícita de «imagen decorativa» y una revisión trimestral por muestreo de diez páginas recientes.

Ejercicios de autoevaluación

1. En una tienda online, la foto principal de una camiseta negra muestra el texto «Cartagena 2026» en letras blancas. ¿Qué alt escribirías?

Ver solución

Algo como «Camiseta negra de algodón con el texto Cartagena 2026 en letras blancas sobre el pecho». Es una imagen informativa de producto: color, material y texto impreso. El texto forma parte de una fotografía con otro contenido visual, así que no es una imagen de texto que incumpla 1.4.5, pero debe estar en la alternativa (1.1.1).

2. Una tarjeta de noticia es un único enlace con una foto y el titular «Abre la nueva biblioteca municipal». La foto muestra la fachada. ¿Qué alternativa lleva la foto?

Ver solución

alt="". El titular ya da nombre al enlace; un alt descriptivo alargaría el anuncio y uno igual al titular lo duplicaría.

3. Un botón es una imagen en la que se lee «Pedir cita». Su alt es «Solicitar una cita previa en la oficina». ¿Qué problema hay y cómo se corrige?

Ver solución

Incumple 2.5.3 Etiqueta en el nombre: el nombre accesible no contiene el texto visible, y quien use control por voz dirá «pulsar Pedir cita» sin resultado. El alt debe ser «Pedir cita». Mejor aún, por 1.4.5, sustituir la imagen por un botón con texto real.

4. El gestor de contenidos propone, generado por IA, «Un grupo de personas sentadas alrededor de una mesa en una sala» para la foto de una noticia sobre la aprobación del presupuesto municipal en el pleno. ¿Qué haces?

Ver solución

Lo usas solo como borrador y lo reescribes con el contexto que la IA no tiene: «Los concejales votan a mano alzada el presupuesto de 2027 en el salón de plenos».

5. La página de un museo muestra junto a su ficha un cuadro del siglo XVII. ¿Qué alternativa necesita?

Ver solución

Es una imagen en la que la obra es el contenido: un alt breve que la identifica (título, autoría, fecha y técnica) y una descripción larga en la página, de lo general a lo particular, que separe lo que se ve de la interpretación.

6. Un aviso de «Corte de tráfico del 3 al 7 de marzo» aparece en la portada solo como imagen de fondo con CSS. ¿Qué criterios incumple y qué solución propones?

Ver solución

Incumple 1.1.1 (es el fallo F3 de WCAG: información importante en una imagen de CSS) y 1.4.5, porque es texto en imagen. La solución es publicar el aviso como texto en el HTML; la imagen de fondo puede quedarse como decoración.

Lista de comprobación

• Cada imagen está clasificada según su función en esa página.
• Las imágenes decorativas llevan alt="" o son fondos CSS.
• Ninguna imagen carece del atributo alt.
• Ningún alt es un nombre de fichero, «imagen», «foto» o una lista de palabras clave.
• Las imágenes funcionales dicen la acción o el destino.
• Imagen y texto en el mismo enlace: la imagen va con alt="".
• Los botones con texto en imagen contienen ese texto en su nombre.
• Cada foto de una galería tiene una alternativa distinta.
• Los grupos de imágenes, como las estrellas, tienen una sola alternativa.
• No hay texto en imágenes salvo logotipos o casos esenciales.
• Carteles y programas están publicados también en texto real.
• Gráficos, mapas e infografías tienen descripción larga o tabla en la página.
• Iconos decorativos ocultos y botones de icono con nombre.
• No hay CAPTCHA sin alternativa en otra modalidad.
• Las alternativas propuestas por IA las ha revisado una persona.

Para seguir aprendiendo

• W3C WAI: tutorial de imágenes (Images Tutorial), con ejemplos de cada tipo de imagen.
• W3C WAI: árbol de decisión para el atributo alt.
• Understanding WCAG 2.2: 1.1.1 Contenido no textual.
• Understanding WCAG 2.2: 1.4.5 Imágenes de texto.
• Understanding WCAG 2.2: 2.5.3 Etiqueta en el nombre.