About This HTML Issue
The aria-current attribute indicates that an element represents the current item within a container or set of related elements. It is designed to convey to assistive technology users what sighted users already perceive through visual styling — for example, a highlighted link in a navigation bar or the active step in a multi-step wizard.
Because assistive technologies rely on a known set of token values to communicate meaning, using an invalid value means the attribute is effectively meaningless to screen readers and other tools. This undermines accessibility for the users who need it most. Browsers and assistive technologies will not interpret an unrecognized value as true; they may ignore the attribute or treat it as false, leading to a confusing experience.
Common mistakes that trigger this error include:
-
Using an empty string:
aria-current="" -
Using a custom or misspelled value:
aria-current="active",aria-current="yes",aria-current="pgae" -
Dynamically setting the attribute to
undefinedornullas a string
Accepted values
Each accepted value carries a specific semantic meaning. Use the most descriptive one that matches your context:
-
page— The current page within a set of pages (e.g., the active link in a breadcrumb or navigation menu). -
step— The current step within a process (e.g., the active step in a checkout flow). -
location— The current location within an environment or context (e.g., the highlighted node in a flow chart). -
date— The current date within a collection of dates (e.g., today’s date in a calendar). -
time— The current time within a set of times (e.g., the current time slot in a timetable). -
true— A generic indication that the element is the current item, when none of the more specific values apply. -
false— Explicitly indicates the element is not the current item. This is equivalent to omitting the attribute entirely.
Examples
❌ Invalid: empty string
An empty string is not a valid value for aria-current:
<nav>
<ol>
<li><a href="/step-1" aria-current="">Step 1</a></li>
<li><a href="/step-2">Step 2</a></li>
</ol>
</nav>
❌ Invalid: custom keyword
Values like "active" or "yes" are not recognized:
<nav>
<ul>
<li><a href="/" aria-current="active">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
✅ Fixed: using page for navigation
When marking the current page in a navigation menu, page is the most appropriate value:
<nav>
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
✅ Fixed: using step for a multi-step process
<ol>
<li><a href="/checkout/cart">Cart</a></li>
<li><a href="/checkout/shipping" aria-current="step">Shipping</a></li>
<li><a href="/checkout/payment">Payment</a></li>
</ol>
✅ Fixed: using true as a generic fallback
When none of the specific token values fit, use true:
<ul>
<li><a href="/item-1" aria-current="true">Item 1</a></li>
<li><a href="/item-2">Item 2</a></li>
<li><a href="/item-3">Item 3</a></li>
</ul>
✅ Fixed: removing the attribute instead of setting false
If an element is not the current item, simply omit aria-current rather than setting it to false or an empty string. Both of the following are valid, but omitting the attribute is cleaner:
<!-- Valid but unnecessary -->
<a href="/about" aria-current="false">About</a>
<!-- Preferred: just omit it -->
<a href="/about">About</a>
Tips for dynamic frameworks
If you’re using a JavaScript framework that conditionally sets aria-current, make sure the attribute is either set to a valid value or removed from the DOM entirely. Avoid patterns that render aria-current="" or aria-current="undefined" when the element is not current. In React, for instance, you can pass undefined (not the string "undefined") to omit the attribute:
<!-- What your framework should render for the current page -->
<a href="/" aria-current="page">Home</a>
<!-- What it should render for non-current pages (no attribute at all) -->
<a href="/about">About</a>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.
Learn more: