Qué cambia en WCAG 2.2: nueve criterios nuevos y uno retirado

WCAG 2.2 se publicó como Recomendación del W3C en octubre de 2023. Como viste en la lección «Qué son las WCAG y quién las elabora», añade nueve criterios y retira uno, 4.1.1 Procesamiento. En esta lección los recorremos uno a uno con lo que ya sabes: qué pide cada criterio, qué excepciones tiene, a quién beneficia y un ejemplo de cómo se cumple o se incumple. Son los que más se olvidan en webs que «ya cumplían 2.1».

Por qué una versión 2.2

WCAG 2.1 había reforzado el móvil y la baja visión, pero quedaban huecos en tres grupos: personas con discapacidad cognitiva o del aprendizaje, personas con baja visión que navegan con teclado y personas con limitaciones motrices que usan con dificultad la pantalla táctil o el ratón. Los nueve criterios nuevos se concentran ahí. Seis de ellos son de nivel A o AA y entran, por tanto, en la conformidad que exige la ley cuando se toma WCAG 2.2 como referencia.

El foco: que se vea y que no se tape

2.4.11 Foco no oculto (mínimo) (AA): cuando un componente recibe el foco del teclado, no queda totalmente oculto por contenido creado por el autor. El caso típico es la cabecera fija (sticky header, la que se queda pegada arriba al desplazarse) o el banner de cookies: al tabular hacia abajo, el enlace con foco queda debajo y la persona no sabe dónde está. Basta con que se vea una parte para cumplir el nivel AA. Si el contenido que tapa lo ha abierto el propio usuario y puede apartarlo sin mover el foco (por ejemplo, cerrándolo con Esc), no se considera fallo.

2.4.12 Foco no oculto (mejorado) (AAA) sube el listón: ninguna parte del componente con foco puede quedar oculta. 2.4.13 Apariencia del foco (AAA) fija por primera vez cómo debe ser el indicador: un área al menos equivalente a un perímetro de 2 píxeles CSS alrededor del componente y un contraste de al menos 3:1 entre el estado con foco y sin foco.

/* Reserva espacio para la cabecera fija al desplazar el foco (ayuda a 2.4.11) */
html { scroll-padding-top: 5rem; }

/* Indicador visible y grueso (2.4.7; se acerca a 2.4.13) */
:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }

El puntero: arrastrar y acertar

2.5.7 Movimientos de arrastre (AA): toda función que se maneja arrastrando debe poder hacerse también con un solo puntero sin arrastrar, salvo que el arrastre sea esencial o lo controle el navegador sin modificación del autor. Ejemplos: un tablero de tareas en el que las tarjetas se mueven arrastrando debe ofrecer también un menú «Mover a…»; un control deslizante de precio debe aceptar clics en la barra o botones de más y menos; un mapa debe tener botones para desplazarse. No trata del teclado (eso ya lo exige 2.1.1), sino de quien usa ratón, pantalla táctil o un puntero con la cabeza y no puede mantener pulsado mientras se mueve.

2.5.8 Tamaño del objetivo (mínimo) (AA): los objetivos del puntero miden al menos 24 por 24 píxeles CSS. Es un criterio con cinco excepciones, y conocerlas evita muchos falsos positivos:

• Espaciado: un objetivo más pequeño cumple si, al dibujar un círculo de 24 píxeles centrado en él, no toca otro objetivo ni el círculo de otro objetivo pequeño.
• Equivalente: la misma función está disponible en 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 limita el interlineado del texto, como un enlace en un párrafo.
• Control del agente de usuario: el tamaño lo decide el navegador y el autor no lo ha modificado.
• Esencial: una presentación concreta es esencial o la exige la ley.

No confundas este criterio con 2.5.5 Tamaño del objetivo (mejorado), de nivel AAA, que pide 44 por 44 píxeles CSS y existe desde WCAG 2.1.

Ayuda y formularios: no hacer pensar dos veces

