La función de "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 proporciona mucha compatibilidad integrada para tratar con las interacciones con el teclado, lo que significa que es bastante fácil escribir páginas que se pueden utilizar a través del teclado; ya sea que una discapacidad motriz nos impida usar un mouse o simplemente somos tan eficientes que eliminamos las manos del teclado nos hace perder preciados milisegundos.
El control del teclado gira en torno al enfoque, que determina a dónde irán los eventos del teclado en la página. Hay algunas situaciones en las que, hasta ahora, tuvimos que realizar un trabajo adicional para que las cosas funcionen bien para los usuarios de teclados. El método focus() nos permite administrar el enfoque mediante la elección selectiva de un elemento para enfocarlo en respuesta a una acción del usuario. Sin embargo, esta práctica recomendada presenta muchos errores y requiere un hackeo de JavaScript complicado para proporcionar una experiencia de referencia.
Si bien esta técnica no desaparecerá por completo en poco tiempo, en Chrome 50 será necesaria en menos casos gracias al punto de partida de la navegación con enfoque secuencial. Con este cambio, las páginas que estén bien escritas serán más accesibles automáticamente, sin necesidad de tener que administrar el foco de forma manual adicional. Veamos un ejemplo.
Vínculo dentro de una página
Los sitios con mucho texto suelen interconectarse dentro de la misma página para ayudar a los usuarios a pasar 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 teclados (y un glotón de las comidas australianas), 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 - Vuelve a presionar
Tabpara enfocar el vínculo Leer más
Veamos esto en acción con Chrome 49.
Oh. Bueno, no salió como esperabas, ¿no?
En lugar de enfocar el vínculo Leer más, cuando presionas Tab para la última vez, el foco se mueve al siguiente elemento del índice. Esto se debe a que el desarrollador no estableció tabindex="-1" en el encabezado para que sea enfocable. Por lo tanto, hacer clic en el ancla #recipes con nombre no se movió el foco. Es un error sutil y no es un gran problema si usas el mouse. Sin embargo, es posible que sea muy importante si usas el teclado o cambias de dispositivo. ¿Consideras la cantidad de intervínculos en una página típica de Wikipedia? Sería frustrante tener que ir y volver constantemente a la pestaña para avanzar y retroceder en todas esas anclas.
Veamos la misma experiencia ahora con Chrome 50.
Eso es exactamente lo que queríamos y, lo mejor de todo, no tuvimos que cambiar nuestro código. El navegador acaba de determinar dónde debe ir el foco según la parte del documento en la que estábamos.
¿Cómo funciona?
Antes de implementar el punto de partida del enfoque, el enfoque siempre se movería desde el elemento enfocado anterior o desde la parte superior de la página. Esto significa que elegir lo que se enfoca a continuación puede implicar mover el enfoque a algo que en realidad no debería ser enfocable, como un elemento contenedor o un encabezado. Esto causa todo tipo de extraños, incluso mostrar un anillo de enfoque si haces clic de forma inactiva en ese elemento.
El punto de partida del enfoque, como su nombre lo indica, 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 foco, también es el punto de partida de la navegación del enfoque, al igual que antes.
Además, al igual que antes, si nada más configuró el punto de partida de la navegación del enfoque, será la document actual o, si está disponible y es compatible, la dialog que está activa en ese momento.
Si navegamos a un fragmento de página como en el ejemplo anterior, ahora se establecerá el punto de inicio del enfoque.
Además, si hacemos clic en cualquier elemento de la página, independientemente de si es enfocable, eso ahora establecerá el punto de partida de la navegación del enfoque.
Por último, si el elemento que era el punto de partida del foco se quita del DOM, su elemento superior se convierte en el punto de partida del foco. Ya no tienes que concentrarte.
Otros casos de uso
Aparte del ejemplo anterior, hay muchas otras situaciones en las que esta función puede ser útil.
Cómo ocultar elementos
En algunas ocasiones, es posible que un usuario se enfoque en un elemento que se deba configurar como visibility: hidden o display: none. Un ejemplo de esto son los elementos de un carrusel en los que se puede hacer clic. En versiones anteriores de Chrome, ocultar el elemento enfocado actualmente de esta manera restablecería el enfoque al punto de partida predeterminado, convirtiendo el carrusel antes mencionado en una desagradable trampa para los usuarios con discapacidad motora. Con el punto de partida del enfoque secuencial, esto ya no es así. Si un elemento está oculto con cualquiera de los métodos anteriores, cuando presiones la tecla Tab, simplemente pasarás al siguiente elemento enfocable.
Omitir vínculos
Los vínculos de navegación son elementos de anclaje invisibles a los que solo se puede acceder con el teclado. Permiten a los usuarios "omitir" elementos de navegación para ir directamente al contenido de una página, y pueden ser muy beneficiosas para los usuarios de teclado y dispositivo. Como se explicó en el sitio de WebAIM.
Muchos sitios web populares implementan vínculos de navegación, aunque es posible que nunca los hayas notado.
Debido a que los vínculos de navegación se denominan anclas, funcionan de la misma manera que nuestro ejemplo del índice original.
Advertencias y asistencia
Actualmente, el punto de partida de la navegación con enfoque secuencial solo se admite en Chrome 50, Firefox y Opera. Hasta que sea compatible con todos los navegadores, deberás agregar tabindex="-1" (y quitar el contorno del enfoque) a las segmentaciones de anclaje con nombre.
Demostración
El punto de partida de la navegación con enfoque secuencial es una gran adición al conjunto de primitivas de accesibilidad del navegador. Es fácil aburrirse y, en realidad, nos permite quitar el código de nuestra aplicación y, al mismo tiempo, mejorar la experiencia de nuestros usuarios. ¡Doble victoria! Consulta la demostración para explorar esta función en más detalle.