JavaScript Element ariaCurrent Property

What You’ll Learn

Element.ariaCurrent is an instance property that reflects the aria-current attribute. Learn tokens like page, step, and location, how they mark the current item in a set, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

When a list of related items has one “you are here” item—site nav, a checkout wizard, breadcrumbs, or a calendar—assistive technologies need a clear signal for which item is current. That signal is aria-current.

The DOM property ariaCurrent lets you read and update the same value from JavaScript—useful when a single-page app changes the active link or step without a full page reload.

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

Understanding the Property

MDN: the ariaCurrent property of the Element interface reflects the value of the aria-current attribute, which indicates the element that represents the current item within a container or set of related elements.

• Reflected attribute — mirrors aria-current.
• Get / set — readable and writable string.
• Seven tokens — page, step, location, date, time, true, false.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaCurrent

Value

A string with one of the following values:

📋 Site Navigation (MDN Shape)

MDN shows a nav where one link is marked current with aria-current="page". Screen readers incorporate that value into the announcement. You can update it with ariaCurrent:

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

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

When the route changes, clear the old link ("false" or remove the attribute) and set ariaCurrent = "page" on the new link so only one item stays current.

Examples Gallery

Examples follow MDN Element: ariaCurrent. Labs use a small nav so you can safely read and write the property.

const el = document.getElementById("link-home");
console.log(el.ariaCurrent);

// HTML includes: aria-current="page"

page

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

page
false

const home = document.getElementById("link-home");
const about = document.getElementById("link-about");

home.ariaCurrent = "false";
about.ariaCurrent = "page";

console.log({
  home: home.ariaCurrent,
  about: about.ariaCurrent
});

{
  "home": "false",
  "about": "page"
}

const el = document.createElement("a");
el.href = "/step-2";
el.setAttribute("aria-current", "step");
document.body.appendChild(el);

el.ariaCurrent = "step";
console.log({
  fromProperty: el.ariaCurrent,
  fromAttribute: el.getAttribute("aria-current"),
  same: el.ariaCurrent === el.getAttribute("aria-current")
});

{
  "fromProperty": "step",
  "fromAttribute": "step",
  "same": true
}

console.log({
  supported: "ariaCurrent" in Element.prototype,
  allowed: ["page", "step", "location", "date", "time", "true", "false"],
  tip: "Prefer the most specific token (page, step, location, ...)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["page", "step", "location", "date", "time", "true", "false"],
  "tip": "Prefer the most specific token (page, step, location, ...)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Site navigation: mark the active page with "page".
• Multi-step wizards: mark the active step with "step".
• Breadcrumbs: mark the current crumb with "location".
• Calendars and schedules: "date" / "time" for the selected slot.
• SPA route changes: update ariaCurrent when the view changes without reload.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values are strings: page, step, location, date, time, true, false.
• Only one item in a set should be current at a time.
• Related: ariaDescribedByElements, ariaControlsElements, EventTarget, JavaScript hub.

💡 Best Practices