HTML5 nav元素与role =" navigation" [英] HTML5 nav element vs. role="navigation"

问题描述

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

Do all of the following carry the same semantic meaning? If not please explain your answer.

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>

推荐答案

as Alohci指出，根据HTML5，示例3是不允许。

As Alohci noted, according to HTML5, example 3 is not allowed.

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

But example 1 and 2 are not semantically equivalent.

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

nav is a sectioning element, div not. So example 1 creates an untitled section (similar to an empty heading), changing the whole document outline.

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

Also nav always belongs to 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.

这种差异在 导航角色

This difference is represented in the definitions of the navigation role

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

A collection of navigational elements (usually links) for navigating the document or related documents.

和 nav 元素（由我加粗）：

and the nav element (bolded by me):

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

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

---

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

---

Also note: a HTML5 user-agent that doesn't support/know WAI-ARIA wouldn't understand that example 2 contains navigation (and vice-versa).

这篇关于HTML5 nav元素与role =" navigation"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！