Checklist WCAG 2.2 en lenguaje claro

Cómo usar esta lista

Las WCAG 2.2 son la norma del W3C que define qué es una web accesible. Tienen 86 criterios de conformidad repartidos en tres niveles. El que necesitas es el AA, que son los 55 criterios de niveles A y AA de abajo. Es al que remiten la EN 301 549, la Ley Europea de Accesibilidad y la Ley 11/2023 española.

El texto oficial es preciso pero difícil de leer. Aquí cada criterio está convertido en una pregunta sobre tu web. Si en una página la respuesta es “no”, eso es un hallazgo. Los criterios nuevos en la 2.2 llevan la marca Nuevo.

Perceptible: ¿se puede percibir el contenido?

Criterio	Nivel	Comprobación
1.1.1 Contenido no textual	A	Cada imagen, icono o gráfico con significado tiene texto alternativo; los decorativos llevan alt vacío.
1.2.1 Solo audio y solo vídeo	A	Los pódcast tienen transcripción; los vídeos sin sonido tienen descripción o transcripción.
1.2.2 Subtítulos (grabados)	A	Los vídeos con voz tienen subtítulos.
1.2.3 Audiodescripción o alternativa	A	La información visual importante de los vídeos se describe en audio o texto.
1.2.4 Subtítulos (en directo)	AA	Las emisiones en directo tienen subtítulos.
1.2.5 Audiodescripción (grabada)	AA	Los vídeos grabados tienen audiodescripción cuando la imagen transmite información.
1.3.1 Información y relaciones	A	Títulos, listas, tablas y etiquetas de formulario son HTML real, no texto con estilos.
1.3.2 Secuencia significativa	A	El orden de lectura del código coincide con el de la pantalla.
1.3.3 Características sensoriales	A	Las instrucciones no dependen solo de forma, color, tamaño o posición (“pulsa el botón redondo de la derecha”).
1.3.4 Orientación	AA	La web funciona en vertical y en horizontal.
1.3.5 Propósito de los campos	AA	Los campos de nombre, email, dirección y teléfono tienen el autocomplete correcto.
1.4.1 Uso del color	A	El color nunca es la única forma de marcar un error, un enlace o un estado.
1.4.2 Control del audio	A	El audio que suena solo más de 3 segundos se puede pausar o silenciar.
1.4.3 Contraste (mínimo)	AA	El texto llega a 4,5:1 frente a su fondo (3:1 si es grande).
1.4.4 Cambio de tamaño del texto	AA	Con el zoom al 200 %, nada se corta ni se superpone.
1.4.5 Imágenes de texto	AA	El texto es texto real, no parte de una imagen (salvo logotipos).
1.4.10 Reajuste (reflow)	AA	Con zoom al 400 % (320 px de ancho), se lee sin desplazarse en horizontal.
1.4.11 Contraste no textual	AA	Iconos, bordes de campos e indicadores de foco llegan a 3:1.
1.4.12 Espaciado del texto	AA	Aumentar el interlineado y el espacio entre letras y palabras no rompe la página.
1.4.13 Contenido al pasar el ratón o con el foco	AA	Los tooltips y desplegables se pueden cerrar, se puede pasar el ratón por encima y no desaparecen solos.

Operable: ¿se pueden usar los controles?

Criterio	Nivel	Comprobación
2.1.1 Teclado	A	Todo funciona solo con el teclado.
2.1.2 Sin trampas para el foco	A	El foco nunca se queda atrapado dentro de un componente.
2.1.4 Atajos de una sola tecla	A	Los atajos de una sola letra se pueden desactivar o cambiar.
2.2.1 Tiempo ajustable	A	Los límites de tiempo se pueden quitar, ajustar o ampliar.
2.2.2 Pausar, detener, ocultar	A	Los carruseles y animaciones que se mueven más de 5 segundos se pueden pausar.
2.3.1 Tres destellos	A	Nada parpadea más de tres veces por segundo.
2.4.1 Evitar bloques	A	Un enlace “saltar al contenido” o regiones permiten saltarse el menú.
2.4.2 Título de la página	A	Cada página tiene un <title> propio y descriptivo.
2.4.3 Orden del foco	A	El tabulador recorre la página en un orden lógico.
2.4.4 Propósito de los enlaces	A	Cada enlace se entiende por su texto y su contexto; nada de “pulsa aquí” suelto.
2.4.5 Múltiples vías	AA	Las páginas se pueden encontrar de más de una forma (menú, buscador, mapa web).
2.4.6 Encabezados y etiquetas	AA	Los títulos y etiquetas describen lo que viene después.
2.4.7 Foco visible	AA	Siempre se ve qué elemento tiene el foco del teclado.
2.4.11 Foco no oculto	AA	Nuevo. El elemento con foco no queda tapado por una cabecera fija, un pie o el aviso de cookies.
2.5.1 Gestos del puntero	A	Pellizcar, deslizar o usar varios dedos tiene una alternativa de un solo toque.
2.5.2 Cancelación del puntero	A	Las acciones se ejecutan al soltar, así que un toque erróneo se puede cancelar.
2.5.3 Etiqueta en el nombre	A	El nombre accesible de un botón contiene su texto visible.
2.5.4 Activación por movimiento	A	Las funciones de agitar o inclinar tienen un botón alternativo.
2.5.7 Movimientos de arrastre	AA	Nuevo. Todo lo que se hace arrastrando (deslizadores, listas, mapas) se puede hacer también con toques o clics.
2.5.8 Tamaño del objetivo	AA	Nuevo. Botones y enlaces miden al menos 24 × 24 px, o tienen espacio suficiente alrededor.

