Question

以下所有内容是否具有相同的语义含义？如果没有，请解释你的答案。

的 1

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>

的 2

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>

第3

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>

Answer 1

作为Alohci noted，根据HTML5，示例3为not allowed。

但是示例1和2 不在语义上等效。

nav是切片元素，div不是。因此，示例1创建了一个无标题部分（类似于空标题），更改了整个文档outline。

另外nav始终属于到其父分区内容（分别为分段根目录），因此您可以拥有整个网站的导航，主要内容的导航，导航仅适用于主要内容的第3章，和/或侧边栏中辅助内容的导航等。

这种差异在navigation role

的定义中有所体现

用于导航文档或相关文档的导航元素集合（通常是链接）。

和nav element（由我加粗）：

nav元素表示页面的一部分，链接到其他页面或页面中的部分：带导航链接的部分。

另请注意：不支持/知道WAI-ARIA的HTML5用户代理不会理解示例2包含导航（反之亦然）。

Answer 2

Twitter Bootstrap使用<nav role="navigation">

这似乎最能有效地满足所有需求。

请务必在每个导航栏中添加角色=“导航”，以提供辅助功能。

It's also advised by w3.org

Answer 3

前两种情况在语义上是等价的。第三个不是。 <ul>有default implied ARIA semantic list，并且只能有效地设置为directory，list，listbox，menu ，menubar，presentation，tablist，toolbar或tree，因此将其设为navigation无效并打破list <ul>元素在前两种情况下具有的语义。

Answer 4

<nav role="navigation">验证了我在W3C验证服务上使用HTML5 dtd。

对我来说这似乎是一个不错的选择，因为它支持新老两种技术，直到辅助技术赶上来。

Answer 5

好的，这是一个很好的问题，简而言之，当两个或多个提出类似问题的规范在不同时间发布并得到不同浏览器/屏幕阅读器的支持时会发生这种情况。

<nav>元素应该自动赋予navigation角色，所以理论上你可以使用你的选项1.但是，有些屏幕阅读器还不知道，所以使用2将是更好。选项3似乎很奇怪，因为它不仅仅是一个无序列表，它是一个导航。

当然，这是一个很好的例子 - 对于许多ARIA角色，没有匹配的HTML元素，所以你可能会选择2，因为你正在使用ARIA的其他东西，并希望明确。< / p>

就个人而言，我使用2是因为GZIP使文件大小无关紧要，并且它使我在测试的AT中工作（在Windows上使用Voiceover和其他东西，我现在不记得了。）

Answer 6

WAVE Web Accessibility Tool可用于获取有关此类内容的信息。

虽然我在那里找到文档和结果视图时检查有点令人困惑。我认为通过明确的例子会很好，因为不是每个人都非常了解网络上的可访问性。（结果视图看起来非常好，但仍有示例有用。）

HTML5 nav元素与role =“navigation”

6 个答案: