State Widget state

`aria-current`

Marks the element that represents the current item in a set — the active page in a nav, the current step in a wizard, today in a date picker. More specific than aria-selected; use it on links and on items where selection isn't the right metaphor.

When to use

On the one item that represents “where you are” within a set of related items. The classic case is the active link in a primary navigation: a screen reader announces “Pricing, current page, link”, and sighted users see a highlighted item that matches.

Other common cases:

The current step in a multi-step form or wizard (aria-current="step").
Today’s date in a calendar grid (aria-current="date").
The active breadcrumb (aria-current="page").
The currently-playing item in a media playlist (aria-current="true").

How it differs from related states:

aria-current — “you are here” inside a navigation or set of items. Used on links and similar widgets that aren’t selection-based.
aria-selected — selection inside a select-style container (tablist, listbox, tree, grid). Selection is something the user changes.
aria-pressed — toggle button. The button itself is on or off.
aria-checked — checkbox or radio. Independent choice.

How to keep it in sync

Valid values: "page", "step", "location", "date", "time", "true", "false". Pick the most specific token — "page" for nav links, "step" for wizards, "date" for calendars. "true" is the generic fall-back when none of the others fit. "false" (the default) means “not current”; usually you just omit the attribute on non-current items.

In a navigation menu, exactly one link should carry aria-current at any time. Update it client-side when the route changes; server-rendered pages can render it directly in the HTML.

Style the current item visually so sighted users see the same cue. A common pattern is [aria-current="page"] { font-weight: 600; }.

Common failures

Using aria-current="true" on every navigation link, or on none of them.
Using aria-selected on a navigation link — wrong semantic; the link is not a selectable option.
Forgetting to update aria-current after client-side route changes in a single-page app.
Styling the active state with CSS but never setting aria-current. Screen readers announce nothing distinguishing.
Using aria-current="page" on a button that isn’t a navigation link.
Setting aria-current on the <nav> container instead of the individual link.

Example

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>