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?
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.
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.
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 .
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.
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.
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.
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.
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.
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.
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.
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