Custom Controls Roles

In ogni pagina Web, i controlli personalizzati devono avere un determinato ruolo.

Accessibility

Ruoli ARIA nei controlli personalizzati

In ogni pagina web, i controlli personalizzati devono avere un ruolo appropriato, con tutti gli attributi ARIA richiesti che conferiscono loro proprietà e stato. Per esempio: per trasmettere correttamente lo stato, una casella di controllo personalizzata deve avere role="checkbox" e aria-checked="true|false".

Come posso testarlo ed eventualmente risolvere il problema?

È possibile utilizzare uno screen reader o il pannello di accessibilità di ChromeDevTools per verificare che tutti i controlli interattivi personalizzati abbiano i ruoli ARIA appropriati.

Nei CSS, gli elementi <div> e <button> forniscono esperienze diverse quando vengono ispezionati da uno screen reader: il <div> è annunciato attraverso il suo contenuto testuale, mentre il <button> è annunciato come un pulsante, cioè qualcosa con cui l'utente può interagire. 

È possibile risolvere la situazione evitando di utilizzare controlli interattivi personalizzati: non utilizzare un <div> con la funzione pulsante, ma provare a utilizzare direttamente un vero <button>.

Se però è necessario mantenere il <div>, assegnargli un role="button" e aria-pressed="false".

In questo modo, gli screen reader sono in grado di annunciare il ruolo e lo stato interattivo del <div>.