Navegación y modalidades de entrada: 2.4.x y 2.5.x, con los nuevos 2.4.11, 2.5.7 y 2.5.8

Las pautas 2.4 (navegable) y 2.5 (modalidades de entrada) reúnen los criterios que determinan si una persona puede orientarse, encontrar lo que busca y accionar los controles con el dispositivo que use. WCAG 2.2 añadió aquí tres criterios de nivel AA que ya forman parte de las auditorías: 2.4.11 Foco no oculto (mínimo), 2.5.7 Movimientos de arrastre y 2.5.8 Tamaño del objetivo (mínimo). Esta lección los recorre con sus medidas y excepciones exactas.

Pauta 2.4 Navegable

• 2.4.1 Evitar bloques (A): mecanismo para saltar bloques repetidos (cabecera, menú). Técnicas: enlace «Saltar al contenido» visible al recibir el foco, landmarks (main, nav) y encabezados. Fallo: ningún mecanismo; enlace de salto cuyo destino no existe o no lleva realmente al contenido principal (en navegadores antiguos, también el destino no enfocable, sin tabindex="-1").
• 2.4.2 Titulado de páginas (A): <title> que describe el tema o propósito. Fallos: mismo título en todas las páginas, solo el nombre del organismo, títulos no actualizados en SPA al cambiar de vista.
• 2.4.3 Orden del foco (A): si el orden de navegación afecta al significado u operación, el foco sigue un orden coherente. Fallos: tabindex positivos, modales que no reciben el foco al abrirse, foco que vuelve al inicio tras cerrar un diálogo, elementos ocultos visualmente que reciben foco.
• 2.4.4 Propósito de los enlaces (en contexto) (A): el propósito se deduce del texto del enlace o de su contexto programáticamente determinable (misma frase, párrafo, celda, elemento de lista o encabezado precedente). Fallos: «leer más» repetidos sin contexto programático, «aquí», URL crudas, iconos sin nombre.
• 2.4.5 Múltiples vías (AA): al menos dos formas de localizar una página (menú, buscador, mapa web), salvo pasos de un proceso.
• 2.4.6 Encabezados y etiquetas (AA): si existen, describen el tema o propósito; «Sección 1» o «Campo» no lo hacen.
• 2.4.7 Foco visible (AA): cualquier interfaz operable por teclado tiene un modo en que el indicador de foco es visible. Fallos: outline: none sin sustituto; indicador que depende de un color de fondo que no cambia en algunos temas.

2.4.11 Foco no oculto (mínimo) (AA) — nuevo en 2.2

Cuando un componente recibe el foco de teclado, no debe quedar completamente oculto por contenido creado por el autor. El criterio no tiene excepciones formales, pero sus notas precisan dos casos: solo se consideran las posiciones iniciales del contenido que el usuario puede mover, y el contenido que ha abierto el propio usuario (un chat, un panel) puede tapar el foco si el usuario puede descubrir el elemento sin mover el foco, por ejemplo cerrándolo con Escape. Un banner de cookies o una cabecera fija que pone el autor sin acción del usuario no entra en esa nota: según Comprender WCAG 2.2, el banner debe ser modal o no llegar a tapar por completo el elemento con foco. Fíjate en «completamente»: a nivel AA se admite que esté parcialmente tapado; el criterio AAA 2.4.12 exige que no esté oculto en absoluto.

Dónde falla: cabeceras y pies fijos (sticky) que tapan el elemento con foco al tabular; banners de cookies o chats flotantes que cubren controles. Prueba: tabula por toda la página a tamaño normal y a 400 %, observando si el elemento con foco está siempre visible al menos en parte. Corrección: scroll-padding-top igual a la altura de la cabecera fija.

Pauta 2.5 Modalidades de entrada

