Criterios de Operable
OperablePauta 2.4 Navegable
2.4.3Orden del foco
Nivel ALo exige la normativa (EN 301 549).
Qué pide
El foco del teclado recorre los elementos en un orden lógico.
A quién ayuda: Usuarios de teclado y de lector de pantalla.
Un caso real
Una ventana modal de inicio de sesión.
BienAl abrirse, el foco va al primer campo de la modal y se queda dentro hasta cerrarla.
MalEl foco sigue en la página de fondo, detrás de la modal.
Cómo aplicarlo en código
El orden del foco sigue el orden visual
Si el HTML está en el orden lógico, no hace falta tabindex. Evita los valores positivos: rompen el orden natural.
<form>
<label for="usuario">Usuario</label>
<input id="usuario" autocomplete="username">
<label for="clave">Contraseña</label>
<input id="clave" type="password" autocomplete="current-password">
<button>Entrar</button>
</form><input id="usuario" tabindex="2">
<input id="clave" type="password" tabindex="1">
<button tabindex="3">Entrar</button>Cómo comprobarlo
Recorre con Tab cada pantalla, sobre todo modales y menús desplegables.