4

我在几个网站上看到他们将在页面顶部包含一个导航部分，并带有指向页面其他部分的内部链接，以便使用屏幕阅读器的用户可以快速跳转到内容、菜单、页脚、等等。这个“导航”元素使用 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>

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

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

其中哪个更好，还有更好的方法吗？

4

5 回答 5

3

您可以下载一个名为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>
于 2009-03-05T01:57:23.397 回答
2

请记住，屏幕阅读器通常会这样宣布超链接。这意味着您的第一个示例不会被读出为“跳转到第一节跳转到第二节跳转到第三节”，而是“链接：跳转到第一节，链接：跳转到第二节，链接：跳转到第三节”三”之类的。

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

于 2009-03-05T01:02:20.470 回答
1

你应该把链接放在一个ID（或类）为#nav 的地方。这让那些使用屏幕阅读器的人知道内容是一个链接列表：“这是一个包含三个项目的列表：一个链接，'跳转到第一个部分，一个链接'跳转到第二个部分'...... ”

将“ul”放置在 id 为“#nav”的“div”中是可行的，但 div 除了包装“ul”以进行识别之外没有做任何事情。只识别“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
}
于 2009-03-05T07:24:06.463 回答
0

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

于 2009-03-05T01:06:25.857 回答
0

执行您要求的最佳方法是使用<ul>其中的锚点。

但是，WebKit 中有一些错误会导致焦点实际上不会转移到目标元素，因此您还需要将事件处理程序附加到链接，以便焦点转移。这也将要求目标是选项卡焦点紫貂（tabindex="-1"将为此工作）。

但是，如果您在页面上有良好的标题结构，那么屏幕阅读器用户可以导航页面而无需您正在创建的导航菜单。事实上，这个菜单对于没有屏幕阅读器的只有键盘的用户可能更有用。在这种情况下，您将希望使其显示在焦点上，以便键盘用户可以看到它。

于 2014-03-03T22:02:55.210 回答