Deslizadores, interruptores y otros controles de valor

Hay un grupo de componentes cuya función no es navegar ni abrir nada, sino fijar un valor: el filtro de precio de una tienda, el selector de cantidad de la cesta, el interruptor de «Recibir avisos por SMS» en el área personal del banco, las estrellas para valorar un producto o la barra que indica cuánto falta para terminar de subir un documento a la sede electrónica. Todos comparten un requisito de 4.1.2 Nombre, función, valor que los demás componentes no tienen tan presente: además del nombre y el rol, deben exponer su valor actual, sus límites y sus cambios. Esta lección recorre los patrones de la APG (se abre en una ventana nueva) para cada uno y, como siempre, la alternativa nativa que conviene probar antes.

Deslizadores (slider)

Empieza por <input type="range">: tiene rol slider, expone el valor, responde a las flechas y admite clic en cualquier punto de la pista, lo que cubre 2.5.7 Movimientos de arrastre sin código adicional. Solo necesita una etiqueta y, si el número no basta, un texto que lo explique.

Cuando el diseño obliga a uno personalizado, el patrón APG pide un elemento enfocable con role="slider" y cuatro propiedades: aria-valuenow (valor actual), aria-valuemin y aria-valuemax (límites) y, si el número solo no se entiende, aria-valuetext.

<span id="precio-t">Precio máximo</span>
<div class="pista">
  <div class="mando" role="slider" tabindex="0" aria-labelledby="precio-t"
       aria-valuemin="0" aria-valuemax="500" aria-valuenow="120"
       aria-valuetext="120 euros"></div>
</div>

Tecla	Efecto en el deslizador
Flecha derecha o Flecha arriba	Aumenta un paso
Flecha izquierda o Flecha abajo	Disminuye un paso
Re Pág / Av Pág	Aumenta o disminuye un salto mayor (opcional, muy útil en rangos amplios)
Inicio / Fin	Lleva al mínimo o al máximo

aria-valuetext marca la diferencia en muchos casos reales: «120 euros» en lugar de «120»; «Martes, 14 de octubre» en un deslizador de fechas; «Bastante satisfecho» en una escala de 1 a 5. Actualízalo junto a aria-valuenow en cada cambio.

Para un filtro de rango (precio mínimo y máximo) la APG describe el deslizador de varios mandos: cada mando es un slider independiente con su propio nombre («Precio mínimo», «Precio máximo») y cada uno limita al otro, de modo que el aria-valuemax del mínimo es el valor actual del máximo y viceversa. El orden de tabulación de los mandos no cambia aunque se crucen visualmente.

Selectores numéricos (spinbutton)

El rol spinbutton describe un campo con un valor numérico que se sube y se baja por pasos. El nativo es <input type="number">, con flechas arriba y abajo, min, max y step. Úsalo para cantidades, no para identificadores: un código postal, un número de tarjeta o un DNI no son cantidades, y para ellos es mejor type="text" con inputmode="numeric", que muestra el teclado numérico en el móvil sin flechas ni redondeos.

El caso más común es el selector de cantidad de la cesta: un campo con un botón «menos» a la izquierda y un botón «más» a la derecha.

<label for="cant-123">Cantidad de zapatillas Trail 3</label>
<button type="button" aria-controls="cant-123">
  <span aria-hidden="true">−</span><span class="solo-lector">Reducir cantidad</span>
</button>
<input id="cant-123" type="number" min="1" max="10" value="1">
<button type="button" aria-controls="cant-123">
  <span aria-hidden="true">+</span><span class="solo-lector">Aumentar cantidad</span>
</button>
<div role="status" class="solo-lector"></div>

Cuando la persona pulsa «Aumentar cantidad», el foco sigue en el botón y el lector de pantalla no lee el campo: escribe «Cantidad: 2» en la región de estado para que se anuncie. Y cuidado con los límites: si al llegar a 10 deshabilitas el botón con disabled mientras tiene el foco, el foco se pierde. Es mejor aria-disabled="true" y un anuncio «Cantidad máxima: 10».

Infografía · Conceptos clave

Seis controles de valor y cómo resolverlos

Todos exponen nombre, rol, valor actual y límites; lo nativo resuelve casi todo

• Deslizadorinput type=range o role=slider; flechas, Inicio y Fin
• Rango de dos mandosDos sliders con nombre propio que se limitan entre sí
• Selector numéricoinput type=number para cantidades; botones + y − con nombre
• Interruptorrole=switch con aria-checked; nombre fijo y efecto inmediato
• ValoraciónElegir: botones de opción. Mostrar: texto «4,6 de 5»
• Progreso y medidorprogress y meter con nombre; anuncia inicio, hitos y final

