Diàlegs modals, acordions i tooltips

Aquests tres components tenen en comú que mostren i amaguen contingut, i es diferencien en quant interrompen: el diàleg modal atura tota la resta, l'acordió desplega al seu lloc i el tooltip treu el cap un moment. Cadascun té el seu patró a l'APG (s'obre en una finestra nova) i, des de WCAG 2.1, el contingut que apareix en passar el punter o en enfocar té el seu propi criteri, 1.4.13 Contingut en passar el cursor o en rebre el focus (AA). Aquesta lliçó els recorre amb el codi mínim correcte i les fallades que més es repeteixen.

Diàlegs modals

Vam veure la gestió del focus al curs de teclat; aquí en completem l'estructura. Un diàleg modal accessible necessita:

• Rol dialog (o alertdialog si és un avís que exigeix resposta) i aria-modal="true", tots dos implícits a <dialog> obert amb showModal().
• Nom accessible amb aria-labelledby apuntant al seu títol, que ha de ser un encapçalament (normalment <h2>).
• Opcionalment aria-describedby apuntant al paràgraf explicatiu, perquè el lector el llegeixi en obrir.
• Focus inicial a dins, cicle del focus, Escape per tancar, fons inert i retorn del focus en tancar.
• Un botó de tancar amb nom («Tanca») a més de l'Escape, perquè no tothom coneix la tecla i al mòbil no existeix.
• Que el contingut es pugui desplaçar si no cap a la pantalla, fins i tot amb un zoom del 400 %, sense quedar tallat.

<dialog id="dlg-plazo" aria-labelledby="dlg-plazo-t" aria-describedby="dlg-plazo-d">
  <h2 id="dlg-plazo-t">Amplia el termini de lliurament</h2>
  <p id="dlg-plazo-d">Pots sol·licitar fins a 10 dies naturals addicionals.</p>
  <form method="dialog">
    <label for="dias">Dies addicionals</label>
    <input type="number" id="dias" min="1" max="10">
    <button type="submit" value="cancelar" formnovalidate>Cancel·la</button>
    <button type="submit" value="ampliar">Sol·licita l'ampliació</button>
  </form>
</dialog>

Si el diàleg no és modal (un panell d'ajuda que conviu amb la pàgina), no facis servir aria-modal ni bloquegis el fons; obre'l amb show() i permet que Tab en surti. I una regla de disseny: els diàlegs que s'obren sols en carregar la pàgina (promocions, subscripció al butlletí) són un canvi de context no sol·licitat i una barrera per a tothom; si són inevitables (avís de galetes), han de ser el primer que rep el focus i s'han de tancar amb un botó clar.

Acordions

Un acordió és una pila de seccions el contingut de les quals es desplega en prémer-ne la capçalera. El patró de l'APG és senzill perquè es basa en elements natius: cada capçalera és un encapçalament que conté un botó amb aria-expanded i aria-controls; el panell és un contenidor amb id que es mostra o s'amaga.

<h3>
  <button type="button" aria-expanded="false" aria-controls="acc-1" id="acc-1-b">
    Quina documentació necessito?
  </button>
</h3>
<div id="acc-1" role="region" aria-labelledby="acc-1-b" hidden>
  <p>…</p>
</div>

L'encapçalament manté l'estructura de la pàgina (la persona pot saltar entre seccions amb la tecla H) i el botó aporta el teclat. Retorn i Espai alternen; opcionalment, les fletxes amunt i avall mouen el focus entre capçaleres. No és obligatori que només hi hagi una secció oberta alhora; de fet, permetre'n diverses d'obertes evita que es tanqui el que la persona estava llegint. El role="region" al panell és opcional i només és recomanable si hi ha poques seccions; amb moltes, satura la llista de landmarks.

Una alternativa nativa cada vegada més viable és <details> i <summary>: el navegador aporta el botó, l'estat expandit/contret i el teclat sense JavaScript. Les seves limitacions: el summary no pot ser alhora un encapçalament de manera consistent a tots els navegadors, i l'estil del marcador varia. Per a preguntes freqüents i continguts secundaris és una gran opció.

Tooltips i 1.4.13

Un tooltip és un text breu que apareix en passar el punter per sobre d'un element o en enfocar-lo. El criteri 1.4.13 imposa tres condicions a qualsevol contingut que aparegui així (tooltips, submenús en hover, previsualitzacions, targetes de perfil):

1. Descartable: s'ha de poder tancar sense moure el punter ni el focus, normalment amb Escape, llevat que no tapi res o que sigui un error.
2. Accessible amb el punter: si apareix en passar el punter, la persona ha de poder moure el punter sobre el contingut sense que desaparegui (qui fa servir un ampliador necessita arribar-hi).
3. Persistent: es manté visible fins que es retira el punter o el focus, es descarta o deixa de ser vàlid. Res de desaparèixer al cap de dos segons.

<button type="button" aria-describedby="tip-guardar">
  <svg aria-hidden="true">…</svg> Desa
</button>
<div role="tooltip" id="tip-guardar" hidden>Desa l'esborrany sense enviar-lo (Ctrl+S)</div>

El role="tooltip" amb aria-describedby fa que el lector llegeixi el text com a descripció en enfocar el botó; la visibilitat es controla amb mouseenter/mouseleave (sense amagar-lo mentre el punter sigui sobre el mateix tooltip) i focus/blur, i Escape l'amaga. Dos límits importants: un tooltip és descripció, no nom (si el botó només té una icona, necessita un nom a part), i no ha de contenir elements interactius: el que necessita enllaços o botons no és un tooltip, és un popover o un diàleg no modal que ha de rebre el focus.

L'atribut title genera un tooltip natiu, però no compleix 1.4.13 (no és descartable ni accessible amb el punter), i no apareix amb el teclat a la majoria de navegadors ni a les pantalles tàctils. No el facis servir com a única manera de donar informació.

Com comprovar-ho

• Diàlegs: obre'ls amb teclat, tabula fins a fer la volta, prem Escape, comprova on torna el focus; fes zoom al 400 % i verifica que pots arribar a tots els botons.
• Acordions: amb el lector, comprova que la capçalera s'anuncia com a encapçalament i botó amb el seu estat; amb el panell tancat, el contingut no s'ha de llegir ni enfocar.
• Tooltips: passa-hi el punter per sobre i prem Escape; mou el punter des de l'element fins al tooltip; espera deu segons i confirma que continua allà; enfoca amb Tab i escolta la descripció.

Resum

• Un diàleg modal té rol dialog, nom per aria-labelledby, focus gestionat, fons inert, Escape i botó «Tanca»; <dialog> amb showModal() ho resol gairebé tot.
• Un acordió és un encapçalament amb un botó amb aria-expanded i aria-controls i un panell amagat amb hidden; <details> és l'alternativa nativa.
• Amagar amb height: 0 no retira el contingut de l'arbre d'accessibilitat.
• Un tooltip fa servir role="tooltip" i aria-describedby, és descripció (no nom) i no conté elements interactius.
• 1.4.13 exigeix que tot contingut que apareix amb el punter o el focus sigui descartable, accessible amb el punter i persistent; title no ho compleix.