HTML5 nav元素与role ="navigation"

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指出的那样,根据HTML5,不允许使用示例3 .

但是示例1和2在语义上并不相同.

nav是一个切片元素,div而不是.因此,示例1创建一个无标题部分(类似于空标题),更改整个文档大纲.

也nav始终属于其父分区内容(分段根目录),因此您可以拥有整个站点的导航,主要内容的导航,仅主要内容的第3章的导航和/或导航侧边栏中的辅助内容等

这种差异在角色的定义中表示navigation

用于导航文档或相关文档的导航元素(通常是链接)的集合.

和nav元素(由我加粗):

该nav元素代表一个页面的部分链接到其他网页或部分内页:用导航链接的部分.

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

Answer 2

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

这似乎最有效地涵盖了所有需求.

务必在每个导航栏中添加role ="navigation"以帮助提高辅助功能.

它也是w3.org的建议

Answer 3

前两种情况在语义上是等价的.第三个不是.<ul>具有默认隐含ARIA语义的list,并且可以仅有效地被设置为directory,list,listbox,menu,menubar,presentation,tablist,toolbar或tree,所以将其设置为navigation无效,并且破坏了list语义,该<ul>元件具有在第一两种情况.

Answer 4

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

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

Answer 5

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

\n\n

该<nav>元素应该navigation自动被赋予角色，因此理论上您可以只使用选项 1。但是，一些屏幕阅读器还不知道这一点，因此使用 2 会更好。选项 3 看起来很奇怪，因为它不仅仅是一个无序列表，它是一个导航。

\n\n

当然，对于许多 ARIA 角色来说，这是一个很好的示例 \xe2\x80\x93，没有可匹配的 HTML 元素，因此您可能会选择选项 2，因为您正在使用 ARIA 中的其他内容，并且想要明确。

\n\n

就我个人而言，我使用 2，因为 GZIP 使文件大小变得无关紧要，并且它使其可以在我测试的 AT 中工作（Windows 上的画外音和其他功能，我现在不记得了）。

\n