Teclado, tiempo, movimiento y destellos: 2.1.x, 2.2.x y 2.3.x

El principio Operable comienza con la condición más básica de todas: que la interfaz se pueda usar sin ratón, sin prisa y sin que nada en la pantalla haga daño. Las pautas 2.1 (accesible por teclado), 2.2 (tiempo suficiente) y 2.3 (convulsiones y reacciones físicas) contienen varios criterios de nivel A cuyo incumplimiento bloquea por completo a grupos enteros de personas. Esta lección detalla cómo evaluarlos y qué excepciones existen.

2.1.1 Teclado (A)

Toda la funcionalidad debe ser operable mediante una interfaz de teclado sin requerir tiempos específicos para cada pulsación, salvo cuando la función depende intrínsecamente de la trayectoria del movimiento del usuario y no solo de sus puntos finales (dibujo a mano alzada). Un mapa que se arrastra no está exento: el arrastre tiene puntos finales equivalentes (botones de desplazamiento, zoom).

Evaluación: lista de todas las funciones de la página (abrir, cerrar, seleccionar, ordenar, filtrar, arrastrar, reproducir, cerrar avisos) y verificación de cada una con teclado. Comprueba los componentes personalizados contra los patrones de la APG (se abre en una ventana nueva): pestañas con flechas, menús con flechas y Escape, combos con flechas y Enter, sliders con flechas, Inicio y Fin. Fallos: div y span con onclick sin tabindex ni manejo de teclas; iconos de cierre solo con ratón; eventos solo mouseover; mapas y carruseles sin controles; drag and drop sin alternativa (que además incumple 2.5.7).

2.1.2 Sin trampas para el foco del teclado (A)

Si el foco puede entrar en un componente con teclado, debe poder salir con teclado; si no son las teclas estándar (Tab, flechas, Escape), hay que informar del método. Es criterio de no interferencia. Fallos: modales que atrapan el foco y no se cierran con Escape ni ofrecen botón accesible; reproductores e iframes de terceros de los que no se puede salir; widgets que capturan Tab. Nota: un modal que atrapa el foco deliberadamente no es trampa si Escape o un botón de cierre devuelven el foco a la página.

2.1.4 Atajos de teclado de un solo carácter (A)

Si existe un atajo que use solo letras, números, signos de puntuación o símbolos (sin modificador), debe cumplirse al menos una de tres condiciones: se puede desactivar, se puede remapear para incluir un modificador, o solo está activo cuando el componente correspondiente tiene el foco. Afecta a personas que usan control por voz (una palabra dictada dispara varios atajos) y a quienes pulsan teclas por error. Evaluación: busca documentación de atajos y pulsa letras sueltas con el foco en el cuerpo de la página; si algo ocurre (se abre el buscador con «/», se marca como leído con «e»), verifica que exista desactivación o remapeo.

<!-- Incorrecto: componente de pestañas sin soporte de teclado -->
<div class="tab" onclick="mostrar(1)">Datos</div>

<!-- Correcto (resumen del patrón APG) -->
<div role="tablist" aria-label="Secciones del expediente">
  <button role="tab" id="t1" aria-selected="true" aria-controls="p1">Datos</button>
  <button role="tab" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">Documentos</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">…</div>
<!-- JavaScript: flechas izquierda/derecha cambian de pestaña, Inicio/Fin a la primera/última -->

2.2.1 Tiempo ajustable (A)

Para cada límite de tiempo establecido por el contenido, debe cumplirse una de estas: el usuario puede desactivarlo antes de encontrarlo; puede ajustarlo antes de encontrarlo en un rango de al menos diez veces el valor por defecto; o se le avisa antes de que expire, con al menos 20 segundos para ampliarlo mediante una acción simple (pulsar una tecla), y puede ampliarlo al menos diez veces. Excepciones: el límite es parte de un evento en tiempo real (subasta), es esencial y ampliarlo invalidaría la actividad, o supera las 20 horas.

