Gli elementi interattivi, come link e pulsanti, devono indicarne lo stato ed essere distinguibili da quelli non interattivi. Per verificare che gli elementi interattivi ne indichino lo scopo e lo stato, utilizza sia un test visivo sia uno screen reader.
Come eseguire il test manuale
Devi testare gli elementi interattivi visivamente e con gli screen reader.
Testare l'attenzione visiva
Per testare manualmente lo stato attivo visivo, premi TAB nella pagina.
- Puoi premere TAB per passare a ogni elemento interattivo?
- Quando arrivi a un elemento interattivo, esiste un indizio visivo che gli utenti possono interagire con l'elemento?
- L'aspetto di ogni elemento interattivo cambia quando lo selezioni?
Esistono molti modi per impostare lo stile degli indicatori di attivazione per ogni elemento interattivo.
Un modo è definire lo stile della pseudo-classe :focus.
Questo stile viene applicato ogni volta che viene impostato lo stato attivo dell'elemento, indipendentemente dal dispositivo di input o dal metodo utilizzato.
Scopri di più su come impostare lo stile del focus.
Test con gli screen reader
Utilizza uno screen reader per navigare nella pagina e controlla che annunci il nome di ogni controllo interattivo, il suo ruolo e lo stato di interazione corrente. Se il ruolo di un elemento non è chiaro e il suo stato non lo è, potresti dover aggiungere i ruoli ARIA appropriati.
Scopri di più nella sezione I controlli personalizzati hanno ruoli ARIA.
Inoltre, è importante prestare particolare attenzione a come vengono etichettati gli elementi interattivi. Gli utenti di screen reader e altre tecnologie per la disabilità si basano sulle etichette per comprendere il contesto dell'elemento. Sono comuni le etichette vaghe e non sono utili per orientarsi tra i contenuti. Scopri come migliorare le Etichette e le alternative di testo.
Perché è importante
Fornire suggerimenti visivi sulla funzione di un controllo può aiutare gli utenti a utilizzare e navigare nel tuo sito. Questi suggerimenti sono chiamati abbonamenti. Le convenienza consentono agli utenti di utilizzare il tuo sito su una vasta gamma di dispositivi.
Risorse
Controllo del codice sorgente per gli elementi interattivi che indicano lo scopo e lo stato