Developer Playground

20+ Free Tools · Privacy First

ARIA ROLE•Landmark Roles

`navigation`

A collection of navigational elements (usually links) for navigating the document or related documents. Common uses include primary site navigation, footer menus, breadcrumbs, and table of contents.

Landmark RoleImplicit on <nav>WCAG 2.2

🎯

Purpose

Identifies major navigation blocks that help users navigate the site or document

📱

HTML Equivalent

Automatically applied to <nav> elements

♿

Screen Reader

Announced as "navigation" landmark for quick access to menus

💡When to Use

Primary Site Navigation

Main menu with links to major sections of your website

Footer Navigation

Secondary navigation in the footer with utility links

Breadcrumb Navigation

Hierarchical trail showing the user's location in the site

Links to major sections within a long document or article

💻Code Examples

Basic Navigation Role

Using the navigation role for primary site navigation

<!-- Using semantic HTML (Preferred) -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Using role="navigation" explicitly -->
<div role="navigation">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</div>

Multiple Navigation Regions with Labels

Labeling multiple navigation regions to distinguish them

<!-- Main Navigation -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

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

<!-- Social Media Links -->
<nav aria-label="Social media">
  <a href="https://twitter.com" aria-label="Twitter">
    <svg><!-- icon --></svg>
  </a>
  <a href="https://facebook.com" aria-label="Facebook">
    <svg><!-- icon --></svg>
  </a>
</nav>

<!-- Breadcrumb Navigation -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Product Name</li>
  </ol>
</nav>

React Navigation Component

Implementing accessible navigation in React

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

export default function MainNav() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const router = useRouter()

  const navLinks = [
    { href: '/', label: 'Home' },
    { href: '/about', label: 'About' },
    { href: '/services', label: 'Services' },
    { href: '/contact', label: 'Contact' },
  ]

  return (
    <nav aria-label="Main navigation">
      {/* Mobile Menu Toggle */}
      <button
        className="mobile-menu-toggle"
        aria-expanded={mobileMenuOpen}
        aria-controls="main-nav-list"
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
      >
        <span className="sr-only">
          {mobileMenuOpen ? 'Close' : 'Open'} menu
        </span>
        <svg><!-- Hamburger icon --></svg>
      </button>

      {/* Navigation Links */}
      <ul
        id="main-nav-list"
        className={mobileMenuOpen ? 'open' : ''}
      >
        {navLinks.map((link) => (
          <li key={link.href}>
            <Link
              href={link.href}
              aria-current={
                router.pathname === link.href ? 'page' : undefined
              }
            >
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

⭐Best Practices

✓

Use Semantic HTML

Always use the <nav> element for navigation. It automatically has the navigation role.

🏷️

Label Multiple Navigations

Use aria-label or aria-labelledby when you have multiple navigation regions to distinguish them.

📍

Indicate Current Page

Use aria-current="page" on the link to the current page to help users know where they are.

📱

Mobile-Friendly

Ensure navigation works well on mobile with touch targets and hamburger menus if needed.

⌨️

Keyboard Accessible

All navigation links must be keyboard accessible with visible focus indicators.

🔄

Use for Navigation Only

Only use navigation role for major navigation blocks, not for every group of links.

⚠️Common Mistakes to Avoid

Unlabeled Multiple Navigations

❌ Wrong

Having multiple navigation regions without labels

<nav>Main Menu</nav>
<nav>Footer Menu</nav> ❌

✓ Correct

Add unique aria-label to each navigation region

<nav aria-label="Main navigation">
  Main Menu
</nav>
<nav aria-label="Footer navigation">
  Footer Menu
</nav> ✓

Using for Non-Navigation