Combobox, listbox i autocompletació

El cercador d'estacions d'un web de transport, el camp «Municipi» d'una sol·licitud a la seu electrònica o el cercador amb suggeriments d'una botiga en línia són el mateix component: un camp de text que, mentre escrius, desplega una llista d'opcions. L'APG (s'obre en una finestra nova) l'anomena combobox i és, de molt, el patró que més s'implementa malament. Al curs de formularis vas veure quan n'hi ha prou amb un <select> natiu; aquesta lliçó s'ocupa del que ve després: el combobox editable, la llista d'opcions (listbox) que l'acompanya i les decisions d'autocompletació. Aplica directament la tècnica aria-activedescendant de la lliçó «Ginys compostos».

Abans de construir: de debò necessites un combobox?

Necessitat	Solució recomanada
Triar una opció entre poques (fins a 5-7)	Botons d'opció natius dins de <fieldset>
Triar una opció d'una llista coneguda i no gaire llarga	<select> natiu, que ja té escriptura anticipada
Triar entre centenars de valors (municipis, estacions, productes)	Combobox editable amb llista filtrada
Escriure text lliure amb suggeriments opcionals	Combobox amb aria-autocomplete="list"
Triar d'una llista sempre visible, una o diverses opcions	listbox (o caselles de selecció natives si són poques)

L'element <datalist> sembla una solució nativa per als suggeriments, però la seva presentació, la mida del text i el seu comportament amb lectors de pantalla i zoom varien entre navegadors, i amb prou feines admet estil. Serveix per a prototips o eines internes; per a un servei públic o un comerç, el patró APG et dona control i resultats previsibles.

Anatomia del combobox segons WAI-ARIA 1.2

A ARIA 1.2 el rol combobox es posa al mateix camp de text, no en un contenidor que l'embolcalli, com feia el patró d'ARIA 1.1. Si trobes codi amb un div role="combobox" que conté l'input, és el model antic. El model actual té aquestes peces:

<label for="origen">Estació d'origen</label>
<input id="origen" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="true"
       aria-controls="origen-lista" aria-activedescendant="origen-op-2"
       autocomplete="off">
<ul id="origen-lista" role="listbox" aria-label="Estacions">
  <li id="origen-op-1" role="option" aria-selected="false">Madrid - Chamartín</li>
  <li id="origen-op-2" role="option" aria-selected="true">Madrid - Puerta de Atocha</li>
  <li id="origen-op-3" role="option" aria-selected="false">Málaga - María Zambrano</li>
</ul>
<div role="status" class="solo-lector">3 estacions trobades</div>

• role="combobox" a l'input, amb una etiqueta visible associada per <label>.
• aria-expanded reflecteix si la llista està desplegada (true/false); actualitza'l cada vegada que s'obri o es tanqui.
• aria-controls apunta a l'id de la llista emergent. La llista sol ser un listbox, que és el valor per defecte; si és una altra cosa (un arbre, una graella o un diàleg), declara-ho amb aria-haspopup.
• aria-activedescendant apunta a l'opció ressaltada, mentre el focus del DOM roman al camp perquè la persona pugui continuar escrivint. Quan no n'hi ha cap de ressaltada, elimina l'atribut o deixa'l buit.
• Cada opció té role="option", un id únic i aria-selected="true" a la que està ressaltada.
• autocomplete="off" evita que els suggeriments del navegador tapin els teus. Fes-lo servir només en camps com aquest; no l'apliquis a camps de dades personals (nom, correu, adreça), que necessiten el seu valor d'autocomplete per complir 1.3.5 Identificació del propòsit de l'entrada.

Els quatre tipus d'autocompletació

L'atribut aria-autocomplete diu al lector de pantalla què passarà mentre s'escriu:

• none: la llista no depèn del que s'ha escrit (per exemple, sempre mostra les cinc cerques recents).
• list: la llista es filtra amb el que s'escriu. És el cas més habitual i el més fàcil d'entendre.
• inline: el text que falta es completa dins del mateix camp, seleccionat, perquè s'accepti o se sobreescrigui.
• both: llista filtrada i, a més, completació en línia de la primera coincidència.

La completació en línia estalvia pulsacions, però pot desconcertar persones amb discapacitat cognitiva o qui dicta per veu, perquè el camp conté text que no ha escrit. Si la fas servir, que el text afegit es vegi clarament seleccionat i que Supr o continuar escrivint el descarti.

El teclat que cal implementar

Tecla	Comportament
Escriure	Filtra la llista i la desplega si hi ha resultats; no mou el focus del camp.
Fletxa avall	Obre la llista si està tancada; si està oberta, ressalta l'opció següent.
Fletxa amunt	Ressalta l'opció anterior (opcionalment, obre la llista i ressalta l'última).
Alt+Fletxa avall	Obre la llista sense ressaltar cap opció.
Retorn	Accepta l'opció ressaltada, n'escriu el text al camp i tanca la llista.
Escape	Tanca la llista; opcionalment, si ja estava tancada, buida el camp.
Fletxes esquerra i dreta, Inici, Fi	Mouen el cursor dins del text, com en qualsevol camp; no naveguen per la llista.
Tab	Tanca la llista i passa al camp següent; no ha d'acceptar en silenci una opció que la persona no ha triat.

