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

Es el momento de aplicar todo el curso a un diseño completo. Vas a revisar el diseño de un trámite municipal antes de que pase a desarrollo, a relacionar cada problema con su criterio, a priorizar y a decidir el rediseño. 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 cita previa del padrón de Villaclara

El Ayuntamiento de Villaclara (ficticio) va a renovar su sede electrónica. Como administración pública, su web debe cumplir el RD 1112/2018 (PDF, se abre en una ventana nueva), que presume la conformidad con la norma armonizada EN 301 549 (PDF, se abre en una ventana nueva) (v3.2.1, basada en WCAG 2.1 AA); el equipo ha decidido diseñar directamente con WCAG 2.2 AA para no quedarse corto. Te entregan en Figma el diseño de «Cita previa para el padrón»: una ficha del trámite y un formulario de tres pasos (elegir día y hora, datos personales, confirmación).

Paso 1. Aplicar las seis pruebas de estrés

Recorres cada pantalla con las pruebas de la lección de validación (320 px, texto ampliado, sin color, recorrido de teclado, lectura lineal y estados olvidados) y anotas lo que encuentras:

Hallazgo	Prueba que lo revela	Criterio
Carrusel de avisos en la cabecera que cambia cada 4 segundos, sin pausa	Lectura lineal	2.2.2
Título «Sede electrónica» en los tres pasos; pasos indicados con círculos de color	Lectura lineal y sin color	2.4.2, 1.4.1
Días con citas libres marcados solo en verde; casillas del calendario de 18 px pegadas	Sin color y medición	1.4.1, 2.5.8
La hora se elige arrastrando un deslizador	Recorrido de teclado	2.5.7
El formato del NIE solo aparece en un tooltip que se esfuma al mover el ratón	Lectura lineal	1.4.13, 3.3.2
A 320 px, el botón de chat fijo tapa «Continuar»	320 px	1.4.10, 2.4.11
La sesión caduca a los 10 minutos sin aviso	Estados olvidados	2.2.1
«Cita reservada. Añadir al calendario» en un aviso que desaparece a los 3 segundos	Estados olvidados	4.1.3, 2.2.1

Paso 2. Priorizar

Clasificas por impacto en la tarea. Bloquean la cita: el deslizador de hora (sin alternativa no se puede elegir hora con teclado ni con control por voz), los días disponibles solo en verde, el botón «Continuar» tapado y la sesión que caduca sin aviso. Dificultan mucho: el título repetido, los pasos sin texto y el formato del NIE escondido. Molestan y distraen: el carrusel automático. El aviso final es grave porque es la única forma de guardar la cita en el calendario.

Paso 3. Rediseñar

• Hora: botones de opción con las horas disponibles («09:30», «09:45»…), de 44 px de alto con 8 px de separación.
• Calendario: días de 40 por 40 px; los días con cita llevan texto «Libre» o un icono y su nombre accesible incluye «hay citas disponibles»; leyenda visible encima del calendario.
• Orientación: título «Paso 1 de 3: Día y hora – Cita previa del padrón – Sede electrónica de Villaclara», indicador de pasos con el nombre de cada paso y H1 que cambia en cada uno.
• NIE: instrucción visible bajo la etiqueta («Ejemplo: X1234567L»).
• 320 px: el chat pasa a ser un enlace «Ayuda» en el pie, en la misma posición en todas las páginas (3.2.6).
• Sesión: aviso modal dos minutos antes de caducar, con «Seguir conectado» y «Cerrar sesión».
• Confirmación: página propia con el resumen de la cita, el enlace «Añadir al calendario» y un mensaje de estado «Cita reservada» anunciado sin mover el foco.
• Avisos: tarjeta estática con el aviso vigente, sin carrusel.

Paso 4. Validar de nuevo y anotar

Repites las seis pruebas sobre el rediseño y preparas la capa de anotaciones: encabezados, orden de foco numerado, nombres accesibles («Día 14 de noviembre, hay citas disponibles»), estados de cada componente, anuncios dinámicos y comportamiento a 320 px. Cada anotación se convierte en un criterio de aceptación. Por último, propones probar el prototipo en HTML con dos personas usuarias de lector de pantalla y una persona mayor antes de publicar.

