# All about aria-current attribute

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](https://www.digitala11y.com/aria-current-state/)

* In short `aria-current` is an attribute defined in the [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#aria-current) 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.*

![](https://i.ibb.co/YknwVh8/Screenshot-2020-05-26-at-21-09-13.png align="left")

```javascript

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

Some resources to checkout if you interested to learn more on `aria-current`  [a11ysupport.io](http://a11ysupport.io), [tink.uk](http://tink.uk)

If you want to know more about ARIA attributes checkout [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

Thank you for reading. Subscribe to my newsletter for more of this ❤️