WAI-ARIA: aria-current (State)
Description
New in ARIA 1.1
Indicates the element that represents the current item within a container or set of related elements.
The aria-current attribute is an enumerated type. Any value not included in the list of allowed values SHOULD be treated by assistive technologies as if the value true had been provided. If the attribute is not present or its value is an empty string or undefined, the default value of false applies and the aria-current state MUST NOT be exposed by user agents or assistive technologies.
The aria-current attribute is used when an element within a set of related elements is visually styled to indicate it is the current item in the set. For example:
- A page token used to indicate a link within a set of pagination links, where the link is visually styled to represent the currently-displayed page.
- A step token used to indicate a link within a step indicator for a step-based process, where the link is visually styled to represent the current step.
- A location token used to indicate the image that is visually highlighted as the current component of a flow chart.
- A date token used to indicate the current date within a calendar.
- A time token used to indicate the current time within a timetable.
Authors SHOULD only mark one element in a set of elements as current with aria-current.
Authors SHOULD NOT use the aria-current attribute as a substitute for aria-selected in widgets where aria-selected has the same meaning. For example, in a tablist, aria-selected is used on a tab to indicate the currently-displayed tabpanel.
Note: In some use cases for widgets that support aria-selected, current and selected can have different meanings and can both be used within the same set of elements. For example, aria-current=”page” can be used in a navigation tree to indicate which page is currently displayed, while aria-selected=”true” indicates which page will be displayed if the user activates the treeitem. Furthermore, the same tree may support operating on one or more selected pages (treeitems) by way of a context menu containing options such as “delete” and “move.”
Browser Compatibility
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaCurrent | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST convey the “date” value | supported | supported | supported | none | supported | supported | supported | none | supported | supported | supported |
MUST convey the “location” value | supported | supported | supported | none | supported | supported | supported | none | supported | supported | supported |
MUST convey the “page” value | supported | supported | supported | none | supported | supported | supported | none | supported | supported | supported |
MUST convey the “step” value | supported | supported | supported | none | supported | supported | supported | none | supported | supported | supported |
MUST convey the “time” value | supported | supported | supported | none | supported | supported | supported | none | none | supported | supported |
MUST convey the “true” value | supported | supported | supported | none | supported | supported | supported | none | supported | supported | supported |
aria-current Example
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="/../../">WAI-ARIA Authoring Practices 1.1</a>
</li>
<li>
<a href="/../../#aria_ex">Design Patterns</a>
</li>
<li>
<a href="/../../#breadcrumb">Breadcrumb Pattern</a>
</li>
<li>
<a href="/./index.html">Breadcrumb Example</a>
</li>
</ol>
</nav>
Characteristics
Used in Roles
- All elements of the base markup
Value
- token:
One of a limited set of allowed values. An explicit value of undefined for this type is the equivalent of providing no value. - page
- Represents the current page within a set of pages.
- step
- Represents the current step within a process.
- location
- Represents the current location within an environment or context.
- date
- Represents the current date within a collection of dates.
- time
- Represents the current time within a set of times.
- true
- Represents the current item within a set.
- false (default)
- Does not represent the current item within a set.
Semantic HTML
No HTML element equivalent.
The aria-current attribute is meant to convey to an assistive technology that this is the current item within an associated collection of elements.
When set to “false”, “”, or the attribute is undefined, nothing is exposed to assistive technologies. Otherwise, aria-current accepts a list of token values that convey the type of item being represented in the set. These are listed below:
- page = Represents the current page within a set of pages
- step = Represents the current step within a process
- location = Represents the current location within an environment or context
- date = Represents the current date within a collection of dates
- time = Represents the current time within a set of times
- true = Represents the current item within a set
aria-current must never be used as a substitute for aria-selected where aria-selected is a required attribute for specific roles.
You can use aria-current in addition to aria-selected when aria-current conveys that one node is currently active, regardless of which element is selected. For example: when a language selector where aria-current conveys the currently chosen language, and arrowing through the listbox conveys which language option is currently selected.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-current. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-current. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-current.
aria-current attribute is not included in the example. Please correct it. Thanks.
Hello Harsha,
Thank you for notifying us, we will correct the example. Thanks a lot!