G59Ordenar los enlaces, botones y campos según la lógica del contenido

Por qué es importante

Quien navega con teclado o con lector de pantalla pasa de un control a otro con la tecla Tab. Si el foco salta sin lógica, la persona se desorienta y puede rellenar mal un formulario.

Por ejemplo, en una compra con dirección de envío y de facturación en dos columnas, el foco no debe ir alternando entre ellas. Debe completar primero una dirección y luego la otra.

Cómo se hace

1. Escriba los controles en el HTML en el orden en que se deben usar. El navegador sigue ese orden con Tab.
2. Haga que el orden visual coincida con el del código. Si coloca algo en otro sitio con CSS, compruebe que el recorrido sigue teniendo sentido.
3. Agrupe los controles relacionados. Termine un bloque del formulario antes de pasar al siguiente.
4. No use tabindex con valores positivos (1, 2, 3…) para arreglar el orden. Es difícil de mantener y crea saltos extraños. Corrija el orden del código.
5. Si un botón abre un panel, coloque el panel justo después del botón en el código o lleve el foco a él.

Cómo comprobarlo

1. Pulse Tab desde el principio de la página y siga dónde aparece el foco.
2. Compruebe que el recorrido sigue el orden lógico, bloque a bloque.
3. En los formularios, cada campo debe llevar al siguiente que hay que rellenar.
4. Busque en el código atributos tabindex mayores que 0 y revise si alteran el orden. La opción «Tab stops» de Accessibility Insights dibuja el recorrido.

Ejemplo

Formulario de compra: el código completa la dirección de envío antes de la de facturación, aunque en pantalla vayan en dos columnas.

<form class="dos-columnas">
  <fieldset>
    <legend>Dirección de envío</legend>
    <label for="envio-calle">Calle</label> <input id="envio-calle">
    <label for="envio-cp">Código postal</label> <input id="envio-cp">
  </fieldset>
  <fieldset>
    <legend>Dirección de facturación</legend>
    <label for="fact-calle">Calle</label> <input id="fact-calle">
    <label for="fact-cp">Código postal</label> <input id="fact-cp">
  </fieldset>
</form>