Los criterios WCAG 2.2 AA son los requisitos técnicos concretos que una web tiene que cumplir para ser considerada accesible a nivel AA, el nivel mínimo exigido por ley. En total hay más de cincuenta, pero no hay que conocerlos todos para entender el que importan.
En este artículo te explicamos los más relevantes, agrupados por área temática y con ejemplos prácticos. El objetivo no es hacerte experto en WCAG, sino que puedas entender de que hablamos cuando hacemos una auditoría y por qué ciertos problemas son prioritarios.
Colores y contraste
El contraste es uno de los errores más habituales y de los más fáciles de detectar. El criterio está claro: el texto tiene que tener suficiente diferencia de luminositat respecto al fondo para ser legible para personas con baja visión o daltonismo.
Qué exige el nivel AA:
- Texto normal (hasta 18px regular o 14px en negrita): contraste mínimo de 4,5:1
- Texto grande (18px o más al regular, o 14px o más en negrita): contraste mínimo de 3:1
- Elementos de interfaz y gráficos informativos: contraste mínimo de 3:1
Ejemplo práctico:
Texto gris claro sobre fondo blanco es un error muy común en webs modernas que priorizan la estética minimalista. Visualmente puede parecer elegante, pero para una persona con baja visión puede ser completamente ilegible.
Una cosa que muchos no saben:
El contraste no afecta solo el texto. Los botones, los campos de formulario, los iconos informativos y los gráficos también tienen que cumplir los requisitos de contraste. Un botón con texto blanco sobre fondo naranja claro, por ejemplo, puede no superar el mínimo.
Imágenes y contenido visual
Las imágenes no las pueden ver los usuarios de lectores de pantalla ni los motores de búsqueda. Por eso, cualquier imagen que aporte información tiene que tener un texto alternativo, el atributo ALT, que describa su contenido.
Qué exige el nivel AA:
- Todas las imágenes informativas tienen que tener un atributo ALT descriptivo
- Las imágenes decorativas tienen que tener un ALT vacío (alto=»») porque el lector de pantalla las ignore
- Los gráficos e infografías complejas necesitan una descripción extensa accesible
Ejemplo práctico:
Una foto de un hotel con la descripción alto=»hotel» es insuficiente. Un texto como alt=»Habitación doble con vistas en el mar del Hotel Ejemplo, con cama de matrimonio y terraza» es el que realmente ayuda el usuario a entender el contenido.
Un error sutil muy común:
Poner el nombre del fichero como ALT, como por ejemplo alto=»IMG_20240315_foto_hotel.jpg», es peor que no poner nada. El lector de pantalla leerá toda aquella cadena de texto sin sentido.
Formularios
Los formularios son uno de los puntos críticos en webs turísticas, de servicios y de e-commerce. Un formulario inaccesible puede impedir que un usuario complete una reserva, un presupuesto o una compra.
Qué exige el nivel AA:
- Cada campo de formulario tiene que tener una etiqueta visible y asociada correctamente en el campo
- Los errores tienen que identificar qué campo tiene el problema y explicar cómo corregirlo
- Los campos obligatorios tienen que estar claramente indicados
- Si hay un límite de tiempo para completar el formulario, el usuario tiene que poder ampliarlo
Ejemplo práctico:
Un formulario de reservas que solo usa el placeholder como etiqueta, el texto gris que desaparece cuando empiezas a escribir, parece limpio visualmente pero es inaccesible. Cuando el usuario empieza a llenar el campo, pierde la referencia de qué campo es. Un lector de pantalla directamente no puede identificar el campo.
El error de errores:
Mostrar un mensaje genérico como «Hay errores al formulario» sin especificar qué campos fallan es un error WCAG. El mensaje tiene que indicar exactamente qué campo tiene el problema y como solucionarlo: «El campo Email no es válido. Introduce una dirección de correo electrónico correcta.»
Navegación y estructura
Una web accesible tiene que poder usarse sin ratón. Esto es fundamental para personas con movilidad reducida, que navegan con teclado o con dispositivos alternativos.
Qué exige el nivel AA:
- Todos los elementos interactivos tienen que ser accesibles por teclado (tecla Tab para navegar, Entero para activar)
- El elemento que tiene el foco tiene que ser visible — el usuario tiene que saber en todo momento donde es
- La página tiene que tener un mecanismo para saltar el menú de navegación e ir directamente al contenido principal (los «skip links»)
- Los títulos (H1, H2, H3…) tienen que seguir una jerarquía lógica y coherente
- El título de cada página tiene que ser descriptivo y único
Ejemplo práctico:
Prueba de navegar tu web solo con la tecla Tab. Si en algún momento pierdes de vista donde eres, porque el foco no es visible, o si no puedes acceder a algún elemento, tenso un problema de accesibilidad. Muchos temas de WordPress desactivan el *outline de foco por razones estéticas, y esto es un error WCAG directo.
La jerarquía de títulos:
Es muy habitual encontrar webs donde el primer título es un H2 porque «queda mejor visualmente», o dónde hay saltos de H1 a H4 sin pasar por H2 y H3. Para un lector de pantalla, los títulos son el mapa de navegación de la página. Una jerarquía rota es como un índice desordenado.
Textos y legibilidad
La accesibilidad no es solo para personas con discapacidades visuales o motoras. Las personas con dislexia, con dificultades cognitivas o simplemente con poca familiaridad digital también se benefician de una web muy estructurada.
Qué exige el nivel AA:
- El idioma de la página tiene que estar definido al código HTML
- Si hay cambios de idioma dentro del contenido, hay que indicarlos
- El texto no tiene que ser imagen: el texto real es accesible, el texto dentro de una imagen no
- El espaciado entre líneas, párrafos y letras tiene que poder ser ajustado por el usuario sin perder contenido ni funcionalidad
Un criterio nuevo a la versión 2.2:
Las WCAG 2.2 introdujeron el criterio «Foco Appearance», el foco visible no solo tiene que existir, sino que tiene que tener unas dimensiones mínimas y un contraste suficiente para ser realmente útil. Muchos temas y plugins que fueron «accesibles» con WCAG 2.1 han tenido que actualizarse para cumplir este criterio nuevo.
Los errores más habituales que encontramos
Después de auditar webs de todo tipos en Cataluña, estos son los problemas que aparecen con más frecuencia:
- Contraste insuficiente, especialmente en textos de color gris sobre blanco y en botones
- Imágenes sin ALT o con ALT genérico o vacío cuando no tendría que serlo
- Formularios sin etiquetas asociadas correctamente a los campos
- Foco invisible, el outline de foco desactivado por CSS
- Jerarquía de títulos rota, saltos de nivel o uso de títulos por razones estéticas
- Errores de formulario genéricos sin indicar qué campo falla ni como corregirlo
- Menús móviles inaccesibles por teclado o sin atributos ARIA correctos
Cabe de estos errores requiere un rediseño. Todos se corrigen con ajustes técnicos concretos, que es exactamente el que hacemos en una auditoría e implementación.
Como saber si tu web les cumple
Hay herramientas automáticas que detectan una parte de los problemas, WAVE y Lighthouse son las más conocidas. Pero las herramientas automáticas solo detectan aproximadamente el 30-40% de los errores reales. Los problemas de navegación por teclado, la calidad de los textos alternativos o la comprensibilidad de los errores de formulario requieren revisión manual.
La manera más fiable de saber donde estás es una auditoría profesional que combine análisis automático y revisión manual. Pero si quieres una primera aproximación rápida, nuestra herramienta de autoevaluación te da una puntuación inicial en minutos.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.