Incontro ripetutamente gli stessi sei problemi quando valuto l'accessibilità di un sito Web, come fanno la maggior parte dei consulenti.
Mi piacerebbe immaginare un mondo in cui le aziende ripuliscano internamente la maggior parte dei problemi di accessibilità e assumono consulenti solo per risolvere problemi altamente tecnici.
Purtroppo, molte aziende hanno difficoltà a implementare le basi. Affrontare i sei errori comuni di seguito ne risolve molti accessibilità snafus, aiutando notevolmente gli utenti con problemi di vista.
6 Errori comuni di accessibilità
L'organizzazione senza scopo di lucro WebAIM analizza periodicamente i problemi di accessibilità della home page dei primi 1 milione di siti Web più visitati. Lo studio utilizza test automatizzati per identificare il numero e il tipo di errori.
WebAIM analizza la home page dei primi 1 milione di siti Web più visitati per errori di accessibilità.
Come è tipico con test automatizzati, lo studio rileva solo circa un terzo dei problemi di accessibilità. Ma è utile identificare gli errori comuni.
Nel 2022, WebAIM ha rilevato che il 96.8% di tutte le home page testate presentava almeno un errore, secondo le Linee guida per l'accessibilità dei contenuti Web. Ha inoltre rilevato che il 96.5% degli errori rientrava in uno dei sei tipi seguenti:
- Testo a basso contrasto,
- Testo alternativo mancante per le immagini,
- Link vuoti,
- Etichette di input modulo mancanti,
- Pulsanti vuoti,
- Lingua del documento mancante.
Testo a basso contrasto. L'uso di colori simili per lo sfondo e il testo manca di contrasto. Ha un profondo impatto sugli acquirenti online con daltonismo, sui visitatori più anziani con una perdita della vista indotta dall'età o persino sugli utenti mobili alla luce del sole.
Contrasto di colori i test applicano un algoritmo che esamina una metrica chiamata "luminanza relativa", che tenta di quantificare la differenza tra due colori. Quando due colori non differiscono sufficientemente, la percentuale di utenti che fatica a leggere il contenuto è significativamente più alta.
Un articolo su colore e accessibilità della Mozilla Foundation va bene vale la pena leggere.
In molti casi, è possibile correggere il contrasto basso con una modifica modesta. Negli esempi seguenti, la correzione è una modifica al colore del testo.
Questo testo non supera il test di contrasto del colore. Il colore del testo è il codice esadecimale #777 (una sfumatura di grigio) su un colore di sfondo #fff (bianco).
-
La modifica del colore del testo in #757575 (un'altra sfumatura di grigio) su un colore di sfondo di #fff (bianco) ha consentito a questo esempio di superare il test di contrasto del colore.
La differenza tra questi due è appena percettibile visivamente. Ma giuridicamente, è significativo. Tieni presente che i colori del marchio a basso contrasto sono meglio usati come accenti, non come testo.
Testo alternativo mancante. Ogni immagine su una pagina web ha bisogno di un alt attributo, testo che rappresenta quell'immagine. Tuttavia, non tutte le immagini necessitano di un testo descrittivo. Un attributo alt vuoto intenzionale può essere appropriato. Ma "vuoto" e "mancante" sono diversi.
Vuoto attributi alternativi appaiono come alt="".
L'immagine ha una descrizione, che è vuota. I lettori di schermo ignorano queste immagini. È ragionevole decidere che un'immagine è decorativa e non richiede testo. Ma un pulsante, un grafico o un'immagine di testo o numeri non è mai decorativo.
Un attributo alt mancante significa che l'intero campo non è presente. Le utilità per la lettura dello schermo generalmente presuppongono che l'immagine sia importante e inietteranno il nome del file come alt attributo.
Per aiutare a decidere, fare riferimento a albero decisionale di testo alternativo dal World Wide Web Consortium.
Collegamenti vuoti. I link senza anchor text sono "vuoti". Il suddetto "albero decisionale del testo alternativo" è il testo di ancoraggio per quel collegamento. Il problema dei collegamenti vuoti è simile alla mancanza di testo alternativo.
Un collegamento si forma quando il a l'elemento è presente con an href attributo. Qualunque cosa ci sia dentro a element è il testo del collegamento, che è ciò che verrà letto su uno screen reader. Nell'esempio seguente, "albero decisionale del testo alternativo" è il testo del collegamento. Ho aggiunto il rosso per enfasi.
albero decisionale di testo alternativo
Quando colleghi un'immagine, ad esempio un JPG o PNG o un'icona basata su caratteri, il "testo" del collegamento è il alt testo. Se la alt manca il testo, il link è vuoto. Gli utenti dello screen reader sapranno che si tratta di un collegamento ma non avranno ulteriori informazioni.
Ogni collegamento necessita di un'etichetta di testo che ne descriva lo scopo. Quindi il testo alternativo per un'immagine può cambiare in base al contesto.
Ad esempio, un'immagine su dovrebbe avere una descrizione, ad esempio, dell'angolo dell'oggetto mostrato. Ma un'immagine di prodotto che si collega a una pagina di prodotto dovrebbe avere il nome del prodotto.
Etichette di input del modulo. Un sito Web che raccoglie informazioni sui visitatori (una frase di ricerca, numero di carta di credito, indirizzo e-mail) utilizza un modulo e un input. Se quei campi di input non hanno etichette, i visitatori degli screen reader non sapranno cosa stai cercando di raccogliere.
Ma un'"etichetta" è più di un testo visibile. È necessaria una descrizione nel codice, ad esempio "Indirizzo e-mail".
Quindi il testo che descrive un campo non significa che sia etichettato. Un campo ha no label se il testo non ha una connessione esplicita o è un segnaposto che scompare all'interno del modulo quando un utente aggiunge le informazioni.
Il campo modulo ideale ha un'etichetta visibile all'interno di a La Web Accessibility Initiative del W3C ha un articolo eccellente sull'etichettatura dei campi del modulo.
Pulsanti vuoti sono lo stesso problema dei collegamenti vuoti e del testo alternativo mancante. Tutti e tre mancano di una versione testuale di un elemento visivo.
Un pulsante o un collegamento che non è testo normale richiede una descrizione o un nome per un'utilità per la lettura dello schermo.
Lingua del documento mancante. Gli screen reader parlano la lingua di una pagina configurata nel sistema operativo del visitatore, applicando le regole di pronuncia appropriate. Gli screen reader parlano spagnolo se i visitatori usano i loro computer in quella lingua.
I lang l'attributo è standard in HTML. Racconta alla tecnologia di visita la lingua del sito. Un sito in inglese, ad esempio, dovrebbe avere questo elemento radice:
Quando presente, questo attributo informa i lettori dello schermo delle regole di pronuncia essenziali.
A uno scioccante 22.3% delle prime 1 milione di home page nel 2022 mancava questa dichiarazione. La maggior parte degli utenti non noterà mai l'omissione. Ma fa un mondo di differenza per coloro che ne hanno bisogno, con il minimo sforzo da parte di uno sviluppatore.
Trovare problemi
ANDI (Accessible Name and Description Inspector) è un pratico dall'amministrazione della sicurezza sociale degli Stati Uniti che identifica rapidamente la maggior parte di questi problemi.
ANDI funziona come un segnalibro nel tuo browser e richiede solo un clic per essere eseguito. ANDI mostra moduli etichettati in modo errato, attributi alternativi dell'immagine mancanti, collegamenti e pulsanti vuoti e testo a basso contrasto. Altri strumenti di test di accessibilità includono ONDA, le Estensioni del browser Axee Tenone.io, Solo per citarne alcuni.
Nessuno dei sei problemi di cui sopra è difficile da risolvere. Tutti sono facilmente rilevabili da test di accessibilità automatizzati. Allora perché non risolverli prima di cercare l'aiuto di un esperto?
