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.

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.

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

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