如何使隐藏链接对屏幕阅读器可见而不是标签导航

Question

我正在尝试找到一种访问 hide/show 内容的方式，这样当内容被隐藏时，屏幕阅读器仍然可以 "see" 它但键盘用户不会被迫通过 Tab 键浏览隐形链接。

考虑如下内容：

<button onclick="(function(e){ document.getElementById('nav').classList.toggle('active') })()" class="menu-toggle">Toggle Menu</button>
<nav id="nav" class="nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>

如果您想看到它与我创建的 CSS 一起使用 this codepen。

我要解决的问题是，当菜单被隐藏时，键盘用户仍然会在隐藏的链接中切换。我想以一种不会使链接对屏幕阅读器不可见的方式来防止这种行为（例如：display: none;）。

我也不想在第二个 "screen reader only" 副本中复制菜单标记。欢迎任何其他想法。

Answer 1

I'm trying to figure out a accessible way to hide/show content such that when the content is hidden, screen readers can still "see" it but keyboard users aren't forced to tab through invisible links.

屏幕阅读器用户（主要）是键盘用户，因此无法为他们移除键盘使用。

另一方面，一些视力不佳的屏幕阅读器用户可能仍会使用鼠标。通过宣布 link 在屏幕上不可见，这将导致人们无法查看和点击宣布的 link.

的可访问性问题

Answer 2

Here is a rough codepen showing how you can do this

通过在您的 link 中设置和删除 tabindex，除非调用该函数，否则键盘用户将绕过它们。当函数被调用时，我们关注第一个 link 以便用户被带到他们应该在的地方。

function clickButton(){  
  var nav = document.getElementById('nav');

  if(nav.classList.contains("active")) {
    nav.classList.remove("active");
  } else {
    nav.classList.add("active");
    if (nav.hasChildNodes()) { 
      var children = nav.getElementsByTagName("a");
      for (var i = 0; i < children.length; i++) {
        children[i].setAttribute("tabindex", "0");
        children[0].focus();
      }
    }
  }
}

我也不认为使用 Javascript 在触发器上设置 display:none 和 display:block 是处理此问题的糟糕方法。如果用 JS 使页面上的内容可见，屏幕 reader 就会知道（See this SO post). If we focus on the first item in the nav after it appears, there shouldn't be any confusion or loss of content. Tabindex is a fine way to handle this though (See the other link in the comments for more info)，我只是不认为这里的 display:none 有你想象的那么糟糕。

您可能担心非 JS 用户。首先，it's reported that over 98% of screen readers render JS，因此可以肯定地说 JS 方法将涵盖几乎所有用户群。但是我理解并值得关注它，在那种情况下，您可以使用几种不同的方法来检查没有 javascript 并为该特定组应用覆盖样式。

Here's more on the topic from W3 with some examples.

如何使隐藏链接对屏幕阅读器可见而不是标签导航

How to make hidden links visible to screen readers but NOT tab navigation

html

css

accessibility

wai-aria