Forum Discussion
Making Sliders more accessible
I have a slider with three steps. Basically the user has one of two options. They are presented a scenario and they choose between "Starting a new case" or "Amending the existing case"
When using JAWS and arrow keys, the screen reader says zero, one and two as you move right and left. (it starts in the middle).
I would like the screen reader to say Starting a new case for the zero/left option or amending the existing case for the 2 or right option, and say nothing when in the middle.
Accessibility on the slider is simply the slider itself. Is there anywhere I can set different text for the slider stops?
1 Reply
Hi PatrickSmith2 you won't be able to change the text that is read on the slider. A technique I have used for screen readers is to provide more context through further instructions. If they are screen reader only instructions, I hide them either by placing them off slide or behind another object on the slide. Just ensure they are in the correct focus order and can be read by a screen reader prior to the slider component. You could then provide a key along the lines of "0 = No selection, 1 = Starting a new case, 2 = Amending an existing case".
You might also consider using a different component such as radio buttons which would provide a more accessible version as the user would not have to remember a "key" for their selections.
Update: Attached is an untried and tested experiment. It works in JAWS. It uses exclusive layers to force JAWS to announce the text on the new layer. The new layer shown very briefly, but the content within layers is announced to screen readers when Prevent the user from clicking on the other layers property is selected. The layer is also set to auto close and has as shorter timeline as possible. Have a play with this and see if it is robust enough. In my test it didn't appear to affect the natural behaviour of the slider as the focus was returned to it immediately after the text is announced.
