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 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 have aria-current="step" for assistive technology users who may not be able to "see" the visual difference. The aria-current attribute indicates the element on which it is set, to a value other than false, represents the current item within a container or set of related
elements. Only mark one element in a set of elements as current with aria-current. The aria-current attribute accepts a limited list of values including page, step, location, date, time, true, and false. Any non-null string value not included in this list of enumerated values is treated as if aria-current="true" were set, not the default false value. If the
attribute is not present, is an empty string, is present with no value, or is set to aria-current="false" it is not exposed to the user. When something is selected rather than current, such as a tab in a tablist, use
aria-selected to indicate the currently-displayed tabpanel. The breadcrumb for the "current page" should have aria-current="page" set on it.
Web technology for developers
Accessibility
ARIA
ARIA States and Properties
ARIA: `aria-current` attribute
If the element representing the current page in the breadcrumb was not a link, the aria-current is optional. page Represents the current page within a set of pages such as the link to the current document in a breadcrumb.Description
Example
Values
Represents the current step within a process such as the current step in an enumerated multi step checkout flow .
locationRepresents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.
dateRepresents the current date within a collection of dates such as the current date within a calendar.
timeRepresents the current time within a set of times such as the current time within a timetable.
trueRepresents the current item within a set.
false [default]Does not represent the current item within a set.
ARIAMixin API
Element.ariaCurrent
The ariaCurrent property, part of the Element interface, reflects the value of the aria-current attribute.
ElementInternals.ariaCurrentThe ariaCurrent property of the ElementInternals interface reflects the value of the aria-current attribute.
Associated roles
Usable in all roles; except in for elements with the role of gridcell, option, row and tab where aria-selected should be used
Specifications
Accessible Rich Internet Applications [WAI-ARIA] # aria-current |