Rol Control

`slider`

Marca un elemento como entrada que selecciona un valor dentro de un rango. Se recomienda usar <input type="range"> en primer lugar; solo se debe recurrir a role="slider" cuando se necesite una pista personalizada — por ejemplo, un selector de rango de dos pulgadores, que el elemento nativo no admite.

Cuándo se debe usar

Se debe usar <input type="range">. El elemento nativo proporciona soporte de teclado, gestos táctiles, marcas de escala mediante <datalist> y un value que se envía con el formulario.

role="slider" está reservado para controles personalizados que el elemento nativo no puede expresar:

Selectores de rango de dos pulgadores (precio mínimo/máximo).
Escalas no lineales (logarítmicas, selectores de color escalonados).
Deslizadores estilizados de una forma que el elemento nativo no puede lograr en un sistema de diseño determinado.

Contrato de teclado y foco

Conforme al patrón de deslizador APG:

La tecla Tab desplaza el foco al pulgador del deslizador.
Las teclas de flecha Derecha/Arriba aumentan el valor en un paso; las de Izquierda/Abajo lo reducen.
Re Pág / Av Pág saltan un incremento mayor (típicamente el 10 %).
Inicio salta a aria-valuemin; Fin salta a aria-valuemax.

Se DEBEN establecer aria-valuenow, aria-valuemin y aria-valuemax. Si el valor numérico no es autoexplicativo («3» — ¿tres qué?), se debe añadir aria-valuetext="3 stars" para que los lectores de pantalla anuncien la versión significativa.

Para los deslizadores de dos pulgadores, se deben renderizar dos elementos role="slider" independientes, cada uno con su propio mínimo y máximo que refleje la posición del otro pulgador.

Errores frecuentes

aria-valuenow ausente en el primer renderizado. El deslizador no tiene ningún valor anunciado.
El valor del deslizador no se actualiza tras arrastrarlo. Los lectores de pantalla informan del valor original indefinidamente.
Un deslizador de volumen de «0 a 100» sin aria-valuetext — el usuario escucha «47» sin ninguna unidad.
Paso del teclado demasiado grueso. Un deslizador de 0 a 100 que salta en incrementos de 10 impide que los usuarios de lector de pantalla seleccionen el valor 53.
Los deslizadores de dos pulgadores renderizados como un único elemento con aria-valuetext="20 to 80". El usuario no puede ajustar ninguno de los dos límites de forma independiente.

Ejemplo

<!-- Opción preferida -->
<label for="vol">Volume</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Deslizador personalizado -->
<div id="brightnessLabel">Brightness</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>