The HTML aria-valuetext attribute
The aria-valuetext attribute supplies a human-readable text alternative to aria-valuenow, so a screen reader announces "Medium" or "Tuesday" instead of a bare number.
Overview
The aria-valuetext attribute provides a human-readable text alternative for the current value of a range widget.
It describes a range widget — a slider, progress bar or spin button (role="slider", "progressbar", "spinbutton"). Native <input type="range">, <progress> and <meter> elements expose their values automatically, so reach for these attributes only when building a custom widget.
Like all ARIA, aria-valuetext changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="slider" aria-valuenow="2" aria-valuetext="Medium"></div>Values
| Value |
|---|
| A string. |
Example
<div role="slider" aria-valuemin="1" aria-valuemax="3" aria-valuenow="1" aria-valuetext="Small" tabindex="0"></div>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Prefer native <input type="range">, <progress> or <meter>, which expose their values for free.
- On a custom range widget, set the min, max and current value together and keep the current value updated.
- Add aria-valuetext when a bare number is not meaningful (e.g. "Medium" rather than "2").