馃幆 Moviendo el foco

Tenemos un bot贸n que abre cierra un men煤 lateral, y lo l贸gico ser铆a que al tabular en el bot贸n el foco sale al men煤 que se ha abierto. Sin embargo, ambos elementos est谩n en lugares separados del DOM, as铆 que el orden de los elementos no sigue ese patr贸n.

Primera soluci贸n (fallida)

Jugando con valores de tabindex > 0 puestos de forma din谩mica, hacer que el foco salte correctamente entre estos elementos como se espera.

Si fueran los dos 煤nicos elementos de la p谩gina podr铆a ser una buena soluci贸n, pero como no es el caso, calcular qu茅 铆ndices son los correctos solo dar铆a lugar a problemas.

Segunda soluci贸n (fallida)

Mover el foco manualmente cuando se hace blur en el bot贸n.

Al intentar implementar esta soluci贸n me he encontrado dos problemas: el primero es que el men煤 que se abre no es focuseable, entonces tendr铆a que a帽adirle un tabindex="-1" (bien v铆a JS o en el HTML) para despu茅s hacer foco en el elemento. Si implementara esta soluci贸n, estar铆a bien lanzar un mensaje aria-live="assertive" informando de que vamos a mover el foco.

El segundo problema es que esta navegaci贸n se hace de forma autom谩tica al sacar el foco el bot贸n, lo cual puede ser molesto si lo que se quiere hacer es moverse por los distintos botones en lugar de saltar al men煤 abierto.

Tercera soluci贸n

Poner un enlace a continuaci贸n del bot贸n, que solo sea visible al hacer foco con el teclado, y que permita mover el foco (opcionalmente) al men煤.

Como suele ocurrir con temas de accesibilidad, resulta que apoyarse m谩s en el marcado HTML que en comportamientos personalizados por JavaScript es la soluci贸n m谩s sencilla y m谩s resultona.

Resulta que podemos plantar un enlace justo despu茅s del bot贸n que abre/cierra el men煤, y hacer que este enlace:

  1. Solo exista si el men煤 est谩 abierto (con JavaScript).
  2. Apunte al men煤 (href="#menu").
  3. Solo sea visible al hacer foco.

Resulta que cuando un elemento tiene un atributo id, se puede hacer foco sobre el mismo de esta forma, sin necesidad de utilizar tabindex.

De esta manera el usuario se encontrar谩 un enlace con el cual puede navegar c贸modamente al men煤 que acaba de abrirse, pero adem谩s puede ignorarlo y seguir con la navegaci贸n principal si as铆 lo desea. La implementaci贸n es mucho m谩s sencilla y la funcionalidad es la misma (o incluso mejor) que en el caso

anterior.

Cosas pendientes

  1. En este caso concreto, el men煤 que se abre es uno de los sistemas de navegaci贸n principales del sitio, as铆 que tendr铆a sentido crear una men煤 de navegaci贸n accesible que incluya varios enlaces. V茅ase este ejemplo de Marcos o la tabla de contenidos de la web de ayuda de apple.
  2. Una vez que se ha navegado al men煤, es dif铆cil mover el foco de nuevo al bot贸n que lo abre/cierra, quiz谩s tendr铆a sentido a帽adir un enlace de vuelta o dar alg煤n otro mecanismo para salir de esta zona.