Mientras trabajaba para hacer que un sitio web fuera más accesible, me encontré con un problema relacionado con el botón "Volver al principio" que está disponible en la mayoría de los sitios. Tuve que encontrar una solución para desplazarme hasta la parte superior y luego establecer el enfoque del teclado en la parte superior de la página para que los usuarios pudieran comenzar a tabular y navegar nuevamente desde la parte superior.
Primero agregué un enlace directamente después del cuerpo (y antes de mi enlace accesible para "saltar al contenido") que está oculto usando el siguiente código:
<body> <a id="hidden-top-of-the-page-link" tabindex="-1"></a> <a class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>Luego, en mi función de botón 'arriba', hice que este enlace oculto se enfocara después de llamar a mi evento de desplazamiento.
$("#to_top").on("click", function () { $("html, body").animate({scrollTop: $("html").offset().top}, 500); $("#hidden-top-of-the-page-link").focus(); });Esta solución parece funcionar muy bien, aunque se siente bastante incómoda. Lo que realmente me gustaría hacer sería 'restablecer' la posición del teclado en la página y me preguntaba si alguien conocía una buena manera/mejor práctica para hacerlo.
Gracias de antemano a todos.
Nota: Miré primero la pregunta sobre cómo establecer el enfoque en la parte superior de la página, pero todas las respuestas se centraron en el desplazamiento, que no es con lo que necesito ayuda aquí.
No conozco una forma de hacer que la página se comporte como si estuviera recién cargada donde el foco del teclado está en la parte superior (aparte de forzar una actualización real de la página, lo cual no recomendaría).
Sin embargo, ya tiene un buen elemento en la parte superior para mover el foco: su enlace "saltar al contenido" ( WCAG 2.4.1 ). El elemento "volver al principio" podría ser un enlace simple con href="#skipID" donde "skipID" es el ID en el enlace "saltar al contenido".
<body> <a id="skipID" class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a> ... <a href="#skipID">Go to top</a> Eso permitirá que el navegador maneje el desplazamiento y mueva el foco del teclado. No tiene que escribir ningún javascript y elimina su enlace "vacío" cuyo único propósito es un lugar para poner el foco del teclado. Si mantuvo su enlace "vacío", entonces un usuario del lector de pantalla aún podría navegar hasta el enlace (no a través de TAB ya que tiene tabindex="-1" sino usando la tecla del lector de pantalla "siguiente elemento DOM" que generalmente es la tecla de flecha hacia abajo ) y escucharían "enlace" pero ningún otro texto asociado con él. Esa sería una situación confusa.
Aparte, como usuario de teclado, nunca uso los enlaces "ir al principio" proporcionados en una página principalmente porque tengo que navegar a ese elemento que suele ser lo último en el DOM. Si estoy tan abajo en el DOM, puedo presionar TAB unas cuantas veces más y estoy de vuelta en la parte superior de todos modos. O uso la tecla de método abreviado "poner el foco en la barra de direcciones" ( alt + D para Firefox y Chrome) y empiezo a TABULAR desde allí.