Visual navigation often marks the current page with a color or underline. aria-current="page" exposes the same relationship to assistive technology without changing the link's destination.

<nav aria-label="Tutorials">
  <a href="/tutorials/">All tutorials</a>
  <a href="/tutorials/forms/" aria-current="page">Forms</a>
</nav>

Use the value that describes the relationship

  • Use page for the current page in a set of pages.
  • Use location for the current step in a process or location in a broader structure when that meaning fits.
  • Set aria-current on only the item or items that are actually current in that navigation set.

Keep visual and semantic state together

Derive the active style and aria-current value from the same route state. A mismatch tells sighted and screen-reader users different stories.

Check nested routes as well as index pages so a parent navigation item is not marked current for every unrelated destination.