Combobox e completamento automatico nel modo giusto

Una combobox è un campo di input associato a un popup di suggerimenti. Pensi alle caselle di ricerca che mostrano a discesa i risultati corrispondenti mentre digita. 🔍

Una combobox ha un text input in cui l'utente digita e un listbox popup separato con le opzioni. ARIA collega i due elementi, così lo screen reader li associa.

Inserisca role="combobox" direttamente sull'input di testo. Questo comunica alle tecnologie assistive che digitare qui farà comparire un elenco di scelte.

Usi aria-controls sull'input e lo imposti sull'id del popup. In questo modo collega il campo al listbox che apre e chiude.

Imposti aria-expanded su true quando l'elenco è visibile e su false quando è nascosto. Gli screen reader annunciano lo stato del popup tramite questo attributo.

Al contenitore dei suggerimenti assegni role="listbox" e a ogni suggerimento role="option". In questo modo offre agli utenti un elenco familiare e navigabile.

Il punto fondamentale è questo: il focus da tastiera non lascia mai l'input. L'utente continua a digitare mentre i tasti freccia spostano l'evidenziazione tra le opzioni.

Imposti aria-activedescendant sull'input, indicando l'id dell'opzione evidenziata. Così lo screen reader legge la scelta attiva senza spostare il focus reale.

Freccia giù e Freccia su spostano tra le opzioni, Enter seleziona quella attiva ed Escape chiude il popup. Questi tasti provengono direttamente dall'APG.

Imposti aria-selected="true" sull'opzione evidenziata e false sulle altre. In una combobox a selezione singola dovrebbe essere selezionata una sola opzione alla volta.

Usi aria-autocomplete per descrivere come compaiono i suggerimenti: "list" per un menu filtrato oppure "both" quando anche il testo viene completato in linea.

L'utente si sposta con la freccia giù tra i suggerimenti della combobox. Quale attributo comunica allo screen reader quale opzione è attiva?

Una combobox è un input più un listbox: li colleghi con aria-controls e aria-expanded, mantenga il focus nel campo e tenga traccia dell'opzione attiva con aria-activedescendant. ✅