Site navigation is conventionally provided as a list of links, inside a navigation landmark. This landmark is denoted by either the <nav> element or the role="navigation" ARIA attribution. By providing landmark and list semantics, useful information is communicated to screen reader users when encountering this area of the page. They will hear “navigation landmark” (or similar, depending on their software) and “list”, followed by a count of the list items in the navigation.

In addition, landmarks such as <nav> elements are available in screen reader tables of contents, allowing users to select and move to them directly.

How it looks

image of bar navigation example

The code

Basic structure

<nav>
<ul>
<li><a href="/about.html">About NYU</a></li>
<li><a href="/admissions.html">Admissions</a></li>
<li><a href="/academics.html">Academics</a></li>
<li><a href="/life.html">University Life</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</nav>

(Code is elided.)

Sub navigation

Submenus should be marked up as nested lists:

<nav>
<ul>
<li><a href="/about.html">About NYU</a></li>
<li><a href="/admissions.html">Admissions</a></li>
<li>
<a href="/academics.html">Academics</a>
<ul>
<li><a href="/academic-programs.html">Academic Programs</a></li>
<li><a href="/accelerated-studies.html">Accelerated Studies</a></li>
<li><a href="/schools-and-colleges.html">Schools and Colleges</a></li>
<li><a href="/studying-abroad.html">Studying Abroad</a></li>
<li><!-- etc --></li>
</ul>
</li>
<li><a href="/life.html">University Life</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</nav>

(Code is elided.)

Labeling

It is not necessary to provide a unique label to a navigation landmark if it is the only landmark of its kind on the page. However, if there is more than one it is better to differentiate them. An aria-label serves this purpose well. The following navigation landmark is identified as the “main” landmark. A supplementary navigation (perhaps in the footer) may also be present.

<nav aria-label="main">
<ul>
<li><a href="/about.html">About NYU</a></li>
<li><a href="/admissions.html">Admissions</a></li>
<li>
<a href="/academics.html">Academics</a>
<ul>
<li><a href="/academic-programs.html">Academic Programs</a></li>
<li><a href="/accelerated-studies.html">Accelerated Studies</a></li>
<li><a href="/schools-and-colleges.html">Schools and Colleges</a></li>
<li><a href="/studying-abroad.html">Studying Abroad</a></li>
<li><!-- etc --></li>
</ul>
</li>
<li><a href="/life.html">University Life</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</nav>

(Code is elided.)