Controls

Accessible range sliders: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

A slider selects a value from an ordered range. Prefer a native range input when it fits, expose the current value and provide a direct-entry alternative when precision or non-dragging operation is important.

A practical example

A text-size preview includes a slider and a numeric percentage field. Either control updates the same value, allowing a person to choose 150 percent without dragging precisely.

Try the example

Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.

Use the arrow keys while the slider has focus. Native keyboard behavior can vary by browser.

How to check it

  1. Focus the slider and use arrows and supported boundary keys to change its value.
  2. Check the announced label, current value, bounds and any text needed to explain units.
  3. Set a precise value without dragging and confirm that the preview and alternate input remain synchronized.

What can be missed

A visible number adjacent to a custom slider may not be its accessible value. Touch assistive-technology support needs real-device testing, particularly for custom slider implementations.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<label for="preview-size">Text size, percent</label>
<input id="preview-size" type="range" min="100" max="200" step="10" value="150">
<output for="preview-size">150%</output>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.