Media Seek Slider Example

About This Example

Warning!

Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

The following example of the Slider Pattern illustrates a seek control that could be used to move the current play position in an audio or video media player. The example demonstrates how to use aria-valuetext to provide assistive technology users with meaningful names for numeric values. In this case, the value of the control is the position in seconds. For example, if the play position were 4 minutes and 3 seconds from the start, the slider value is 243. If aria-valuetext were not used, assistive technology users would be told that the position is 243, which is significantly more difficult to comprehend than 4 minutes, 3 seconds. So, the code converts the slider value to a string that communicates the position in minutes and seconds and provides that value via aria-valuetext.

Similar examples include:

Example

Seek
1:30 0:00 1:00 2:00 3:00 4:00 5:00

Accessibility Features

Keyboard Support

Key Function
Right Arrow Increases slider value one step.
Up Arrow Increases slider value one step.
Left Arrow Decreases slider value one step.
Down Arrow Decreases slider value one step.
Page Up Increases slider value 15 steps.
Page Down Decreases slider value 15 steps.
Home Sets slider to its minimum value.
End Sets slider to its maximum value.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
none svg The use of the none role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.
slider g
  • Identifies the element as a slider.
  • Set on the g element that represents as the movable thumb because it is the operable element that represents the slider value.
tabindex="0" g Includes the slider thumb in the page tab sequence.
aria-valuemax="NUMBER" g Specifies a numeric value that is the maximum value the slider can have.
aria-valuemin="NUMBER" g Specifies a numeric value that is the minimum value the slider can have.
aria-valuenow="NUMBER" g A numeric value that is the current value of the slider.
aria-valuetext="STRING" g
  • A string value that provides a user-friendly name for the current value of the slider. In this example, it is the value converted to minutes and seconds.
  • Additionally includes the maximum value in minutes when the slider is initialized and when the thumb receives keyboard focus.
  • Note: To prevent unnecessary screen reader verbosity, the maximum value is not included when the value changes.
aria-labelledby="IDREF" g Refers to the element containing the name (e.g. label) of the slider.
aria-hidden="true" rect Removes the SVG rect element from the accessibility tree to prevent assistive technologies from presenting it as an image separate from the slider.

JavaScript and CSS Source Code

HTML Source Code