Lesson 19 / 26

Navigation accessibility

Design clear, predictable navigation with descriptive links, aria-current and keyboard-friendly dropdown menus.

Best practices

Use <nav> landmark. Make link text descriptive ('About' vs 'Click here'). Indicate current page with aria-current. Consistent navigation across pages. Logical tab order.

Using aria-current

Mark the active page with aria-current.

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
  <a href="/contact">Contact</a>
</nav>

Accessible dropdowns

Use <button> with aria-expanded to toggle submenus. Support arrow keys to navigate. Close with Escape.