Accessibility in React Range slider component

30 Jan 20239 minutes to read

The Slider is characterized with complete ARIA Accessibility support that helps to access by on-screen readers and other assistive technology devices. This component is designed with the reference of guidelines document given in the WAI ARAI Accessibility Practices.

The Slider component uses the Slider role and the following ARIA properties for its element based on the state.

Property	Functionalities
aria-valuenow	It Indicates the current value of the slider.
aria-valuetext	Returns the current text of the slider.
aria-valuemin	It Indicates the Minimum value of the slider.
aria-valuemax	It Indicates the Maximum value of the slider.
aria-orientation	It Indicates the Slider Orientation.
aria-label	Slider left and right button label text (increment and decrement).
aria-labelledby	It indicates the name of the Slider.

Keyboard interaction

The Keyboard interaction of the Slider component is designed based on the WAI-ARIA Practices described for Slider. Users can use the following shortcut keys to interact with the Slider.

Keyboard shortcuts	Actions
Right Arrow   |   Up Arrow	Increase the Slider value.
Left Arrow   |   Down Arrow	Decrease the Slider value.
Home	Moves to the start value (for Range Slider when the second thumb is focused and the Home key is pressed, it moves to the first thumb value).
End	Moves to the end value (for Range Slider when the first thumb is focused and the End key is pressed, it moves to the second thumb value).
Page Up	Increases the Slider by `largeStep` value.
Page Down	Decreases the Slider by `largeStep` value.

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let ticks01 = {
        placement: "After",
        largeStep: 20,
        smallStep: 10,
        showSmallTicks: true
    };
    let tooltip01 = { placement: "Before", isVisible: true, showOn: "Always" };
    let ticks02 = { placement: "After", largeStep: 1 };
    let tooltip02 = { placement: "Before", isVisible: true };
    let value = 30;
    let step = 10;
    let showButtons = true;
    function renderingTicksHandler(args) {
        // Weekdays Array
        let daysArr = [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thrusday",
            "Friday",
            "Saturday"
        ];
        // Customizing each ticks text into weeksdays
        args.text = daysArr[parseFloat(args.value.toString())];
    }
    function tooltipChangeHandler(args) {
        // Customizing tooltip to display the Day (in numeric) of the week
        args.text = "Day " + (Number(args.value) + 1).toString();
    }
    return (<div id="container">
      <div className="wrap">
        <div className="label">Slider without formatted values</div>
        <SliderComponent id="slider" step={step} value={value} tooltip={tooltip01} ticks={ticks01} type="MinRange" showButtons={true}/>
      </div>
      <div className="wrap">
        <div className="label">Slider with formatted values</div>
        <SliderComponent id="slider1" min={0} max={6} step={1} value={2} tooltip={tooltip02} ticks={ticks02} tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let ticks01: TicksDataModel = {
    placement: "After",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  let tooltip01: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };

  let ticks02: TicksDataModel = { placement: "After", largeStep: 1 };
  let tooltip02: TooltipDataModel = { placement: "Before", isVisible: true };

  let value = 30;
  let step = 10;
  let showButtons = true;

  function renderingTicksHandler(args: SliderTickEventArgs) {
    // Weekdays Array
    let daysArr: string[] = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thrusday",
      "Friday",
      "Saturday"
    ];
    // Customizing each ticks text into weeksdays
    args.text = daysArr[parseFloat(args.value.toString())];
  }

  function tooltipChangeHandler(args: SliderTooltipEventArgs) {
    // Customizing tooltip to display the Day (in numeric) of the week
    args.text = "Day " + (Number(args.value) + 1).toString();
  }

  return (
    <div id="container">
      <div className="wrap">
        <div className="label">Slider without formatted values</div>
        <SliderComponent
          id="slider"
          step={step}
          value={value}
          tooltip={tooltip01}
          ticks={ticks01}
          type="MinRange"
          showButtons={true}
        />
      </div>
      <div className="wrap">
        <div className="label">Slider with formatted values</div>
        <SliderComponent
          id="slider1"
          min={0}
          max={6}
          step={1}
          value={2}
          tooltip={tooltip02}
          ticks={ticks02}
          tooltipChange={tooltipChangeHandler.bind(this) as any}
          renderingTicks={renderingTicksHandler.bind(this) as any}
        />
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));