La función "Punto de partida de la navegación de enfoque secuencial" define dónde comenzamos a buscar elementos enfocables para la navegación de enfoque secuencial ([Tab] o [Mayúsculas + Tab]) cuando no hay un área enfocada. Es especialmente útil para las funciones de accesibilidad, como “Omitir vínculos” y administrar el enfoque en el documento.
HTML nos brinda mucha compatibilidad integrada para lidiar con las interacciones del teclado, lo que significa que es bastante fácil escribir páginas que se pueden usar con el teclado, ya sea que una discapacidad motora nos impida usar un mouse o que simplemente seamos tan eficientes que quitar las manos del teclado desperdicie milisegundos preciados.
El manejo del teclado gira en torno al enfoque, que determina dónde se ubicarán los eventos del teclado en la página. Hasta ahora, en algunas situaciones, tuvimos que hacer un trabajo adicional para que todo funcionara bien para los usuarios del teclado. El método focus() nos permite administrar el enfoque eligiendo de forma selectiva un elemento para enfocar en respuesta a una acción del usuario. Sin embargo, esta práctica recomendada tiene muchos problemas y requiere algunos trucos de hackeo de JavaScript para proporcionar una experiencia de referencia.
Si bien esta técnica no desaparecerá por completo en un futuro cercano, en Chrome 50 será necesaria en menos casos gracias al punto de inicio de la navegación de enfoque secuencial. Con este cambio, las páginas bien redactadas serán automáticamente más accesibles sin necesidad de administrar el enfoque manual adicional. Veamos un ejemplo.
Vínculo dentro de una página
Los sitios con mucho texto suelen tener vínculos dentro de la misma página para ayudar a los usuarios a saltar rápidamente a secciones importantes.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Si fuera un usuario de teclado (y un amante de la comida australiana), mi siguiente serie de acciones sería algo así:
- Presiona
Tabdos veces para enfocar el vínculo de Recetas. - Presiona
Enterpara ir a la sección Recetas - Presiona
Tabnuevamente para enfocar el vínculo Leer más.
Veamos cómo funciona en Chrome 49.
Oh. Bueno, eso no salió como estaba previsto, ¿verdad?
En lugar de enfocar el vínculo Leer más, presionar Tab por última vez movió el enfoque al siguiente elemento del índice. Esto se debe a que el desarrollador no estableció tabindex="-1" en el encabezado para que se pueda enfocar. Por lo tanto, hacer clic en el ancla con nombre #recipes no movió el enfoque. Es un error sutil y no es un gran problema si usas el mouse. Sin embargo, puede ser un problema muy grave si usas un teclado o un dispositivo con interruptores. ¿Consideras la cantidad de vínculos en una página típica de Wikipedia? Sería frustrante tener que alternar constantemente entre todos esos anclajes.
Veamos la misma experiencia ahora con Chrome 50.
Guau, eso es exactamente lo que queríamos. Y lo mejor es que no tuvimos que cambiar nuestro código. El navegador acaba de determinar dónde debe enfocarse en función de dónde estábamos en el documento.
¿Cómo funciona?
Antes de la implementación del punto de partida del enfoque, el enfoque siempre se movía desde el elemento enfocado anterior o desde la parte superior de la página. Esto significa que elegir qué elemento se enfocará a continuación puede implicar mover el enfoque a algo que realmente no debería ser enfocable, como un elemento de contenedor o un encabezado. Esto causa todo tipo de rarezas, como mostrar un anillo de enfoque si haces clic en un elemento de forma inactiva.
Como su nombre lo indica, el punto de inicio de enfoque proporciona un mecanismo para sugerir dónde comenzar a buscar el siguiente elemento enfocable cuando presionamos Tab o Shift-Tab.
Se puede configurar de varias maneras:
Si algo tiene enfoque, también es el punto de partida de la navegación de enfoque, al igual que antes.
Además, al igual que antes, si no se estableció ningún otro punto de partida para la navegación de enfoque, será el document actual o, si está disponible y es compatible, el dialog activo en ese momento.
Si navegamos a un fragmento de página como en el ejemplo anterior, se establecerá el punto de inicio del enfoque.
Además, si hacemos clic en cualquier elemento de la página, independientemente de si se puede enfocar, se establecerá el punto de inicio de la navegación de enfoque.
Por último, si se quita del DOM el elemento que era el punto de inicio del enfoque, su elemento superior se convierte en el punto de inicio del enfoque. Ya no tendrás que enfocarte en un solo elemento.
Otros casos prácticos
Además del ejemplo anterior, existen muchas otras situaciones en las que esta función puede resultar útil.
Cómo ocultar elementos
A veces, un usuario se centrará en un elemento que debe establecerse en visibility: hidden o display: none. Un ejemplo de esto son los elementos en los que se puede hacer clic dentro de un carrusel. En versiones anteriores de Chrome, ocultar el elemento enfocado de esta manera restablecía el enfoque en el punto de partida predeterminado, lo que convertía el carrusel mencionado anteriormente en una trampa desagradable para los usuarios con discapacidades motoras. Con el punto de partida de enfoque secuencial, ya no es así. Si se oculta un elemento con cualquiera de los métodos anteriores, presionar la tecla Tab simplemente te llevará al siguiente elemento que se pueda enfocar.
Omitir vínculos
Los vínculos de navegación son anclas invisibles a los que solo se puede acceder con el teclado. Permiten que los usuarios “omitan” los elementos de navegación para ir directamente al contenido de una página y pueden ser muy beneficiosos para los usuarios de teclados y dispositivos con interruptores. Como se explica en el sitio de WebAIM
Muchos sitios web populares implementan vínculos para omitir contenido, aunque es posible que nunca los hayas notado.
Debido a que los vínculos para omitir son anclas con nombre, funcionan de la misma manera que nuestro ejemplo de índice original.
Advertencias y asistencia
Por el momento, el punto de partida de la navegación de enfoque secuencial solo es compatible con Chrome 50, Firefox y Opera. Hasta que sea compatible con todos los navegadores, deberás agregar tabindex="-1" (y quitar el contorno de enfoque) a tus destinos de anclaje con nombre.
Demostración
El punto de partida de la navegación de enfoque secuencial es una gran incorporación al conjunto de primitivas de accesibilidad del navegador. Es fácil de entender y, de hecho, nos permite quitar código de nuestra aplicación y, al mismo tiempo, mejorar la experiencia de nuestros usuarios. ¡Dos veces ganador! Mira la demostración para explorar esta función con más detalle.