Checklist interactiva de WCAG 2.2 con los 55 criterios de conformidad de nivel A y AA, cada uno con su significado, una prueba y una solución, más un verificador de contraste de color WCAG.
Una checklist WCAG para la mayoría de los sitios cubre los 55 criterios de conformidad de nivel A y AA de WCAG 2.2 (se eliminó 4.1.1 Procesamiento). Comprobaciones clave: contraste de texto de al menos 4.5:1 (3:1 para texto grande), uso completo con teclado, foco visible, campos etiquetados, subtítulos y objetivos de al menos 24 por 24 píxeles CSS.
WCAG 2.2 de un vistazo
Esta es la versión práctica de una revisión de accesibilidad: cada criterio de conformidad de nivel A y AA de WCAG 2.2, agrupado por principio, con lo que significa en palabras sencillas, cómo probarlo en pocos minutos y una solución en código cuando el código ayuda. Marca los elementos a medida que avanzas, filtra por nivel o principio e imprime el resultado.
Cumplir el nivel AA significa satisfacer 55 criterios: 31 de nivel A y 24 de nivel AA. WCAG 2.2 tiene 86 criterios en total si se cuentan los 31 de nivel AAA, después de que 4.1.1 Procesamiento se declarara obsoleto y se eliminara.
El criterio 1.4.3 pide 4.5:1 entre el texto normal y su fondo, y 3:1 para texto grande, es decir, de al menos 18 puntos (24 píxeles CSS) o 14 puntos en negrita (unos 18.66 píxeles CSS). El criterio 1.4.11 pide 3:1 para iconos, bordes de campos e indicadores de foco.
Ninguna checklist puede garantizarlo. Las leyes varían según el país y el sector, y algunas se basan en WCAG 2.1 o en sus propias normas. Usa esta página para encontrar y corregir barreras, y busca asesoramiento legal para las cuestiones de cumplimiento.
WCAG 2.2 añadió nueve criterios, seis de ellos de nivel A o AA: Foco no oculto (mínimo), Movimientos de arrastre, Tamaño del objetivo (mínimo), Ayuda coherente, Entrada redundante y Autenticación accesible (mínima). También eliminó 4.1.1 Procesamiento.
Cada color se convierte a luminancia relativa linealizando los canales rojo, verde y azul y ponderándolos con 0.2126, 0.7152 y 0.0722. La relación es la luminancia más clara más 0.05, dividida entre la más oscura más 0.05, lo que da un valor de 1:1 a 21:1.
Oculto hasta recibir el foco, luego aparece arriba. Pulsa Tab dentro del resultado para verlo.
focus-visible muestra el anillo a quienes usan el teclado. El color del contorno debe llegar a 3:1 frente al fondo.
scroll-padding reserva espacio para que los elementos enfocados que se desplazan a la vista no queden ocultos bajo la barra.
Añade relleno a los botones de icono pequeños hasta 24 por 24 píxeles CSS. 44 píxeles es el objetivo AAA, más estricto y más amable en móviles.
Pega esto en las herramientas de desarrollo. Son los valores que nombra el criterio; el contenido debe seguir siendo legible con ellos aplicados.
El mensaje es texto, está junto al campo, dice cómo corregirlo y se vincula con aria-describedby.
Una región role=status se anuncia de forma educada cuando cambia su texto, sin mover el foco.
Detener el movimiento automático para quienes piden menos movimiento también ayuda con Pausar, detener, ocultar.
Los valores de autocomplete correctos y no bloquear el pegado permiten iniciar sesión sin recordar una contraseña.
Imágenes, iconos y controles tienen una alternativa textual; lo decorativo se oculta.
Revisa cada alt de img, el nombre de cada botón de icono y el resumen de cada gráfico.
El solo audio tiene transcripción; el vídeo sin sonido tiene transcripción o pista de audio.
Busca cada podcast o clip sin sonido y comprueba su alternativa.
El vídeo grabado con sonido tiene subtítulos sincronizados.
Reproduce los vídeos con subtítulos activados; comprueba que sean exactos, no solo que existan.
La información solo visual del vídeo se describe o se ofrece como texto.
Míralo con los ojos cerrados; ¿se pierde algo importante?
Las emisiones en directo con audio tienen subtítulos.
Comprueba que el reproductor o servicio en directo admite subtítulos en tiempo real.
El vídeo grabado tiene audiodescripción cuando lo visual transmite significado.
Busca una versión descrita o una narración que cubra el texto en pantalla.
Encabezados, listas, tablas y etiquetas están marcados en el código, no solo con estilos.
Inspecciona encabezados, listas, cabeceras de tabla y asociaciones de etiquetas.
El orden de lectura en el código coincide con el significado.
Desactiva el CSS o usa el modo exploración de un lector y lee de arriba abajo.
Las instrucciones no dependen solo de forma, color, tamaño, posición o sonido.
Busca en el texto frases como el botón redondo o a la derecha.
El contenido funciona en vertical y en horizontal, salvo que una sea esencial.
Gira un teléfono o emula ambas orientaciones.
Los campos de datos personales declaran su propósito para que el navegador los autocomplete.
Comprueba que los campos de nombre, correo, teléfono y dirección llevan valores de autocomplete.
El color nunca es la única forma de mostrar significado, estado o un enlace.
Míralo en escala de grises; ¿se siguen distinguiendo errores y enlaces?
El sonido que se reproduce solo durante más de 3 segundos se puede pausar o silenciar.
Carga cada página con el sonido activado.
El contraste del texto es de al menos 4.5:1, o 3:1 para texto grande.
Mide los pares de texto y fondo con el verificador de contraste de abajo.
El texto puede ampliarse al 200 por ciento sin perder contenido ni funciones.
Amplía al 200 por ciento; nada recortado ni superpuesto.
Se usa texto real en lugar de imágenes de texto, salvo los logotipos.
Busca banners y botones que sean imágenes.
El contenido cabe en 320 píxeles CSS de ancho sin desplazamiento en dos direcciones.
Amplía al 400 por ciento con 1280 píxeles de ancho.
Iconos, bordes de campos, anillos de foco y partes de gráficos llegan a 3:1.
Mide bordes e iconos frente a lo que tienen al lado.
Nada se rompe al aumentar el interlineado y el espaciado entre párrafos, letras y palabras.
Aplica el bookmarklet de espaciado de texto o la anulación CSS de abajo.
Los tooltips se pueden cerrar, se puede pasar el puntero sobre ellos y permanecen hasta que te alejas.
Pasa el puntero sobre un tooltip, entra en él y pulsa Escape.
Todo funciona solo con el teclado.
Desconecta el ratón y completa cada tarea.
El foco siempre puede salir de cualquier componente.
Entra con Tab en widgets, contenidos incrustados y diálogos, y sal de nuevo.
Los atajos de una sola tecla se pueden desactivar, reasignar o solo funcionan con el foco.
Enumera los atajos que usan una letra o un número sin tecla modificadora.
Los límites de tiempo se pueden desactivar, ajustar o ampliar.
Busca expiraciones de sesión y pasos con tiempo limitado.
El contenido que se mueve, parpadea o se actualiza solo se puede pausar.
Busca carruseles, marquesinas y fondos animados.
Nada destella más de tres veces por segundo.
Revisa vídeos y animaciones en busca de efectos estroboscópicos.
Un enlace para saltar o los landmarks permiten pasar por alto los bloques repetidos.
Pulsa Tab una vez al cargar y busca Saltar al contenido.
Cada página tiene un título que la describe.
Lee los títulos de las pestañas del navegador en todo el sitio.
El foco se mueve en un orden que conserva el significado y el uso.
Recorre con Tab y fíjate en los saltos.
El texto del enlace, con su contexto, dice adónde lleva.
Enumera todos los enlaces; señala los Haz clic aquí y Leer más sin más contexto.
Hay más de una forma de encontrar una página, como el menú y la búsqueda o el mapa del sitio.
Comprueba que hay búsqueda, un mapa del sitio o un menú completo.
Encabezados y etiquetas describen su tema o propósito.
Lee solo el esquema de encabezados; ¿tiene sentido?
El indicador de foco del teclado es visible.
Recorre con Tab; siempre deberías ver dónde estás.
Un elemento enfocado no queda totalmente oculto por barras fijas o banners.
Recorre con Tab con el banner de cookies y la cabecera fija visibles.
Los gestos de trayectoria o multipunto tienen una alternativa con un solo puntero.
Comprueba que las interacciones de pellizcar, deslizar y dibujar tienen botones.
Las acciones se ejecutan al soltar, o se pueden anular o deshacer.
Pulsa, arrastra fuera y suelta; no debería activarse nada.
El nombre accesible contiene el texto de la etiqueta visible.
Compara las etiquetas visibles con los nombres calculados en las herramientas de desarrollo.
Las funciones de agitar o inclinar tienen un botón alternativo y se pueden desactivar.
Busca funciones que usen el movimiento del dispositivo.
Todo lo que se hace arrastrando también se puede hacer con clics o toques simples.
Prueba controles deslizantes, listas ordenables y mapas sin arrastrar.
Los objetivos miden al menos 24 por 24 píxeles CSS, o están separados para que un círculo de 24 píxeles no se superponga a otros, con excepciones.
Mide los iconos pequeños y los controles en línea.
La página declara su idioma principal.
Comprueba el atributo lang en el elemento html.
Los fragmentos en otro idioma se marcan con lang.
Busca citas o frases en otros idiomas.
Enfocar un elemento no cambia el contexto.
Pasa con Tab por cada control; nada debería enviarse ni navegar.
Cambiar un ajuste no cambia el contexto sin aviso.
Cambia selects y botones de opción; vigila navegaciones inesperadas.
La navegación repetida mantiene el mismo orden relativo.
Compara los menús en varias páginas.
Los componentes con la misma función se etiquetan igual.
Compara los controles de búsqueda, carrito y descarga entre páginas.
Las opciones de ayuda que se repiten aparecen en el mismo orden relativo.
Compara dónde están los enlaces de contacto, chat o ayuda en cada página.
Los errores de entrada se identifican y se describen con texto.
Envía formularios vacíos y con datos incorrectos.
Los campos tienen etiquetas o instrucciones cuando se necesita introducir datos.
Comprueba que cada campo tiene una etiqueta visible e indicaciones de formato.
Cuando se conoce la corrección, el mensaje de error la sugiere.
Lee el texto del error; ¿dice cómo corregir el dato?
Los envíos importantes se pueden revertir, revisar o confirmar.
Recorre el proceso de pago y el de eliminación de cuenta.
La información ya introducida en un proceso se rellena sola o se puede seleccionar.
Busca campos de dirección o correo repetidos en un mismo flujo.
El inicio de sesión no exige una prueba de memoria o un acertijo sin alternativa, y permite pegar.
Intenta pegar una contraseña; comprueba que hay una opción sin acertijo.
Los controles personalizados exponen su nombre, función y estado a las tecnologías de apoyo.
Inspecciona los widgets personalizados en el árbol de accesibilidad.
Los mensajes de estado se anuncian sin mover el foco.
Provoca un añadir al carrito o unos resultados de búsqueda y escucha.
Perceptible
Operable
Comprensible
Robusto
Checklist interactiva WCAG 2.2 A y AA
Imprimir o guardar como PDF
Filtrar por nivel
Filtrar por principio
Todos los niveles
Nivel {level}
Todos los principios
{ticked} de {shown} criterios mostrados marcados. Las marcas solo se guardan mientras esta pestaña esté abierta.
Prueba:
Cumple
No cumple
Selector de {label}
Hex de {label}
Verificador de contraste de color WCAG
Usa la fórmula de luminancia relativa de las definiciones de WCAG 2.2. Introduce colores hex de seis dígitos.
Texto
Fondo
Muestra de texto normal, 16 píxeles regular.
Muestra de texto grande, 24 píxeles.
Relación de contraste {ratio}:1
Introduce dos colores hex válidos como #1f2937.
Resultado frente a los umbrales AA
Uso
Necesita
Resultado
Texto normal (1.4.3)
Texto grande (1.4.3)
Iconos, bordes, anillos de foco (1.4.11)
Texto normal, AAA (1.4.6)
Empieza gratis · Sin tarjeta de crédito