5. Interactive WAI-ARIA (Intermediate)
Sliders typically allow users to select a value between minimum and maximum values by dragging a slider thumb along a slider bar or track.
WAI-ARIA roles, states, and properties used in a slider
- tabindex=”[0 | -1]”
Define some instructions that describe how to use the slider for screen reader users.
tabindex="0" to make the slider thumb keyboard focusable. Assign a
role="slider" to the text box so it announces as a slider instead of a text entry field. Set
aria-valuenow values, and reference the instructions with
.on('keydown') reference the
onKeyDown function to add keyboard operability to the slider.
<div> for the screen reader instructions.
Dynamically set the value of
aria-valuenow based on the value at which the slider thumb is located.
Remove keyboard access from the original text field.
Adding Keyboard Operability
WAI-ARIA authoring practices defines recommended keyboard functionality for a slider, listed below.
Keyboard Interaction for a Slider
- Right Arrow: Increase the value of the slider by one step.
- Up Arrow: Increase the value of the slider by one step.
- Left Arrow: Decrease the value of the slider by one step.
- Down Arrow: Decrease the value of the slider by one step.
- Home: Set the slider to the first allowed value in its range.
- End: Set the slider to the last allowed value in its range.
- Page Up (Optional): Increment the slider by an amount larger than the step change made by Up Arrow.
- Page Down (Optional): Decrement the slider by an amount larger than the step change made by Down Arrow.
Add keyboard event handling to our slider widget. In our case, we will add Left and Right Arrow controls for moving the slider thumb along the slider bar, and End and Home controls for moving the slider thumb between the start and end of the slider bar.
Accessible Slider in Action
Watch the following video of ChromeVox interacting with a slider. The Arrow keys are used to move the slider thumb along the slider bar, and the Home and End keys are used to move the slider thumb between the start and the end of the slider bar. You may notice that ChromeVox interprets “min” as “minute” rather than min and max that define the range along the slider bar. Aim to have the slider you update in the activity that follows on the next page operate and announce like the one in the video.
Video: Accessible Slider