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:
--
-
- Color Viewer Slider Example: Basic horizontal sliders that illustrate setting numeric values for a color picker. -
- Vertical Temperature Slider Example: Demonstrates using
aria-orientationto specify vertical orientation andaria-valuetextto communicate unit of measure for a temperature input.
- - Rating Slider Example: Horizontal slider that demonstrates using
aria-valuetextto make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.
- - Horizontal Multi-Thumb Slider Example: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range. -
Example
-Accessibility Features
--
-
-
- To ensure assistive technology users correctly perceive the maximum slider value, this example uses the
aria-valuetextproperty to communicate both the current and maximum values. - However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included inaria-valuetextonly when the slider is initialized and when the thumb loses keyboard focus. -
- - The display of the slider's current value remains adjacent to the thumb as the thumb is moved, so people with a small field of view (e.g., due to magnification) can easily see the value while focusing on the thumb as they move it. -
-
- To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
- For example, the color of the focus ring border is set to match the foreground color of high contrast mode text by specifying the CSS
currentcolorvalue for thestrokeproperty of the inline SVGrectelement used to draw the focus ring border. - To make the background of therectmatch the high contrast background color, thefill-opacityattribute of therectis set to zero. - If specific colors were instead used to specify thestrokeandfillproperties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.
- Note: The SVG element needs to have the CSSforced-color-adjustproperty set toautofor thecurrentcolorvalue to be updated in high contrast mode. - Some browsers do not useautofor the default value. -
-
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
- |
-
-
|
-
| - |
- 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
- |
-
-
|
-
| - |
- 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. |
-
Assistive Technology Support
-Learn how to interpret and use assistive technology support data
- -JavaScript and CSS Source Code
--
-
- CSS: slider-seek.css -
- JavaScript: slider-seek.js -
HTML Source Code
-To copy the following HTML code, please open it in CodePen.
- -