Skip to content

missing label for screen readers #492

Closed
@alvarocasta

Description

@alvarocasta

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>

example

http://files.paciellogroup.com/blogmisc/ARIA/slider/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions