aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext — Range Value Communication

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

Range ARIA attributes aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext communicate numeric and textual values for slider, progressbar, scrollbar, and spinbutton roles.

In this tutorial, you'll learn how to use range attributes in ARIA range widgets.

What You'll Learn

By the end of this lesson, you'll understand how to define range boundaries, communicate current values, and provide text alternatives for numeric values.

Why It Matters

Range widgets like sliders and progress bars communicate values that are invisible to screen readers without these attributes.

Real-World Use

Durga Antivirus Pro uses these attributes for scan progress bars and threat severity sliders.

Range Value Attributes

flowchart TD
  A[Range Widget] --> B[aria-valuemin]
  A --> C[aria-valuemax]
  A --> D[aria-valuenow]
  A --> E[aria-valuetext]
  B --> F[Minimum value (default 0)]
  C --> G[Maximum value (default 100)]
  D --> H[Current value]
  E --> I[Human-readable current value]

How Range Attributes Work

<div role="slider"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="50"
     aria-valuetext="50 percent"
     tabindex="0"
     aria-label="Volume">
</div>

The screen reader announces: "Volume, slider, 50 percent".

Required vs Optional

aria-valuetext

Use aria-valuetext to provide a human-readable version of the numeric value:

<div role="progressbar"
     aria-valuenow="75"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuetext="75 percent complete - Scanning malware.exe"
     aria-label="Scan progress">
</div>

The screen reader announces the valuetext instead of the raw number.

Dynamic Updates

function updateSlider(slider, value) {
  slider.setAttribute('aria-valuenow', value);
  slider.setAttribute('aria-valuetext', value + ' percent');

  // Update visual position
  const range = slider.getAttribute('aria-valuemax') - slider.getAttribute('aria-valuemin');
  const percent = (value / range) * 100;
  slider.style.left = percent + '%';
}

Common Mistakes

• Omitting aria-valuenow on range roles: Required for meaningful communication.
• Using values outside the min-max range: Keep valuenow between valuemin and valuemax.
• Not providing aria-valuetext for complex values: Raw percentages are less helpful than descriptive text.
• Forgetting keyboard support for sliders: Arrow keys should adjust the value.
• Not updating aria-valuetext when value changes: Stale text contradicts the numeric value.

Practice and Challenge

1. What are the four range ARIA attributes? aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext.

2. Which attribute is required for a slider? aria-valuenow.

3. What is the default value for aria-valuemin? 0.

4. When should you use aria-valuetext? When the numeric value needs additional context or a human-readable description.

5. Challenge: Build a custom slider for setting scan sensitivity from 0 to 100. Use all four range attributes and implement keyboard arrow key adjustment.

FAQ

Mini Project

Build a custom progress bar that shows scan progress. Use role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax, and aria-valuetext. Update dynamically as the scan progresses.

What's Next

Continue to aria-keyshortcuts to learn about exposing keyboard shortcuts.