Come eseguire un audit di accessibilità di base

Pubblicato: 2017-08-09

Quindi hai imparato molto sull'accessibilità ultimamente, ma ora vuoi controllare tu stesso il tuo sito e vedere dove devi migliorare. Come fai a farlo? È tempo di un audit di accessibilità! In questo tutorial, ti mostrerò le basi di un audit di accessibilità di base che ti porterà sulla strada per avere un sito più accessibile.

Come ricorderete dalla mia serie di panoramiche, un sito Web accessibile è percepibile, utilizzabile, comprensibile e robusto. Il test per assicurarsi che il tuo sito soddisfi tutti e quattro i pilastri dell'accessibilità non implica la codifica, quindi non preoccuparti. Potremmo installare una o due estensioni di Chrome, ma mi ringrazierai più tardi. Iniziamo!

NOTA: questo tutorial presuppone che tu sappia come utilizzare Chrome Inspector o qualsiasi strumento di sviluppo di base del browser fornito.

Percettibile

layout per verifica dell'accessibilità del volano donna in occhiali da sole con tablet

Inizia con percepibile perché se il tuo sito non può essere percepito dall'utente, non sa che esiste. Qui ci concentreremo su tre cose: alternative di testo, didascalie e colore.

Per ogni immagine sul tuo sito che è più che decorativa (il che significa che è una parte vitale delle informazioni, non solo un miglioramento), l'immagine dovrebbe avere un attributo alt . Puoi verificarlo ispezionando il codice sorgente dell'immagine e cercando l'attributo. Se c'è, fantastico! Ora dobbiamo assicurarci che il valore dell'attributo sia utile. Un attributo alt dovrebbe descrivere l'immagine in modo da informare gli utenti ipovedenti. Questa NON è un'opportunità per inserire parole chiave SEO nel tuo sito. Rendi la tua descrizione breve, al punto e utile. Descrizioni più lunghe dovrebbero essere salvate per il contenuto del sito stesso.

Insieme alle immagini c'è il contenuto video e audio. In entrambi i casi, dovrai fornire una sorta di didascalia o trascrizione del contenuto. I tuoi video dovrebbero avere i sottotitoli attivati ​​o essere pre-sottotitolati. Testarlo è semplice come avviare un video sul tuo sito e controllare i sottotitoli.

Infine, dobbiamo testare i nostri colori. Per fare ciò, installeremo un'estensione di Chrome che abilita una modalità in scala di grigi. Una volta installato, carica nuovamente il tuo sito e attiva l'estensione. Nota le aree difficili da leggere. Questi sono i tuoi problemi da una prospettiva di contrasto. Da lì, disabilita la scala di grigi e usa il controllo del contrasto dei colori Snook per controllare i tuoi punteggi. Dovrai usare l'ispettore per prendere i tuoi valori esadecimali se non li hai a portata di mano. Ricorda, qualsiasi cosa inferiore a 4.5 (o 3.0 per testo di grandi dimensioni) è un problema.

Operabile

Il prossimo passo è assicurarsi che il sito sia operativo. Ciò significa che testeremo la funzionalità della tastiera. Per fare ciò, apri il tuo sito. Una volta caricata la pagina, premi il tasto Tab. Che succede? Si spera che venga visualizzato un collegamento per saltare. In caso contrario, dovresti almeno avere uno schema attorno al primo link nella pagina. Idealmente avrai stati :focus personalizzati, ma il minimo indispensabile dovrebbe essere ciò che fornisce il browser. Da lì, continua a premere il tasto Tab per assicurarti di passare da un collegamento all'altro nell'ordine in cui appaiono sulla pagina. Se la tua attenzione continua a saltare, hai un problema con l'indice delle schede che deve essere risolto. I plug-in dei moduli sono spesso i colpevoli qui.

layout da parte del controllo dell'accessibilità del volano uomo in flanella sul telefono cellulare in una custodia

Comprensibile

