Técnica Técnicas generales WCAG 2.2
G216Permitir manejar un control deslizante con simples toques o clics
Nombre oficial en el W3C: Proporcionar una activación con puntero único en un control deslizante
En pocas palabras
Un control deslizante es una barra con un tirador que se arrastra para elegir un valor, como el volumen o el importe de un préstamo. Esta técnica pide que también se pueda fijar el valor con un toque o clic. Por ejemplo, tocando un punto de la barra o usando botones de más y menos.
Por qué es importante
Arrastrar el tirador exige pulsar, mantener y mover con precisión. Para personas con temblores, poca movilidad o que usan un puntero en la cabeza puede ser imposible.
Además, con el lector de pantalla del móvil activado, los gestos de arrastrar suelen no llegar al control. Si no hay otra vía, la persona no puede elegir el valor.
Cómo se hace
- Siempre que pueda, parta del control nativo
<input type="range">. Ya funciona con teclado y con los gestos del lector de pantalla. - Haga que la barra responda a un toque o clic: el tirador salta al punto pulsado.
- Añada botones «Menos» y «Más» para ajustar el valor paso a paso con precisión.
- Si el valor es exacto, como una cantidad de dinero, ofrezca también un campo de texto para escribirlo.
- Muestre el valor actual junto al control.
Cómo comprobarlo
- Localice los controles deslizantes de la página.
- Sin arrastrar, toque o haga clic en distintos puntos de la barra y verifique que el valor cambia.
- Si hay botones de más y menos, compruebe que funcionan con un solo toque.
- Confirme que puede alcanzar cualquier valor sin arrastrar.
Ejemplo
Un control deslizante nativo para el importe de una donación, con botones para ajustarlo.
<label for="importe">Importe de la donación (€)</label>
<button type="button" aria-controls="importe">Menos</button>
<input type="range" id="importe" min="5" max="100" step="5" value="20">
<button type="button" aria-controls="importe">Más</button>
<output for="importe">20 €</output>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G216 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Aplicabilidad
Cualquier tecnología que admita la entrada mediante puntero (por ejemplo, que admita alguno o todos los siguientes: puntero del ratón, toque en pantalla táctil o panel táctil, entrada con lápiz o entrada con puntero láser).
Descripción
El objetivo de esta técnica es garantizar que los usuarios con dificultades para realizar gestos basados en trayectoria puedan manejar un control deslizante. Un control deslizante es una pista con un «cursor» que se desplaza a lo largo de la pista para fijar un valor.
Permite al usuario fijar un valor dentro de un rango determinado, por ejemplo, ajustar el volumen, cambiar el tono de un color, introducir la cantidad de dinero necesaria en un simulador de préstamo o elegir el importe que se va a donar a una organización benéfica. Un deslizador que requiera gestos basados en trayectoria utilizaría el deslizamiento a izquierda o derecha para cambiar el valor, o el arrastre del cursor del deslizador en una dirección concreta para cambiar el valor.
Una alternativa sencilla para activarlo sin un gesto basado en trayectoria es hacer que la pista del control deslizante responda al clic. De esta forma, el valor puede indicarse con un solo toque o clic en la pista.
Proporcionar controles (por ejemplo, botones con flechas) como alternativa también permite aumentar o disminuir el valor con toques o clics. Esto puede permitir un ajuste más fino del valor.
En los dispositivos con pantalla táctil, los gestos basados en trayectoria implementados por quien desarrolla no suelen funcionar cuando está activada una tecnología de asistencia (TA) del sistema operativo, como el lector de pantalla integrado. Esto se debe a que la TA, por lo general, consume los gestos basados en trayectoria, de modo que no llegan al contenido desarrollado. Sin embargo, cuando los controles personalizados se construyen sobre controles nativos, también pueden manejarse con los gestos de la TA, como el deslizamiento vertical para cambiar el valor (véase el ejemplo 1).
Ejemplo
Un control deslizante personalizado construido sobre un deslizador nativo (input type range) permite a los usuarios deslizar a izquierda y derecha o arrastrar el cursor del deslizador para cambiar su valor. La pista del deslizador permite tocar o hacer clic para situar el cursor en la posición activada. Unos botones estándar a ambos lados permiten aumentar y disminuir el valor del deslizador mediante toque, clic o activación con el teclado.
Pruebas
Procedimiento
Para cada control deslizante que responda a gestos basados en trayectoria:
- Comprobar que el valor del control deslizante (rango) puede fijarse con un toque o un clic usando un puntero.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G216 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.