Element: ariaCurrent property

A string with one of the following values:

"page"

Represents the current page within a set of pages.

"step"

Represents the current step within a process.

"location"

Represents the current location, for example the current page in a breadcrumbs hierarchy.

"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 the current item within a set.

In this example a set of links are used for site navigation. The aria-current attribute indicates the current page. The value page is incorporated into the screen reader announcement. Using ariaCurrent we can update that value.

<nav>
  <ul>
    <li><a id="link-home" href="/" aria-current="page">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Contact</a></li>
  </ul>
</nav>

let el = document.getElementById("link-home");
console.log(el.ariaCurrent); // "page"
el.ariaCurrent = "tab";
console.log(el.ariaCurrent); // "tab"

• Using the aria-current attribute