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

⛔ without labelling

screenshot of voiceover landmark navigation

✅ with labelling

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.

Keyboard Support

No keyboard interaction needed.

AttributeElementNotes
Attribute:
aria-label="breadcrumbs"
Element:
<nav>
Describes the navigation to screen reader users (who navigate the page using landmarks)Learn more about aria-label
<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>
João Picture

Need help? The first consultation is on us.

We'll discuss your biggest accessibility problems, and figure out what you need to do to make your website more accessible.

In this free 45 min session we will:

  • Analyse your website or product.

  • Review some accessibility issues.

  • Make a plan on how to improve.

Schedule Your Free Session