HTML Guide for aria-current

The only accepted values for the aria-current property are page, step, location, date, time, true and false.

A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.

When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.

In its simplest form, you only need to add aria-current="true" to the element that you wish to mark as the current element of a group, for example:

<nav>
  <ol>
    <li>
      <a href="/page1">Page 1</a>
    </li>
    <li>
      <a href="/page2" aria-current="true">Page 2</a>
    </li>
    <li>
      <a href="/page3">Page 3</a>
    </li>
  </ol>
</nav>

If you can, use the values page, step, location, date or time instead of true to indicate the nature of the current element:

page

Represents the current page within a set of pages such as the link to the current document in a breadcrumb.

step

Represents the current step within a process such as the current step in an enumerated multi step checkout flow.

location

Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.

date

Represents the current date within a collection of dates such as the current date within a calendar.

time

Represents the current time within a set of times such as the current time within a timetable.

For example, here we use page instead of true.

<nav>
  <ol>
    <li>
      <a href="/page1">Page 1</a>
    </li>
    <li>
      <a href="/page2" aria-current="page">Page 2</a>
    </li>
    <li>
      <a href="/page3">Page 3</a>
    </li>
  </ol>
</nav>

If you want to indicate that an element is not the current element, you can use the false value or just skip the aria-current property entirely on the element.

Using a blank string is not a valid value for this property, so instead of this:

 <a href="/page3" aria-current="">Page 3</a>

you can use false:

 <a href="/page3" aria-current="false">Page 3</a>

or, better yet, skip the property entirely:

 <a href="/page3">Page 3</a>