The title of this post might seem a little odd, but it's inspired by a recent accessibility audit where I saw the HTML <nav> region being used in some unusual ways.
The MDN HTML spec defines the <nav> element this way:
The
<nav>HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
WCAG 2.2 Technique H101, which relates to WCAG Success Criterion 1.3.1 Info and Relationships, says:
<nav>: A region that contains navigation links to other pages or different parts of the same page.
Here's how the W3C Web Accessibility Initiative Page Regions tutorial describes the nav landmark:
The HTML5
<nav>element can be used to identify a navigation menu. A web page can have any number of navigation menus. Use labels to identify each navigation menu.
So the nav region's "purpose is to provide navigation links, either within the current document or to other documents". Typically, a nav region's content is what we would describe as a "menu": a list of links to other pages on the same website, usually found in the header, footer, or sidebar areas of the page, generally occurring in the same location across all or multiple pages of the site.
Another valid use of the <nav> region would be a list of links to sections of the same page, such as a table of contents.
However, in the site I'm currently auditing, as well as on other sites in the past, I've seen the <nav> region used in unusual ways. One of those uses is possibly arguably valid, though I disagree with it; and the second is not valid according to these definitions of the nav region.
Lists of links to other pages, in page content, found only on one page
The current site I'm auditing uses nav regions for lists of links to other pages, within the page content. Each unique set of links in these nav regions seems to only be found on one page. These links are not found any kind of consistent location or order across the different pages.
I'd argue that this usage doesn't fit the purpose of the nav region. A list of links to other pages is normally what would be described as a "menu", which is one of the main indicated uses for navs. But these lists of links don't really act as menus. They are not found in the same location on any pages. They are not repeated across multiple pages. They are not even found on the pages that they link to, which is what you'd expect for a site section submenu. They're located in the main region of the page, interleaved with page content, which is not typical for menus.
In short, they're just links on the page. And while there's nothing really in the spec that forbids this usage, I would argue that it goes against user expectation. A blind user navigating through page landmarks in a screen reader expects that a <nav> region contains site navigation, and that this same list of links will occur in the same place on other pages.
Using the nav region just to mark up a list of links, I think, violates the spirit if not the letter of the specification. It creates semantic clutter, and makes it harder for assistive technology users to find what they're looking for.
Nav regions for tabs or carousel controls
The second use of the <nav> region is just incorrect, and can't be justified even as an edge case. That is, using it as a container for things like tabs or slideshow controls.
Revisiting the MDN definition: "The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents."
Tabs or slideshow controls are not navigation links. They are interactive controls that show and hide content. I often think of this Heydon Pickering quote: "When you think about it, most of your basic interactions are showing or hiding something somehow." It's so true!
Now I have to define my terms, because unfortunately, many developers do use links for non-navigational controls, like tabs or slideshows. This is not the space to delve into that topic, but if you are not taking the user to another page or another section of the same page, or downloading a file, you should be using a <button>, not a link.
So your tabs should be buttons (although they get the "tab" role which overrides button semantics in assistive technology), and so should your carousel controls. The Web Accessibility Initiative carousel example does take user focus to the current slide when carousel navigation is activated, though that is about creating an equivalent and usable experience for assistive technology users (same as when focus is taken to an opened modal dialog), not "navigation" in the strict sense of that term. And, it uses buttons, not links.
So what is a nav region?
In sum, you should use a <nav> region to enclose lists of links. These links can fall into two categories:
Lists of links to other pages
Use a nav region when your list of links could be described as a "menu". Menus:
- contain lists of links to other pages on your site
- are found on all or multiple pages of the site
- are found in the same location on all pages where they occur
- are (normally) found on all pages they link to
- usually, are found outside the main content of the page
Don't use nav regions for random lists of links in your page content.
Lists of links that provide in-page navigation
Nav regions should also be used when you have a list of links that provides in-page navigation, such as tables of content. These can be especially useful when you have a long, text-heavy document, allowing users to skip directly to the sections they're interested in.
Don't forget to label your nav regions when you have more than one on the same page. Labelling the only nav region on a page is also fine, though optional.