Skip to content

Multiple Navigation Landmarks

When the navigation links of a webpage are split into multiple parts, such as a primary and a secondary navigation, we need to provide additional labelling for screen reader users.

wireframe of a webpage with multiple navigation landmarks

When to use

Landmarks help assistive technology (AT) users orient and navigate a webpage. The image below shows a screenshot of VoiceOver on OSX when using landmark navigation:

screenshot of voiceover landmark navigation

When there is more than one landmark of the same type on the page (e.g., multiple <nav>), it’s necessary to provide additional labelling.

Example 1: using aria-label when no text is visible on screen

<nav aria-label=’primary’>
<ul>
...List on links here...
</ul>
</nav>
<nav aria-label=’secondary’>
<ul>
...List on links here...
</ul>
</nav>
<nav aria-label="Site Menu">
<ul>
...List on links here...
</ul>
</nav>
<article>
<h1>Title</h1>
...
<nav aria-labelledby="id-1">
<h2 id="id-1">
Related Content
</h2>
<ul>
...List on links here...
</ul>
</nav>
</article>

A new a11y tool is coming...

We're building the next-generation accessibility tool, and this can't be done without you. We're looking for accessibility superheroes.

To be notified when we launch, drop your email below.

Leave your email and we'll get in touch when we launch. You won't get SPAMed.