• 2.5.1 Gestos del puntero (A): toda función que use gestos multipunto (pellizcar) o basados en trayectoria (deslizar) debe poder operarse con un único puntero sin trayectoria (toques, clics), salvo que el gesto sea esencial. Carruseles solo por deslizamiento sin flechas, mapas solo con pellizco sin botones de zoom.
• 2.5.2 Cancelación del puntero (A): la función no se ejecuta en el evento de bajada (mousedown, touchstart), o se completa en la subida y puede abortarse o deshacerse, o la subida revierte la bajada, o la bajada es esencial. Permite a una persona con temblor rectificar moviendo el dedo fuera antes de soltar.
• 2.5.3 Etiqueta en el nombre (A): el nombre accesible de los componentes con etiqueta visible de texto contiene ese texto (idealmente empieza por él). Afecta al control por voz. Fallos: aria-label que sustituye en vez de complementar el texto visible, botones con texto visible distinto del nombre.
• 2.5.4 Activación mediante movimiento (A): funciones activadas moviendo el dispositivo (agitar para deshacer) o por movimiento ante la cámara deben tener alternativa de interfaz y poder desactivarse, salvo que el movimiento sea esencial.

2.5.7 Movimientos de arrastre (AA) — nuevo en 2.2

Toda funcionalidad que use un movimiento de arrastre debe poder realizarse con un único puntero sin arrastrar, salvo que el arrastre sea esencial o lo determine el agente de usuario y no lo haya modificado el autor. Complementa a 2.5.1 (que trata trayectorias y multipunto, pero no el arrastre simple) y a 2.1.1 (teclado). Dónde aparece: reordenar tarjetas (kanban), controles deslizantes de precio, mapas, recortadores de imagen, firma manuscrita (esencial). Alternativas válidas: botones de subir y bajar, menú «mover a», campos numéricos junto al slider, botones de desplazamiento en el mapa. Que funcione con teclado no basta para 2.5.7, que exige alternativa de puntero simple (toques o clics): muchas personas con temblor usan pantalla táctil sin teclado.

2.5.8 Tamaño del objetivo (mínimo) (AA) — nuevo en 2.2

Los objetivos de entrada con puntero deben medir al menos 24 por 24 píxeles CSS, salvo que se cumpla alguna excepción:

• Espaciado: objetivos menores de 24 × 24 son aceptables si un círculo de 24 px de diámetro centrado en cada uno no se solapa con otro objetivo ni con el círculo de otro objetivo.
• Equivalente: la misma función puede realizarse mediante otro control de la misma página que sí cumple.
• En línea: el objetivo está dentro de una frase o su tamaño lo determina la altura de línea del texto que no es objetivo (enlaces en un párrafo).
• Control del agente de usuario: el tamaño lo determina el navegador y no lo ha modificado el autor.
• Esencial: una presentación concreta es esencial o legalmente requerida.

Cómo medir: con el inspector del navegador, lee las dimensiones del área clicable (incluido el padding, pero no el margen); para iconos pequeños con espaciado, mide la distancia entre centros (debe ser al menos 24 px). Fallos típicos: iconos de 16 × 16 pegados en barras de herramientas, puntos de un carrusel, iconos de cierre de avisos, casillas de 13 px sin etiqueta clicable, iconos de redes sociales en el pie.

Resumen

• 2.4.1-2.4.7: saltar bloques, títulos descriptivos, orden del foco coherente, propósito de enlaces en contexto, múltiples vías, encabezados y etiquetas descriptivos, foco visible.
• 2.4.11: el elemento con foco no puede quedar completamente oculto por contenido fijo o flotante del autor; corrige con scroll-padding o con banners modales.
• 2.5.1-2.5.4: alternativa a gestos complejos, cancelación en el evento de subida, nombre accesible que contiene la etiqueta visible, alternativa a la activación por movimiento.
• 2.5.7: todo arrastre necesita alternativa con puntero simple (no basta el teclado), salvo esencial.
• 2.5.8: objetivos de 24 × 24 px CSS, o excepción de espaciado (círculo de 24 px sin solape), equivalente, en línea, agente de usuario o esencial.