JavaScript Element ariaValueText Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAVALUETEXT

Definition

Element.ariaValueText reflects the aria-valuetext attribute: a human-readable text alternative for aria-valuenow on a range widget (MDN). Use it when the number alone is unclear.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaValueText. Start with this line.

JavaScript
el.ariaValueText / el.ariaValueText = value
CallWhat it does
el.ariaValueText / el.ariaValueText = valuePrimary signature.

Built into the browser. Read or assign el.ariaValueText — no import required.

Library declarations
JavaScript
el.ariaValueText / el.ariaValueText = value

Parameters

ParameterDescription
Range widgetRequired. slider / spinbutton / meter / progressbar…
Text stringOptional. What assistive tech announces instead

Return Value

Return ValueDescription
*The current value of el.ariaValueText.

JavaScript Examples

Example 1 — Read ariaValueText

Log the friendly label from a day-of-week slider.

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

// HTML: aria-valuetext="Sunday" aria-valuenow="1"
Try It Yourself

How It Works

  1. Find the slider. getElementById returns the range widget node.
  2. Read the reflection. ariaValueText returns the aria-valuetext string.
  3. Interpret "Sunday". Assistive technologies can announce the day name instead of "1".
  4. Missing attribute. If unset, many browsers return null and AT falls back to ariaValueNow.

Example 2 — Update the Text (MDN)

MDN: change the label from "Sunday" to "Monday".

JavaScript
const el = document.getElementById("slider");

console.log(el.ariaValueText); // "Sunday"
el.ariaValueText = "Monday";
console.log(el.ariaValueText); // "Monday"
console.log(el.getAttribute("aria-valuetext")); // "Monday"
Try It Yourself

How It Works

  1. Start at Sunday. The first log shows the initial friendly label.
  2. Assign a string. el.ariaValueText = "Monday" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "Monday".
  4. In a real UI. Also set ariaValueNow to the matching day index (for example "2").

Example 3 — Keep Text and Now in Sync

Update both properties together when the slider moves.

JavaScript
const days = ["", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const el = document.getElementById("slider");
const next = 3;

el.ariaValueNow = String(next);
el.ariaValueText = days[next];

console.log(el.ariaValueNow);  // "3"
console.log(el.ariaValueText); // "Tuesday"
Try It Yourself

How It Works

  1. Keep a numeric model. ariaValueNow stays a number string for the range.
  2. Map to a label. Day 3 becomes "Tuesday".
  3. Set both. When both exist, assistive technologies announce the text (MDN).
  4. Update together. Never leave an old day name after now changes.
Compatibility

Browser Support

Element.ariaValueText is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaValueText

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaValueText IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaValueText Excellent

Bottom line: Safe for modern web apps. Use valuetext when numbers need a friendly label, and keep ariaValueNow in sync.

Frequently Asked Questions

It reflects the aria-valuetext attribute as a string that provides a human-readable text alternative for aria-valuenow on a range widget.
No. MDN marks Element.ariaValueText as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
Yes in most cases. MDN says aria-valuetext is used with aria-valuenow, not instead of it, unless the numeric value is not known.
Only when the numeric value is not meaningful by itself — for example days of the week, college class levels, or “8% (34 minutes) remaining”. If the number is clear (pizza slices = 3), skip it.
When both aria-valuetext and aria-valuenow are present, the valuetext string is announced. Without valuetext, the numeric valuenow is announced (MDN).
Yes. Reading and writing ariaValueText updates the reflected aria-valuetext attribute. Keep it in sync whenever ariaValueNow changes.

Next: assignedSlot

Learn the assignedSlot property — which <slot> an element is assigned to in the shadow DOM.

assignedSlot tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Element ariaValueNow Property JavaScript Element assignedSlot Property