WCAG 2.2 AA: la lista de verificación práctica

¿Qué son las WCAG 2.2?

Las Pautas de Accesibilidad para el Contenido Web (WCAG, Web Content Accessibility Guidelines) son pautas del W3C para que el contenido web sea accesible. La versión 2.2 es una recomendación del W3C desde el 5 de octubre de 2023. Organiza sus requisitos en cuatro principios: perceptible, operable, comprensible y robusto.

Bajo los principios hay pautas y, bajo estas, criterios de conformidad verificables con los niveles A, AA y AAA. Las WCAG 2.2 mantienen los criterios de las WCAG 2.1 salvo uno: el 4.1.1 Procesamiento (Parsing) se ha eliminado por obsoleto. Hay nueve criterios nuevos, seis de ellos en los niveles A y AA.

Para cada criterio existe un documento Understanding con su finalidad, ejemplos y técnicas. La Quick Reference se puede filtrar por nivel y tema y sirve muy bien como lista de trabajo para tu equipo.

¿Qué significa la conformidad con el nivel AA?

Para el nivel AA deben cumplirse todos los criterios de los niveles A y AA. Las WCAG establecen para ello cinco requisitos de conformidad: el propio nivel, páginas completas, procesos completos, uso exclusivo de tecnologías compatibles con la accesibilidad y ausencia de interferencias de otros contenidos.

La regla de los procesos es especialmente importante en la práctica. Si una página forma parte de un proceso de varios pasos, como un proceso de pago, todas las páginas de ese proceso deben cumplir el nivel. Por tanto, un paso de pago que no se puede usar impide la conformidad de todo el proceso de pedido. El W3C desaconseja expresamente exigir el nivel AAA como requisito general para toda una web, porque algunos contenidos no pueden cumplir todos los criterios AAA.

¿Son las WCAG 2.2 obligatorias por ley?

Las WCAG son una pauta técnica, no una ley alemana. La BFSG y la BITV 2.0 (reglamento alemán sobre tecnologías de la información accesibles) exigen que las ofertas digitales sean perceptibles, operables, comprensibles y robustas. Ambas vinculan una presunción de conformidad a normas armonizadas cuyas referencias se publican en el Diario Oficial de la UE.

Qué norma y qué versión de las WCAG son determinantes para tu proyecto depende del marco jurídico o contractual correspondiente. Aun así, WCAG 2.2 AA tiene sentido como objetivo del proyecto: si la cumples, cubres también los criterios de la versión anterior, salvo el criterio de procesamiento eliminado. Deja por escrito tu objetivo con versión y nivel. Para los organismos públicos federales, el organismo de supervisión publica, según el § 3, apartado 5, de la BITV 2.0, información actualizada sobre los estándares que deben tenerse en cuenta.

¿Qué puntos debe incluir una lista de verificación WCAG?

1. 1Imágenes (1.1.1): Describe las imágenes informativas según su finalidad. Las imágenes decorativas llevan un texto alternativo vacío.
2. 2Estructura (1.3.1): Usa encabezados reales, listas, tablas y HTML semántico. Garantiza un orden de lectura lógico.
3. 3Contraste (1.4.3, 1.4.11): El texto normal necesita al menos 4,5:1; el texto grande, a partir de 18 puntos o de 14 puntos en negrita, al menos 3:1. Los controles y los gráficos importantes necesitan al menos 3:1 respecto a su entorno.
4. 4Multimedia (1.2.2, 1.2.5): Los vídeos grabados con sonido necesitan subtítulos. Para la información visual importante, el nivel AA prevé una audiodescripción.
5. 5Ampliación (1.4.4, 1.4.10): El texto debe poder ampliarse al 200 %. Con un ancho de 320 píxeles CSS, el contenido debe seguir siendo legible sin desplazamiento horizontal.
6. 6Teclado (2.1.1, 2.1.2, 2.4.7): Todas las funciones se pueden usar con el teclado, el foco es visible y no se queda atrapado en ningún elemento.
7. 7Orientación (2.4.2, 2.4.4): Cada página tiene un título descriptivo, y el destino de un enlace se deduce del texto del enlace o de su contexto.
8. 8Idioma (3.1.1): El idioma principal de la página está indicado en el atributo lang, para que los lectores de pantalla pronuncien correctamente.
9. 9Formularios (3.3.1, 3.3.2): Asocia las etiquetas visibles con sus campos. Explica los errores de entrada y cómo corregirlos.
10. 10Técnica (4.1.2): Los controles propios transmiten nombre, función y estado a las tecnologías de apoyo.

¿Qué hay de nuevo en las WCAG 2.2?

1. 12.4.11 Foco no oculto (AA): Un elemento con el foco no puede quedar totalmente tapado por contenidos propios, como una cabecera fija o un banner de cookies.
2. 22.5.7 Movimientos de arrastre (AA): Todo lo que funciona arrastrando necesita una alternativa con un simple clic o toque.
3. 32.5.8 Tamaño del objetivo (AA): Los objetivos de clic miden al menos 24 × 24 píxeles CSS o tienen suficiente separación. Hay excepciones, por ejemplo para los enlaces dentro del texto.
4. 43.2.6 Ayuda coherente (A): Las opciones de ayuda recurrentes, como el contacto o el chat, están en la misma posición relativa en todas las páginas.
5. 53.3.7 Entrada redundante (A): Los datos que ya se han introducido en el mismo proceso se rellenan automáticamente o se ofrecen para seleccionarlos.
6. 63.3.8 Autenticación accesible (AA): El inicio de sesión no exige una prueba de función cognitiva, como un acertijo, salvo que haya una alternativa o ayuda.

¿Qué criterios WCAG puede comprobar automáticamente una herramienta?

Las herramientas automáticas detectan con fiabilidad cuándo falta algo técnicamente: un atributo alt, el idioma de la página, un nombre para un campo de formulario o un contraste suficiente en texto simple. No pueden valorar si un texto alternativo transmite lo correcto, si el orden del foco tiene sentido o si un mensaje de error resulta comprensible.

El análisis de Accessonaut comprueba con axe-core las reglas que se pueden verificar automáticamente y muestra los hallazgos por importancia. Su puntuación describe las reglas y las páginas revisadas en el momento del análisis. No responde a si se cumplen todos los criterios WCAG. Por eso, en las páginas con imágenes, formularios o contenido multimedia, planifica siempre una revisión manual.

¿Cómo trabajas la lista de verificación en equipo?

Empieza por los criterios del nivel A, porque afectan a las barreras más básicas. Revisa los componentes nuevos ya en la fase de diseño, por ejemplo los contrastes, la indicación del foco y el tamaño de los objetivos. Lo que encaja en el diseño ya no tendrás que rehacerlo después del lanzamiento.

1. 1Elige un recorrido real, por ejemplo, seleccionar un producto y hacer el pedido.
2. 2Reúne los hallazgos automáticos y asígnalos al paso afectado.
3. 3Añade revisiones manuales y anota el dispositivo, el navegador y el resultado.
4. 4Corrige el problema en el componente compartido si afecta a varias páginas.
5. 5Vuelve a revisar el mismo recorrido después del cambio y documenta el resultado.