Closed
Description
Steps to reproduce
Use ChromeVox (screen reader) and get the focus on the slider.
Expected behaviour
the slider should be described by the screen reader with a custom sentence.
Actual behaviour
the screen reader describes the slider as "slider {currentValue}". Not really helping to someone who only can use this voice to interact with the slider.
possible solution
following this post, one of the solution would be adding aria-describedby to the rz-pointer. So the description will be taken from the element associated with the passed id.
https://www.paciellogroup.com/blog/2008/05/aria-slider-part-1/
In the example below, the slider will be described by the screen reader as "Volume slider 20 percent". Much better description.
<p id="sliderDescription">Volume</p>
<div class="sliderRail">
<button class="sliderThumb" role="slider" title="Volume"
aria-describedby="sliderDescription" aria-valuemin="0"
aria-valuemax="100" aria-valuenow="20" aria-valuetext="20 percent">
</button>
</div>