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.
aria-current the right way.
- First we will go through
aria-current = page
I am taking an example of my website. Below you see talks section is an active page the user is currently on.
<a aria-current="page" class="css-wbxg5e active" href="/talks" style="font-size: 1em;"><i>Talks</i></a>
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, and when it's today's date, we should use the `aria-current="date" to mark the current date to screen reader users.
If we need to indicate the current step within a step indicator of a multi-step process (e.g: multi-step checkout process 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
This article was originally published on https://www.manjuladube.dev/. Head over there if you like this post and want to read others like it."