隐藏的屏幕阅读器目录

StackOverflow https://stackoverflow.com/questions/613203

  •  03-07-2019
  •  | 
  •  

题

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

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

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

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

有帮助吗？

解决方案

您可以下载名为 Fangs 的Firefox插件（参考真实的屏幕阅读器）颚）。它将产生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>

其他提示

请记住，屏幕阅读器通常会发布超链接。这意味着您的第一个示例将不会被读出为<！>“;跳转到第一部分跳转到第二部分跳转到第三部分<！>”;而是作为<！>“链接：跳转到第一部分，链接：跳转到第二部分，链接：跳转到第三部分<！>”;或者其他一些。

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

您应该将链接放在带有#nav的id（或类）的链接中。这为使用屏幕阅读器的人提供了内容是链接列表：<！>“这是一个包含三个项目的列表：一个链接，'跳转到第一部分，一个链接'跳到第二部分” ... QUOT <！>;

放置<！>“; ul <！>”;在<！> quot; div <！>中; id为<！>“; #nav <！>”;是功能的，但除了包装<！>“ul <！>”之外，div没有做任何事情。用于识别。只需识别<！>“ul <！>”就可以了。并留下<！> quot; div <！> quot;出。以下代码是最好的（我认为）。干净而且重点突出。

<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
}

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

执行您所要求的操作的最佳方法是使用带有锚点的<ul>。

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top