Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

nav role=navigation

I'm a little confused with roles. If I have in my page a navigation that is enclosed in a nav element and specify a role="navigation".

<nav role="navigation">     ... </nav> 

Isn't it already semantically explicit that the nav section is navigation?

Or if I have some other navigation sections on my page, and specify role for only one of them, this section becomes the most important on a page? And those without role="navigation" just boring navigations?

like image 831
Artem Svirskyi Avatar asked Feb 16 '13 13:02

Artem Svirskyi


People also ask

What is role navigation?

The navigation role is a landmark role. Landmark roles provide a way to identify the organization and structure of a web page. By classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically.

What is the purpose of a nav element?

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.

Does NAV go in head or body?

The <header> tag is generally used for heading purposes, you may see the use of these header tags <h1> to <h6>. The <nav> tag is used inside the <header> tag .

What is NAV command?

Definition and Usage. 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.

What is the navigation role?

The navigation role is used to identify major groups of links used for navigating through a website or page content. This is a website's main navigation. The navigation role is a landmark role.

What is the use of <nav> element in HTML?

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.

What is the <nav> tag used for?

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.

Should all links of a document be inside a <nav> element?

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.


2 Answers

It is true that most modern browsers/technologies recognise the HTML5 <nav> element as navigation and give it the same attention. But explicitly setting the role="navigation" attribute just makes sure that a lot more technologies can pick it up.

For example screen-readers and other technologies for users with disabilities are very rarely fully standards compliant (especially if they have to work all the way back to IE6 or lower!) so adding the role attributes explicitly always ensures that you cover all your bases for the most users possible.

Also (and this is just a guess) some of the lesser known search engines may not fully recognise HTML5 yet, so adding these roles should help with the sites crawl-ability.

like image 185
Mike Avatar answered Oct 09 '22 09:10

Mike


Take a look at this from W3C. It says:

In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

So doing <main role="main"> is unnecessary and not recommended. That said, the Bootstrap's navbar examples (which everybody -including me- copy-pastes) come with <nav role="navigation">.

To be honest, I'm not sure what's correct.

like image 27
Albert Vila Calvo Avatar answered Oct 09 '22 09:10

Albert Vila Calvo