Edit

ARIA Range Control Attributes Missing

  • Article

Text

Element has progressbar or slider role but is not exposing corresponding aria-valuemin , aria-valuemax , and aria-valuenow attributes.

Type

Error

Description

This error applies to elements that have a role (implicit or explicit) that is equal to progressbar, slider, or spinbutton.

According to the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) specification, elements that have the progressbar, slider, or spinbutton role must expose the aria-valuemax, aria-valuemin, and aria-valuenow attributes.

To fix this error, set the aria-valuemax, aria-valuemin, and aria-valuenow attributes, and dynamically maintain the aria-valuenow value to ensure that the current value is exposed. You should also set the aria-valuetext attribute to add more meaning to the exposed aria-valuenow value.

Example

<div role="slider" id="sl" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"…>
</div>

<script>
  // This function should be triggered when the slider value changes.
  function manageValue()
  {
    ...
    sl.setAttribute("aria-valuenow", currentValue);
    sl.setAttribute("aria-valuetext", currentValueText);
    ...
  }
</script>

ARIA Range Control Attributes Incompatible