Foco visible y no oculto (2.4.7, 2.4.11), tamaño del objetivo (2.5.8) y gestos (2.5.1, 2.5.7)

Quien navega con teclado necesita saber dónde está; quien usa el dedo, un puntero de cabeza o la mano con temblor necesita poder acertar; quien no puede hacer gestos complejos necesita una alternativa. Estas tres necesidades se traducen en decisiones de diseño muy concretas que WCAG 2.2 regula con criterios precisos, varios de ellos nuevos. Esta lección los recorre con medidas, ejemplos y los errores que más se repiten.

El foco tiene que verse

2.4.7 Foco visible (AA)

Toda interfaz operable por teclado debe tener un modo en el que el indicador de foco sea visible. Es el criterio que se incumple cada vez que alguien escribe outline: none «porque el recuadro azul es feo». Las personas que navegan con la tecla Tab (usuarios de teclado, de pulsadores, de control por voz, personas con baja visión que no usan ratón) pierden literalmente la posición en la página.

El diseño debe definir un estado de foco para cada componente interactivo, distinto del hover, dentro del sistema de diseño. Para cubrir también 2.4.13 Apariencia del foco (AAA, útil como objetivo): contorno de al menos 2 píxeles CSS con contraste de 3:1 entre el estado con foco y sin foco. Un anillo doble (blanco interior, azul oscuro exterior) funciona sobre cualquier fondo.

/* Incorrecto: elimina el foco para todos */
:focus { outline: none; }

/* Correcto: foco visible solo para teclado, con anillo doble */
:focus-visible {
  outline: 3px solid #0B3D91;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}

2.4.11 Foco no oculto (mínimo) (AA)

Nuevo en WCAG 2.2. Cuando un componente recibe el foco de teclado, no puede quedar completamente oculto detrás de contenido creado por el autor: cabeceras fijas, pies pegajosos, banners de cookies, paneles de chat. Es un problema muy habitual: al tabular, el foco llega a un enlace que está justo debajo de la cabecera fija y la persona no ve nada. La versión AAA (2.4.12) exige que no quede oculto ni parcialmente. En diseño: calcula la altura de los elementos fijos y asegúrate de que el desplazamiento al foco los tiene en cuenta (scroll-padding-top en CSS), y de que los paneles abiertos por el usuario no tapan el foco.

Objetivos que se puedan pulsar

2.5.8 Tamaño del objetivo (mínimo) (AA)

Nuevo en WCAG 2.2. Los objetivos de puntero (botones, enlaces, controles) deben medir al menos 24 por 24 píxeles CSS, salvo cinco excepciones:

• Espaciado: objetivos más pequeños son válidos si, trazando un círculo de 24 px de diámetro centrado en cada uno, el círculo no se solapa con otros objetivos ni con sus círculos. Es decir, botones pequeños pero bien separados cumplen.
• Equivalente: existe otro control en la misma página que hace lo mismo y sí cumple.
• En línea: el objetivo está dentro de una frase o bloque de texto (los enlaces en un párrafo).
• Control del agente de usuario: el tamaño lo determina el navegador y no se ha modificado.
• Esencial: la presentación concreta es esencial o legalmente obligatoria (puntos en un mapa, por ejemplo).

El criterio 2.5.5 Tamaño del objetivo (mejorado), de nivel AAA, pide 44 por 44 píxeles. Un buen sistema de diseño usa 44 px para los controles principales y nunca baja de 24 px, con al menos 8 px de separación.

Gestos y arrastres con alternativa

2.5.1 Gestos del puntero (A)

Toda función que use gestos multipunto (pinzar para ampliar, dos dedos) o basados en trayectoria (deslizar, dibujar) debe poder realizarse con un solo puntero y sin trayectoria (pulsaciones simples), salvo que el gesto sea esencial. Un carrusel que solo se mueve deslizando necesita flechas; un mapa que solo amplía con pinza necesita botones «+» y «−»; una galería que se cierra deslizando hacia abajo necesita un botón de cerrar.

2.5.7 Movimientos de arrastre (AA)

Nuevo en WCAG 2.2. Toda función que requiera arrastrar (ordenar una lista, mover un deslizador, soltar un fichero, mover una tarjeta en un tablero) debe poder realizarse con un solo puntero sin arrastrar, salvo que sea esencial. Alternativas habituales: botones «subir/bajar», campo numérico junto al deslizador, botón «Seleccionar fichero», menú «Mover a…». Arrastrar es muy difícil con temblor, dolor articular, control por voz o pulsadores.

Otros criterios del puntero

• 2.5.2 Cancelación del puntero (A): la acción se ejecuta al soltar, no al pulsar, para poder arrepentirse arrastrando el dedo fuera. Es el comportamiento por defecto de los botones; no lo cambies.
• 2.5.3 Etiqueta en el nombre (A): el nombre accesible de un control incluye el texto visible, para que quien usa control por voz pueda decir «pulsar Enviar». Un botón que muestra «Enviar» pero tiene aria-label="Mandar formulario" incumple.
• 2.5.4 Activación mediante movimiento (A): si algo se activa agitando el dispositivo, debe haber un control convencional.

Resumen

• 2.4.7 Foco visible (AA): cada componente necesita un estado de foco diseñado; nunca outline: none sin alternativa. Objetivo: contorno de 2 px y contraste 3:1 (2.4.13, AAA).
• 2.4.11 Foco no oculto (mínimo) (AA, nuevo): el elemento con foco no puede quedar totalmente tapado por cabeceras fijas, banners o paneles.
• 2.5.8 Tamaño del objetivo (mínimo) (AA, nuevo): 24 por 24 px CSS, con excepciones de espaciado, equivalente, en línea, agente de usuario y esencial; 44 px es el nivel AAA.
• 2.5.1 Gestos del puntero (A) y 2.5.7 Movimientos de arrastre (AA, nuevo): alternativa de pulsación simple para gestos complejos y arrastres.
• 2.5.2, 2.5.3 y 2.5.4: acción al soltar, nombre accesible que incluye el texto visible y alternativa a la activación por movimiento.