Dónde aparece: cierres de sesión en sedes electrónicas y banca, formularios con caducidad, reservas con cuenta atrás, carruseles (que se tratan en 2.2.2), mensajes que desaparecen solos (toasts). Evaluación: localiza cada límite preguntando al cliente y observando; comprueba si hay aviso, cuánto tiempo da y cómo se amplía; verifica que el aviso sea accesible (anunciado por lector, operable por teclado). Una sesión de 20 minutos que expira sin aviso y pierde los datos del formulario es un fallo de 2.2.1 de severidad alta.

2.2.2 Pausar, detener, ocultar (A)

Para información que se mueve, parpadea o se desplaza y que empieza automáticamente, dura más de cinco segundos y se presenta en paralelo con otro contenido, debe existir un mecanismo para pausarla, detenerla u ocultarla, salvo que el movimiento sea esencial. Para información que se actualiza automáticamente (cotizaciones, titulares), debe poder pausarse, detenerse, ocultarse o controlarse la frecuencia. Es criterio de no interferencia.

Fallos típicos: carruseles automáticos sin botón de pausa (el más repetido en portadas institucionales); vídeos de fondo en cabeceras; marquesinas de noticias; animaciones decorativas en bucle; GIF animados largos. El botón de pausa debe ser accesible por teclado y tener nombre y estado. Un carrusel que se detiene al pasar el puntero no cumple: hace falta un control explícito.

2.3.1 Umbral de tres destellos o menos (A)

Las páginas no deben contener nada que destelle más de tres veces por segundo, o el destello debe estar por debajo de los umbrales de destello general y de destello rojo (que dependen del área y del contraste del cambio). Es criterio de no interferencia. Evaluación: identifica vídeos, GIF y animaciones con cambios bruscos de luminosidad; para casos dudosos existe la herramienta PEAT (Photosensitive Epilepsy Analysis Tool, del Trace Center) que analiza vídeos. Para el auditor, cualquier contenido con flashes rápidos repetidos es sospechoso y debe documentarse; el cumplimiento estricto se demuestra con análisis.

2.3.3 Animación a partir de interacciones (AAA)

Aunque es AAA, conviene conocerlo: las animaciones de movimiento disparadas por la interacción (paralaje, zooms al hacer scroll) deben poder desactivarse salvo que sean esenciales. La consulta de medios prefers-reduced-motion es la técnica habitual, y respetarla es una recomendación razonable incluso en auditorías AA.

Severidad y redacción del hallazgo

Los fallos de 2.1.1 y 2.1.2 en pasos de un proceso suelen ser de severidad máxima, porque normalmente impiden la tarea. Los de 2.2.1 lo son cuando la expiración pierde datos o cierra la sesión sin aviso. Los de 2.2.2 son de severidad media-alta por su impacto en personas con déficit de atención o con lector de pantalla (el carrusel cambia el contenido mientras lo leen), y los de 2.3.1 son críticos por riesgo para la salud. En la redacción, indica siempre qué función no se puede realizar y con qué entrada («no es posible cerrar el aviso de cookies con teclado; el foco queda atrapado en el iframe del aviso»).

Resumen

• 2.1.1: toda función operable con teclado; patrones de la APG para componentes personalizados; excepción solo para trayectorias esenciales.
• 2.1.2: el foco siempre puede salir; modales con Escape y devolución del foco. 2.1.4: atajos de un carácter desactivables, remapeables o solo con foco.
• 2.2.1: límites de tiempo desactivables, ajustables (×10) o ampliables con aviso de 20 s; excepciones de tiempo real, esencial y > 20 horas.
• 2.2.2: movimiento automático > 5 s y actualizaciones automáticas con pausa, parada u ocultación explícitas.
• 2.3.1: nada destella más de tres veces por segundo por encima de los umbrales; 1.4.2, 2.1.2, 2.2.2 y 2.3.1 son criterios de no interferencia.