ARIA: aria-current attribute

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

Description

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, thearia-current should be used to inform the assistive technology user what has been indicated via styling.

In a breadcrumb list, when a link within a set of pagination links is styled to indicate the user is currently on that page,aria-current="page" should be set on that link. In a multi step based process with a step indicator such as a multi-page survey or a multi step checkout or registration process, when the current step icon is visually different to represent that it is the current step, that icon's container should havearia-current="step" for assistive technology users who may not be able to "see" the visual difference.

Thearia-current attribute indicates the element on which it is set, to a value other thanfalse, represents the current item within a container or set of related elements. Only mark one element in a set of elements as current witharia-current.

Thearia-current attribute accepts a limited list ofvalues includingpage,step,location,date,time,true, andfalse. Any non-null string value not included in this list of enumerated values is treated as ifaria-current="true" were set, not the defaultfalse value. If the attribute is not present, is an empty string, is present with no value, or is set toaria-current="false" it is not exposed to the user.

When something is selected rather than current, such as atab in atablist, usearia-selected to indicate the currently-displayed tabpanel.

Note:Don't usearia-current as a substitute foraria-selected ingridcell,option,row ortab.

Example

The breadcrumb for the "current page" should havearia-current="page" set on it.

html

<nav aria-label="Breadcrumb">  <ol>    <li>      <a href="../../../../../">Web technology for developers</a>    </li>    <li>      <a href="../../../../">Accessibility</a>    </li>    <li>      <a href="../../../">ARIA</a>    </li>    <li>      <a href="../../">ARIA States and Properties</a>    </li>    <li>      <a href="./" aria-current="page">ARIA: `aria-current` attribute</a>    </li>  </ol></nav>

If the element representing the current page in the breadcrumb was not a link, thearia-current is optional.

Values

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.
true: Represents the current item within a set.
false (default): Does not represent the current item within a set.

Associated interfaces

Element.ariaCurrent: TheariaCurrent property, part of theElement interface, reflects the value of thearia-current attribute.
ElementInternals.ariaCurrent: TheariaCurrent property of theElementInternals interface reflects the value of thearia-current attribute.