Lección 2 de 7 · 12 min
WCAG 2.2 en simple
Al terminar sabrás
12 min- Explicar los cuatro principios de WCAG con ejemplos
- Distinguir los niveles A, AA y AAA
- Conocer los criterios nuevos de WCAG 2.2 que más afectan a un QA
Construyes: Una lista de chequeo de los criterios AA que vas a revisar en tus tres flujos críticos.
Qué son las WCAG
Las WCAG (Web Content Accessibility Guidelines) son las pautas de accesibilidad del W3C, el consorcio que define los estándares de la web. La versión 2.2 es recomendación oficial desde el 5 de octubre de 2023. Están organizadas en criterios de conformidad: afirmaciones verificables, cada una con un número, como "1.4.3 Contraste (mínimo)".
Para QA, eso es una buena noticia: son criterios de aceptación ya escritos.
Los cuatro principios
Todo cuelga de cuatro principios, que se recuerdan como POUR por sus siglas en inglés:
| Principio | Qué pide | Un bug típico |
|---|---|---|
| Perceptible | Que la información se pueda percibir con más de un sentido | Una imagen con información importante y sin texto alternativo |
| Operable | Que todo se pueda usar, no solo con mouse | Un menú que solo se abre al pasar el mouse por encima |
| Comprensible | Que el contenido y el comportamiento se entiendan | Un error que dice "dato inválido" sin decir cuál ni por qué |
| Robusto | Que funcione con lectores de pantalla y otras tecnologías | Un botón hecho con un div que el lector no reconoce como botón |
Los tres niveles
- A: lo mínimo. Sin esto, hay personas que directamente no pueden usar el producto.
- AA: la meta habitual de las normas y de los equipos. Es el objetivo razonable de cualquier producto.
- AAA: el más exigente. No se pide completo ni siquiera en las normas, porque algunos criterios no aplican a todo contenido.
Cumplir AA significa cumplir todos los criterios A y AA.
Lo nuevo en WCAG 2.2
La versión 2.2 agregó nueve criterios. Los que más le importan a un QA, porque aparecen en casi cualquier producto:
| Criterio | Nivel | En simple |
|---|---|---|
| 2.4.11 Focus Not Obscured (Minimum) | AA | El elemento con foco no puede quedar completamente tapado, por ejemplo por un banner fijo |
| 2.5.7 Dragging Movements | AA | Lo que se hace arrastrando también se tiene que poder hacer sin arrastrar |
| 2.5.8 Target Size (Minimum) | AA | Los objetivos táctiles miden al menos 24 por 24 píxeles CSS, con excepciones |
| 3.2.6 Consistent Help | A | La ayuda (chat, teléfono) está en el mismo lugar en todas las páginas |
| 3.3.7 Redundant Entry | A | No pedir otra vez un dato que la persona ya entregó en el mismo proceso |
| 3.3.8 Accessible Authentication (Minimum) | AA | Entrar no puede exigir resolver un acertijo o memorizar algo sin una alternativa |
Los otros tres nuevos son de nivel AAA: 2.4.12, 2.4.13 y 3.3.9.
Y uno se eliminó: el 4.1.1 Parsing, por obsoleto.
Un dato práctico sobre 2.5.8: el mínimo AA es 24 por 24 píxeles, pero muchos equipos usan 44 por 44, que es lo que pide el criterio AAA 2.5.5. Este sitio, por ejemplo, tiene una prueba automática que exige 44 en todos los controles del laboratorio.
Cómo usar esto en un plan de pruebas
No hace falta revisar los más de 80 criterios en cada historia. Lo práctico es una lista corta de los criterios AA que más fallan en tu tipo de producto, y revisarla en los flujos críticos. Esa lista es el reto de esta lección.
Compruébalo
0/3Responde sin mirar atrás. Verás la explicación al instante.
1. ¿Cuáles son los cuatro principios de WCAG?
2. ¿Qué tamaño mínimo pide WCAG 2.2 en el nivel AA para los objetivos táctiles (2.5.8)?
3. ¿Qué criterio se eliminó en WCAG 2.2?
Reto: tu lista de chequeo AA
Arma una lista de 10 criterios AA que vas a revisar en tus tres flujos críticos. Incluye al menos tres de los nuevos de WCAG 2.2.