This is a basic navigation set up, using JavaScript to add the "current" class to a navigation link based on the current page's url.
To aid screen reader users, the script also adds aria-current="page" on the current link item.
In a further attempt at improving accessibility, I added tabindex="-1" to the current link item (see last line of script) . If users tab through the menu they will skip over the current link.
Is using tabindex in this way useful to screen readers, or more generally, an accessibility enhancement?
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>
I do not often answer with opinion but unfortunately there is no guidance as to how to do this as part of WCAG etc.
So instead I will just answer whether this enhances accessibility or not.
Is using tabindex in this way useful to screen readers, or more generally, an accessibility enhancement?
There aren't many circumstances where this would improve accessibility. You already added aria-current to indicate this is the current page so you have done the best thing there.
Removing the page link from the focus order could be confusing for people who use assistive tech who have developed muscle memory on your site, however.
Let's say I want to get to the "about" page. If I visit regularly then I know that is 4 tab stops from the start of the navigation section. But if I am on the "projects" page and hit tab 4 times I would end up at the "contact" page as you have removed the projects page from the tab order.
Or what if a screen reader user did decide to use the Tab key to navigate (uncommon but not unheard of) then they would never hear your current page announcement in the navigation, despite adding the correct WAI-ARIA attribute to identify it.
They are only minor considerations though, nothing that makes the site inaccessible as such.
So I suppose the only other question is does it have any accessibility benefits?
As far as I can see it doesn't.
It could save a tab stop on a page I suppose so might be a slightly quicker experience for repeat visitors...but that is really stretching!
I think the answer would be not to do this. The odds of you making a mistake in your JavaScript and accidentally making links unfocusable is high, if your JS is delayed or breaks then the tab order would be inconsistent etc.
As it doesn't really add anything but could potentially reduce accessibility for some people (albeit edge cases) I would say to not do it.