Question

我正在尝试找出一种隐藏/显示内容的可访问方式，以便在隐藏内容时，屏幕阅读器仍然可以“看到”它，但键盘用户不会被迫通过隐形链接进行制表。

考虑以下内容：

<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;）。

我也不想在第二个“仅屏幕阅读器”副本中复制菜单标记。欢迎任何其他想法。

Answer 1

我试图找出隐藏/显示内容的方便方式，以便在隐藏内容时，屏幕阅读器仍然可以看到＆＃34;它但键盘用户不必通过隐形链接进行制表。

屏幕阅读器用户（主要是）键盘用户，因此不能选择删除键盘使用情况。

另一方面，一些低视力的屏幕阅读器用户仍然可以使用他们的鼠标。通过宣布屏幕上不可见的链接，这将导致无法查看和点击已公布链接的人员的可访问性问题。

Answer 2

Here is a rough codepen showing how you can do this

通过设置和删除链接中的tabindex，键盘用户将绕过它们，除非调用该函数。当调用该函数时，我们专注于第一个链接，以便用户被带到他们应该到达的位置。

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在页面上显示内容，屏幕阅读器将知道（See this SO post）。如果我们在导航出现后关注导航中的第一个项目，则不应该有任何混淆或丢失内容。 Tabindex是处理这个问题的好方法(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.

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

2 个答案: