Skip to content

aria-current

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 you to 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 current item within container or set of related elements. It can take multiple values, specifically: page, step, location, date, time, false, true.

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.

Screenshot of polaris.shopify.com

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.

Whenever a website hierarchy is deeply nested, it’s often a good practice to display 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.

Screenshot of service-public.fr

Service-Public.fr(opens in a new tab) website uses the Breadcrumbs Pattern to display the hierarchy of the current page.

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.

Screenshot of gov.uk

Delta.com(opens in a new tab) uses aria-current="page" to identify the current date to screen reader users.

If we need to indicate the current step within a step indicator of a multi-step process (e.g.: wizard form, multi-step checkout, etc), aria-current="step" should be used to indicate the current step to screen reader users.

Screenshot of swiss.com

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.

<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>

In widgets where aria-selected has the same meaning as aria-current, we should use aria-selected instead.

For example, when using Tabs, we should mark the currently selected tab with aria-selected="true. This has the same meaning as aria-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>

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 the user’s selection.

Screenshot of swiss.com
João Picture

Need help? The first consultation is on us.

We'll discuss your biggest accessibility problems, and figure out what you need to do to make your website more accessible.

In this free 45 min session we will:

  • Analyse your website or product.

  • Review some accessibility issues.

  • Make a plan on how to improve.

Schedule Your Free Session