HTML5 导航元素与角色 =“导航”答案

【问题标题】：HTML5 nav element vs. role="navigation"HTML5 导航元素与角色 =“导航”
【发布时间】：2012-12-20 06:53:31
【问题描述】：

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

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

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

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

【问题讨论】：

请注意，这些列表都没有任何类型的 what 标识符，aria-label 属性与它们非常相关。 aria-labelledby="element_id" 可用于指向诸如 <div id="element_id">Primary navigation</div> 的元素（如果存在）。

标签： html semantic-markup nav

【解决方案1】：

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

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

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

还有nav 总是属于它的父分段内容（resp.sectioning root），所以你可以有整个网站的导航，主要内容的导航，只有导航主要内容的第 3 章，和/或侧边栏中次要内容的导航等。

这种差异体现在navigation role的定义中

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

还有nav element（由我加粗）：

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

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

【讨论】：

我一直看到这个缩写 resp.，但我永远无法弄清楚它应该是什么意思。
@TRiG：我用它作为各自的缩写，但也许我没有100%正确使用这个词（我的intended meaning可能类似于“and or or ”）。（不知道这是不是普通的英语，可能是德国人的偏见？另见What does “resp.” mean in these sentences?）

【解决方案2】：

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

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

请务必为每个导航栏添加一个 role="navigation" 以帮助提高可访问性。

It's also advised by w3.org

【讨论】：

自从最初编写此答案以来，事情似乎已经发生了变化。似乎 Twitter Bootstrap 已将其建议更改为：“一定要使用
元素，或者，如果使用更通用的元素，例如
，请在每个导航栏添加一个 role="navigation" 以明确识别它作为辅助技术用户的标志性区域。”此外，w3.org 验证器会产生警告：“导航角色对于元素导航来说是不必要的。”
根据w3.org/TR/html-aria/…：“设置与隐式 ARIA 语义相匹配的 ARIA 角色和/或 aria-* 属性是不必要的，也不推荐，因为这些属性已经由浏览器设置。”

【解决方案3】：

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

【讨论】：

+1 好点！我没有看到<ul> 元素不允许navigation 滚动（spec）。这取消了选项 #3。
我第一次尝试使用 aria 角色时违反了规范。我很高兴我一直在挖掘。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

WAVE Web Accessibility Tool 可用于获取此类信息。

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

【讨论】：

【解决方案6】：

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

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

当然，这是一个很好的例子——对于许多 ARIA 角色，没有要匹配的 HTML 元素，因此您可能会选择选项 2，因为您正在使用来自 ARIA 的其他东西，并且想要明确。

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

【讨论】：

我能理解为什么你更喜欢 2 而不是 3 - 因为感觉更好，但 3 合二为一。
虽然这有点傻（不是你，规范），但对于正在寻找nav 的 UA 来说，似乎应该有一个。我可以想象搜索引擎使用nav 忽略那里的内容或优先考虑nav 中的链接的时间（如果还没有的话）。
@popnoodles 选项 3 被取消。 navigation 不是 <nav> 元素上的 role 属性的有效值。见@Alohci's answer。
选项 3 在<nav> 元素上没有角色属性
@Web_Designer，根据 W3，他们实际上推荐它。 - w3.org/WAI/GL/wiki/Using_HTML5_nav_element