Successivamente, controlleremo il tuo sito per assicurarci che sia leggibile. Dopotutto, se un utente non può leggere i tuoi contenuti, che senso ha averlo? I requisiti qui sono piuttosto semplici: la lingua del tuo sito può essere determinata con il codice? Per verificare, apri il tuo inspector e guarda il tag principale <html> . Ha un attributo lang ? Se è così, sei chiaro. Dovrai anche assicurarti che a tutti i segmenti che sono in una lingua diversa sia applicato l'attributo lang.

Esistono altri controlli di livello AAA sulla leggibilità, ma questi esulano dall'ambito di un audit di base. In generale, tuttavia, vorrai mantenere i tuoi contenuti a un livello di lettura di 6a elementare a meno che il tuo pubblico di destinazione non sia di un livello di istruzione superiore.

Gli altri aspetti importanti della sottostabilità del tuo sito ruotano attorno ai messaggi di errore e al cambio di contesto. Più precisamente, la sua mancanza. Quando un utente mette a fuoco o attiva un input, non dovrebbe verificarsi un cambiamento significativo. La pagina non dovrebbe saltare a meno che l'utente non venga avvisato in qualche modo (icona di una freccia, testo di supporto, ecc.). Questi sono i tipi di cose che avresti notato durante i test con la tastiera.

Quando si testano i moduli, lo stesso si può dire dei messaggi di errore. Gli errori devono essere visualizzati chiaramente all'utente e rimanere sullo schermo in modo che possano correggere gli errori. Questo è qualcosa che anche i grandi siti web sbagliano continuamente. Dimenticano di mettere a fuoco la parte della pagina che presenta un errore, o almeno di contrassegnarlo in qualche modo. Verifica la presenza di errori nei moduli e assicurati che i messaggi siano chiari. L'uso di un plug-in di moduli solidi aiuterà molto in questo, ma non fare affidamento sul plug-in per fare tutto il tuo lavoro. Dovrai anche assicurarti di non utilizzare solo un colore (in genere rosso) per indicare un errore. Il testo vero e proprio "Errore" è molto importante, specialmente per le persone con daltonismo rosso/verde.

Al di là degli errori, i tuoi moduli e input dovrebbero avere istruzioni chiare. Esamina ogni input sul tuo sito e assicurati che sia ampiamente chiaro cosa dovrebbe fare l'utente. Ad esempio, i moduli di ricerca dovrebbero avere qualcosa oltre a una lente d'ingrandimento. Sarà sufficiente una semplice etichetta "cerca". Assicurati che i tuoi utenti sappiano cosa fare con gli elementi interattivi. Mai dare per scontato.

Robusto

layout tramite volano accessibilità audit destop con grafici e taccuino davanti alla tastiera

Infine, il tuo sito deve essere robusto. Ciò significa che il sito è utilizzabile con tecnologie assistive come gli screen reader. Se il tuo sito è ben formato con HTML, dovresti essere a posto. Tieni presente che alcuni browser moderni, incluso Chrome, correggono gli errori HTML di base o almeno tentano di risolverli. Il modo più rapido per testare la solidità del tuo sito è caricare il sito in Safari e abilitare VoiceOver, uno screen reader integrato. Se il tuo sito non funziona, dovrai affrontare questi problemi.

Avvolgendo

Questo tutorial di audit è stato veloce, ma questo è il punto. Non ci vuole molto per assicurarsi che il tuo sito sia accessibile e gli strumenti necessari sono minimi. La cosa importante da ricordare è che vuoi metterti nei panni di qualcuno che non ha le capacità che dai per scontate come utente medio. Mantieni questa mentalità e i tuoi audit assicureranno che i tuoi siti siano più accessibili.

Se te lo sei perso, dai un'occhiata a questa serie sull'accessibilità:

  • Introduzione all'accessibilità: parte 1
  • Introduzione all'accessibilità: parte 2
  • Introduzione all'accessibilità: parte 3