Controls lliscants, interruptors i altres controls de valor

Hi ha un grup de components la funció dels quals no és navegar ni obrir res, sinó fixar un valor: el filtre de preu d'una botiga, el selector de quantitat de la cistella, l'interruptor de «Rebre avisos per SMS» a l'àrea personal del banc, les estrelles per valorar un producte o la barra que indica quant falta per acabar de pujar un document a la seu electrònica. Tots comparteixen un requisit de 4.1.2 Nom, funció i valor que els altres components no tenen tan present: a més del nom i el rol, han d'exposar el seu valor actual, els seus límits i els seus canvis. Aquesta lliçó recorre els patrons de l'APG (s'obre en una finestra nova) per a cadascun i, com sempre, l'alternativa nativa que convé provar abans.

Controls lliscants (slider)

Comença per <input type="range">: té rol slider, exposa el valor, respon a les fletxes i admet clic en qualsevol punt de la pista, cosa que cobreix 2.5.7 Moviments d'arrossegament sense codi addicional. Només necessita una etiqueta i, si el número no n'hi ha prou, un text que l'expliqui.

Quan el disseny obliga a fer-ne un de personalitzat, el patró APG demana un element enfocable amb role="slider" i quatre propietats: aria-valuenow (valor actual), aria-valuemin i aria-valuemax (límits) i, si el número tot sol no s'entén, aria-valuetext.

<span id="precio-t">Preu màxim</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	Efecte en el control lliscant
Fletxa dreta o Fletxa amunt	Augmenta un pas
Fletxa esquerra o Fletxa avall	Disminueix un pas
Re Pàg / Av Pàg	Augmenta o disminueix un salt més gran (opcional, molt útil en rangs amplis)
Inici / Fi	Porta al mínim o al màxim

aria-valuetext marca la diferència en molts casos reals: «120 euros» en lloc de «120»; «Dimarts, 14 d'octubre» en un control lliscant de dates; «Força satisfet» en una escala d'1 a 5. Actualitza'l juntament amb aria-valuenow a cada canvi.

Per a un filtre de rang (preu mínim i màxim) l'APG descriu el control lliscant de diversos cursors: cada cursor és un slider independent amb el seu propi nom («Preu mínim», «Preu màxim») i cadascun limita l'altre, de manera que l'aria-valuemax del mínim és el valor actual del màxim i viceversa. L'ordre de tabulació dels cursors no canvia encara que es creuin visualment.

Selectors numèrics (spinbutton)

El rol spinbutton descriu un camp amb un valor numèric que es puja i es baixa per passos. El natiu és <input type="number">, amb fletxes amunt i avall, min, max i step. Fes-lo servir per a quantitats, no per a identificadors: un codi postal, un número de targeta o un DNI no són quantitats, i per a aquests és millor type="text" amb inputmode="numeric", que mostra el teclat numèric al mòbil sense fletxes ni arrodoniments.

El cas més comú és el selector de quantitat de la cistella: un camp amb un botó «menys» a l'esquerra i un botó «més» a la dreta.

<label for="cant-123">Quantitat de sabatilles Trail 3</label>
<button type="button" aria-controls="cant-123">
  <span aria-hidden="true">−</span><span class="solo-lector">Redueix la quantitat</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">Augmenta la quantitat</span>
</button>
<div role="status" class="solo-lector"></div>

Quan la persona prem «Augmenta la quantitat», el focus continua al botó i el lector de pantalla no llegeix el camp: escriu «Quantitat: 2» a la regió d'estat perquè s'anunciï. I compte amb els límits: si en arribar a 10 inhabilites el botó amb disabled mentre té el focus, el focus es perd. És millor aria-disabled="true" i un anunci «Quantitat màxima: 10».

Infografia · Conceptes clau

Sis controls de valor i com resoldre'ls

Tots exposen nom, rol, valor actual i límits; el que és natiu ho resol gairebé tot

• Control lliscantinput type=range o role=slider; fletxes, Inici i Fi
• Rang de dos cursorsDos sliders amb nom propi que es limiten entre si
• Selector numèricinput type=number per a quantitats; botons + i − amb nom
• Interruptorrole=switch amb aria-checked; nom fix i efecte immediat
• ValoracióTriar: botons d'opció. Mostrar: text «4,6 de 5»
• Progrés i mesuradorprogress i meter amb nom; anuncia l'inici, les fites i el final

Llegeix la infografia com a text

