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.
Note: Don't use aria-current as a substitute for aria-selected in gridcell, option, row or tab.
The breadcrumb for the "current page" should have aria-current="page" set on it.
<nav aria-label="Breadcrumb" class="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, 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.
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.
Element.ariaCurrent
The ariaCurrent property, part of the Element interface, reflects the value of the aria-current attribute.
ElementInternals.ariaCurrent
The ariaCurrent property of the ElementInternals interface reflects the value of the aria-current attribute.
Usable in all roles; except for elements with the role of gridcell, option, row and tab where aria-selected should be used
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4