Comprensible: ¿se entiende?

Criterio	Nivel	Comprobación
3.1.1 Idioma de la página	A	La página declara su idioma (<html lang="es">).
3.1.2 Idioma de las partes	AA	Los fragmentos en otro idioma llevan su propio lang.
3.2.1 Al recibir el foco	A	Llegar con el foco a un elemento no cambia de página ni de contexto.
3.2.2 Al introducir datos	A	Elegir una opción no envía el formulario ni salta a otra página sin avisar.
3.2.3 Navegación coherente	AA	Los menús están en el mismo sitio y orden en todas las páginas.
3.2.4 Identificación coherente	AA	La misma función tiene el mismo nombre e icono en toda la web.
3.2.6 Ayuda coherente	A	Nuevo. La ayuda (contacto, chat, preguntas frecuentes) está en el mismo sitio en todas las páginas que la tienen.
3.3.1 Identificación de errores	A	Los errores del formulario se explican con texto, no solo en rojo.
3.3.2 Etiquetas o instrucciones	A	Cada campo tiene una etiqueta visible y se explica el formato que se pide.
3.3.3 Sugerencias ante errores	AA	Los mensajes de error dicen cómo corregir el problema.
3.3.4 Prevención de errores	AA	Las compras y los envíos legales o económicos se pueden revisar, corregir o deshacer.
3.3.7 Entrada redundante	A	Nuevo. No se pide escribir dos veces el mismo dato en un mismo proceso.
3.3.8 Autenticación accesible	AA	Nuevo. Acceder no exige recordar ni copiar códigos ni resolver puzles, y se puede pegar la contraseña o usar un gestor.

Robusto: ¿funciona con tecnologías de apoyo?

Criterio	Nivel	Comprobación
4.1.2 Nombre, función, valor	A	Cada control dice qué es, cómo se llama y en qué estado está (desplegado, seleccionado, marcado).
4.1.3 Mensajes de estado	AA	Mensajes como “Añadido al carrito” o “3 resultados” se anuncian sin mover el foco.

Por dónde empezar

Cincuenta y cinco comprobaciones son muchas para una tarde. Hazlas en este orden, porque sigue el camino en el que las barreras impiden terminar una tarea:

1. Las de teclado (2.1.1, 2.1.2, 2.4.3, 2.4.7, 2.4.11) en tu recorrido principal. Una barrera de teclado detiene la tarea por completo.
2. Las de formularios (1.3.5, 3.3.1, 3.3.2, 3.3.3, 3.3.7) en el checkout, el registro y el contacto.
3. Contraste y zoom (1.4.3, 1.4.11, 1.4.4, 1.4.10) en las plantillas que más repites.
4. Imágenes y enlaces (1.1.1, 2.4.4) en fichas de producto y páginas de campaña.
5. El resto, plantilla a plantilla.

Casi todas las webs se construyen con un puñado de plantillas. Corregir un hallazgo en la plantilla lo corrige en todas las páginas que la usan, y por eso una buena auditoría agrupa los hallazgos por componente, no por URL.

Qué cambió respecto a las WCAG 2.1

Las WCAG 2.2 son recomendación del W3C desde octubre de 2023. Mantienen todo lo de la 2.1 salvo el 4.1.1 Procesamiento, que se retiró porque los navegadores y las tecnologías de apoyo actuales ya no dependen de él. Añaden nueve criterios: los seis de A y AA marcados como Nuevo arriba, y tres de AAA (2.4.12 Foco no oculto mejorado, 2.4.13 Apariencia del foco y 3.3.9 Autenticación accesible mejorada).

Como la 2.2 es retrocompatible, hoy no tiene sentido trabajar con la 2.1. Una web que pasa esta lista pasa también la 2.1 AA.