Checklist WCAG 2.2 AA: Los 50 criterios de conformidad
El checklist completo de accesibilidad WCAG 2.2 Nivel A y AA. Descubre qué problemas detectan las herramientas automatizadas y cuáles requieren pruebas manuales, con consejos prácticos para cada criterio.
Por qué importa el cumplimiento de WCAG 2.2 AA en 2026
El cumplimiento de la accesibilidad web ya no es opcional para la mayoría de las organizaciones. El panorama normativo ha cambiado significativamente: la norma del DOJ de abril de 2024 exige que los gobiernos estatales y locales cumplan WCAG 2.1 Nivel AA, la Ley Europea de Accesibilidad (EAA) exige el cumplimiento de la norma EN 301 549 para servicios digitales, y las empresas privadas siguen enfrentándose a acciones legales que citan WCAG como estándar.
Según el estudio WebAIM Million, el 94,8 % de las páginas de inicio tienen errores WCAG detectables. Los problemas más comunes — falta de texto alternativo, bajo contraste de color, ausencia de etiquetas en formularios — son de los más fáciles de corregir. Ahí es donde entra este checklist.
WCAG 2.2, publicado en octubre de 2023 y actualmente el estándar vigente, añadió 9 nuevos criterios de conformidad centrados en la accesibilidad cognitiva, la usabilidad móvil y la autenticación. Se basa en WCAG 2.1, lo que significa que cumplir completamente con 2.2 también cubre 2.1. Este checklist abarca los 50 criterios de Nivel A y AA que necesitas cumplir.
Datos clave sobre WCAG 2.2 AA
- 50 criterios de conformidad en Nivel A (18) y Nivel AA (32)
- Aproximadamente el 40 % de los problemas pueden detectarse con herramientas de escaneo automatizado
- El 60 % restante requiere pruebas manuales con tecnologías de asistencia
- WCAG 2.2 AA es referenciado por los requisitos de ADA, EAA y EN 301 549
Referencia rápida: WCAG 2.2 de un vistazo
Este checklist cubre todos los criterios de conformidad WCAG 2.2 Nivel A y AA. Úsalo para auditar la accesibilidad de tu sitio web. Los criterios marcados con una marca verde pueden ser parcialmente detectados por herramientas automatizadas como inclly. Los marcados con un icono de advertencia requieren pruebas manuales.
Cómo usar este checklist
- Automatizado criterios pueden ser detectados por herramientas de escaneo (inclly los detecta)
- Manual criterios requieren juicio y pruebas humanas
Las herramientas automatizadas detectan aproximadamente el 40 % de los problemas de accesibilidad. Usa este checklist para cubrir el 60 % restante que requiere pruebas manuales.
Perceptible
La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de formas que puedan percibir.
Contenido no textual
Nivel ATodo el contenido no textual tiene una alternativa de texto que cumple un propósito equivalente.
Cómo solucionarlo
- -Añade texto alternativo a todas las imágenes que transmitan significado
- -Usa alt="" vacío para imágenes decorativas
- -Proporciona alternativas de texto para gráficos y diagramas
- -Añade subtítulos o transcripciones para contenido de audio
Solo audio y solo vídeo
Nivel AProporciona alternativas para medios temporizados.
Cómo solucionarlo
- -Proporciona transcripciones para contenido solo de audio
- -Proporciona audiodescripción o alternativa textual para contenido solo de vídeo
Subtítulos (pregrabados)
Nivel ASe proporcionan subtítulos para todo el contenido de audio pregrabado en medios sincronizados.
Cómo solucionarlo
- -Añade subtítulos a todos los vídeos con audio
- -Asegúrate de que los subtítulos estén sincronizados con el audio
- -Incluye identificación del hablante cuando haya varios
Información y relaciones
Nivel ALa información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse programáticamente.
Cómo solucionarlo
- -Usa HTML semántico (encabezados, listas, tablas)
- -Asocia las etiquetas de formulario con los campos de entrada
- -Usa landmarks ARIA de forma apropiada
- -Asegúrate de que el orden de lectura coincida con el orden visual
Secuencia significativa
Nivel ACuando la secuencia afecta al significado, se puede determinar programáticamente un orden de lectura correcto.
Cómo solucionarlo
- -Asegúrate de que el orden del DOM coincida con el orden visual
- -Prueba con CSS desactivado para verificar el orden de lectura
Características sensoriales
Nivel ALas instrucciones no dependen únicamente de características sensoriales como forma, color, tamaño o ubicación.
Cómo solucionarlo
- -No uses instrucciones como "haz clic en el botón rojo" o "mira la barra lateral"
- -Proporciona múltiples formas de identificar los elementos
Uso del color
Nivel AEl color no se usa como único medio visual para transmitir información.
Cómo solucionarlo
- -Añade iconos o etiquetas de texto junto a los indicadores de color
- -Usa patrones además de colores en los gráficos
- -Asegúrate de que los enlaces estén subrayados o tengan otros indicadores no cromáticos
Control del audio
Nivel ASi el audio se reproduce automáticamente durante más de 3 segundos, proporciona una forma de pausarlo o controlar el volumen.
Cómo solucionarlo
- -Evita la reproducción automática de audio
- -Si es necesario, proporciona controles visibles de pausa/detención
- -Incluye un control de volumen independiente del volumen del sistema
Contraste (mínimo)
Nivel AAEl texto tiene una relación de contraste de al menos 4,5:1 (3:1 para texto grande).
Cómo solucionarlo
- -Usa una herramienta de verificación de contraste
- -El texto grande (18pt+ o 14pt negrita) necesita una relación de 3:1
- -El texto normal necesita una relación de 4,5:1
Cambio de tamaño del texto
Nivel AAEl texto se puede redimensionar hasta un 200 % sin pérdida de contenido ni funcionalidad.
Cómo solucionarlo
- -Usa unidades relativas (rem, em) en lugar de píxeles
- -Prueba con zoom al 200 % en el navegador
- -Asegúrate de que no haya desplazamiento horizontal al 200 % de zoom
Imágenes de texto
Nivel AASi se puede lograr la misma presentación visual con texto, no uses imágenes de texto.
Cómo solucionarlo
- -Usa CSS para dar estilo al texto en lugar de imágenes
- -Los logotipos son una excepción a esta regla
Reflujo
Nivel AAEl contenido puede presentarse sin desplazamiento horizontal a un ancho de 320 px.
Cómo solucionarlo
- -Usa diseño responsivo
- -Prueba con un ancho de ventana gráfica de 320 px
- -Evita el desplazamiento bidimensional excepto para contenido complejo
Contraste de elementos no textuales
Nivel AALos componentes de interfaz y los gráficos tienen una relación de contraste de 3:1.
Cómo solucionarlo
- -Los campos de formulario necesitan bordes visibles con contraste suficiente
- -Los iconos que transmiten significado necesitan un contraste de 3:1
- -Los indicadores de foco necesitan un contraste de 3:1
Espaciado del texto
Nivel AANo se pierde contenido cuando se ajusta el espaciado del texto.
Cómo solucionarlo
- -No uses contenedores de altura fija para el texto
- -Prueba con interlineado, espaciado entre letras y espaciado entre palabras aumentados
Contenido en hover o foco
Nivel AAEl contenido adicional activado por hover/foco es descartable, accesible con el puntero y persistente.
Cómo solucionarlo
- -Los tooltips deben poder cerrarse con Escape
- -El usuario debe poder pasar el puntero sobre el contenido del tooltip
- -El contenido debe permanecer visible hasta que se descarte
Operable
Los componentes de la interfaz de usuario y la navegación deben ser operables.
Teclado
Nivel AToda la funcionalidad está disponible usando solo el teclado.
Cómo solucionarlo
- -Prueba todo el sitio usando solo Tab, Enter, Espacio y teclas de dirección
- -Asegúrate de que todos los elementos interactivos sean enfocables
- -Los componentes personalizados necesitan soporte de teclado
Sin trampa de teclado
Nivel AEl foco del teclado nunca queda atrapado en un componente.
Cómo solucionarlo
- -Prueba los modales y diálogos para la navegación por teclado
- -Asegúrate de que el foco siempre pueda moverse fuera de cualquier elemento
Atajos de tecla de carácter
Nivel ALos atajos de teclado de un solo carácter pueden desactivarse o reasignarse.
Cómo solucionarlo
- -Evita atajos de una sola tecla (como "s" para buscar)
- -Si se usan, proporciona opciones para reasignar o desactivar
Tiempo ajustable
Nivel ALos usuarios pueden ampliar, ajustar o desactivar los límites de tiempo.
Cómo solucionarlo
- -Los tiempos de sesión deben avisar a los usuarios y permitir su extensión
- -No avances automáticamente los carruseles sin control del usuario
Pausar, detener, ocultar
Nivel AEl contenido en movimiento o con actualización automática puede pausarse, detenerse u ocultarse.
Cómo solucionarlo
- -Los carruseles necesitan controles de pausa
- -El contenido con actualización automática necesita controles de detención
- -Las animaciones que duran más de 5 segundos necesitan controles
Tres destellos o por debajo del umbral
Nivel AEl contenido no destella más de 3 veces por segundo.
Cómo solucionarlo
- -Evita el contenido con destellos por completo
- -Si es necesario, mantén la frecuencia de destello por debajo de 3 Hz
Evitar bloques
Nivel AProporciona una forma de saltar los bloques de contenido repetidos.
Cómo solucionarlo
- -Añade un enlace de "ir al contenido principal"
- -Usa landmarks ARIA (main, nav, etc.)
- -Asegura una estructura de encabezados adecuada
Página titulada
Nivel ALas páginas tienen títulos que describen el tema o propósito.
Cómo solucionarlo
- -Cada página debe tener un título único y descriptivo
- -El título debe incluir tanto el nombre de la página como el del sitio
Orden del foco
Nivel AEl orden del foco preserva el significado y la operabilidad.
Cómo solucionarlo
- -El orden de tabulación debe seguir el orden visual de lectura
- -Los modales deben atrapar el foco de forma apropiada
- -El foco debe regresar al elemento activador cuando se cierra el modal
Propósito del enlace (en contexto)
Nivel AEl propósito del enlace puede determinarse a partir del texto del enlace o su contexto.
Cómo solucionarlo
- -Evita "haz clic aquí" o "leer más" sin contexto
- -El texto del enlace debe tener sentido fuera de contexto o con el texto circundante
- -Usa aria-label si el texto del enlace por sí solo no es descriptivo
Múltiples vías
Nivel AAHay más de una forma disponible para localizar una página dentro de un conjunto de páginas.
Cómo solucionarlo
- -Proporciona un buscador en el sitio
- -Incluye un mapa del sitio
- -Usa menús de navegación claros
Encabezados y etiquetas
Nivel AALos encabezados y las etiquetas describen el tema o propósito.
Cómo solucionarlo
- -Usa encabezados descriptivos y únicos
- -Las etiquetas de formulario deben describir claramente la entrada esperada
Foco visible
Nivel AAEl indicador de foco del teclado es visible.
Cómo solucionarlo
- -No elimines los estilos de contorno sin un reemplazo
- -El indicador de foco debe ser claramente visible
- -Usa :focus-visible para estilos de foco solo con teclado
Foco no oculto (mínimo)
Nivel AAEl elemento enfocado no está completamente oculto por otro contenido.
Cómo solucionarlo
- -Las cabeceras fijas no deben cubrir los elementos enfocados
- -Los banners de cookies no deben cubrir los elementos enfocados
- -Usa scroll-margin para tener en cuenta los elementos fijos
Gestos del puntero
Nivel ALos gestos multipunto o basados en trayectorias tienen alternativas de un solo puntero.
Cómo solucionarlo
- -Pellizcar para zoom debe tener alternativas con botones
- -Los gestos de deslizar necesitan alternativas con botones
- -Las interacciones de mapas necesitan alternativas de un solo clic
Cancelación del puntero
Nivel ALas acciones activadas al presionar el puntero pueden cancelarse.
Cómo solucionarlo
- -Usa click/touch-end en lugar de mousedown/touchstart
- -Proporciona funcionalidad de deshacer para acciones destructivas
Etiqueta en el nombre
Nivel ALas etiquetas de texto visibles están incluidas en los nombres accesibles.
Cómo solucionarlo
- -El nombre accesible debe incluir o coincidir con la etiqueta visible
- -No uses aria-label que contradiga el texto visible
Activación por movimiento
Nivel ALas funciones activadas por movimiento tienen alternativas de interfaz.
Cómo solucionarlo
- -Agitar para deshacer necesita una alternativa con botón
- -Los controles por movimiento deben ser opcionales
Movimientos de arrastre
Nivel AALas operaciones de arrastre tienen alternativas de un solo puntero.
Cómo solucionarlo
- -Arrastrar para reordenar debe tener alternativas con botones
- -Proporciona flechas arriba/abajo para reordenar listas
Tamaño del objetivo (mínimo)
Nivel AALos objetivos táctiles tienen al menos 24x24 píxeles CSS (con excepciones).
Cómo solucionarlo
- -Los botones y enlaces deben tener al menos 24x24 píxeles
- -Proporciona un espaciado adecuado entre objetivos táctiles
- -Se recomiendan 44x44 píxeles para dispositivos móviles
Comprensible
La información y el funcionamiento de la interfaz de usuario deben ser comprensibles.
Idioma de la página
Nivel AEl idioma humano predeterminado de la página puede determinarse programáticamente.
Cómo solucionarlo
- -Añade el atributo lang al elemento html
- -Usa el código de idioma correcto (en, es, fr, etc.)
Idioma de las partes
Nivel AALos cambios de idioma dentro del contenido están identificados.
Cómo solucionarlo
- -Usa el atributo lang en elementos con texto en un idioma diferente
- -Incluye nombres propios y términos técnicos en el idioma principal
Al recibir el foco
Nivel ARecibir el foco no cambia automáticamente el contexto.
Cómo solucionarlo
- -No envíes formularios automáticamente al recibir el foco
- -No abras nuevas ventanas al recibir el foco
- -No navegues a otra página al recibir el foco
Al recibir entrada
Nivel ACambiar la configuración no cambia automáticamente el contexto a menos que el usuario sea avisado.
Cómo solucionarlo
- -Los formularios deben tener botones de envío explícitos
- -Avisa a los usuarios antes del envío automático
- -Los botones de radio no deben enviar formularios automáticamente
Navegación consistente
Nivel AALa navegación aparece en el mismo orden en todas las páginas.
Cómo solucionarlo
- -Mantén la navegación en la misma ubicación en todas las páginas
- -Mantén un orden consistente de los elementos de navegación
Identificación consistente
Nivel AALos componentes con la misma funcionalidad se identifican de forma consistente.
Cómo solucionarlo
- -Usa etiquetas consistentes para funciones similares
- -Los iconos de búsqueda siempre deben significar búsqueda
- -No uses etiquetas diferentes para la misma acción
Ayuda consistente
Nivel ALos mecanismos de ayuda aparecen en el mismo orden relativo en las páginas.
Cómo solucionarlo
- -Mantén los enlaces de ayuda en una ubicación consistente
- -La información de contacto debe estar en el mismo lugar en todas las páginas
Identificación de errores
Nivel ALos errores de entrada se detectan automáticamente y se describen al usuario.
Cómo solucionarlo
- -Muestra mensajes de error claros para entradas inválidas
- -Identifica qué campo tiene un error
- -No dependas solo del color para indicar errores
Etiquetas o instrucciones
Nivel ASe proporcionan etiquetas o instrucciones cuando el contenido requiere entrada del usuario.
Cómo solucionarlo
- -Cada campo de formulario necesita una etiqueta visible o sr-only
- -Proporciona indicaciones de formato (p. ej., "DD/MM/AAAA")
- -Indica los campos obligatorios
Sugerencia de error
Nivel AASi se detecta un error de entrada, se proporcionan sugerencias.
Cómo solucionarlo
- -Sugiere correcciones cuando sea posible
- -Muestra el formato esperado para entradas inválidas
- -Proporciona ejemplos de entradas válidas
Prevención de errores (legal, financiero, datos)
Nivel AAPara transacciones legales/financieras, los envíos son reversibles, verificados o confirmados.
Cómo solucionarlo
- -Permite a los usuarios revisar antes del envío final
- -Proporciona un paso de confirmación para acciones importantes
- -Permite a los usuarios deshacer o corregir los envíos
Entrada redundante
Nivel ALa información introducida previamente se completa automáticamente o está disponible para selección.
Cómo solucionarlo
- -No pidas a los usuarios que reintroduzcan información
- -Completa automáticamente la dirección de envío desde la de facturación
- -Recuerda las preferencias dentro de una sesión
Autenticación accesible (mínimo)
Nivel AANo se requieren pruebas de función cognitiva para la autenticación a menos que existan alternativas.
Cómo solucionarlo
- -Permite el uso de gestores de contraseñas
- -Permite copiar y pegar códigos de verificación
- -No uses CAPTCHAs como única opción
Robusto
El contenido debe ser lo suficientemente robusto para ser interpretado de forma fiable por una amplia variedad de agentes de usuario.
Nombre, rol, valor
Nivel ALos componentes de interfaz tienen nombres accesibles, roles y estados.
Cómo solucionarlo
- -Los componentes personalizados necesitan roles ARIA adecuados
- -Los botones de alternancia necesitan aria-pressed
- -Las secciones expandibles necesitan aria-expanded
Mensajes de estado
Nivel AALos mensajes de estado pueden determinarse programáticamente sin recibir el foco.
Cómo solucionarlo
- -Usa regiones aria-live para actualizaciones dinámicas
- -Los mensajes de éxito/error necesitan role="alert" o aria-live
- -Los estados de carga deben ser anunciados
Preguntas frecuentes
¿Cuál es la diferencia entre WCAG 2.1 y 2.2?
WCAG 2.2 se basa en WCAG 2.1 añadiendo 9 nuevos criterios de conformidad centrados en usuarios con discapacidades cognitivas, baja visión y usuarios de dispositivos móviles. Las incorporaciones clave incluyen Foco no oculto (2.4.11), Movimientos de arrastre (2.5.7) y Tamaño mínimo del objetivo (2.5.8). WCAG 2.2 también eliminó el criterio 4.1.1 Análisis sintáctico por obsoleto. Si cumples con WCAG 2.2, automáticamente cumples con 2.1.
¿Qué porcentaje de problemas WCAG pueden detectar las herramientas automatizadas?
Las herramientas automatizadas de pruebas de accesibilidad pueden detectar aproximadamente entre el 30 y el 40 % de los problemas WCAG. Estos incluyen problemas técnicos como la falta de texto alternativo, errores de contraste de color, ausencia de etiquetas en formularios y estructura incorrecta de encabezados. El 60-70 % restante requiere juicio humano, por ejemplo, si el texto alternativo es significativo, si el contenido está organizado lógicamente o si los mensajes de error son útiles.
¿Es WCAG 2.2 AA un requisito legal?
Depende de tu jurisdicción. En EE. UU., la norma del DOJ de abril de 2024 exige que los gobiernos estatales y locales cumplan WCAG 2.1 Nivel AA. Las empresas privadas se enfrentan a demandas por ADA que citan WCAG como estándar. En la UE, la Ley Europea de Accesibilidad (en vigor desde junio de 2025) exige WCAG 2.1 AA para muchos productos y servicios digitales. WCAG 2.2 se está convirtiendo cada vez más en el estándar esperado.
¿Cuánto tiempo se tarda en lograr el cumplimiento de WCAG 2.2 AA?
El plazo varía significativamente según el estado actual, el tamaño y la complejidad de tu sitio. Un sitio de marketing pequeño podría necesitar unas pocas semanas de trabajo concentrado, mientras que una aplicación web grande podría requerir meses. La clave es priorizar: corrige primero los problemas críticos (Nivel A) y luego aborda los criterios AA. Recuerda que la accesibilidad es continua: el nuevo contenido y las nuevas funcionalidades necesitan pruebas constantes.
¿Cuáles son los errores WCAG más comunes?
Según el informe WebAIM Million, los errores más comunes son: falta de texto alternativo en imágenes (54,5 %), bajo contraste de color (81 %), ausencia de etiquetas en formularios (45,9 %), enlaces vacíos (44,6 %), falta del idioma del documento (17,1 %) y botones vacíos (26,9 %). La mayoría de estos pueden detectarse con herramientas automatizadas y son relativamente sencillos de corregir.
¿Qué es un checklist WCAG AA y quién lo necesita?
Un checklist WCAG AA cubre sistemáticamente todos los criterios de conformidad de Nivel A y Nivel AA de las Pautas de Accesibilidad para el Contenido Web. Cualquier organización con un sitio web público se beneficia de uno, especialmente las que están sujetas a los requisitos de ADA (EE. UU.), la Ley Europea de Accesibilidad (UE) o normativas de accesibilidad sectoriales. Ayuda a los equipos a rastrear qué criterios cumplen, cuáles necesitan trabajo y cuáles requieren pruebas manuales más allá de las herramientas automatizadas.
Sigue aprendiendo
Explora guías relacionadas para profundizar en tu estrategia de cumplimiento de accesibilidad.
Pruebas automatizadas vs manuales
Comprende qué detecta cada enfoque y construye una estrategia de pruebas eficaz.
Guía de pruebas manuales de accesibilidad
5 pruebas esenciales que todo desarrollador debería conocer: teclado, lector de pantalla, zoom y más.
Checklist de cumplimiento EAA
Requisitos EN 301 549 mapeados a WCAG 2.2 para el cumplimiento de la Ley Europea de Accesibilidad.
Comparativa de herramientas de pruebas de accesibilidad
Compara axe DevTools, WAVE, Lighthouse, Pa11y y más — con ventajas, desventajas y recomendaciones.
¿Necesitas ayuda para implementar estas correcciones?
inclly escanea automáticamente tu sitio web en busca de problemas WCAG 2.2 AA y proporciona ejemplos de código específicos para tu framework. Comienza con un escaneo gratuito para ver qué criterios cumple tu sitio y cuáles necesitan atención.
Iniciar escaneo gratuito