将 tabindex="-1" 添加到当前菜单项是一种良好的可访问性做法吗？

Question

这是一个基本的导航设置，使用 JavaScript 添加 "current" class 到基于当前页面 url 的导航 link .

为了帮助筛选 reader 用户，脚本还在当前 link 项上添加了 aria-current="page"。

为了进一步提高可访问性，我将 tabindex="-1" 添加到当前的 link 项目（参见脚本的最后一行）。如果用户通过选项卡浏览菜单，他们将跳过当前 link.

以这种方式使用 tabindex 对筛选 reader 有用吗，或者更一般地说，是一种可访问性增强？

JS

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")
    }
  })
})

CSS

.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;
}

HTML

<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>

Answer 1

我不经常带着意见回答，但不幸的是，没有关于如何作为 WCAG 等的一部分进行此操作的指导。

所以我只会回答这是否会增强可访问性。

Is using tabindex in this way useful to screen readers, or more generally, an accessibility enhancement?

在很多情况下这都不会提高可访问性。您已经添加了 aria-current 以表明这是当前页面，因此您已经在此处做了最好的事情。

负面影响

但是，从焦点顺序中删除页面 link 可能会让使用辅助技术的人感到困惑，他们在您的网站上已经形成了肌肉记忆。

假设我想进入“关于”页面。如果我经常访问，那么我知道从导航部分的开始是 4 个制表位。但是，如果我在“项目”页面上并按了 4 次 Tab 键，我最终会进入“联系人”页面，因为您已从 Tab 键顺序中删除了项目页面。

或者，如果屏幕 reader 用户确实决定使用 Tab 键进行导航（不常见但并非闻所未闻），那么他们将永远听不到您的当前页面导航中的公告，尽管添加了正确的 WAI-ARIA 属性来识别它。

虽然它们只是次要考虑因素，但不会导致网站无法访问。

增强辅助功能

所以我想唯一的另一个问题是它是否具有任何可访问性优势？

据我所知没有。

我想它可以在页面上保存一个制表位，所以对于重复访问者来说可能是一种稍微快一些的体验......但这真的很费力！

结论

我认为答案是不这样做。您在 JavaScript 中犯错并意外使 link 无法聚焦的可能性很高，如果您的 JS 延迟或中断，那么 Tab 键顺序将不一致等。

因为它并没有真正增加任何东西，但可能可能降低某些人的可访问性（尽管是边缘情况）我会说不要这样做。

将 tabindex="-1" 添加到当前菜单项是一种良好的可访问性做法吗？

Is adding tabindex="-1" to current menu item a good accessibility practice?

html

javascript

accessibility

tabindex

JS

CSS

HTML

负面影响

增强辅助功能

结论