F85Diálogos y menús que se abren lejos del foco del teclado

Por qué es importante

El foco es el punto de la página que recibe lo que se pulsa en el teclado. Quien navega con teclado lo mueve elemento a elemento, en el orden del código. Si el diálogo está al final del código y el foco se queda en el botón, tiene que pasar por todos los enlaces que hay en medio.

Con un lector de pantalla, puede que ni se entere de que se ha abierto algo. Y si al cerrar el foco vuelve al inicio, pierde el sitio y tiene que buscar otra vez dónde estaba. En un formulario largo o en una tienda en línea, esto agota a cualquiera.

Cómo evitarlo

1. Al abrir un diálogo, mueva el foco a su primer elemento útil, o al propio diálogo, con focus().
2. Use el elemento dialog abierto con showModal(). El navegador lleva el foco dentro sin código extra.
3. En los menús desplegables, coloque el menú en el código justo después de su botón. Así la siguiente pulsación de Tab entra en él.
4. Al cerrar con «Cancelar», con la X o con Esc, devuelva el foco al botón que lo abrió.
5. Si ese botón ya no existe, por ejemplo tras borrar un elemento, lleve el foco a un sitio lógico: el elemento siguiente o el anterior.

Cómo comprobarlo

1. Abra cada diálogo y cada menú con el teclado (Intro o Espacio).
2. Compruebe que el foco está dentro, o que entra con una sola pulsación de Tab.
3. Ciérrelo con su botón o con Esc. Pruebe también una acción que lo cierre, como «Eliminar».
4. Compruebe que el foco vuelve al botón que lo abrió, o a un elemento lógico cercano si ese botón ha desaparecido.
5. Si el foco se pierde o vuelve al principio de la página, hay fallo.

Ejemplo

Diálogo de filtros que recibe el foco al abrirse y lo devuelve a su botón al cerrarse.

const boton = document.querySelector('#abrir-filtros');
const dialogo = document.querySelector('#filtros');

boton.addEventListener('click', () => {
  dialogo.showModal();  // el foco entra en el diálogo
});

dialogo.addEventListener('close', () => {
  boton.focus();        // al cerrar, vuelve al botón
});