我正在尝试找出一种隐藏/显示内容的可访问方式，这样当内容被隐藏时，屏幕阅读器仍然可以“看到”它，但键盘用户不会被迫在不可见的链接之间切换。
考虑以下内容:
<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;)。
我也不想在第二个“仅屏幕阅读器”副本中复制菜单标记。欢迎任何其他想法。
最佳答案
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.
屏幕阅读器用户(主要)是键盘用户，因此为他们移除键盘使用不是一种选择。
另一方面，一些视力不佳的屏幕阅读器用户可能仍会使用鼠标。通过宣布一个在屏幕上不可见的链接，这将导致人们无法查看和点击宣布的链接的可访问性问题。
关于html - 如何使隐藏链接对屏幕阅读器可见而不是标签导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47947399/