Sis targetes, una per control de valor. Control lliscant: input type range o role slider, que respon a fletxes, Inici i Fi. Rang de dos cursors: dos controls lliscants, cadascun amb el seu nom, que es limiten entre si. Selector numèric: input type number per a quantitats, amb botons de més i menys que tenen nom. Interruptor: role switch amb aria-checked, nom fix i efecte immediat. Valoració: per triar, botons d'opció; per mostrar la mitjana, un text com «4,6 de 5». Progrés i mesurador: elements progress i meter amb nom, que anuncien l'inici, les fites i el final en lloc de cada percentatge.

Interruptors (switch)

Un interruptor és un control de dos estats amb efecte immediat, com el del llum: «Notificacions per correu», «Mode fosc», «Fes servir la ubicació». La diferència amb una casella de selecció és de significat: la casella expressa una elecció que s'envia amb el formulari; l'interruptor canvia alguna cosa en aquell moment. WAI-ARIA 1.2 (s'obre en una finestra nova) té el rol switch amb l'estat aria-checked (true/false).

<!-- Sobre una casella nativa: teclat i estat de franc -->
<input type="checkbox" role="switch" id="avisos-sms" checked>
<label for="avisos-sms">Avisos per SMS dels moviments del compte</label>

<!-- Sobre un botó -->
<button type="button" role="switch" aria-checked="false">Mode fosc</button>

Tres regles. El nom no canvia amb l'estat (igual que amb aria-pressed, vist a la lliçó de botons): el lector hi afegirà «activat» o «desactivat». L'estat no es comunica només amb el color, perquè això incompleix 1.4.1 Ús del color: la posició del cursor, un text «Sí/No» visible o una icona el reforcen. I si el canvi triga (es desa al servidor), anuncia el resultat en una regió d'estat i, si falla, torna l'interruptor a la seva posició i explica per què.

Valoracions, progrés i mesuradors

Valorar amb estrelles

Perquè la persona triï una valoració, no cal cap component nou: és un grup de botons d'opció natius dins d'un <fieldset> amb el seu <legend> («La teva valoració»), amb etiquetes «1 estrella» … «5 estrelles» i estrelles dibuixades amb CSS. Les fletxes, la parada única i l'anunci «3 estrelles, botó d'opció, 3 de 5» vénen de sèrie. Per mostrar una valoració mitjana, n'hi ha prou amb un text («4,5 de 5 estrelles, 230 opinions»); si es dibuixa amb icones, agrupa-les en un contenidor amb role="img" i un aria-label que digui el valor, i amaga les icones individuals.

Barres de progrés i mesuradors

<progress> (rol progressbar) indica l'avanç d'una tasca: pujada de fitxers, generació d'un informe. Sense l'atribut value és indeterminat («s'està processant»). <meter> (rol meter a ARIA 1.2) mesura una magnitud dins d'un rang conegut: espai utilitzat a la carpeta ciutadana, fortalesa d'una contrasenya. Cap dels dos no és interactiu, així que no reben el focus. Dona'ls nom amb <label> o aria-labelledby i no anunciïs cada percentatge: comunica l'inici, alguna fita i el final («Document pujat correctament») en una regió d'estat.

Com comprovar-ho

• Amb teclat, recorre cada control lliscant i selector numèric amb fletxes, Inici, Fi i Re Pàg/Av Pàg: el valor visible i l'anunciat han de coincidir.
• Amb lector de pantalla, comprova que se sent el nom («Preu màxim»), no el rol genèric, i un valor comprensible («120 euros»).
• Amb un sol dit o un sol clic, sense arrossegar, intenta fixar cada valor (2.5.7).
• Mesura els cursors i els botons «més/menys» (24 per 24 píxels CSS) i el seu contrast (3:1).
• Activa i desactiva cada interruptor amb la imatge en escala de grisos: l'estat ha de continuar sent evident.

Resum

• Els controls de valor exposen nom, rol, valor actual (aria-valuenow), límits (aria-valuemin/aria-valuemax) i, si cal, aria-valuetext.
• Un control lliscant respon a fletxes, Re Pàg/Av Pàg, Inici i Fi, i permet fixar el valor sense arrossegar (2.5.7).
• Fes servir type="number" per a quantitats i inputmode="numeric" per a codis; als botons «més/menys», anuncia el nou valor i no perdis el focus als límits.
• L'interruptor (role="switch") té efecte immediat, nom fix i un estat que no depèn només del color.
• Valorar és un grup de botons d'opció; mostrar una valoració o un progrés és text o progress/meter amb nom.