I ruoli definiscono che cosa è un elemento

Un ruolo indica alle tecnologie assistive il tipo di elemento: un pulsante, una scheda, un avviso, una finestra di dialogo. Risponde alla domanda: che cos'è?

La maggior parte dei tag HTML include un ruolo implicito. Un nav è una sezione di navigazione, un h1 è un'intestazione e un button è un pulsante.

Quando nessun tag nativo è adatto, impostate manualmente l'attributo role per assegnare a un elemento generico un'identità riconosciuta.

I ruoli dei widget descrivono elementi interattivi che a volte create manualmente: tab, slider, switch, menuitem e treeitem.

I ruoli di riferimento suddividono la pagina in aree come banner, main e navigation, così gli utenti possono passare direttamente a una sezione.

I ruoli di struttura descrivono contenuti statici: heading, list, listitem e figure. Indicano la forma delle vostre informazioni.

Un elemento ha un solo ruolo. Non potete trasformare contemporaneamente qualcosa in un pulsante e in un collegamento: scegliete l'identità che corrisponde alla sua funzione reale.

Scegliere un ruolo significa stipulare un contratto. role=tab implica un elemento tablist genitore, il supporto da tastiera e un tabpanel associato.

Non assegnate mai un ruolo a un elemento che possiede già quello corretto. Un ruolo ridondante su un vero pulsante aggiunge solo rumore e rischi.

role=presentation priva un elemento della sua semantica. È utile per una tabella usata per il layout, ma pericoloso su qualsiasi elemento che gli utenti debbano comprendere.

Prima di tutto, impostate correttamente il ruolo. Stati e proprietà hanno senso solo quando l'elemento ha un'identità chiara a cui associarli.

Avete imparato che un ruolo indica che cos'è un elemento. Preferite i ruoli impliciti nativi, aggiungete un solo ruolo esplicito quando serve e rispettatene il contratto.