Verifica che tutti i controlli personalizzati abbiano un valore role appropriato e
tutti gli attributi ARIA obbligatori che conferiscono le proprietà e lo stato.
Ad esempio, una casella di controllo personalizzata ha bisogno dei valori role="checkbox" e
aria-checked="true|false" per trasmetterne correttamente lo stato.
Consulta l'introduzione ad ARIA per una panoramica generale di come ARIA può fornire la semantica mancante per i controlli personalizzati.
Come eseguire il test manuale
Per verificare che tutti i controlli interattivi personalizzati abbiano ruoli ARIA appropriati, testa la pagina utilizzando il riquadro Accessibilità di Chrome DevTools o uno screen reader. JAWS e NVDA sono due dei più diffusi screen reader per Windows. VoiceOver è lo screen reader integrato in MacOS.
Con CSS, puoi definire gli elementi <div> e <button> in modo che trasmettano le stesse caratteristiche visive, ma le due esperienze sono molto diverse quando si utilizza uno screen reader.
<div> è semplicemente un elemento di raggruppamento generico,
quindi uno screen reader annuncia solo i contenuti testuali di <div>.
<button> viene annunciato come un "pulsante",
un segnale molto più forte per l'utente che può interagire.
Vedi anche Semantica e screen reader.
Soluzione
La soluzione più semplice e spesso migliore a questo problema è evitare del tutto controlli interattivi personalizzati.
Ad esempio, sostituisci un elemento <div> che funge da pulsante
con un elemento <button> effettivo.
Se devi mantenere <div>,
aggiungi role="button" e aria-pressed="false" a <div>.
Ora gli screen reader annunceranno il ruolo e lo stato interattivo di <div>.
Perché è importante
L'unico modo per capire veramente in che modo gli utenti delle tecnologie per la disabilità interagiscono con i tuoi contenuti è verificarli in prima persona utilizzando uno screen reader. L'utilizzo di uno screen reader in prima persona ti consentirà di capire chiaramente come sono etichettati i tuoi contenuti e se sono presenti ostacoli alla navigazione con tecnologie assistive. Se non hai dimestichezza con il modo in cui il markup semantico viene interpretato dalle tecnologie per la disabilità, consulta l'articolo Introduzione alla semantica per un ripasso.
Vedi anche Come eseguire un controllo sull'accessibilità.
Risorse
Il codice sorgente per il controllo I controlli personalizzati hanno ruoli ARIA