Carrusels, taules interactives i arrossegar i deixar anar (2.5.7)

Aquesta lliçó reuneix tres components que combinen moviment, densitat d'informació i gestos: els carrusels de la portada, les taules amb ordenació i filtres, i les interfícies d'arrossegar i deixar anar. Són els que toquen més criteris diferents alhora: temps i moviment (2.2.2 Posar en pausa, aturar, amagar), teclat (2.1.1), nom i estat (4.1.2), gestos (2.5.1 Gestos del punter, 2.5.7 Moviments d'arrossegament) i mida de l'objectiu (2.5.8).

Carrusels

Els carrusels automàtics són un dels components pitjor valorats als estudis d'usabilitat i una font constant d'incompliments. Si l'equip de disseny hi insisteix, el patró Carousel de l'APG (s'obre en una finestra nova) marca el mínim:

• Contenidor amb role="region" (o <section>), aria-roledescription="carrusel" i un nom amb aria-label («Notícies destacades»).
• Control de pausa com a primer element enfocable, amb aria-pressed o text alternant («Posa en pausa la rotació» / «Reprèn la rotació»). És obligatori per 2.2.2 si el moviment dura més de 5 segons i és automàtic. A més, la rotació s'ha d'aturar mentre el punter o el focus siguin dins del carrusel.
• Botons anterior i següent amb nom («Diapositiva anterior», «Diapositiva següent»), d'almenys 24 per 24 píxels CSS.
• Cada diapositiva en un contenidor amb role="group", aria-roledescription="diapositiva" i nom («2 de 5» o el títol de la notícia).
• Indicadors de posició (els punts) com a botons amb nom («Vés a la diapositiva 3») o com a pestanyes si segueixen el patró tablist.
• Diapositives no visibles amagades a l'arbre (aria-hidden="true" o hidden) i sense elements enfocables, perquè Tab no recorri enllaços invisibles.
• Anunci de canvis: si la persona prem «següent», la regió de diapositives pot portar aria-live="polite" mentre la rotació automàtica estigui aturada, i aria-live="off" mentre giri tota sola, per no interrompre cada pocs segons.

<section aria-roledescription="carrusel" aria-label="Notícies destacades">
  <button type="button" aria-pressed="false">Posa en pausa la rotació</button>
  <button type="button">Diapositiva anterior</button>
  <button type="button">Diapositiva següent</button>
  <div aria-live="off">
    <div role="group" aria-roledescription="diapositiva" aria-label="1 de 3">…</div>
    <div role="group" aria-roledescription="diapositiva" aria-label="2 de 3" hidden>…</div>
    <div role="group" aria-roledescription="diapositiva" aria-label="3 de 3" hidden>…</div>
  </div>
</section>

L'alternativa més accessible, i sovint més eficaç, és no fer-lo girar: una graella estàtica amb les tres notícies.

Taules interactives

Sobre la base de la taula de dades accessible del primer curs, les taules amb ordenació, filtres i accions per fila hi afegeixen requisits:

• Ordenació: el control d'ordenar ha de ser un <button> dins del <th>, amb nom («Ordena per data») i, al <th>, aria-sort="ascending|descending|none" actualitzat. En reordenar, anuncia el resultat en una regió d'estat («Ordenat per data, de la més recent a la més antiga»).
• Accions per fila: cada botó necessita un nom que identifiqui la fila («Edita l'expedient 2024/0123»), perquè fora de context «Edita» repetit vint vegades no serveix. Es pot fer amb text amagat de manera accessible o amb aria-labelledby combinant el text del botó i la cel·la identificadora.
• Selecció de files: caselles de selecció natives amb etiqueta («Selecciona l'expedient 2024/0123») i una casella de capçalera «Selecciona-ho tot» que reflecteixi l'estat mixt amb indeterminate.
• Paginació i filtres: anuncia en una regió d'estat el nombre de resultats després de cada canvi; la paginació és un <nav aria-label="Paginació"> amb enllaços o botons i aria-current="page" a la pàgina actual.
• Graelles editables (full de càlcul): només llavors el rol grid de l'APG, amb navegació per cel·les amb fletxes i una sola parada de Tab. Per a una taula que es llegeix, encara que tingui botons, el correcte és una <table> normal. Veuràs el patró grid a fons a la lliçó següent.

Arrossegar i deixar anar i 2.5.7

WCAG 2.2 va afegir el criteri 2.5.7 Moviments d'arrossegament (AA): tota funcionalitat que faci servir un moviment d'arrossegament s'ha de poder fer amb un únic punter sense arrossegar (és a dir, amb clics o tocs), llevat que l'arrossegament sigui essencial o el determini l'agent d'usuari. Afecta reordenar llistes, moure targetes entre columnes (taulers kanban), controls lliscants, retallar imatges, ordenar prioritats i moure elements en un mapa.

Fixa't que 2.5.7 parla de punter, no de teclat: l'alternativa de teclat és exigible per 2.1.1, però a més cal una alternativa de punter sense arrossegament, perquè moltes persones amb tremolor, poca força o que fan servir un llapis o un ratolí de cap poden fer clic però no mantenir premut mentre mouen amb precisió.

<ul aria-label="Ordre de prioritat">
  <li>
    Renovar el DNI
    <button type="button" aria-label="Puja Renovar el DNI">↑</button>
    <button type="button" aria-label="Baixa Renovar el DNI">↓</button>
  </li>
  …
</ul>
<p role="status"></p>

Per als controls lliscants, l'<input type="range"> natiu compleix de sèrie: admet clic en qualsevol punt de la pista i fletxes amb teclat. Les excepcions de 2.5.7 són estretes: dibuixar a mà alçada és essencial; reordenar una llista, no.

Com comprovar-ho

• Carrega la pàgina i espera: si alguna cosa es mou més de 5 segons sense un control de pausa accessible amb teclat, falla 2.2.2.
• Tabula pel carrusel: no hi ha d'haver parades en diapositives invisibles.
• A la taula, ordena amb teclat i escolta l'anunci; obre la llista de botons del lector i verifica que cada acció identifica la seva fila.
• Intenta cada operació d'arrossegament només amb clics i només amb teclat; si alguna és impossible, falla 2.5.7 o 2.1.1.
• Mesura els botons petits dels carrusels i les taules: 24 per 24 píxels CSS o una separació equivalent (2.5.8).

Resum

• Un carrusel automàtic necessita control de pausa (2.2.2), botons amb nom, diapositives amagades a l'arbre i respecte per prefers-reduced-motion; la graella estàtica sol ser millor.
• A les taules interactives, els botons d'ordenar porten aria-sort, les accions de fila identifiquen la fila i els canvis s'anuncien amb role="status".
• Una fila clicable sense enllaç ni botó a dins és inaccessible; l'enllaç real va a la cel·la principal.
• 2.5.7 exigeix una alternativa de punter sense arrossegament (clics, botons, menú «Mou a») per a tota funció d'arrossegar i deixar anar no essencial, a més del teclat.
• Els objectius d'aquests components han de mesurar almenys 24 per 24 píxels CSS (2.5.8).