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

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

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