The aria-current attribute should be used to identify the current item in a set of items. Below we show some applications of this attribute to make websites more accessible to all users.
Definition
aria-current is an attribute defined in the WAI-ARIA(opens in a new tab)specification. This specification extends native HTML, allowing youto change the way an HTML element is "translated" into the accessibility tree.
The aria-current can be used to indicate that an element represents the currentitem within container or set of related elements. It can take multiple values, specifically:page, step, location, date, time, false, true.
When and how to use
aria-current="page"
Whenever you need to indicate the current page within a set of pagination links (main navigation),providing a screen reader alternative to styling the current page.
Spotify Polaris(opens in a new tab) indicates the current page in the main navigation. While visible to sighted users, it also uses aria-current="page" to convey the information to screen reader users.
aria-current="location"
Whenever a website hierarchy is deeply nested, it's often a good practice todisplay the hierarchy of a given page using the Breadcrumbs Pattern.By using aria-current="location" we can mark the current page in the hierarchy to screen reader users.
Service-Public.fr(opens in a new tab) website uses the Breadcrumbs Pattern to display the hierarchy of the current page.
aria-current="date"
When we display a list of dates, one being today's date, we should use the `aria-current="date"to mark the current date to screen reader users.
Delta.com(opens in a new tab) uses aria-current="page" to identify the current date to screen reader users.
aria-current="step"
If we need to indicate the current step within a step indicator of a multi-step process (e.g.: wizardform, multi-step checkout, etc), aria-current="step" should be used to indicate thecurrent step to screen reader users.
Swiss.com(opens in a new tab)'s process of buying a ticket is a multi-step process. Visually, the current step is indicated to sighted users. aria-current="step" should be used as an alternative to screen reader users.
Examples
Example 1: Breadcrumbs
<nav aria-label="breadcrumbs">
<ol>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/parent">
Parent
</a>
</li>
<li>
<a
href="/parent/current"
aria-current="location"
>
Current
</a>
</li>
</ol>
</nav>
aria-current vs. aria-selected
Tabs Widget
In widgets where aria-selected has the same meaningas aria-current, we should use aria-selected instead.
For example, when using Tabs, we should mark thecurrently selected tab with aria-selected="true. This has the same meaning asaria-current="page", but aria-selected="true" is preferred.
<div role="tablist" aria-label="Entertainment">
<button id="tab-1-button" role="tab"
aria-controls="tab-1" aria-selected="true">
Tab 1
</button>
<button id="tab-2-button" role="tab"
aria-controls="tab-2"
>
Tab 2
</button>
</div>
<div id="tab-1" role="tabpanel"
tabindex="0" aria-labelledby="tab-1-button"
>
...
</div>
<div id="tab-2" role="tabpanel"
tabindex="0" aria-labelledby="tab-2-button"
hidden
>
...
</div>
Date Picker Widget
Another place where it can be confusing to use either aria-current or aria-selected is on a date picker.The former should be used to signal today's date and the former should be used to signal theuser's selection.
