Input ranges, also known as sliders, are commonly used in web and mobile applications to allow users to select a value within a range. However, many of these input ranges are not accessible to all users, which can make it difficult for some users to use them effectively. In this post, we’ll explore how to make input ranges more accessible, improving the user experience for everyone.

Using HTML5 Range Input

HTML5 introduced the range input type, which provides a built-in input range element with a slider. This is the easiest and most accessible way to create an input range. The range input can be customized with CSS to match the style of the application.

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1" value="50">

Improving Accessibility

While the range input type is accessible, there are still some ways to improve the user experience for all users.

Labeling the Range Input

The range input should be labeled using a label element. The label element should have a for attribute that matches the id of the range input. This makes it easier for screen reader users to understand what the range input is for.

The range input should be labeled using a label element. The label element should have a for attribute that matches the id of the range input. This makes it easier for screen reader users to understand what the range input is for.

Providing Text Alternatives

For users who are unable to see the slider, it’s important to provide an alternative way to interact with the range input. This can be achieved by providing a text input element alongside the range input. The text input should be linked to the range input, so that when the user changes the value in the text input, the range input updates accordingly.

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1" value="50">
<input type="number" id="volume-value" name="volume-value" min="0" max="100" step="1" value="50" aria-hidden="true">

<script>
  const volumeRange = document.getElementById('volume');
  const volumeValue = document.getElementById('volume-value');
  volumeRange.addEventListener('input', (event) => {
    volumeValue.value = event.target.value;
  });
  volumeValue.addEventListener('change', (event) => {
    volumeRange.value = event.target.value;
  });
</script>

Styling the Range Input

Finally, it’s important to ensure that the range input is styled in a way that makes it easy to use for all users. The slider should be large enough and have enough contrast to make it visible to users with low vision. The slider should also have a clear focus style so that keyboard-only users can easily see which element is currently focused.

input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 8px 0;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ddd;
  border-radius: 4px;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background-color: #555;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {