Verifica che tutti i controlli personalizzati abbiano un role appropriato e tutti gli attributi ARIA richiesti che ne conferiscano le proprietà e lo stato.
Ad esempio, una casella di controllo personalizzata deve avere role="checkbox" e
aria-checked="true|false" per comunicare correttamente il suo stato.
Scopri come utilizzare ARIA e HTML per capire quando è meglio fornire la semantica mancante per i controlli personalizzati.
Come eseguire il test
Per verificare che tutti i controlli interattivi personalizzati abbiano ruoli ARIA appropriati, testa la pagina utilizzando il riquadro di accessibilità di Chrome DevTools o uno screen reader.
JAWS e NVDA sono due degli screen reader più diffusi per Windows. VoiceOver è lo screen reader integrato in macOS.
Con CSS, puoi applicare uno stile agli elementi <div> e <button> per trasmettere le stesse
attrattive visive, ma l'esperienza è molto diversa quando utilizzi uno
screen reader. Un <div> è solo un elemento di raggruppamento generico, pertanto uno screen reader annuncia solo il contenuto di testo del <div>.
<button> viene annunciato come "pulsante", un segnale molto più forte per l'utente
che si tratta di un elemento con cui può interagire.
Vedi anche Semantica e screen reader.
Soluzione
La soluzione migliore è evitare del tutto i controlli interattivi personalizzati. Ad esempio, sostituisci un <div> che funziona come un pulsante
con un <button> effettivo.
<button>Learn more</button>
Se devi utilizzare un <div>, aggiungi role="button" e aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Ora gli screen reader annunciano il ruolo e lo stato interattivo per <div>.
Perché è importante
Se non hai mai utilizzato una tecnologia per la disabilità, potresti non sapere quale sia il rendimento dei tuoi contenuti per gli utenti di queste tecnologie. Idealmente, puoi rivolgerti a gli utenti che utilizzano regolarmente le tecnologie per la disabilità e che possono condividere feedback sul funzionamento del tuo sito web o della tua applicazione web.
Un altro modo per capire in che modo gli utenti delle tecnologie per la disabilità utilizzano i tuoi contenuti è eseguire test con le tecnologie per la disabilità. L'utilizzo di uno screen reader ti aiuta a comprendere meglio come sono etichettati i tuoi contenuti e se ci sono ostacoli alla navigazione.
Risorse
Puoi esaminare il codice sorgente per il controllo I controlli personalizzati hanno ruoli ARIA