aria-current
Indicates the element that represents the current item within a container or set. Useful for navigation, pagination, breadcrumbs, and multi-step processes.
Overview
The aria-current attribute indicates the element representing the current item within a container or set of related elements. This is essential for helping screen reader users understand where they are in navigation, multi-step processes, or date/time displays.
Unlike aria-selected (which indicates selection in a widget), aria-current indicates the "current" item in the context of navigation or progression—like the current page, current step, or current date.
Token Values Matter
Use the specific token (page, step, location, date, time) that best describes the context. Screen readers may announce these differently. Use true when no specific token fits.
Live Demo: aria-current in Action
Navigation with aria-current="page"
"Home" has aria-current="page"
Stepper with aria-current="step"
Step 2 ("Shipping") has aria-current="step"
Screen reader announcements: For navigation: "Home, current page, link". For stepper: "Shipping, current step, link, 2 of 4". The specific token used (page, step, etc.) affects how screen readers announce the item.
Attribute Values
pageRepresents the current page in a set of pages. Use for main navigation when the user is on that page.
stepRepresents the current step in a process. Use for multi-step forms, wizards, or checkout flows.
locationRepresents the current location in the site hierarchy. Use for breadcrumb navigation.
dateRepresents the current date in a calendar or date picker.
timeRepresents the current time in a time picker or schedule.
trueGeneric "current" indicator when no specific token fits. Use as a fallback.
Code Examples
Page Navigation
<!-- Navigation with current page -->
<nav aria-label="Main navigation">
<ul>
<li>
<a href="/" aria-current="page">Home</a>
</li>
<li>
<a href="/products">Products</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
<!-- Screen reader announces: "Home, current page, link" -->Multi-Step Process
<!-- Multi-step form/wizard with current step -->
<nav aria-label="Checkout progress">
<ol>
<li>
<a href="#cart" aria-current="false">
<span>1</span> Cart
</a>
</li>
<li>
<a href="#shipping" aria-current="step">
<span>2</span> Shipping
</a>
</li>
<li>
<span aria-disabled="true">
<span>3</span> Payment
</span>
</li>
<li>
<span aria-disabled="true">
<span>4</span> Confirmation
</span>
</li>
</ol>
</nav>
<!-- Screen reader: "Shipping, current step, link, 2 of 4" -->Breadcrumb Navigation
<!-- Breadcrumb with current location -->
<nav aria-label="Breadcrumb">
<ol>
<li>
<a href="/">Home</a>
<span aria-hidden="true">/</span>
</li>
<li>
<a href="/products">Products</a>
<span aria-hidden="true">/</span>
</li>
<li>
<a href="/products/electronics">Electronics</a>
<span aria-hidden="true">/</span>
</li>
<li>
<a href="/products/electronics/laptops" aria-current="location">
Laptops
</a>
</li>
</ol>
</nav>
<!-- Current location in the site hierarchy -->Calendar / Date & Time
<!-- Calendar with current date -->
<table role="grid" aria-label="December 2024">
<thead>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th>
<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td aria-current="date"><strong>5</strong></td>
<td>6</td><td>7</td>
</tr>
<!-- More weeks... -->
</tbody>
</table>
<!-- aria-current="date" marks today's date -->
<!-- Time-based current marker -->
<ul role="listbox" aria-label="Appointment times">
<li role="option">9:00 AM</li>
<li role="option" aria-current="time">10:00 AM (now)</li>
<li role="option">11:00 AM</li>
</ul>React Components
// React Navigation Component
import { usePathname } from 'next/navigation';
function Navigation() {
const pathname = usePathname();
const navItems = [
{ href: '/', label: 'Home' },
{ href: '/products', label: 'Products' },
{ href: '/about', label: 'About' },
{ href: '/contact', label: 'Contact' },
];
return (
<nav aria-label="Main navigation">
<ul className="nav-list">
{navItems.map(item => {
const isCurrent = pathname === item.href;
return (
<li key={item.href}>
<a
href={item.href}
aria-current={isCurrent ? 'page' : undefined}
className={`nav-link ${isCurrent ? 'active' : ''}`}
>
{item.label}
</a>
</li>
);
})}
</ul>
</nav>
);
}
// Stepper Component
function Stepper({ steps, currentStep }) {
return (
<nav aria-label="Progress">
<ol className="stepper">
{steps.map((step, index) => {
const stepNumber = index + 1;
const isCurrent = stepNumber === currentStep;
const isCompleted = stepNumber < currentStep;
return (
<li
key={step.id}
className={`step ${isCurrent ? 'current' : ''} ${isCompleted ? 'completed' : ''}`}
>
{isCompleted || isCurrent ? (
<a
href={`#${step.id}`}
aria-current={isCurrent ? 'step' : undefined}
>
<span className="step-number">{stepNumber}</span>
<span className="step-label">{step.label}</span>
</a>
) : (
<span aria-disabled="true">
<span className="step-number">{stepNumber}</span>
<span className="step-label">{step.label}</span>
</span>
)}
</li>
);
})}
</ol>
</nav>
);
}
// Breadcrumb Component
function Breadcrumb({ items }) {
return (
<nav aria-label="Breadcrumb">
<ol className="breadcrumb">
{items.map((item, index) => {
const isLast = index === items.length - 1;
return (
<li key={item.href}>
<a
href={item.href}
aria-current={isLast ? 'location' : undefined}
>
{item.label}
</a>
{!isLast && (
<span aria-hidden="true" className="separator">/</span>
)}
</li>
);
})}
</ol>
</nav>
);
}Best Practices
Use the most specific token (page, step, location, date, time) that matches your context
Only one element in a set should have aria-current at a time
Update aria-current dynamically as the user navigates
Provide visual styling to match the aria-current state
Use aria-current="page" on the link to the current page, not a wrapper element
Remove the attribute (or set to false) when the item is no longer current
Don't confuse aria-current with aria-selected—they serve different purposes
Don't use aria-current="true" when a specific token applies
Don't set aria-current on multiple items in the same set
Don't use aria-current for indicating focus or hover states