Question

我在几个网站上看到，他们将在页面顶部包含导航部分，内部链接指向页面的其他部分，以便拥有屏幕阅读器的用户可以快速跳转到内容，菜单这个“nav”元素使用CSS移出屏幕，因此常规用户看不到它。

实施此方法的最佳方法是什么？也就是说，屏幕阅读器最容易访问和最不干扰的是什么？以下是我一直在玩的内容：

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

第一个的好处是它的标记更清晰，但不完全是语义。此外，它看起来像“跳转到第一部分跳转到第二部分跳转到第三部分”。我知道视觉外观并不重要，因为它是隐藏的，但这会影响它的读出方式吗？每个人之间是否有适当的暂停？

第二个在语法上有点冗长，但希望更具描述性。

其中哪些更好，是否有更好的方法？

Answer 1

您可以下载名为Fangs的Firefox插件（参考真正的屏幕阅读器Jaws）。它将产生Jaws将阅读的文本。这非常方便。我会在一个接一个的链接上使用良好的语义布局。我也用......隐藏它......

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

在某些屏幕阅读器中无法读取display: none 。

在我自己的网站上，我一般都是这样做的：

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Answer 2

请记住，屏幕阅读器通常会发布超链接。这意味着你的第一个例子将不会被读作“跳转到第一部分跳转到第二部分跳转到第三部分”而是作为“链接：跳转到第一部分，链接：跳转到第二部分，链接：跳转到部分三个“或一些这样的。

（就个人而言，我仍会使用第二种语义选项，但这只是我个人的偏好。）

Answer 3

您应该将链接放在带有#nav的id（或类）的链接中。这使得那些使用屏幕阅读器的人可以看到内容是一个链接列表：“这是一个包含三个项目的列表：一个链接，'跳转到第一部分，一个链接'跳转到第二部分'...... “

将“ul”放在ID为“#nav”的“div”中是有效的，但除了包装“ul”以进行识别之外，div没有做任何其他操作。只需识别“ul”并保留“div”即可。以下代码是最好的（我认为）。干净而且重点突出。

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

要使用css从页面中删除文本，请使用：

ul#nav {
    position: absolute;
    left: -9999px
}

Answer 4

具有良好的语义布局，您不需要它。您可以使您已使用的导航元素与屏幕阅读器兼容。第二个选项通常是你如何实现这一目标。您可以设置列表项的样式以匹配您当前正在执行的操作。

Answer 5

执行所请求的最佳方法是使用<ul>及其中的锚点。

然而，WebKit中存在一些错误会导致焦点实际上没有转移到目标元素，因此您还需要将一个事件处理程序附加到链接，以便焦点发生变化。这也需要目标是标签焦点黑貂（tabindex="-1"将适用于此）。

但是，如果页面上的标题结构很好，那么屏幕阅读器用户可以在不需要您创建的导航菜单的情况下浏览页面。实际上，对于没有屏幕阅读器的键盘用户来说，此菜单可能更有用。在这种情况下，您需要使其显示在焦点上，以便键盘用户可以看到它。

隐藏的屏幕阅读器目录

5 个答案: