Accessibilità dei widget di completamento automatico

Lo schema combobox WAI-ARIA definisce un insieme specifico di ruoli e proprietà per i widget di autocomplete. Un combobox è un elemento input associato a un popup listbox. Lo schema garantisce che i lettori di schermo annuncino correttamente il comportamento interattivo, le opzioni disponibili e la selezione corrente agli utenti che non possono vedere l'interfaccia visiva.

Racchiuda l'input in un div con role="combobox". In questo modo comunica alle tecnologie assistive che l'input dispone di un popup associato. Imposti aria-expanded={isOpen} su questo wrapper per indicare ai lettori di schermo se l'elenco dei suggerimenti è attualmente visibile o nascosto.

L'elemento input stesso deve avere: aria-autocomplete="list" (il popup contiene un elenco di suggerimenti), aria-haspopup="listbox" (un clic o la digitazione apre un listbox), aria-expanded={isOpen} e aria-controls="suggestion-list-id", che fa riferimento all'id dell'elemento che contiene l'elenco a discesa.

aria-activedescendant sull'input fa riferimento all'id dell'opzione attualmente evidenziata. Quando selectedIndex è 0, imposti aria-activedescendant="option-0". I lettori di schermo usano questo attributo per annunciare l'elemento attivo senza spostare il focus effettivo dall'input. Quando non è selezionato alcun elemento, rimuova l'attributo oppure lo imposti su una stringa vuota.

L'elemento contenitore del dropdown deve avere role="listbox" e un id univoco che corrisponda a aria-controls dell'input. Questo ruolo comunica all'albero dell'accessibilità che l'elemento è un elenco di opzioni selezionabili. Il listbox riceve il focus indirettamente tramite aria-activedescendant sull'input.

Ogni elemento suggerito deve avere role="option" e un id univoco, ad esempio option-0, option-1 e così via. Aggiunga aria-selected={index === selectedIndex} per indicare quale elemento è attualmente evidenziato. Quando l'utente si sposta con i tasti freccia, i lettori di schermo annunciano sia il contenuto dell'opzione sia se è selezionata.

Quando l'utente preme ArrowDown e aria-activedescendant si aggiorna a option-1, VoiceOver annuncia qualcosa come "hook React, 2 di 5". Il lettore di schermo legge automaticamente il testo dell'opzione e la sua posizione nell'elenco, in base al markup ARIA. Per la navigazione da tastiera non sono necessarie ulteriori regioni live.

Esegua i test con VoiceOver su macOS (Cmd+F5 per attivarlo o disattivarlo) e con NVDA su Windows (download gratuito). Porti il focus sull'input e inizi a digitare. Verifichi che il lettore di schermo annunci il ruolo combobox, il numero di risultati trovati e ogni opzione mentre si sposta con i tasti freccia. Confronti il comportamento con gli esempi della WAI-ARIA Authoring Practices Guide.

Quando i suggerimenti vengono caricati in modo asincrono, aggiunga un div visivamente nascosto con aria-live="polite" e aria-atomic="true". Aggiorni il contenuto testuale quando il caricamento è completato: "5 risultati trovati" oppure "Nessun risultato trovato". Il lettore di schermo annuncia questo messaggio dopo aver terminato il parlato corrente, mantenendo l'utente informato senza interromperlo.

La WAI-ARIA Authoring Practices Guide (APG), disponibile all'indirizzo w3.org/WAI/ARIA/apg, contiene una pagina dedicata allo schema combobox con esempi di codice funzionanti e specifiche dettagliate sulle interazioni da tastiera. Faccia sempre riferimento all'APG quando implementa widget interattivi come autocomplete, finestre di dialogo o schede, per garantire la piena conformità ai requisiti di accessibilità.

Fornisca un aria-label sull'input se non esiste un elemento label visibile: aria-label="Search suggestions". Non faccia affidamento esclusivamente su placeholder per le etichette: i placeholder scompaiono quando l'utente digita e non vengono annunciati in modo uniforme da tutti i lettori di schermo. Un elemento label visibile con htmlFor è sempre l'opzione migliore.

Qual è lo scopo dell'attributo aria-activedescendant su un input di autocomplete?

Usi role="combobox" sul wrapper, aria-autocomplete="list" sull'input, nonché aria-expanded, aria-controls e aria-activedescendant per collegare l'input all'elenco dei suggerimenti. Ogni opzione richiede role="option", un id univoco e aria-selected. Aggiunga una regione aria-live per il conteggio asincrono dei risultati.