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.
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.
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:
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.
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.
aria-current="location" we can mark the current page in the hierarchy to screen reader users.
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.
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.
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><ahref="/parent/current"aria-current="location">Current</a></li></ol></nav>
In widgets where
aria-selected has the same meaning
aria-current, we should use
For example, when using Tabs, we should mark the
currently selected tab with
aria-selected="true. This has the same meaning as
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-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