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>

- Web_Designer

---

注意到这些列表都没有任何类型的标识符来说明它们是用于什么的，因此aria-label属性对它们非常重要。如果存在，可以使用aria-labelledby="element_id"指向一个元素，例如<div id="element_id">Primary navigation</div>。 - Chris Marisic

Answer 1

如Alohci指出，根据HTML5，示例3不允许使用。

但是示例1和2并不语义相同。

nav是一个分区元素，div则不是。因此，示例1创建了一个无标题的部分（类似于空标题），改变了整个文档的大纲。

此外，nav总是属于其父分区内容（或分区根），因此您可以拥有整个站点的导航、主内容的导航、仅用于主内容第三章的导航以及/或侧边栏中次要内容的导航等。

这种差异在navigation role定义中得到了体现

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

和nav元素的定义（由我加粗）：

nav元素表示页面的一部分，链接到其他页面或页面内的某些部分：具有导航链接的部分。

---

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

- unor

---

我一直看到这个缩写*resp.*，但我从来不知道它应该是什么意思。 - TRiG

@TRiG: 我将其作为“respectively”的缩写使用，但也许我没有完全正确地使用这个词（我的预期意义可能类似于“and or or”）。 （不知道这是否是常见的英语，可能存在德国偏见？另请参见“What does 'resp.' mean in these sentences?”） - unor

Answer 2

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

这似乎是最有效地涵盖了所有需要。

确保为每个导航栏添加role="navigation"以提高可访问性。

w3.org也建议这样做

- bdanin

---

自原回答编写以来，情况似乎已经有所变化。Twitter Bootstrap 已经更改了建议，现在推荐使用 <nav> 元素或者如果要使用更通用的元素，如 <div>，则为每个导航栏添加 role="navigation" 属性，以明确将其标识为辅助技术用户的地标区域。此外，w3.org 验证器会产生警告："对于 nav 元素来说，导航角色是不必要的。" - Damian Helme

根据https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html的规定：“设置与隐式ARIA语义匹配的ARIA角色和/或aria-*属性是不必要的，也不建议这样做，因为这些属性已经由浏览器设置。” - Pēteris Caune

Answer 3

前两种情况在语义上是等价的。第三种情况则不同。<ul> 具有默认的隐含 ARIA 语义 list，只能设置为 directory、list、listbox、menu、menubar、presentation、tablist、toolbar 或 tree 中的一个，因此将其设置为 navigation 是无效的，并且会破坏在前两种情况下 <ul> 元素具有的 list 语义。

- Alohci

---

+1，好观点！我没有注意到<ul>元素不允许使用navigation roll（规范）。这取消了选项#3。 - Web_Designer

我的第一次尝试使用ARIA角色时，我违反了规范。我很高兴我继续深入研究。 - Chris Marisic

Answer 4

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

这对我来说似乎是一个不错的选择，因为它支持旧版本和新版本，直到辅助技术跟上为止。

- sam

Answer 5

WAVE Web Accessibility Tool可以用来获取像这样的信息。

尽管我发现在检查时的文档和结果视图有些混淆。我认为提供清晰的示例会很好，因为并不是每个人都非常了解网络无障碍性。(结果视图看起来非常好，但示例仍将是有帮助的。)

- Leo

Answer 6

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

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

当然，这是一个很好的例子 - 对于许多ARIA角色，没有与之匹配的HTML元素，因此您可能会选择选项2，因为您正在使用ARIA的其他功能，并希望明确。

个人而言，我使用选项2，因为GZIP使文件大小无关紧要，并且可以在我测试的辅助技术（Voiceover和Windows上的其他内容，我现在记不清了）中正常工作。

- Rich Bradshaw

---

我能理解你为什么更喜欢2而不是3——因为它感觉更好，但是3可以一次完成两个任务。 - Popnoodles

尽管这听起来有些愚蠢（不是你，是规范），但对于正在寻找nav的用户代理来说，似乎应该有一个。我可以想象一个时代（如果还没有），搜索引擎使用nav来忽略内容或优先考虑nav中的链接。 - Rich Bradshaw

@popnoodles 第三个选项被取消了。在<nav>元素上，navigation不是role属性的有效值。请参见@Alohci的答案。 - Web_Designer

选项3在<nav>元素上没有角色属性。 - Popnoodles

@Web_Designer，根据W3的建议，他们实际上推荐使用它。- http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element - klewis