Esta es una configuración de navegación básica que usa JavaScript para agregar la clase "current" a un enlace de navegación basado en la URL de la página actual.
Para ayudar a los usuarios de lectores de pantalla, el script también agrega aria-current="page" en el elemento de enlace actual.
En otro intento por mejorar la accesibilidad, agregué tabindex="-1" al elemento del enlace actual (consulte la última línea del script). Si los usuarios pasan por el menú, se saltarán el enlace actual.
¿El uso de tabindex de esta manera es útil para los lectores de pantalla o, de manera más general, una mejora de accesibilidad?
window.addEventListener("DOMContentLoaded", () => { let url_pathname = window.location.pathname const link = document.querySelectorAll(".link") link.forEach(linkCurrentItem => { /* A bit repetitious, but I wanted home page link to be just '/' in the html. If you have '/index.html' in the html then you can comment out the first if statement and edit the second like so: if (url_pathname === linkCurrentItem.getAttribute("href")) { ... } */ if (url_pathname === linkCurrentItem.getAttribute("href", "/")) { linkCurrentItem.classList.add("current") } if ( url_pathname === linkCurrentItem.getAttribute("href") && url_pathname !== linkCurrentItem.getAttribute("href", "/") ) { linkCurrentItem.classList.add("current") } /* For screen readers */ if (url_pathname === linkCurrentItem.getAttribute("href")) { linkCurrentItem.setAttribute("aria-current", "page") // IS ADDING tabindex="-1" A GOOD IDEA? linkCurrentItem.setAttribute("tabindex", "-1") } }) }) .link, .link:visited { color: blue; text-decoration: none; font-weight: 400; font-size: 100%; } .current, .current:visited { color: black; font-weight: 900; font-size: 125%; cursor: default; } <nav aria-label="main menu"> <ul> <li><a class="link" href="/">Home</a></li> <li><a class="link" href="/projects.html">Projects</a></li> <li><a class="link" href="/blog.html">Blog</a></li> <li><a class="link" href="/about.html">About</a></li> <li><a class="link" href="/contact.html">Contact</a></li> </ul> </nav>No suelo responder con una opinión, pero desafortunadamente no hay una guía sobre cómo hacer esto como parte de las WCAG, etc.
Entonces, en cambio, solo responderé si esto mejora la accesibilidad o no.
¿El uso de tabindex de esta manera es útil para los lectores de pantalla o, de manera más general, una mejora de accesibilidad?
No hay muchas circunstancias en las que esto mejoraría la accesibilidad. Ya agregó aria-current para indicar que esta es la página actual, por lo que ha hecho lo mejor allí.
Sin embargo, eliminar el enlace de la página del orden de enfoque podría ser confuso para las personas que usan tecnología de asistencia y han desarrollado memoria muscular en su sitio.
Digamos que quiero llegar a la página "acerca de". Si visito regularmente, sé que hay 4 tabulaciones desde el inicio de la sección de navegación. Pero si estoy en la página de "proyectos" y presiono la pestaña 4 veces, terminaría en la página de "contacto" ya que ha eliminado la página de proyectos del orden de tabulación.
O qué pasaría si un usuario de un lector de pantalla decidiera usar la tecla Tabulador para navegar (poco común pero no inaudito), entonces nunca escucharía el anuncio de su página actual en la navegación, a pesar de agregar el atributo WAI-ARIA correcto para identificarlo.
Sin embargo, son solo consideraciones menores, nada que haga que el sitio sea inaccesible como tal.
Así que supongo que la única otra pregunta es si tiene algún beneficio de accesibilidad.
Por lo que puedo ver, no.
Supongo que podría guardar una tabulación en una página, por lo que podría ser una experiencia un poco más rápida para los visitantes habituales... ¡pero eso es realmente exagerado!
Creo que la respuesta sería no hacer esto. Las probabilidades de que cometa un error en su JavaScript y accidentalmente haga que los enlaces no se puedan enfocar son altas, si su JS se retrasa o se rompe, entonces el orden de tabulación sería inconsistente, etc.
Como realmente no agrega nada, pero podría reducir la accesibilidad para algunas personas (aunque en casos extremos), diría que no lo haga.