Componentes habituales bajo la lupa: qué criterios Perceptible y Operable revisar

Hasta ahora has recorrido los criterios uno a uno. En una auditoría real, sin embargo, lo que tienes delante son componentes: una cabecera con menú, un banner de cookies, un carrusel, un formulario, un mapa. Saber de memoria qué criterios de Perceptible y Operable se ponen a prueba en cada componente acelera la revisión y, sobre todo, evita huecos. Esta lección es una guía de campo: para cada componente habitual, qué revisar, con qué prueba y qué fallos esperar. Los criterios de los principios Comprensible y Robusto (3.x y 4.1.x) se tratan en el curso siguiente; aquí solo los mencionamos cuando el fallo es inseparable.

Cabecera, menú y enlace de salto

Es la parte que se repite en todas las páginas, así que sus fallos suelen ser globales.

• 2.4.1: enlace «Saltar al contenido» que aparece al recibir el foco y lleva realmente el foco al contenido principal; o, como mínimo, landmarks (regiones como header, nav y main) y encabezados.
• 2.1.1 y 1.4.13: submenús que se abren con teclado, y que si aparecen al pasar el puntero se pueden señalar y cerrar con Escape.
• 2.4.7, 1.4.11 y 2.4.11: foco visible en cada opción, con contraste suficiente, y no tapado si la cabecera es fija.
• 1.4.10 y 1.4.4: a 320 px el menú se convierte en un botón de menú operable; al 200 % las opciones no se solapan.
• 2.5.8 y 1.1.1: iconos de búsqueda, idioma o área privada con tamaño suficiente y nombre.

Banner de cookies y otros avisos superpuestos

Es el primer componente que encuentra cualquier persona y casi siempre lo proporciona un tercero. Revisa:

• 2.1.1 y 2.1.2: se puede aceptar, rechazar y configurar con teclado, y el foco puede salir del aviso (o, si es modal, el foco queda dentro de forma intencionada y el aviso se cierra con sus botones).
• 2.4.3: si el aviso bloquea la página, el foco debe llegar a él al cargar; si queda al final del DOM, la persona que usa teclado tabula toda la página sin poder pulsar nada.
• 2.4.11: si no bloquea, no debe tapar por completo el elemento con foco mientras se tabula por la página; que se pueda cerrar con Escape no basta, porque no lo ha abierto el usuario (soluciones: hacerlo modal o reservarle espacio con scroll-padding).
• 1.4.3 y 1.4.11: el enlace «Configurar» o «Rechazar» en gris claro es un fallo muy repetido; también los interruptores de cada categoría sin contraste de estado.
• 1.4.10 y 2.5.8: a 320 px y al 400 % todos sus botones deben seguir siendo alcanzables, con desplazamiento vertical si hace falta, y su icono de cierre necesita 24 px o espaciado.

Carruseles y contenido en movimiento

• 2.2.2: si avanza solo y dura más de cinco segundos, botón de pausa accesible por teclado, con nombre y estado.
• 2.5.1 y 2.1.1: flechas o botones además del deslizamiento táctil, operables con teclado.
• 1.1.1 y 1.4.5: cada diapositiva con alternativa adecuada; texto real en lugar de texto incrustado en la imagen.
• 1.4.11 y 2.5.8: los puntos indicadores con contraste de estado (cuál está activo) y con tamaño o espaciado suficiente.
• 1.4.3: el texto superpuesto a la foto se mide en el punto más desfavorable, en todas las diapositivas.

Formularios, desde Perceptible y Operable

• 1.3.1: etiquetas asociadas, grupos de opciones con fieldset y legend, obligatoriedad indicada en el código.
• 1.3.5: autocomplete con valores estándar en los datos de la persona.
• 1.4.1 y 1.4.11: errores no indicados solo con color; bordes de campos y casillas con 3:1.
• 1.4.12: etiquetas largas y mensajes de error que no se cortan al aumentar el espaciado.
• 2.5.3 y 2.5.8: nombre accesible que contiene la etiqueta visible; casillas y botones de radio personalizados con 24 px o con espaciado suficiente (las casillas nativas sin estilos están exentas, porque su tamaño lo determina el navegador).
• 2.2.1: formularios largos de una sede electrónica dentro de una sesión con límite de tiempo.

Diálogos modales

• 2.4.3: el foco entra en el diálogo al abrirse y vuelve al botón que lo abrió al cerrarse.
• 2.1.2: se puede salir con teclado (con un botón de cierre accesible; Escape es lo que espera la persona usuaria según la APG (se abre en una ventana nueva)); mientras está abierto, mantener el foco dentro es correcto.
• 1.4.10 y 1.4.4: a 320 px y al 200 % el contenido del diálogo se puede desplazar y sus botones siguen al alcance.
• 1.3.1: el título del diálogo es un encabezado o está asociado al diálogo en el código.

Multimedia y mapas

Reproductores de vídeo y audio: 1.2.1 a 1.2.5 para el contenido; 1.4.2 si suena solo; 2.1.1 y 2.1.2 para los controles (especialmente en iframe de plataformas externas); 1.4.11 para los iconos de control sobre el vídeo; 2.5.8 para los botones del reproductor.

Mapas interactivos: 1.1.1 exige una alternativa a la información del mapa (por ejemplo, la lista de oficinas con su dirección); 2.1.1, 2.5.1 y 2.5.7 piden manejarlo sin ratón, sin pellizcar y sin arrastrar (botones de zoom y desplazamiento); 1.4.10 lo exime del desplazamiento bidimensional, pero no al resto de la página que lo contiene.

Tablas de datos, gráficos y pie de página

• Tablas: 1.3.1 (cabeceras con th y scope, caption); 1.4.10 las exime del desplazamiento en dos dimensiones, pero la página no debe obligar a desplazarse en horizontal por culpa de la tabla fuera de su contenedor.
• Gráficos: 1.1.1 con alternativa breve y descripción o tabla de datos; 1.4.1 si la leyenda solo usa color; 1.4.11 para barras, líneas y sectores adyacentes.
• Pie de página: 1.4.3 en enlaces legales grises sobre fondo oscuro; 2.4.4 y 1.1.1 en iconos de redes sociales; 2.5.8 en esos mismos iconos en fila.

Resumen

• Revisar por componentes, con su lista de criterios, evita huecos y acelera la auditoría; los fallos de cabecera y pie suelen ser globales.
• El banner de cookies y los widgets de terceros forman parte de la página: 2.1.2 es de no interferencia aunque el componente sea externo.
• Carruseles: 2.2.2, 2.5.1, 2.1.1, 1.4.11 y 2.5.8; modales: 2.4.3, 2.1.2 y 1.4.10.
• Mapas y gráficos necesitan alternativa textual (1.1.1) y manejo sin gestos ni arrastre (2.5.1, 2.5.7).
• En formularios, Perceptible y Operable aportan 1.3.1, 1.3.5, 1.4.1, 1.4.11, 2.5.3 y 2.5.8; el resto se estudia en el curso siguiente.