Leer la infografía como texto

Seis tarjetas, una por control de valor. Deslizador: input type range o role slider, que responde a flechas, Inicio y Fin. Rango de dos mandos: dos deslizadores, cada uno con su nombre, que se limitan entre sí. Selector numérico: input type number para cantidades, con botones de más y menos que tienen nombre. Interruptor: role switch con aria-checked, nombre fijo y efecto inmediato. Valoración: para elegir, botones de opción; para mostrar la media, un texto como «4,6 de 5». Progreso y medidor: elementos progress y meter con nombre, que anuncian el inicio, los hitos y el final en lugar de cada porcentaje.

Interruptores (switch)

Un interruptor es un control de dos estados con efecto inmediato, como el de la luz: «Notificaciones por correo», «Modo oscuro», «Usar ubicación». La diferencia con una casilla de verificación es de significado: la casilla expresa una elección que se envía con el formulario; el interruptor cambia algo en el momento. WAI-ARIA 1.2 (se abre en una ventana nueva) tiene el rol switch con el estado aria-checked (true/false).

<!-- Sobre una casilla nativa: teclado y estado gratis -->
<input type="checkbox" role="switch" id="avisos-sms" checked>
<label for="avisos-sms">Avisos por SMS de los movimientos de la cuenta</label>

<!-- Sobre un botón -->
<button type="button" role="switch" aria-checked="false">Modo oscuro</button>

Tres reglas. El nombre no cambia con el estado (igual que con aria-pressed, visto en la lección de botones): el lector añadirá «activado» o «desactivado». El estado no se comunica solo con el color, porque eso incumple 1.4.1 Uso del color: la posición del mando, un texto «Sí/No» visible o un icono lo refuerzan. Y si el cambio tarda (se guarda en el servidor), anuncia el resultado en una región de estado y, si falla, devuelve el interruptor a su posición y explica por qué.

Valoraciones, progreso y medidores

Valorar con estrellas

Para que la persona elija una valoración, no hace falta un componente nuevo: es un grupo de botones de opción nativos dentro de un <fieldset> con su <legend> («Tu valoración»), con etiquetas «1 estrella» … «5 estrellas» y estrellas dibujadas con CSS. Las flechas, la parada única y el anuncio «3 estrellas, botón de opción, 3 de 5» vienen de serie. Para mostrar una valoración media, basta un texto («4,5 de 5 estrellas, 230 opiniones»); si se dibuja con iconos, agrúpalos en un contenedor con role="img" y un aria-label que diga el valor, y oculta los iconos individuales.

Barras de progreso y medidores

<progress> (rol progressbar) indica el avance de una tarea: subida de archivos, generación de un informe. Sin atributo value es indeterminado («procesando»). <meter> (rol meter en ARIA 1.2) mide una magnitud dentro de un rango conocido: espacio usado en la carpeta ciudadana, fortaleza de una contraseña. Ninguno de los dos es interactivo, así que no reciben el foco. Dales nombre con <label> o aria-labelledby y no anuncies cada porcentaje: comunica el inicio, algún hito y el final («Documento subido correctamente») en una región de estado.

Cómo comprobarlo

• Con teclado, recorre cada deslizador y selector numérico con flechas, Inicio, Fin y Re Pág/Av Pág: el valor visible y el anunciado deben coincidir.
• Con lector de pantalla, comprueba que se oye el nombre («Precio máximo»), no el rol genérico, y un valor comprensible («120 euros»).
• Con un solo dedo o un solo clic, sin arrastrar, intenta fijar cada valor (2.5.7).
• Mide mandos y botones «más/menos» (24 por 24 píxeles CSS) y su contraste (3:1).
• Activa y desactiva cada interruptor con la imagen en escala de grises: el estado debe seguir siendo evidente.

Resumen

• Los controles de valor exponen nombre, rol, valor actual (aria-valuenow), límites (aria-valuemin/aria-valuemax) y, si hace falta, aria-valuetext.
• Un deslizador responde a flechas, Re Pág/Av Pág, Inicio y Fin, y permite fijar el valor sin arrastrar (2.5.7).
• Usa type="number" para cantidades y inputmode="numeric" para códigos; en los botones «más/menos», anuncia el nuevo valor y no pierdas el foco en los límites.
• El interruptor (role="switch") tiene efecto inmediato, nombre fijo y estado que no depende solo del color.
• Valorar es un grupo de botones de opción; mostrar una valoración o un progreso es texto o progress/meter con nombre.