Slider: Slider is missing appropriate role and/or attributes

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How to Fix

A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider. NOTE: The ARIA slider pattern is not accessible with a screen reader on a touch screen. Be sure to include an alternate, accessible input method such as a text field or increment/decrement buttons to input a value.

Fix this issue by using the following ARIA attributes:

1. The element serving as the focusable slider control has role slider.
2. The slider element has the aria-valuenow property set to a decimal value representing the current value of the slider.
3. The slider element has the aria-valuemin property set to a decimal value representing the minimum allowed value of the slider.
4. The slider element has the aria-valuemax property set to a decimal value representing the maximum allowed value of the slider.
5. If the value of aria-valuenow is not user-friendly, e.g., the day of the week is represented by a number, the aria-valuetext property is set to a string that makes the slider value understandable, e.g., "Monday".
6. If the slider has a visible label, it is referenced by aria-labelledby on the slider element. Otherwise, the slider element has a label provided by aria-label.
7. If the slider is vertically oriented, it has aria-orientation set to vertical. The default value of aria-orientation for a slider is horizontal.

View the full ARIA design pattern including expected keyboard interaction and examples: https://www.w3.org/WAI/ARIA/apg/patterns/slider/