Amb el ratolí o el dit, un clic en una opció l'accepta. Un detall tècnic evita moltes fallades: si tanques la llista a l'esdeveniment blur del camp, el clic a l'opció arriba tard perquè la llista ja ha desaparegut. Crida preventDefault() al mousedown de la llista perquè el camp no perdi el focus, o endarrereix el tancament.

Anunciar sense aclaparar

Una persona cega no veu que la llista s'ha desplegat ni quantes opcions té. A més d'aria-expanded, una regió role="status" (vista al curs de WAI-ARIA (s'obre en una finestra nova)) informa del nombre de resultats: «12 estacions trobades. Fes servir les fletxes per triar». Tres regles perquè ajudi en lloc de molestar:

1. Endarrereix l'anunci uns centenars de mil·lisegons després de l'última pulsació, per no llegir un recompte diferent amb cada lletra.
2. No facis servir role="alert" per a això: interromp el que el lector estigui dient, inclòs l'eco del que s'escriu.
3. Anuncia també el buit: «No hi ha estacions que coincideixin amb "Madri"». Una llista que no apareix no comunica res per si sola.

Listbox independent i combobox només de selecció

Un listbox també pot anar sol, sempre visible: un selector d'idiomes per traduir un document o la llista de destinataris d'una notificació. Si admet diverses seleccions, porta aria-multiselectable="true"; aria-selected marca cada opció triada, i el model recomanat per l'APG és que Espai alterni la selecció de l'opció enfocada mentre les fletxes només es mouen. Si són poques opcions, les caselles de selecció natives en un <fieldset> són més senzilles i ningú no ha d'aprendre un teclat nou.

L'APG documenta, a més, un combobox només de selecció (select-only combobox): un element no editable amb role="combobox" i tabindex="0" que es comporta com un <select> personalitzat. És útil quan el disseny exigeix mostrar a cada opció alguna cosa que el <select> no permet, com una icona o un text secundari; però costa força més de mantenir. Pregunta't abans si un <select> estilitzat no n'hi ha prou.

Com comprovar-ho

• Escriu, recorre els suggeriments amb fletxes, accepta amb Retorn, tanca amb Escape i surt amb Tab: el camp no ha de perdre mai el focus ni emplenar-se tot sol.
• Amb lector de pantalla, comprova que sents el rol, l'estat contret o expandit, el recompte de resultats i cada opció amb la seva posició.
• Comprova el ressaltat: l'opció activa s'ha de distingir amb alguna cosa més que el color i amb un contrast mínim de 3:1, i no ha de quedar fora de la vista en baixar.
• Amplia al 400 %: la llista hi ha de cabre o desplaçar-se sense tapar el camp.
• Obre el patró Combobox de l'APG i compara el teu component amb els seus exemples tecla per tecla.

Resum

• Abans de construir un combobox, descarta els botons d'opció i el <select> natiu; <datalist> és poc previsible.
• A ARIA 1.2 el rol combobox va al camp, amb aria-expanded, aria-controls i aria-activedescendant; les opcions són role="option" amb aria-selected.
• aria-autocomplete (none, list, inline, both) anuncia com es comporta el camp en escriure.
• El focus no surt del camp; les fletxes ressalten, Retorn accepta, Escape tanca, i ressaltar no és navegar (3.2.2).
• Una regió role="status" amb retard anuncia el nombre de resultats, inclòs el zero.