Html HTML5 导航元素与 role="navigation"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14180785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 nav element vs. role="navigation"
提问by Web_Designer
Do all of the following carry the same semantic meaning? If not please explain your answer.
以下所有内容都具有相同的语义吗？如果不是，请解释您的答案。
1.
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.
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.
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>
回答by unor
As Alohci noted, according to HTML5, example 3 is not allowed.
正如Alohci 指出的那样，根据 HTML5，示例 3 是不允许的。
But example 1 and 2 are notsemantically equivalent.
但是示例 1 和示例 2 在语义上并不等效。
navis a sectioning element, divnot. So example 1 creates an untitled section (similar to an empty heading), changing the whole document outline.
nav是切片元素，div不是。因此示例 1 创建了一个无标题部分（类似于空标题），更改了整个文档大纲。
Also navalways belongsto its parent sectioning content (resp. sectioning root), so you can have a navigation for the whole site, a navigation for the main content, a navigation only for chapter 3 of the main content, and/or a navigation for secondary content in the sidebar etc.
也nav始终属于其父分区内容（相应的分区根），因此您可以拥有整个站点的导航、主要内容的导航、仅主要内容第 3 章的导航和/或侧边栏中的次要内容等。
This difference is represented in the definitions of the navigationrole
这种差异体现在角色的定义中navigation
A collection of navigational elements (usually links) for navigating the document or related documents.
用于导航文档或相关文档的导航元素（通常是链接）的集合。
and the navelement(bolded by me):
和nav元素（由我加粗）：
The
navelement represents a section of a pagethat links to other pages or to parts within the page: a section with navigation links.
该
nav元素表示链接到其他页面或页面内部分的页面部分：带有导航链接的部分。
Also note: a HTML5 user-agent that doesn't support/know WAI-ARIA wouldn't understand that example 2 contains navigation (and vice-versa).
另请注意：不支持/不知道 WAI-ARIA 的 HTML5 用户代理不会理解示例 2 包含导航（反之亦然）。
回答by bdanin
Twitter Bootstrapuses <nav role="navigation">
Twitter Bootstrap使用<nav role="navigation">
This seems like it covers all needs most effectively.
这似乎最有效地满足了所有需求。
Be sure to add a role="navigation" to every navbar to help with accessibility.
请务必为每个导航栏添加一个 role="navigation" 以帮助实现可访问性。
回答by sam
<nav role="navigation">validates for me using HTML5 dtd on the W3C validation service.
<nav role="navigation">在 W3C 验证服务上使用 HTML5 dtd 为我验证。
It seems like a good option to me as it supports both old and new until assistive technology catches up.
这对我来说似乎是一个不错的选择，因为它支持新旧两种技术，直到辅助技术迎头赶上。
回答by Alohci
The first two cases are semantically equivalent. The third is not. <ul>has a default implied ARIA semanticof list, and may only validly be set to either directory, list, listbox, menu, menubar, presentation, tablist, toolbaror tree, so setting it to navigationis invalid and breaks the listsemantic that the <ul>element has in the first two cases.
前两种情况在语义上是等价的。第三个不是。<ul>具有默认暗示ARIA语义的list，并且可以仅有效地被设置为directory，list，listbox，menu，menubar，presentation，tablist，toolbar或tree，所以将其设置为navigation无效，并且断list语义，该<ul>元件具有在第一两种情况。
回答by Rich Bradshaw
OK, this is a good question, and in short this is what happens when two or more specs proposing similar problems get released at different times and supported by different browsers/screen readers.
好的，这是一个很好的问题，简而言之，当提出类似问题的两个或多个规范在不同时间发布并得到不同浏览器/屏幕阅读器的支持时，会发生什么。
The <nav>element should be given the navigationrole automatically, so in theory you can just use your option 1. However, some screen readers don't know that yet, so using 2 would be better. Option 3 seems odd, as it's more than a unordered list, it's a nav.
该<nav>元素应给予navigation自动作用，所以理论上你可以用你的选择。然而，某些屏幕阅读器不知道呢，所以使用2会更好。选项 3 看起来很奇怪，因为它不仅仅是一个无序列表，它还是一个导航。
Of course, this is a nice example – for many ARIA roles, there isn't a HTML element to match, so you might go for option 2 because you are using other things from ARIA, and want to be explicit.
当然，这是一个很好的例子——对于许多 ARIA 角色，没有要匹配的 HTML 元素，因此您可能会选择选项 2，因为您正在使用来自 ARIA 的其他东西，并且想要明确。
Personally, I use 2 because GZIP makes the file size irrelevant, and it makes it work in the AT I tested with (Voiceover and something else on Windows, I can't recall right now).
就我个人而言，我使用 2 是因为 GZIP 使文件大小无关紧要，并且它可以在我测试过的 AT 中工作（Windows 上的配音和其他东西，我现在想不起来了）。
回答by Leo
WAVE Web Accessibility Toolcan be used to get information about things like this.
WAVE Web Accessibility Tool可用于获取有关此类内容的信息。
Though I find the documentation there and the result view when checking a bit confusing. I think it would be good with clear examples since not everyone knows very much about accessibility on the web. (The result view looks very good, but still examples would be helpful.)
虽然我在那里找到文档和检查时的结果视图有点混乱。我认为有明确的例子会很好，因为并不是每个人都非常了解网络上的可访问性。（结果视图看起来非常好，但示例仍然会有所帮助。）
