Html 如何使隐藏链接对屏幕阅读器可见，而不是选项卡导航

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

考虑如下情况：

<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一起运行

我试图解决的问题是，当菜单被隐藏时，键盘用户仍然会通过隐藏的链接进行制表。我希望以一种不会使链接对屏幕阅读器不可见的方式防止这种行为（例如：

display:none；

）

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

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

Screenreader用户（主要）是键盘用户，因此不允许他们使用键盘

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

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

Screenreader用户（主要）是键盘用户，因此不允许他们使用键盘

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

通过设置和删除链接中的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();
      }
    }
  }
}

函数clickButton（）{
var nav=document.getElementById（'nav'）；
if（nav.classList.contains（“活动”））{
导航类列表删除（“活动”）；
}否则{
导航类列表添加（“活动”）；
if（nav.hasChildNodes（））{
var children=nav.getElementsByTagName（“a”）；
对于（变量i=0；i

---

我也不认为使用Javascript在触发器上设置

display:none

和

display:block

是一种不好的处理方法。如果内容通过JS在页面上可见，屏幕阅读器就会知道（）。如果我们关注nav中出现的第一个项目，则不应出现任何混乱或内容丢失。Tabindex是一个很好的方法来处理这个问题，我只是不认为这里的显示没有你想象的那么糟糕

您可能会担心非JS用户。首先，可以肯定地说JS方法将覆盖几乎所有的用户群。然而，我理解并值得关注的是，在这种情况下，您可以使用一些不同的方法来检查是否存在javascript，并为特定组应用重写样式

通过设置和删除链接中的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();
      }
    }
  }
}

函数clickButton（）{
var nav=document.getElementById（'nav'）；
if（nav.classList.contains（“活动”））{
导航类列表删除（“活动”）；
}否则{
导航类列表添加（“活动”）；
if（nav.hasChildNodes（））{
var children=nav.getElementsByTagName（“a”）；
对于（变量i=0；i

---

我也不认为使用Javascript在触发器上设置

display:none

和

display:block

是一种不好的处理方法。如果内容通过JS在页面上可见，屏幕阅读器就会知道（）。如果我们关注nav中出现的第一个项目，则不应出现任何混乱或内容丢失。Tabindex是一个很好的方法来处理这个问题，我只是不认为这里的显示没有你想象的那么糟糕

您可能会担心非JS用户。首先，可以肯定地说JS方法将覆盖几乎所有的用户群。然而，我理解并值得关注的是，在这种情况下，您可以使用一些不同的方法来检查是否存在javascript，并为特定组应用重写样式

---

这个问题的可能重复不是那个问题的重复。这个问题的可能重复不是那个问题的重复。对。你重申了我要解决的问题。但这实际上并不是一个答案。@Emerson你误读了我的答案，而我的答案给了你一个明确的答案。你想要实现的目标显然不是一个选项。我不会，我也不能推广那些显然无法实现的东西。对。你重申了我要解决的问题。但这实际上并不是一个答案。@Emerson你误读了我的答案，而我的答案给了你一个明确的答案。你想要实现的目标显然不是一个选项。我不会也不能推广一些显然不可访问、不可能实现的内容。我听到你说的“相信”屏幕阅读器来找出正在切换的内容

display:none。我的想法是，对于一个低视力的用户来说，打开和关闭链接是很烦人的。你对此有什么想法吗？也许我的想法错了，我不认为会