aria-current state

When there are set of elements, one among them is active, we have been communicating this state today with one or other techniques to assistive technology users. Techniques that we have been following:

1. Using off screen techniques
2. Using title techniques
3. Removing href attribute or providing role=”presentation” if they are actionable elements

These are the hacking techniques to convey the current state of the element to the assistive technology users.

aria 1.1 introduced aria-current attribute to convey the current state of the element programmatically. We don’t need to use hacking techniques any more. Aria-current is enumerated type and accepts list of token values. They are,

1. Aria-current=page, represents the current page within the set of the pages. For ex: in the pagination, we can set this attribute to the page which is currently active
2. aria-current=”step”, represents the current step within the process. For ex: in the ecommerse websites, we have checkout process. Typically, checkout process consists of few steps such as billing information, shipping information, payment method, conformation and so on.. we can set aria-current=”step= to the step that is currently active.
3. Aria-current=”location”, represents the current location within the context or environment. For ex: in the flow chart, we can set this attribute to the location that is currently active.
4. Aria-current=”date”, represents the current date within the collection of dates. For ex: in the calendar, we can set this attribute to the date that is currently active
5. aria-current=”time”, represents the current time within the set of times.
6. aria-current=”true”, represents the current item within the set
7. Aria-current=”false”, does not represent the current item within the set.

Notes for assistive technology vendors

• Any other values apart from the mentioned values should be treated as aria-current=”true” by assistive technologies.
• If the attribute is not present or its value is an empty string or undefined, aria-current state MUST NOT be exposed by user agents or assistive technologies.

Author notes

• Author should not use Aria-current and aria-selected interchangeably as they are not one and the same and they are different. In few cases, author might have to use both aria-current and aria-selected. For ex:, in the tree view, aria-current is to be used for the currently active page and aria-select to be used for the item that user is navigated to..
• Authors SHOULD only mark one element in a set of elements as current with aria-current.