aria-current — Indicating the Current Item in a Set

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-current indicates the currently active item within a set of related elements, such as the current page in navigation, the current step in a wizard, or the current tab in a tablist.

In this tutorial, you'll learn how to use aria-current effectively in your ARIA implementations.

What You'll Learn

By the end of this lesson, you'll understand the different aria-current token values, when to use each one, how it interacts with other state attributes, and best practices for implementation.

Why It Matters

Users need to know where they are in a navigation structure. aria-current tells screen reader users which item is the current one, preventing confusion and disorientation.

Real-World Use

Doda Browser uses aria-current="page" on the active navigation link so screen reader users know which page they are on.

Current State Options

flowchart TD
  A[aria-current values] --> B[page]
  A --> C[step]
  A --> D[location]
  A --> E[date]
  A --> F[time]
  A --> G[true]
  B --> H[Current page in a set of pages]
  C --> I[Current step in a process]
  D --> J[Current location in a flow]
  E --> K[Current date in a calendar]
  F --> L[Current time in a schedule]
  G --> M[Generic current item]

How aria-current Works

aria-current marks the currently active item in a collection. The value specifies the type of current state:

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

The screen reader announces "Products, current page, link" when focused on the Products link.

Token Values

<!-- Current page in navigation -->
<a href="/dashboard" aria-current="page">Dashboard</a>

<!-- Current step in a multi-step form -->
<li aria-current="step">Shipping</li>

<!-- Current location in a breadcrumb -->
<span aria-current="location">Current Page</span>

<!-- Current date in a calendar -->
<button aria-current="date">15</button>

<!-- Current time in a schedule -->
<div aria-current="time">2:00 PM</div>

aria-current vs aria-selected

Use aria-current for navigation context and aria-selected for selectable items within a widget:

Common Mistakes

• Using aria-current without a value: It defaults to true, but the specific token is more helpful.
• Using aria-selected instead of aria-current for navigation links: Navigation context needs aria-current.
• Forgetting to update aria-current: When navigating a SPA, update aria-current on the new route.
• Applying aria-current to all links: Only one item should have aria-current at a time.
• Using aria-current on non-link elements incorrectly: The role must support the attribute.

Practice and Challenge

1. What does aria-current="page" indicate? The current page in a set of navigation pages.

2. What is the difference between aria-current and aria-selected? aria-current indicates current navigation context; aria-selected indicates selected items in widgets.

3. Which aria-current value would you use for a wizard step? aria-current="step".

4. What is the default value if aria-current is set without a value? true.

5. Challenge: Implement breadcrumb navigation with aria-current="location" on the final breadcrumb item.

FAQ

Mini Project

Create a navigation component with 5 links. Mark the active link with aria-current="page" and style it with an [aria-current] CSS attribute selector. Update the active link with JavaScript when clicked.

What's Next

Continue to aria-expanded to learn how to indicate expandable and collapsible state.