屏幕阅读器的隐藏目录

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

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

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

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

来源

2009-03-05 nickf

对于不向您的非盲用户提供此类导航帮助，您有什么理由？简单明了的导航链接是一件好事。 – Sparr 2009-03-05 00:58:14

我不想决定是否实施它 - 我试图决定*如何实施它。 – nickf 2009-03-05 01:00:05

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

#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-05 01:57:23 alex

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

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

来源

2009-03-05 01:02:20

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

来源

2009-03-05 01:06:25

你应该把链接在与#nav的ID（或类）。这给那些使用屏幕阅读器的人提供了一个指引，内容是一个链接列表：“这是一个包含三个项目的列表：链接'跳转到第一部分，链接'跳转到第二部分'...”

将“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-05 07:24:06 superUntitled

做你要求的是什么，最好的办法是，里面还锚使用<ul>。

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

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

来源

2014-03-03 22:02:55 unobfuscator

屏幕阅读器的隐藏目录

回答

相关问题