Detailed overview of the accessibility features implemented in CoreUI React Range Slider, ensuring compliance with WAI-ARIA guidelines.
Accessibility
Each handle is a native <input type="range">, so it is a slider with its value, minimum and maximum without any ARIA of its own, and the browser handles the keyboard: the arrow keys, Page Up, Page Down, Home and End. In a vertical slider the handles carry aria-orientation="vertical", and → increases the value in every browser, as ↑ does.
The slider is a group. Give it the name of the field, with aria-labelledby pointing at a visible label or with aria-label: a screen reader announces the group, “Budget”, when the focus enters it, and then each handle by its own name, so it can tell the handles of one slider from another’s. A single handle repeats the name of the group, since it has none of its own. aria-describedby describes every handle. Name the handles themselves with ariaLabel: an array with one name per handle, or a function (index, total) => string. Without it, two handles are named “Minimum value” and “Maximum value” and more handles “Value 1”, “Value 2” and so on. A single handle has no generated name: it takes the name of the group, followed by its ariaLabel when it has one, or a <label> for its id. A role you pass replaces group on the slider. While a handle sits on a tick labelled with text, its aria-valuetext adds the label to the value (“50, Medium”, or the tooltipsFormat text followed by the label when they differ).
Tooltips and tick marks are hidden from assistive technology (aria-hidden="true"): a tooltip repeats the value the handle already announces, and a tick label reaches the handle through aria-valuetext while the handle sits on its tick.