HTML5 nav element vs. role="navigation"

Question

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>

Noting that none of these lists have any type of identifier of **what** they are for, the `aria-label` attribute is very relevant for them. `aria-labelledby="element_id"` could be used to point to an element such as `
Primary navigation
` if it exists. — Chris Marisic, Aug 07 '14 at 17:42

score 50 · Answer 1 · edited May 23 '17 at 11:46

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

I keep seeing this abbreviation *resp.* and I can never work out what it's supposed to mean. — TRiG, Jan 14 '14 at 12:52
@TRiG: I use it as abbreviation for *respectively*, but maybe I dont use this word 100% correctly (my [intended meaning](http://www.transblawg.eu/index.php?/archives/870-Resp.-and-other-non-existent-English-wordsNicht-existente-englische-Woerter.html) would probably be similar to "and or or"). (Don’t know if this is common English, might be a German bias? See also [What does “resp.” mean in these sentences?](http://ell.stackexchange.com/q/6491)) — unor, Jan 14 '14 at 16:18

score 22 · Answer 2 · answered Oct 17 '13 at 18:27

22

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

answered Oct 17 '13 at 18:27

bdanin

771
7
10

12

It looks like things have moved on since this answer was originally written. It seems that Twitter Bootstrap has changed its recommendation to: "Be sure to use a
element or, if using a more generic element such as a
, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies." Also, the w3.org validator produces the warning: "The navigation role is unnecessary for element nav."
– Damian Helme Jul 17 '15 at 12:36
According to https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html: "Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as these properties are already set by the browser. " – Pēteris Caune Jun 03 '19 at 13:30

Alohci · Answer 3 · 2013-01-06T11:24:50.367

6

The first two cases are semantically equivalent. The third is not. <ul> has a default implied ARIA semantic of list, and may only validly be set to either directory, list, listbox, menu, menubar, presentation, tablist, toolbar or tree, so setting it to navigation is invalid and breaks the list semantic that the <ul> element has in the first two cases.

edited Jan 06 '13 at 11:24

answered Jan 06 '13 at 11:04

Alohci

78,296
16
112
156

+1 Good point! I didn't see that the `
– Web_Designer Jan 06 '13 at 21:17
And my very first attempt at using aria roles I broke the spec. I'm glad i kept digging. – Chris Marisic Aug 07 '14 at 17:20

score 5 · Answer 4 · answered Oct 27 '13 at 10:31

5

<nav role="navigation"> validates for me using HTML5 dtd on the W3C validation service.

It seems like a good option to me as it supports both old and new until assistive technology catches up.

answered Oct 27 '13 at 10:31

sam

51
1
1

score 3 · Answer 5 · answered Apr 02 '14 at 04:42

WAVE Web Accessibility Tool can be used to get information about things like this.

Though I find the documentation there and the result view when checking a bit confusing. I think it would be good with clear examples since not everyone knows very much about accessibility on the web. (The result view looks very good, but still examples would be helpful.)

score 2 · Answer 6 · answered Jan 06 '13 at 09:27

2

OK, this is a good question, and in short this is what happens when two or more specs proposing similar problems get released at different times and supported by different browsers/screen readers.

The <nav> element should be given the navigation role automatically, so in theory you can just use your option 1. However, some screen readers don't know that yet, so using 2 would be better. Option 3 seems odd, as it's more than a unordered list, it's a nav.

Of course, this is a nice example – for many ARIA roles, there isn't a HTML element to match, so you might go for option 2 because you are using other things from ARIA, and want to be explicit.

Personally, I use 2 because GZIP makes the file size irrelevant, and it makes it work in the AT I tested with (Voiceover and something else on Windows, I can't recall right now).

answered Jan 06 '13 at 09:27

Rich Bradshaw

71,795
44
182
241

1

I can understand why you prefer 2 over 3 - because it feels better, but 3 does two jobs in one. – Popnoodles Jan 06 '13 at 09:42
Though it's all a bit silly (not you, the spec), for UAs who are looking for a `nav` it seems that there should be one. I can imagine a time (if it's not already) that Search Engines use `nav` to ignore content there or to prioritise links in a `nav`. – Rich Bradshaw Jan 06 '13 at 09:46
@popnoodles Option 3 is nixed. `navigation` is not a valid value for the `role` attribute on a `
` element. See [@Alohci's answer](http://stackoverflow.com/a/14181478/552067).
– Web_Designer Jan 06 '13 at 21:23
Option 3 doesn't have the role attribute on a `
` element
– Popnoodles Jan 07 '13 at 06:04
@Web_Designer, according to W3, they actually recommend it. - http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element – klewis Dec 09 '15 at 17:11

HTML5 nav element vs. role="navigation"

6 Answers6

Linked

Related