HTML5 nav element vs. role="navigation"

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


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


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.


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


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