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
altdescriptivo - ✔️ 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
altvací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
- Auditoría con herramientas (WAVE, Lighthouse)
- Corrección de errores HTML/ARIA
- Revisión visual (contrastes, fuentes, foco)
- Validación con usuarios o perfiles simulados
- 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.