aria-autocomplete

Quando usarlo

Su un role="combobox" o role="textbox" personalizzato che offre suggerimenti mentre l’utente digita. L’attributo comunica alla tecnologia assistiva che tipo di completamento automatico attendersi, così l’utente può anticipare se cercarlo nell’input stesso, in un elenco popup, o in entrambi.

Non va applicato a un <input type="text"> nativo ordinario privo di meccanismo di suggerimento — non c’è nulla da annunciare.

Questo attributo viene spesso confuso con l’attributo HTML autocomplete. Sono cose distinte. L’HTML autocomplete ("email", "current-password", "street-address", …) indica al browser come compilare il campo. aria-autocomplete indica alla tecnologia assistiva il pattern di interfaccia implementato dallo sviluppatore. Entrambi possono comparire sullo stesso input senza conflitti.

Come si comporta

Accetta quattro valori token:

• "none" — valore predefinito. Il textbox non effettua completamento automatico. Di solito non è necessario impostarlo esplicitamente.
• "inline" — mentre l’utente digita, il testo suggerito viene aggiunto direttamente all’input, in genere selezionato affinché la pressione successiva del tasto lo sovrascriva.
• "list" — i suggerimenti appaiono in un popup separato (di solito un role="listbox"). Il valore dell’input non cambia automaticamente.
• "both" — entrambi contemporaneamente: l’elenco popup è visibile e il primo suggerimento viene inserito inline nell’input.

Si utilizzi il valore che corrisponde a ciò che l’implementazione fa effettivamente. Se il combobox mostra un menu a discesa di opzioni ma non modifica l’input mentre l’utente digita, si tratta di "list", non di "both".

Errori comuni

• Confonderlo con l’attributo HTML autocomplete. Hanno un aspetto simile, svolgono funzioni diverse e di solito occorrono entrambi.
• Impostare aria-autocomplete="list" senza impostare anche aria-controls per puntare al listbox e aria-expanded per tenere traccia dello stato aperto/chiuso.
• Impostare aria-autocomplete="both" quando l’input non compila mai automaticamente. L’utente percepisce l’affordance e attende un suggerimento inline che non arriva mai.
• Applicare aria-autocomplete a un controllo che non è un textbox o un combobox — ad esempio, un pulsante. L’attributo viene ignorato.
• Dimenticare di gestire aria-activedescendant per l’opzione evidenziata nell’elenco. L’utente capisce che esistono suggerimenti ma non può sapere quale sia attualmente attivo.
• Codificare in modo rigido aria-autocomplete="list" senza verificare l’output dello screen reader. Molte tecnologie assistive hanno pattern di annuncio non uniformi, e il token errato produce formulazioni confuse.

Esempio

<label for="city">Città</label>
<input
  id="city"
  role="combobox"
  type="text"
  autocomplete="address-level2"
  aria-autocomplete="list"
  aria-controls="city-listbox"
  aria-expanded="true"
  aria-activedescendant="city-opt-3"
>
<ul id="city-listbox" role="listbox">
  <li id="city-opt-1" role="option">Bologna</li>
  <li id="city-opt-2" role="option">Brescia</li>
  <li id="city-opt-3" role="option">Bari</li>
</ul>