role="navigation"

What role="navigation" means, and when to use it

Use navigation for a block of links that move somebody around the site or the page. Name it when a page has more than one, because a reader hearing two entries both called navigation has learned nothing.

The HTML element behind role="navigation"

A nav element is a navigation landmark. Use it, then add aria-label to say which navigation it is. Primary, footer, breadcrumb.

Landmark roles cut a page into regions people can jump between

Landmarks split a page into regions a screen reader user can move between directly, so the header, the navigation, the main content and the footer become places to jump to rather than stretches of text to sit through.

HTML gives you most of them for free. A main element is a main landmark and a nav is a navigation landmark. A header or footer becomes a banner or a contentinfo landmark as long as it is not sitting inside an article, aside, main, nav or section.

A landmark with no name still appears in the landmarks list, which is why six unnamed regions produce six identical entries. Naming them with aria-labelledby is what turns a list of six regions into a map of the page.

Where role="navigation" sits in the model

Inherits from

landmark → section → structure → roletype

The name can come from

aria-labelledby or aria-label. Its own text does not become the name, so text inside it will not be read as one.

The normative definition stays with the W3C, so it cannot go stale here. navigation in the ARIA specification.

How a checker tests role="navigation"

This role carries no obligation of its own, so what a checker looks at is whether the role is a real one and whether it belongs on the element carrying it. These are the published test rules that apply.

• Role attribute has valid value

The other landmark roles

• banner The site-wide page header, the part that repeats across pages.
• complementary Content that supports the main content and still makes sense on its own, like a sidebar.
• contentinfo The site-wide page footer, the copyright and contact end of the page.
• form A form region, worth naming when a page carries more than one.
• main The page's own content. There should be exactly one, and the header, footer and sidebars stay outside it.
• region A section important enough to jump to. It only becomes a landmark once it has a name.
• search The search facility, marked as a region of the page rather than as a single control.