Ejercicios de autoevaluación

1. La portada de una tienda tiene un banner animado en bucle que muestra tres ofertas, sin controles. ¿Qué criterio incumple y qué propondrías?

Ver solución

Incumple 2.2.2 Poner en pausa, detener, ocultar (A), porque se mueve más de cinco segundos junto a otro contenido. Lo mejor es eliminar el bucle y mostrar las ofertas estáticas; si se mantiene, un botón «Pausar» visible y primero en el orden de foco.

2. Una barra de herramientas tiene botones de icono (imprimir, compartir, descargar) que solo muestran su nombre en un tooltip al pasar el ratón. ¿Qué problemas ves?

Ver solución

Con teclado y en pantallas táctiles el nombre no aparece; el tooltip debe mostrarse también con el foco y cumplir 1.4.13 (descartable, sobrevolable, persistente). Cada botón necesita un nombre accesible literal y coherente (4.1.2, 3.2.4). Lo ideal es añadir texto visible junto al icono.

3. En una solicitud de subvención con 40 campos, la sesión caduca a los 20 minutos y se pierden los datos. ¿Qué exige WCAG y qué harías en diseño?

Ver solución

2.2.1 Tiempo ajustable (A): permitir desactivar o ajustar el límite, o avisar antes de que expire con al menos 20 segundos para ampliarlo con una acción simple, hasta al menos diez veces. En diseño: aviso modal con «Seguir conectado» y guardado automático de borradores, que también resuelve 2.2.6 (AAA).

4. Las pestañas de un área privada indican la pestaña activa solo con el texto en azul. ¿Cómo lo corriges?

Ver solución

Incumple 1.4.1 Uso del color. Añade una indicación de forma (barra inferior gruesa, fondo distinto o negrita) con contraste de al menos 3:1 (1.4.11) y anota que la pestaña activa se expone como seleccionada a la tecnología de apoyo.

5. Todas las páginas de una web municipal se titulan «Inicio – Ayuntamiento». ¿Qué criterio incumple y qué patrón propones?

Ver solución

2.4.2 Titulado de páginas (A). Patrón con lo específico primero: «Nombre de la página – Sección – Ayuntamiento», y en procesos «Paso X de Y: nombre del paso – Trámite».

6. Al archivar un correo en una aplicación web aparece abajo un aviso «Correo archivado. Deshacer» que desaparece a los 3 segundos. ¿Qué cambiarías?

Ver solución

Una acción dentro de un aviso temporal no da tiempo a quien lee despacio, usa ampliación o llega con el teclado (2.2.1), y el mensaje debe anunciarse sin mover el foco (4.1.3). El aviso debe permanecer hasta que la persona lo cierre, o «Deshacer» debe estar disponible también en un lugar estable, como la carpeta de archivados.

Lista de comprobación final

• Navegación, buscador y ayuda en el mismo orden en todas las páginas.
• Patrón de títulos con lo específico primero.
• Encabezados que describen su bloque.
• Enlace «Saltar al contenido» visible al recibir el foco.
• Al menos dos vías para llegar a cada página.
• Cada elemento decidido como botón o enlace.
• Todos los estados dibujados, sin depender del color.
• Foco visible en cada componente y nunca tapado.
• Objetivos de 24 px como mínimo, 44 px en los principales.
• Alternativa de pulsación simple a gestos y arrastres.
• Etiquetas visibles, errores en texto y sin pedir datos dos veces.
• Nada se mueve solo sin poder pausarlo.
• Límites de tiempo con aviso y ampliación.
• Seis pruebas de estrés superadas.
• Anotaciones entregadas y convertidas en criterios de aceptación.

Para seguir aprendiendo

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2, W3C.
• Understanding WCAG 2.2: explicación detallada de cada criterio, W3C.
• Patrones del ARIA Authoring Practices Guide (APG), W3C.
• Consejos para diseñar con accesibilidad, W3C WAI.
• Real Decreto 1112/2018, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público, BOE.