Skip to main content
Workforce LibreTexts

6.2: Sliders

  • Page ID
    15620
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)

    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.

    A link to an interactive elements can be found at the bottom of this page.

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

    A link to an interactive elements can be found at the bottom of this page.

    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.

    A link to an interactive elements can be found at the bottom of this page.

    Create a <div> for the screen reader instructions.

    A link to an interactive elements can be found at the bottom of this page.

    Dynamically set the value of aria-valuenow based on the value at which the slider thumb is located.

    A link to an interactive elements can be found at the bottom of this page.

    Remove keyboard access from the original text field.

    A link to an interactive elements can be found at the bottom of this page.

    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.

    A link to an interactive elements can be found at the bottom of this page.

    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

    Thumbnail for the embedded element "Accessible Slider"

    A YouTube element has been excluded from this version of the text. You can view it online here: https://pressbooks.library.ryerson.ca/wafd/?p=349


    6.2: Sliders is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.

    • Was this article helpful?