Use aria-current to mark the active item
Visual styling can show which navigation link is active, but that information also needs to reach assistive technology. The aria-current attribute marks one item as the current item in a related set.
For the current page in a navigation menu, use aria-current="page":
<a href="/home" aria-current="page">Home</a>
Other accepted values are step, location, date, time, true, and false. The specific values make the context clearer: step fits a checkout flow, while date fits a calendar.
Only mark the item that is actually current. You can still use a class for visual styling; aria-current has a different job and should not be treated as a CSS hook alone.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.