CODEWITHSUNDEEP
htmlsemantic-markupnav
Web_Designer
Web_Designer

Reputation: 74550

HTML5 nav element vs. role="navigation"

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>

Upvotes: 53

Views: 42470

Answers (6)

Leo
Leo

Reputation: 4428

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

Upvotes: 3

sam
sam

Reputation: 51

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

Upvotes: 5

bdanin
bdanin

Reputation: 771

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

Upvotes: 22

unor
unor

Reputation: 96597

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

Upvotes: 50

Alohci
Alohci

Reputation: 82986

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.

Upvotes: 6

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

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

Upvotes: 2

Related Questions