Introducción

La accesibilidad web es una obligación técnica, ética y legal. Si tu web no puede ser usada correctamente por personas con discapacidad visual, auditiva o cognitiva, estás dejando fuera a una parte de tu audiencia y arriesgas sanciones en muchos países.

En esta guía te explicamos cómo verificar si tu web cumple con los niveles de accesibilidad AA o AAA según la norma internacional WCAG 2.1. Aprenderás qué debes revisar, qué herramientas usar y cómo detectar errores más allá de lo visual.

Índice

• 1. Qué son los niveles A, AA y AAA
• 2. ¿Qué nivel es obligatorio o recomendado?
• 3. Herramientas para comprobar accesibilidad
• 4. Revisión técnica: HTML, ARIA, etiquetas
• 5. Contrastes, fuentes y diseño visual
• 6. Navegación por teclado y lectores de pantalla
• 7. Errores comunes que bloquean el cumplimiento
• 8. Pasos para adaptar una web que no cumple
• 9. Conclusión y recursos extra

1. Qué significan los niveles A / AA / AAA

Nivel	Qué significa
A	Accesibilidad básica. Lo mínimo indispensable.
AA	Recomendado para la mayoría de sitios públicos y comerciales.
AAA	Accesibilidad avanzada. Requiere adaptaciones importantes.

💡 La mayoría de normativas (como la europea) exigen AA como mínimo.

2. ¿Qué nivel necesito cumplir?

• 🏛️ Sitios públicos: obligatorio AA
• 🛍️ Tiendas online: muy recomendable AA
• 📚 Educación o salud: en algunos países se exige AAA

3. Herramientas para auditar accesibilidad

• WAVE – extensión web con análisis de errores
• Lighthouse – integrada en Chrome
• axe – motor de accesibilidad para testing automático
• 📄 Validadores de etiquetas ARIA y roles semánticos

4. Revisión técnica: HTML, etiquetas y roles

Checklist técnica mínima:

• ✔️ Imágenes con alt descriptivo
• ✔️ Encabezados en orden lógico (h1 → h2 → h3)
• ✔️ Formularios con etiquetas y errores visibles
• ✔️ Usar role="banner", role="navigation", role="main", etc.

5. Contraste y estilo visual

Usa verificadores como WebAIM Contrast Checker.

• ✅ Ratio mínimo recomendado: 4.5:1 para AA, 7:1 para AAA
• 🔤 Tamaños de fuente ≥16px con contraste suficiente
• ⛔ Evitar colores solos para transmitir información

6. Navegación con teclado y screen readers

Prueba navegar tu sitio con solo el teclado: ➡️ ¿Puedes usar Tab y Enter para recorrer todo el contenido?

Herramientas útiles:

• 🗣️ NVDA o VoiceOver (lectores de pantalla)
• ⌨️ Navegación por teclado (sin mouse)
• 🧩 Revisión de `tabindex`, `focus`, y `aria-*`

7. Errores comunes

• 🚫 Imágenes decorativas sin alt vacío
• ⚠️ Botones sin texto visible o aria-label
• 🔁 Elementos interactivos sin foco visible
• 📉 Errores de contraste en banners o botones

8. Pasos para adaptar una web que no cumple

1. Auditoría con herramientas (WAVE, Lighthouse)
2. Corrección de errores HTML/ARIA
3. Revisión visual (contrastes, fuentes, foco)
4. Validación con usuarios o perfiles simulados
5. Documentación y plan de mantenimiento

9. Conclusión

Cumplir con accesibilidad web es más que un check técnico: es una mejora de experiencia, reputación y responsabilidad.

¿Quieres que revisemos tu sitio o que adaptemos tu tema a nivel AA o AAA? 📩 Escríbenos y lo hacemos por ti.