La accesibilidad no es “un extra”: es parte de hacer una interfaz correcta. Además, muchas mejoras de accesibilidad mejoran también la experiencia para todo el mundo (teclado, foco, textos claros, contraste).

1) Prueba rápida: solo teclado

Desconecta el ratón y prueba:

• Tab para moverte entre elementos interactivos.
• Enter/Space para activar botones.
• Shift+Tab para volver atrás.

Si no ves el foco, mal: asegúrate de no eliminarlo con CSS.

2) Etiquetas y formularios

Cada input debe tener un <label> asociado:

<label for="email">Email</label>
<input id="email" type="email" autocomplete="username">

3) Contraste y tamaños

• Texto pequeño con poco contraste es uno de los fallos más comunes.
• Revisa estados: normal, hover, focus, disabled.

4) Botones y enlaces: semántica correcta

• Si “hace algo”: button.
• Si “navega”: a.

Evita div clicables sin roles ni teclado.

5) Imágenes y alt

Si la imagen es informativa, alt debe describirla. Si es decorativa, alt="".

6) Herramientas útiles

• Lighthouse (Chrome DevTools): auditoría rápida.
• WAVE: extensión para detectar problemas de estructura.
• Inspectores: revisa el árbol de accesibilidad.

7) Cambios típicos que arreglan mucho

• Foco visible (no quitar outline sin alternativa).
• Botones con texto claro o aria-label si solo hay icono.
• Menús con aria-expanded y control de teclado.
• Mensajes de error asociados a inputs.