Menu
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> 
269
The purpose of this technique is to help users of assistive technology, such as screen readers, to quickly and easility navigate to a section of a page, and to skip over sections of a page that they do not need.
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. Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.
<nav>: The Navigation Section element The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
The <nav> element is one of them, which will help users find the navigation sections of a page. The <nav> element allow the author to mark up major navigation blocks in the HTML5 pages.
HTML5 has a variety of section elements that can aid in this. The <nav> element is one of them, which will help users find the navigation sections of a page. The <nav> element allow the author to mark up major navigation blocks in the HTML5 pages.
<nav>: The Navigation Section element The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
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
navelement 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).
111
Twitter Bootstrap uses <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.
It's also advised by w3.org
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
