Índice
- 1 – Introducción
- 2 – Elementos enfocables
- 3 – Cuándo añadir un elemento a la secuencia del tabulador
- 4 – Visibilidad del foco
- 5 – Conclusiones
1 – Introducción
El foco del sistema permite que los usuarios puedan utilizar nuestras apps y sitios web con el teclado. Sin embargo, muchas veces este está oculto, no se aprecia demasiado bien o no se recibe en los elementos que debería. Incluso es escondido a propósito por motivos estéticos.
En esta píldora vamos a ver cómo manejar el foco y qué alternativas tenemos para representarlo en pantalla.
2 – Elementos enfocables
Por defecto, los elementos enfocables son aquellos que pueden ser activados. Aquí se incluyen enlaces, botones y controles de formulario. Siempre que podamos, deberíamos utilizar estos elementos.
Esto ya nos da una pista de qué elementos deberían recibir el foco y cuáles no. La interactividad es un criterio bastante aproximado. Es cierto que, por diferentes motivos, otro tipo de elementos también podrían requerir ser enfocados. Pero se trata de excepciones.
Recuerda que un elemento no recibirá eventos de teclado si no está enfocado. Cuando hayamos añadido interactividad a un elemento que no la debería tener por defecto, un span, por ejemplo, podemos utilizar el atributo tabindex para definir su comportamiento frente al foco:
- tabindex=»0″ clasifica el elemento como enfocable y lo incluye en la secuencia del tabulador.
- tabindex=»-1″ clasifica el elemento como enfocable, pero no lo añade a la secuencia del tabulador.
Así que, la siguiente pregunta es obvia…
3 – Cuándo añadir un elemento a la secuencia del tabulador
Por defecto, deberíamos hacer esto siempre que queramos que un elemento sea interactivo. Sin embargo, hay algunas excepciones que debemos considerar.
Pensemos, por ejemplo, en un combobox. Decidimos no utilizar el elemento select y realizar una implementación personalizada utilizando el patrón de WAI-ARIA para este tipo de componente. El elemento principal de este componente, generalmente un input, deberá estar en la secuencia del tabulador. Sin embargo, cada opción que despliega el combobox no debería estar en ella, pero sí que debería ser enfocable. Así el usuario podrá saltar al siguiente control de formulario o elemento interactivo sin tener que pasar por todas las opciones.
Como regla general, podemos asumir que cuando un componente es compuesto, es decir, sus partes son enfocables, sólo una de ellas deberá estar en la secuencia del tabulador.
Esto también implica que, si optamos por este tipo de implementaciones, debemos proporcionar también el manejo del foco necesario mediante las teclas de flechas y otras. Esta interacción también está descrita en los patrones de WAI-ARIA para ofrecer una experiencia homogénea entre sitios web.
4 – Visibilidad del foco
Todo lo anterior no sirve de nada si el foco no es visible. El usuario debe saber con qué elemento interactúa. Si no, es como jugar a la ruleta rusa con un montón de balas en la recámara. Esto no sólo implica que el foco sea visible, sino que cumpla con otros criterios de accesibilidad, como el contraste o el uso del color.
Se tiene asumido que el foco es un recuadro punteado que engloba el elemento. Esta idea supongo que se ha asentado debido a que es la forma en que los navegadores lo muestran por defecto. No obstante, no tiene por qué ser así. Podemos darle la apariencia que queramos. Incluso podemos adaptar el foco a cada tipo de elemento de nuestra interfaz. Con esto se consigue un resultado muy elegante y una experiencia propia. Lo importante es que el usuario sepa qué elemento está enfocado.
Pero, si no nos queremos complicar tanto la vida y no queremos que ese recuadro punteado esté omnipresente en nuestra página por motivos estéticos, podemos hacer una visualización condicional del foco. Cuando detectemos que el usuario está usando el ratón para navegar por nuestro sitio web, podemos añadir una clase CSS al body que oculte el foco. Para el resto de casos, estará visible.
5 – Conclusiones
La visibilidad y el manejo correcto del foco son dos elementos fundamentales para la accesibilidad de nuestros sitios web y aplicaciones. Su uso no tiene por qué implicar un aspecto más feo, siempre que sepamos trabajarlo de la forma adecuada.
