5. Interactive WAI-ARIA (Intermediate)

Sliders

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]"
  • role="slider"
  • aria-valuemin="[number]"
  • aria-valuemax="[number]"
  • aria-valuenow="[number]"
Suggested Reading: Additional information about creating accessible sliders can be found in the WAI-ARIA Best Practices.

The following JSFiddle presents a typical slider widget. Review the JavaScript and HTML markup. Test the slider presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking the “Edit in JSFiddle” at the top, right-hand side, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the slider before completing Activity 8 on the page that follows.

Define some instructions that describe how to use the slider for screen reader users.

Add a 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-valuemin, aria-valuemax, and aria-valuenow values, and reference the instructions with aria-describedby. Using .on('keydown') reference the onKeyDown function to add keyboard operability to the slider.

Create a <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.
Note:
  1. Focus is placed on the slider (the visual object that the mouse user would move, also known as the thumb).
  2. In some circumstances, reversing the direction of the value change for the keys specified above (e.g., having Up Arrow decrease the value) could create a more intuitive experience.

Source: W3C WAI-ARIA 1.1 Best Practices

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

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

Web Accessibility for Developers by Ryerson University, The Chang School is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book