The HTML aria-current attribute
The aria-current attribute marks the "current" item within a set of related elements, most commonly the current page in a navigation menu. Values: page, step, location, date, time, true, or false.
Overview
The aria-current attribute marks the current item within a set of related elements, such as the current page in navigation.
It is a widget state: a condition that can change as the user interacts. Because ARIA does nothing on its own, you must update this value in JavaScript every time the underlying state changes; a stale state is worse than none. And wherever a native element already expresses the same thing (a checkbox's checked state, the disabled attribute, a <details>'s open state), use that instead.
Like all ARIA, aria-current changes only the accessibility tree (what assistive technology perceives), never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<a href="/pricing" aria-current="page">Pricing</a>Values
| Value |
|---|
| page | step | location | date | time | true | false |
Example
<nav><a href="/">Home</a> <a href="/pricing" aria-current="page">Pricing</a></nav>Best practices
- Follow the first rule of ARIA: use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Update the value in JavaScript whenever the state changes; keep it in sync with reality.
- Use the matching native state where one exists (a checkbox's
checked, thedisabledattribute, a <details>'s open state) instead of the ARIA version. - Set it only on an element whose role actually supports this state.
Frequently asked questions
What does aria-current do?
Does setting this attribute change how the element behaves?
Which elements can take aria-current?
page for the current page in navigation or step in a multi-step flow.