Stati e proprietà: expanded, checked, disabled

Un ruolo indica che cos'è un elemento. Stati e proprietà indicano come si comporta al momento: è aperto, selezionato, occupato o non disponibile?

Uno stato cambia quando l'utente interagisce, come expanded che passa da un valore all'altro. Una proprietà tende a rimanere invariata, come l'indicazione che un controllo è obbligatorio.

aria-expanded indica agli utenti se l'area associata a un controllo è aperta. Dovete aggiornarlo in JavaScript ogni volta che cambia lo stato.

aria-checked indica se una casella di controllo o uno switch personalizzato è attivo. Una casella di controllo nativa comunica già questa informazione automaticamente.

Nei veri controlli dei moduli, l'attributo HTML disabled li rimuove dal focus e li annuncia automaticamente come non disponibili.

aria-disabled annuncia che un controllo personalizzato è disabilitato, ma non blocca i clic. Dovete comunque impedire l'azione nel codice.

aria-selected contrassegna l'elemento scelto in un tablist, listbox o grid, così gli utenti sanno quale opzione è attiva al momento.

Un pulsante a commutazione usa aria-pressed per indicare lo stato attivo o disattivo, come un pulsante del grassetto che rimane evidenziato mentre il testo è in grassetto.

Il bug più comune sono gli stati obsoleti. Se l'aspetto cambia ma aria-expanded rimane false, gli utenti di screen reader ricevono un'informazione errata.

Alcuni stati contengono numeri. Uno slider espone la propria posizione tramite aria-valuenow, oltre ad aria-valuemin e aria-valuemax per indicare l'intervallo.

Due proprietà utili per i moduli: aria-required indica un campo obbligatorio, mentre aria-invalid annuncia che un campo non ha superato la convalida.

State creando il pulsante di un accordion personalizzato. Quale attributo indica se il relativo pannello è aperto?

Avete imparato che stati e proprietà descrivono la condizione di un elemento. Preferite gli attributi nativi e mantenete sempre sincronizzati gli stati ARIA con l'interfaccia.