JavaScript Element ariaValueText Property

What You’ll Learn

Element.ariaValueText is an instance property that reflects the aria-valuetext attribute. Learn how it provides a human-readable alternative to aria-valuenow, how it pairs with min / now / max, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

A day-of-week slider may store aria-valuenow="1", but users should hear “Sunday,” not just “1.” That spoken label is aria-valuetext.

The DOM property ariaValueText lets you read and update that human-readable alternative from JavaScript.

const el = document.getElementById("slider");
console.log(el.ariaValueText); // "Sunday"
el.ariaValueText = "Monday";

Understanding the Property

MDN: the ariaValueText property of the Element interface reflects the value of the aria-valuetext attribute, which defines the human-readable text alternative of aria-valuenow for a range widget.

• Reflected attribute — mirrors aria-valuetext.
• Get / set — readable and writable string.
• Readable label — explains the numeric current value.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaValueText

Value

A string (the human-readable alternative to aria-valuenow).

📋 MDN Slider Example Shape

MDN starts with a slider marked aria-valuetext="Sunday", then updates ariaValueText to "Monday":

<div
  id="slider"
  role="slider"
  aria-valuenow="1"
  aria-valuemin="1"
  aria-valuemax="7"
  aria-valuetext="Sunday"></div>

let el = document.getElementById("slider");
console.log(el.ariaValueText); // "Sunday"
el.ariaValueText = "Monday";
console.log(el.ariaValueText); // "Monday"

Related learning: ariaValueNow, ariaValueMin, and ariaValueMax.

Examples Gallery

Examples follow MDN Element: ariaValueText. Labs use a role="slider" so you can safely read and write the property.

const el = document.getElementById("slider");
console.log(el.ariaValueText);

// HTML includes: aria-valuetext="Sunday"

Sunday

let el = document.getElementById("slider");
console.log(el.ariaValueText); // "Sunday"
el.ariaValueText = "Monday";
console.log(el.ariaValueText); // "Monday"

Sunday
Monday

const el = document.createElement("div");
el.setAttribute("role", "slider");
el.setAttribute("aria-valuemin", "1");
el.setAttribute("aria-valuemax", "7");
el.setAttribute("aria-valuenow", "1");
el.setAttribute("aria-valuetext", "Sunday");
document.body.appendChild(el);

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
el.ariaValueNow = "2";
el.ariaValueText = days[Number(el.ariaValueNow) - 1];
console.log({
  ariaValueNow: el.ariaValueNow,
  ariaValueText: el.ariaValueText
});

{
  "ariaValueNow": "2",
  "ariaValueText": "Monday"
}

const el = document.createElement("div");
el.setAttribute("role", "slider");
el.setAttribute("aria-valuetext", "Sunday");
document.body.appendChild(el);

el.ariaValueText = "Monday";
console.log({
  fromProperty: el.ariaValueText,
  fromAttribute: el.getAttribute("aria-valuetext"),
  same: el.ariaValueText === el.getAttribute("aria-valuetext")
});

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

console.log({
  supported: "ariaValueText" in Element.prototype,
  pairWith: ["aria-valuenow", "aria-valuemin", "aria-valuemax"],
  tip: "Text explains the number — keep both in sync",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "pairWith": ["aria-valuenow", "aria-valuemin", "aria-valuemax"],
  "tip": "Text explains the number — keep both in sync",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Day-of-week or month pickers that should announce names, not only indexes.
• Rating controls that speak “Good” or “Excellent” instead of raw numbers.
• Volume or brightness labels when a percentage needs clearer wording.
• Keeping a spoken label in sync whenever ariaValueNow changes.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Value is a string (a readable label), not required to be numeric.
• Use with ariaValueNow—text explains the number; it does not replace it.
• Related: ariaValueNow, ariaValueMin, ariaValueMax, assignedSlot, EventTarget, JavaScript hub.

💡 Best Practices