F79Menús y listas a medida que no informan de dónde está el foco

Por qué es importante

El foco es el punto de la página que recibe lo que se pulsa en el teclado. Los lectores de pantalla (programas que leen en voz alta lo que hay en la pantalla) leen el elemento que tiene el foco. Los ampliadores de pantalla mueven la zona ampliada hasta él.

Con los botones y campos normales de HTML, el navegador hace este trabajo solo. En un componente hecho a medida, el resaltado puede ser solo un cambio de color. La persona ciega oye «menú», pero no la opción en la que está. Quien usa un ampliador ve otra parte de la página. Al final, puede elegir la opción equivocada.

Cómo evitarlo

1. Use elementos nativos siempre que pueda: button, select, a o input. Informan del foco sin trabajo extra.
2. En un componente a medida, mueva el foco de verdad a la opción activa con focus(). Para recibirlo, las opciones necesitan tabindex: 0 en la activa y -1 en las demás.
3. Otra opción: deje el foco en el contenedor y señale la opción activa con aria-activedescendant. Cambie su valor cada vez que cambie la opción.
4. Dé a cada parte su función con ARIA, por ejemplo role="listbox" y role="option". Así el lector puede anunciarla bien.
5. No se limite a cambiar una clase CSS para resaltar la opción. El cambio debe llegar también al navegador.

Cómo comprobarlo

1. Recorra el componente con el teclado: Tab y las flechas.
2. Active un lector de pantalla, como NVDA en Windows o VoiceOver en Mac. Compruebe que anuncia la opción nueva con cada movimiento.
3. En la consola de las herramientas del navegador (F12), escriba document.activeElement. Verá qué elemento tiene el foco. Si es el contenedor, debe señalar la opción con aria-activedescendant.
4. Si el lector solo anuncia el nombre del menú, o repite siempre la misma opción, hay fallo.

Ejemplo

Lista a medida que señala la opción activa con aria-activedescendant; un script cambia ese valor al pulsar las flechas.

<ul role="listbox" tabindex="0" aria-label="Provincia"
    aria-activedescendant="prov-2">
  <li role="option" id="prov-1">Alicante</li>
  <li role="option" id="prov-2" aria-selected="true">Murcia</li>
  <li role="option" id="prov-3">Valencia</li>
</ul>
<!-- Al pulsar las flechas, el script actualiza
     aria-activedescendant y aria-selected -->