Current Page Indication

title: "Current Page Indication — Marking Active Navigation Items with aria-current" description: "Learn how to use aria-current to indicate the current page, step, or location in navigation menus for screen reader users." weight: 13 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

aria-current tells screen readers that an element represents the current item in a set, such as the current page in navigation or the current step in a stepper.

## What You'll Learn

How to use aria-current values (page, step, location, date, time, true) to mark active navigation items for screen readers.

## Why It Matters

Without aria-current, screen reader users hear the same link text for every navigation item. With aria-current="page", they hear "Home, current page, link" and know where they are.

## Real-World Use

A user navigates to the About page. The navigation has aria-current="page" on the About link. The screen reader announces "About, current page, link" while the other links are just "link."

## aria-current Values

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

<!-- Breadcrumb current page -->
<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li aria-current="page">Accessibility Guide</li>
  </ol>
</nav>

<!-- Stepper / wizard current step -->
<ol role="list" aria-label="Checkout steps">
  <li>Cart</li>
  <li aria-current="step">Shipping</li>
  <li>Payment</li>
  <li>Confirmation</li>
</ol>

Visual Styling

[aria-current="page"] {
  font-weight: bold;
  color: #0066cc;
  text-decoration: underline;
  text-underline-offset: 4px;
}

[aria-current="step"] {
  font-weight: bold;
  background: #0066cc;
  color: #fff;
}

Common Mistakes

1. Using class="active" without aria-current

CSS classes do not communicate state to screen readers. Always include aria-current.

2. aria-current on the wrong element

Put aria-current on the link that points to the current page, not on the heading or section of the current page.

3. Using aria-current="true" instead of specific value

For navigation, use aria-current="page" specifically. aria-current="true" is more generic.

4. Multiple aria-current on the same page

Only one navigation item should have aria-current="page" per navigation region.

5. No visual distinction for current page

Current page should be visually distinct (bold, color, underline) in addition to the ARIA attribute.

Practice Questions

1. What value of aria-current indicates the current page? aria-current="page" indicates the current page in a navigation set.

2. How does a screen reader announce aria-current="page"? "Products, current page, link" instead of just "Products, link."

3. What aria-current value is used for a step in a stepper? aria-current="step" indicates the current step in a multi-step process.

Challenge: Add aria-current to the navigation on a multi-page site. Dynamically set the correct page based on the current URL. Verify with a screen reader.

FAQ

Mini Project

Create a site navigation with 5 pages. Use JavaScript to dynamically set aria-current="page" on the link matching the current URL. Add visual styling for the active page.

What's Next

Learn how to perform Navigation Testing to verify that your navigation components are accessible to all users.