Accesibilidad web desde cero: checklist WCAG para HTML y formularios
La accesibilidad permite que más personas puedan leer y completar tareas en un sitio. No depende de un único plugin: empieza con HTML semántico, continúa con teclado y contenido claro, y termina con pruebas reales.
HTML semántico
Usa button para acciones, a para navegación, nav para menús y main para el contenido principal. Sustituir todo por div obliga a reconstruir comportamientos que el navegador ya ofrece.
Encabezados e imágenes
Mantén un H1 descriptivo y organiza H2 y H3 en orden lógico. Una imagen informativa necesita ALT breve; una decorativa debe tener ALT vacío. No repitas en el ALT el texto que ya aparece junto a ella.
Formularios
Cada campo debe tener etiqueta asociada y mensajes de error concretos. Conserva los datos introducidos cuando falla la validación y no uses solo color para indicar un problema.
<label for='email'>Correo electrónico</label>
<input id='email' name='email' type='email' autocomplete='email' required>Teclado y foco
Prueba toda la página con Tab, Enter y Escape. El foco debe ser visible. En un diálogo, llévalo al primer control, impide que escape al fondo y devuélvelo al botón que lo abrió cuando se cierre.
Contraste y movimiento
El texto y los controles necesitan contraste suficiente. Un enlace no debe distinguirse solo por color. Respeta la preferencia prefers-reduced-motion y evita animaciones que parpadeen rápidamente.
Pruebas
- Navega sin ratón.
- Amplía el texto.
- Prueba un lector de pantalla.
- Usa Lighthouse o axe como apoyo.
- Revisa errores, estados vacíos y mensajes dinámicos.
- Pide revisión a personas con distintas necesidades.
Fuentes oficiales
Si quieres conocer otros artículos parecidos a Accesibilidad web desde cero: checklist WCAG para HTML y formularios puedes visitar la categoría Blog.
Deja una respuesta
También puede gustarte: