Using aria-current for Active Navigation States

The aria-current attribute is an essential accessibility feature in web development that programmatically communicates the active or current item within a set of related elements to assistive technologies. While visual cues like color changes or underlines indicate active navigation links to sighted users, screen readers cannot interpret CSS styling alone. By implementing aria-current, developers ensure that users relying on screen readers receive immediate, context-aware notification about their current location within navigation menus, breadcrumbs, multi-step forms, and paginated lists.

Why aria-current Matters for Accessibility

Visual indicators of an active state—such as highlighting a tab or changing a link's font weight—are inherently inaccessible to users who are blind or have low vision. Historically, developers relied on hidden text (such as <span class="sr-only">(current)</span>) or misused states like aria-selected.

The aria-current attribute provides a standardized, semantic way to expose this state. When a screen reader encounters an element with this attribute, it announces the item followed by its current status, such as "Home, current page, link." This removes ambiguity and allows users to navigate complex site hierarchies with confidence.

Valid Values of aria-current

The aria-current attribute accepts a specific set of token values, allowing developers to communicate the precise context of the current item:

• page: Indicates the link represents the current page within a navigation menu. This is the most frequently used value.
• step: Indicates the current step within a sequential process, such as a checkout flow or multi-step registration form.
• location: Represents the current location within an environment or visual context, commonly used in breadcrumb trails or interactive maps.
• date: Represents the current date within a calendar or scheduling interface.
• time: Represents the current time within a timetable or schedule.
• true: Serves as a generic fallback indicating the item is current within its set.
• false: The default state, explicitly stating the item is not current (equivalent to omitting the attribute).

Implementation in Navigation Menus

To implement aria-current, apply the attribute directly to the active anchor tag or interactive element rather than the parent list item.

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about" aria-current="page">About Us</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

When the user navigates to a different page, your application or routing framework must update the DOM so that aria-current="page" moves to the new active link and is removed from the previous one.

Synchronizing Styles with CSS

A best practice when using aria-current is to style the active state directly through CSS attribute selectors. This ties your visual design directly to your accessibility semantics, preventing situations where a link looks active visually but lacks the programmatic attribute, or vice versa.

/* Style the visually active link directly from the ARIA attribute */
nav a[aria-current="page"] {
  font-weight: bold;
  border-bottom: 2px solid #0056b3;
  color: #0056b3;
}

aria-current vs. aria-selected

It is common to confuse aria-current with aria-selected, but they serve distinct purposes:

• Use aria-current for elements in a structure where one item naturally represents the current state within an informational set, such as links in navigation menus, breadcrumbs, or paginated numbers.
• Use aria-selected for interactive widgets where a user actively selects one or more options from a collection, such as tabs (role="tab"), listbox options, or data grid rows.

Integrating aria-current creates a seamless, predictable browsing experience that bridges the gap between visual presentation and non-visual web interaction.