Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
418 views
in Technique[技术] by (71.8m points)

html - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

But example 1 and 2 are not semantically equivalent.

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

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.

and the nav element (bolded by me):

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.


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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...