En el mundo de la accesibilidad digital hay ciertos fallos que se repiten una y otra vez. Son fáciles de detectar, pero también muy frecuentes y con gran impacto en la experiencia de los usuarios que dependen de tecnologías de asistencia.
Tanto las WCAG 2.2, como la metodología Trusted Tester v5.1.3 y las Pruebas Baseline insisten en ellos. Podríamos llamarlos los “pecados capitales” de la accesibilidad web. A continuación repasamos los cinco más comunes y cómo evitarlos con buenas prácticas.
1. Texto alternativo en imágenes (WCAG 1.1.1 – Contenido no textual)
El error:
Muchos desarrolladores olvidan el atributo alt, o lo rellenan con valores genéricos como “imagen1.jpg”. Sin texto alternativo, un lector de pantalla no tiene cómo transmitir el significado de la imagen.
Cómo hacerlo bien:
- Usa
altdescriptivo en imágenes informativas. - Marca las imágenes decorativas con
alt="". - Evita abusar de
titleo escribir descripciones demasiado largas.
Ejemplo correcto:
<img src="mapa.png" alt="Mapa de metro de Madrid">Herramientas útiles:
Extensión WAVE, lectores de pantalla (NVDA, JAWS, VoiceOver).
2. Orden y estructura de encabezados (WCAG 1.3.1 – Información y relaciones)
El error:
Se usan <div> o <span> con clases grandes en vez de encabezados semánticos (<h1>–<h6>). Esto rompe la jerarquía y confunde a quienes navegan por títulos.
Cómo hacerlo bien:
- Mantén un orden lógico (h1 → h2 → h3).
- Evita saltos bruscos como pasar de h1 a h4.
- Usa encabezados para secciones reales, no solo para dar estilo visual.
Ejemplo correcto:
<h1>Noticias</h1>
<h2>Internacional</h2>
<h2>Deportes</h2>
Herramientas útiles:
NVDA (atajo H para saltar entre encabezados), Accessibility Insights, Web Developer Toolbar.
3. Contraste de color insuficiente (WCAG 1.4.3 – Contraste mínimo)
El error:
Texto gris claro sobre blanco o botones con colores “bonitos” pero ilegibles. El contraste insuficiente es uno de los fallos más comunes.
Cómo hacerlo bien:
- Asegúrate de cumplir las ratios:
- 4.5:1 para texto normal.
- 3:1 para texto grande.
- Verifica manualmente casos de texto en imágenes o íconos.
Ejemplo correcto:
✅ Texto negro (#000) sobre fondo blanco (#fff).
❌ Texto gris (#aaa) sobre fondo blanco (#fff).
Herramientas útiles:
Contrast Checker (WebAIM), Colour Contrast Analyser.
4. Navegación con teclado (WCAG 2.1.1 – Teclado)
El error:
Componentes que solo funcionan con mouse, como menús desplegables o sliders, dejando fuera a quienes navegan con teclado.
Cómo hacerlo bien:
- Asegura que todo se pueda usar con
Tab,Shift+Tab,Enter,Espacioo flechas. - Haz visible el foco y mantén un orden lógico de tabulación.
- Revisa que el usuario pueda entrar y salir de todos los componentes sin quedar atrapado.
Ejemplo de fallo:
Un slider que solo se mueve con drag del ratón.
Herramientas útiles:
Prueba manual sin ratón, Accessibility Insights (tab stops).
5. Etiquetas y nombres en formularios (WCAG 3.3.2 – Etiquetas o instrucciones)
El error:
Campos sin <label> asociado o con instrucciones confusas. Usar solo placeholder como etiqueta es insuficiente.
Cómo hacerlo bien:
- Usa
<label for="id">para vincular cada campo. - Redacta instrucciones claras y visibles.
- Evita depender solo del color para indicar campos obligatorios.
Ejemplo correcto:
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email">Herramientas útiles:
NVDA, axe DevTools, revisión de código.
Conclusión
Estos cinco errores son fáciles de prevenir con revisiones simples y herramientas gratuitas. Evitarlos no solo asegura cumplir con las WCAG 2.2, sino que mejora la experiencia de todos los usuarios.
La accesibilidad no es un extra: es una parte fundamental del diseño inclusivo. Corregir estos “pecados capitales” es un primer paso sólido hacia un sitio web realmente usable y accesible.