Slider Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

Slider provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-valuemin, aria-valuenow, aria-valuemax and others.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

The Slider represents an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a track to change the value of the slider. Smart Slider however can have more than one thumbs that can be dragged separately that is why each thumb inside the element has the role slider applied to it.

The following ARIA attributes are used inside the Slider:

  • aria-disabled - indicates that interaction with the Slider is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the Slider and will not be mapped to the accessibility API. This attribute is typically applied to containers that do not provide any feedback regarding the state or the value of the Slider. Such elements are the arrows inside the increment/decrement buttons, the near and far scales of the track.
  • aria-describedby - indicates that the Slider's current value is described by another element. Since the Slider has more than one thumb, each of them has their own tooltip that describes the value. All of them together describe the value of the Slider.
  • aria-valuemax - indicates the maximal value of each thumb of the Slider. Applied to each thumb.
  • aria-valuemin - indicates the minimal value of each thumb of the Slider. Applied to each thumb.
  • aria-valuenow - indicates the current value of each thumb of the Slider. Applied to each thumb.
  • aria-orientation - indicates the orientation of the Slider. The element can be vertical or horizontal.
  • aria-label - defines the labels of the increment/decrement buttons located on both ends of the scale ( if enabled ).
  • aria-valuetext - defines a human readable text alternative of the current value of thumbs of the Slider.

Keyboard Interaction

The Slider element handles keyboard keys according to the official WAI-ARIA specifications for slider components.

The following keyboard shortcuts are available to interact with the Slider:

Key Action
Arrow Down/Up Decrements/Increments the value of the Slider according to the interval property, when one thumb is present. If multiple thumbs are present than ArrowDown increments the value of the near thumb while Arrow Up increments the value of the far thumb.
Arrow Left/Right Decrements/Increments the value of the Slider according to the interval property, when one thumb is available If multiple thumbs are present than ArrowLeft increments the value of the near thumb while Arrow Right increments the value of the far thumb.
Home Sets the value of the Slider to the minimum, when one thumb is present. When multiple are available, it sets the near thumb value to the minimal.
End Sets the value of the Slider to the maximum, when one thumb is present. When multiple are available, it sets the far thumb value to the maximal.
Escape Cancels the dragging operation of a thumb when mechanicalAction is set to 'switchWhenReleased'.

Additional information on WAI-ARIA for the SMART Framework can be found here.