Gli elementi interattivi, come link e pulsanti, devono indicarne lo stato ed essere distinguibili dagli elementi non interattivi. Per verificare che gli elementi interattivi ne indichino lo scopo e lo stato, utilizza sia un test visivo che uno screen reader.
Come testare manualmente il focus visivo
Per testare manualmente il focus visivo,
TAB nella pagina.
- Riesci ad accedere a ciascun elemento interattivo con il tasto Tab?
- Quando accedi a un elemento interattivo, c'è un indizio visivo che gli utenti possano interagirvi?
- L'aspetto di ogni elemento interattivo cambia quando lo selezioni?
Esistono molti modi per definire gli indicatori di interesse per ogni elemento interattivo.
Un modo sicuro è usare :focus.
La pseudo-classe :focus consente di applicare uno stile uniforme a un elemento.
Questo stile viene applicato ogni volta che l'elemento viene impostato, indipendentemente dal dispositivo o dal metodo di input utilizzato.
Scopri di più in Messa a fuoco stile.
Come eseguire un test manuale con uno screen reader
Utilizzando uno screen reader, naviga nella pagina e verifica che sia in grado di annunciare il nome di ciascun controllo interattivo, il ruolo di tale controllo e lo stato interattivo corrente. Se il ruolo di un elemento non è chiaro e lo stato dell'elemento non è chiaro, potrebbe essere necessario aggiungere i ruoli ARIA appropriati. Scopri di più in I controlli personalizzati hanno ruoli ARIA.
È inoltre importante prestare particolare attenzione all'etichettatura degli elementi interattivi. Gli utenti di screen reader e di altre tecnologie per la disabilità si basano sulle etichette per comprendere il contesto dell'elemento. Etichette vaghe sono comuni e non sono utili per l'esplorazione dei contenuti. Scopri come migliorare le etichette e le alternative di testo.
Perché è importante
Fornire suggerimenti visivi su cosa farà un controllo aiuta le persone a operare e navigare sul tuo sito. Questi indizi sono chiamati "affordance". Se fornisci le "Inviti" consenti agli utenti di utilizzare il tuo sito su un'ampia gamma di dispositivi.
Risorse
Il codice sorgente per gli elementi interattivi indicano il loro scopo e stato per il controllo