All about aria-current attribute
aria-current attribute is used when an element within collections is visually styled to indicate it is the current item in the set. This can be an active tab on the nav bar which visually is shown active, or make be a breadcrumb link which is active.
For some more info on this topic read on digitala11y
- In short
aria-currentis an attribute defined in the WAI-ARIA specification. This specification extends native HTML, allowing you to change the way an HTML element is "translated" into the accessibility tree.
- It can take multiple values, for example: page, step, location, date, time, false, true
According to the ARIA 1.1 specification, the
aria-current attribute can be given one of a predefined set of values:
- 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 - does not represent item within a set.
Ok, so the concept goes like this:
aria-current the right way.
First we will go throughI am taking an example of my website. Below you see talks section is an active page the user is currently on.
aria-current = page
The active sections
talks indicates the current page in the main navigation. While visible to sighted users, it also uses
aria-current="page" to convey the information to screen reader users.
aria-current="time"are very similar to each other. This can be used when implementing date picker, when we display a list of dates, one being today's date, we should use the `aria-current="date" to mark the current date to screen reader users.
aria-current="step"If we need to indicate the current step within a step indicator of a multi-step process (e.g.: wizard form, multi-step checkout, etc), aria-current="step" should be used to indicate the current step to screen reader users.
If you want to know more about ARIA attributes checkout MDN Docs
Thank you for reading. Subscribe to my newsletter for more of this ❤️