Orden lógico
El orden del DOM determina normalmente el recorrido. Evita usar tabindex positivo para corregir una distribución confusa.
APRENDER ES PONER A PRUEBA
Una web para más personas.
Empieza con controles nativos, estructura clara y mensajes comprensibles. La accesibilidad se verifica con varias pruebas; un solo ejemplo no demuestra conformidad.
Recorre la interfaz sin ratón.
Pulsa Tab para avanzar, Shift + Tab para volver y Enter o Espacio para activar botones.
Un recorrido de tres pasos
Ir al formularioTodavía no has activado el ejemplo.
Foco visible
Quien usa teclado necesita saber dónde está. No retires outline sin una alternativa clara.
Nombre y función
button comunica una acción. a con href comunica un destino. Un div con click no aporta esas funciones automáticamente.
button:focus-visible, a:focus-visible {
outline: 3px solid #233de0;
outline-offset: 4px;
}Esta demostración no sustituye pruebas con lectores de pantalla. La compatibilidad depende del navegador y la tecnología de asistencia.
Una etiqueta y un error que ayudan.
Prueba el formulario vacío o con un correo incorrecto. Es un ejercicio local: no envía datos.
- label
- Nombra el control y permite activarlo desde el texto.
- aria-describedby
- Asocia instrucciones y errores al campo.
- aria-invalid
- Indica un valor no válido tras la comprobación.
- role=status
- Anuncia un resultado sin mover el foco innecesariamente.
El alt depende de la función.
Una misma imagen puede necesitar una descripción, un nombre funcional o alt vacío.
Informativa
<img src="mapa.png" alt="Ruta desde la estación al museo">Describe la información útil en el contexto, sin repetir un pie idéntico.
Decorativa
<img src="adorno.png" alt="">Si no aporta información ni función, alt vacío evita ruido.
Funcional
<a href="index.html"><img src="logo.png" alt="WebLab, inicio"></a>El texto alternativo debe comunicar el destino o la acción.
Un gráfico complejo necesita también explicación textual de sus datos y relaciones. No basta “gráfico”.
Una lista de revisión inicial.
Es un punto de partida, no una auditoría completa de WCAG.