All about aria-current attribute

aria-current

The 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-current is 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:

Using 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="date" and 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.

• aria-current="step"
  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.

Some resources to checkout if you interested to learn more on aria-current  a11ysupport.io, tink.uk

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."