3.2.6 Ayuda coherente (A): si una página ofrece algún mecanismo de ayuda (datos de contacto de una persona, un medio de contacto como un chat o un formulario, una opción de autoayuda como las preguntas frecuentes, o un asistente automático) y ese mecanismo se repite en varias páginas del conjunto, debe aparecer en el mismo orden relativo respecto al resto del contenido. No obliga a ofrecer ayuda; obliga a que, si la hay, esté siempre en el mismo sitio.

3.3.7 Entrada redundante (A): la información que la persona ya ha introducido, o que se le ha proporcionado, y que vuelve a ser necesaria en el mismo proceso, se rellena automáticamente o se puede seleccionar. Ejemplo clásico: en una compra, la casilla «La dirección de facturación es la misma que la de envío». Hay tres excepciones: que volver a escribirla sea esencial (un juego de memoria), que sea necesario por seguridad (confirmar una contraseña nueva) o que la información anterior ya no sea válida.

Autenticación: iniciar sesión sin pruebas de memoria

3.3.8 Autenticación accesible (mínimo) (AA): ningún paso de un proceso de autenticación puede exigir una prueba de función cognitiva (recordar, transcribir o manipular información, como memorizar una contraseña o resolver un acertijo) salvo que se ofrezca al menos una de estas opciones: otro método de acceso que no la exija; un mecanismo que ayude a superarla, como permitir que el gestor de contraseñas rellene el campo o que se pueda pegar; una prueba de reconocer objetos; o una prueba de identificar contenido que la propia persona ha aportado al sitio.

<!-- Incorrecto: bloquear el pegado impide usar gestores de contraseñas (3.3.8) -->
<input type="password" id="clave" onpaste="return false">

<!-- Correcto: permite pegar y autocompletar -->
<label for="clave">Contraseña</label>
<input type="password" id="clave" autocomplete="current-password">

3.3.9 Autenticación accesible (mejorada) (AAA) elimina las excepciones de reconocer objetos y de contenido personal: en AAA, ni siquiera un CAPTCHA de «selecciona los semáforos» es aceptable sin alternativa.

Lo que sale: 4.1.1 Procesamiento

4.1.1 exigía HTML bien formado: etiquetas cerradas, sin atributos duplicados, identificadores únicos. En WCAG 2.2 figura como obsoleto y retirado: los navegadores actuales reparan esos errores de forma uniforme, y los problemas reales que causaban (un id duplicado que rompe la asociación de una etiqueta) ya son fallos de 1.3.1 o 4.1.2. El W3C añadió además una nota a WCAG 2.0 y 2.1 indicando que, para contenido HTML o XML, 4.1.1 debe considerarse siempre cumplido.

¿Y la ley?

La EN 301 549 v3.2.1 (PDF, se abre en una ventana nueva), la norma armonizada vigente, remite a WCAG 2.1, así que los criterios nuevos de 2.2 aún no figuran en ella como requisito. Pero trabajar con WCAG 2.2 AA garantiza cumplir 2.1, mejora el servicio a personas reales y prepara para la nueva versión de la norma europea: la EN 301 549 v4.1.1 (PDF, se abre en una ventana nueva), publicada por ETSI en septiembre de 2026, incorpora WCAG 2.2 y está pendiente de citarse en el Diario Oficial de la UE; hasta entonces, la referencia armonizada sigue siendo la v3.2.1. Lo verás en el curso N1-C4 «Marco legal esencial».

Resumen

• WCAG 2.2 añade nueve criterios (seis A o AA, tres AAA) y retira 4.1.1 Procesamiento.
• Foco: 2.4.11 (no totalmente tapado, AA); 2.4.12 y 2.4.13 en AAA.
• Puntero: 2.5.7 (alternativa al arrastre) y 2.5.8 (24 por 24 píxeles CSS, con cinco excepciones).
• Formularios y ayuda: 3.2.6 (ayuda en el mismo sitio), 3.3.7 (no repetir datos) y 3.3.8 (acceso sin pruebas de memoria ni bloqueo del pegado).
• La EN 301 549 v3.2.1 remite a WCAG 2.1, pero cumplir 2.2 cubre ese requisito y se anticipa a su revisión.