Aria Label Nav

title: "ARIA Label for Navigation — Identifying Navigation Regions" description: "Learn how to use aria-label and aria-labelledby to give navigation landmarks unique accessible names for screen reader landmark navigation." weight: 4 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

When a page has multiple navigation regions, each needs a unique accessible label so screen reader users can distinguish them in landmark navigation.

## What You'll Learn

How to label navigation regions with aria-label and aria-labelledby, and how screen readers present these labels.

## Why It Matters

Multiple unlabeled navigation regions appear as "Navigation, Navigation" in the landmark list, making it impossible to tell which is main, footer, or breadcrumb navigation.

## Real-World Use

A documentation site has three nav elements: main page navigation, breadcrumbs, and footer links. Each has aria-label="Main", "Breadcrumbs", and "Footer" respectively. The screen reader landmark list shows Navigation: Main, Navigation: Breadcrumbs, Navigation: Footer.

## Labeling Navigation

```html
<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
  </ul>
</nav>

<nav aria-labelledby="breadcrumb-heading">
  <h2 id="breadcrumb-heading" class="sr-only">Breadcrumbs</h2>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li aria-current="page">Getting Started</li>
  </ol>
</nav>

<nav aria-label="Footer navigation">
  <ul>
    <li><a href="/privacy">Privacy</a></li>
    <li><a href="/terms">Terms</a></li>
  </ul>
</nav>

Labeling Menus Inside Navigation

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <button aria-expanded="false" aria-haspopup="true">
        Products
      </button>
      <ul aria-label="Products submenu">
        <li><a href="/products/browser">Doda Browser</a></li>
        <li><a href="/products/zip">DodaZIP</a></li>
        <li><a href="/products/antivirus">Durga Antivirus Pro</a></li>
      </ul>
    </li>
  </ul>
</nav>

Common Mistakes

1. Same aria-label on all nav elements

Each nav must have a unique label. Use "Main", "Breadcrumb", "Footer", "Table of Contents" etc.

2. aria-label on the wrong element

Put aria-label on the nav element, not on the ul or the links inside.

3. Label text that is too long

Keep labels short and descriptive: "Main", "Breadcrumbs", "Footer".

4. No label with multiple nav elements

WCAG requires distinguishable landmarks. Multiple unlabeled nav elements fail this requirement.

5. Using aria-labelledby with invisible reference

The referenced element must exist. SR-only classes work. display: none does not.

Practice Questions

1. What attribute gives a nav element a unique label? aria-label or aria-labelledby on the nav element.

2. How does a screen reader display multiple navigation landmarks? In the landmark list as "Navigation: [label]" for each labeled navigation.

3. What happens if two nav elements have the same aria-label? They still appear as "Navigation: [label]" but are indistinguishable in purpose.

Challenge: Create a page with three nav elements. Label each differently and verify landmarks appear distinct in the NVDA element list.

FAQ

Mini Project

Take a page with multiple navigation regions. Add unique aria-labels to each. Use aria-labelledby where a visible heading already describes the navigation. Test with screen reader landmark navigation.

What's Next

Explore Landmark Navigation and how ARIA landmark roles create a comprehensive navigation system for screen reader users.