Share
Con il 4,5% della popolazione mondiale che soffre di daltonismo, il 4% di ipovisione e un altro 0,6% di cecità, le difficoltà visive nell'uso del web sono più diffuse di quanto si possa apprezzare. Questa guida vedrà come la progettazione per le persone con disabilità visive può migliorare il web per tutti.
La rete di oggi deve essere resa accessibile a tutti, indipendentemente dalle abilità o dalle menomazioni di una persona.
"L'accessibilità garantisce che le persone con disabilità possano accedere alle stesse informazioni da un sistema come chiunque altro e ottenere gli stessi benefici"
Come delineato in un precedente articolo, esiste una vasta gamma di menomazioni, da cinque aree importanti:
Questa guida si concentrerà sulla progettazione di disabilità visive, che possono essere abbastanza comuni, che vanno da lievi a disabilità estreme. In effetti, Cathy O'Conner (designer e autore di Smashing Magazine) ha stimato che per ogni due milioni di clienti online, circa 200.000 trarrebbero vantaggio da progetti più facili da vedere.
Questa è una stima equa, soprattutto considerando come chiunque possa sviluppare problemi di ipovisione man mano che invecchiano. Le menomazioni visive comuni possono includere:
Color Blindness comporta difficoltà nel percepire o distinguere tra i colori, così come la sensibilità alla luminosità del colore. Colpisce circa il 4,5% dell'intera popolazione mondiale.
L'ipovisione può includere una vista parziale in uno o entrambi gli occhi, scarsa acuità (visione offuscata), visione a tunnel, perdita di campo centrale e visione offuscata. Colpisce 246 milioni di persone, ovvero circa il 4% della popolazione mondiale.
La cecità è la perdita sostanziale della vista negli occhi di entrambe le persone. Colpisce circa 39 milioni di persone, ovvero lo 0,6% delle persone.
La diversa natura di queste menomazioni può creare un'ampia variazione nel modo in cui le pagine web vengono percepite da persone con differenti abilità visive. Come indicato sopra, un gran numero di persone soffre di problemi alla vista, quindi dobbiamo assicurarci che possano accedere e interpretare tutte le funzionalità allo stesso modo.
Ad esempio, considera la home page di Tumblr, in cui lo sfondo della pagina è impostato su un'immagine grande (creata dai loro utenti):
La homepage di TumblrA seconda del tipo e del livello di disabilità visiva di una persona, il sito potrebbe essere percepito in vari modi (qui simulato con l'estensione NoCoffee Chrome):
1. Visione ostruita periferica (ad es. Glaucoma)
2. Grandi punti di visione bloccata (retinopatia diabetica)
3. Perdita di acuità (visione offuscata)
4. Problemi di Ghosting
5. Daltonismo da tritanopiaGli esempi sopra mostrano diversi tipi di problemi alla vista e anche un paio di esempi di daltonismo. Riassumere:
A causa di queste variazioni di percezione, gli elementi chiave di un determinato sito web possono diventare meno accessibili (e quindi meno utilizzabili) a seconda dell'estensione della disabilità visiva dell'utente.
Ad esempio, una perdita di acuità (visione sfocata) può far scomparire in background la barra di ricerca sul sito di Tumblr. Lo stesso si può dire per il pulsante di accesso:
Confronta la barra di ricerca sull'immagine a sinistra con quella a destra, a destra, la barra di ricerca si fonde con lo sfondo ed è appena visibile.
Allontanandoci dall'esempio di Tumblr, prendi in considerazione una persona con cecità ai colori rosso / verde (protanopia). Su una pagina dei risultati di ricerca di Google, il colore utilizzato per rappresentare il pagina corrente dei risultati sembra meno significativo per un utente daltonico, rendendolo leggermente meno significativo:
Esempio di Google ProtonopiaIl contrasto tra rosso e giallo, è meno ovvio per un utente daltonico, e appare più come un leggero colore verdastro contro un verde scuro.
Entrambi gli esempi precedenti mostrano come le variazioni della percezione possono influenzare l'usabilità delle funzionalità principali. Fortunatamente, le persone con tali disabilità visive possono alterare la presentazione dei contenuti in modo che gli elementi diventino più accessibili e utilizzabili da parte loro. Questo può essere fatto da:
Tali modifiche possono essere effettuate tramite le impostazioni predefinite in un browser web. Inoltre, sono state rese disponibili alterazioni più avanzate tramite le estensioni di accessibilità del browser. Ad esempio, Google ha creato vari plug-in di accessibilità per gli utenti ipovedenti:
Ad alto contrasto, ad esempio, consente alle persone di variare il contrasto di un sito Web, rendendo il testo più chiaro da leggere. Qui è in azione sulla home page di Spotify:
Esempio di un plugin del browser di accessibilità utilizzato per modificare il contrasto di una pagina webCome visto sopra, l'estensione del browser può:
Con tutte le diverse menomazioni visive, e la vasta gamma di strumenti che possono essere utilizzati per modificare la modalità di visualizzazione del contenuto, diventa chiaro che non è sempre possibile determinare come verranno visualizzate le pagine Web o percepito dalle persone.
Poiché il contenuto può apparire in diversi modi, dobbiamo pertanto prestare attenzione a come è strutturato il nostro contenuto, anche a livello di codice. Questo perché diventa importante mantenere una chiara gerarchia di informazioni, poiché le persone possono utilizzare diversi mezzi per presentare tali informazioni. Esaminiamo ora alcune best practice per garantire che i nostri contenuti siano sempre accessibili, indipendentemente dalla modalità di visualizzazione:
Ecco un elenco di sei migliori pratiche per rendere i tuoi progetti migliori per le persone con disabilità visive.
È importante garantire che i contenuti web siano indipendenti dalla struttura sottostante. Quando le modifiche alla presentazione possono includere la dimensione degli elementi (come testo e immagini), la spaziatura tra gli elementi, o se gli elementi possono essere visti a tutti (gli utenti non vedenti potrebbero non vedere le immagini), diventa chiaro che lo sviluppatore non può determinare come i contenuti saranno visualizzati in un dato momento.
Come affermato dal W3C, per consentire il funzionamento di diversi metodi di navigazione (ad esempio utilizzando screen reader o tastiera di navigazione), gli sviluppatori devono assicurarsi che il loro codice fornisca una struttura indipendente dalla presentazione:
"Gli sviluppatori devono garantire che la presentazione dei contenuti web sia indipendente dalla struttura sottostante" - W3C
Una solida struttura fornirà anche tag semantici rilevanti come intestazioni, paragrafi e tag di voci di elenco per garantire che, ad esempio, uno screen reader possa interpretare le informazioni e presentarle in un modo alternativo:
Esempio di layout di un sito Web utilizzando tag semantici correttiCome spiegato in precedenza, alcuni elementi strutturali, in particolare le immagini, non possono essere percepiti da alcuni utenti. Ad esempio, i non vedenti che utilizzano tecnologie assistive (come gli screen reader) per interpretare i siti web sentiranno il testo alternativo attribuito all'immagine letta, piuttosto che in realtà vedendo l'immagine. Se quel testo non è presente, o non è abbastanza descrittivo, non sarà in grado di percepire le informazioni come previsto.
Ecco un esempio dell'Università di Leicester, che mostra un testo alternativo accurato, che fornisce più contesto all'utente:
Esempio di utilizzo del testo alternativo accurato su un'immagineAbility.net fornisce cinque regole d'oro per l'utilizzo alt tag (testo alternativo) correttamente per rendere più accessibile un sito web:
Accentsconagua
![]()
alt = "" attributoIl colore non è il modo migliore per trasmettere informazioni, come mostrato dal seguente esempio. Sotto, un bordo rosso viene utilizzato per evidenziare i campi modulo che non sono stati compilati correttamente. Di conseguenza, se un utente è daltonico, non sarà in grado di vedere questa indicazione, quindi diventa difficile capire quali campi hanno errori:
L'uso di icone ed etichette per mostrare quali campi non sono validi, comunica meglio le informazioni ad un utente daltonico:
Esempio da Bootstrap v4Questo esempio mostra che il colore non deve essere usato da solo per trasmettere informazioni, ma solo in aggiunta alle informazioni esistenti.
Gli utenti daltonici possono anche trovare difficoltà a distinguere tra alcuni colori. Ad esempio, verde, rosso e marrone possono sembrare molto simili:
Come gli utenti daltonici percepiscono il verde marrone e il rosso Pertanto, quando i colori vengono utilizzati su grafici e grafici, può essere utile applicare sovrapposizioni con motivi a colori solidi per offrire agli utenti un modo più chiaro per distinguere gli elementi. Questo non solo aiuta chi è daltonico, ma rende anche più facile per tutti. Considera le etichette Trello per un esempio di applicazione delle trame:
A destra, etichette dal colore accecante di TrelloLe combinazioni di colori monocromatici utilizzano solo i colori di una singola tonalità. Ecco un esempio, creato con paletton.com:
Tavolozza monocromatica creata con paletton.comUsando solo le sfumature di una singola tonalità, qualsiasi significato in più che avrebbe potuto essere introdotto da tonalità di colore diverse viene rimosso.
Variazioni di contrasto e toni possono essere utilizzati per fornire significato o importanza agli elementi e attirare l'attenzione dell'utente su diverse aree. Il significato qui può anche essere trasferito più facilmente agli utenti daltonici, come mostrato nel seguente esempio di un sito monocromatico.
BIGSOUND Buzz è un sito web che fa un grande uso di uno schema cromatico monocromatico:
Monocromatico su BIGSOUND Buzz
Trame ovunqueUn utente daltonico vedrà tutti gli stessi toni e contrasti, ma in una tonalità diversa:
BIGSOUND Buzz per i daltoniciIl contrasto è la differenza tra il colore più chiaro (ad esempio lo sfondo) e il colore più scuro (ad esempio il testo). Ad esempio, considera questo grafico della sensibilità al contrasto:
La parte in alto a sinistra (lettera A) ha il contrasto più alto e mentre ci spostiamo verso destra, il contrasto diminuisce, poiché la differenza di luminanza tra sfondo e primo piano si riduce. Alla fine, a seconda della sensibilità al contrasto di una persona, non saranno in grado di distinguere il testo dallo sfondo.
Pertanto, per garantire che il testo sia leggibile da persone con disabilità visive, il WCAG ha fornito una guida del rapporto di contrasto. Suggeriscono che dovrebbe esistere un rapporto di contrasto di almeno 4,5: 1 tra un testo e lo sfondo. Questo rapporto scende a 3: 1 per il testo più grande (24px o 29px in grassetto).
Un esempio di questo rapporto è mostrato negli esempi seguenti, da accessebility.psu.edu:
Nel complesso, progettando prima di tutto le disabilità più estreme, migliora quasi sempre il prodotto finale per tutti gli altri.
Ad esempio, progettando per le persone con nessuna visione può gettare una grande base per coloro che può vedere. Questo perché ci mette nelle condizioni di garantire che la struttura del sito web sia indipendente dalla sua presentazione e possa essere interpretata da tecnologie assistive anche come persone. Pertanto, se i cambiamenti di presentazione dovessero avvenire per qualsiasi altra ragione, la struttura del sito Web sarà ancora accessibile.
Inoltre, garantire che il colore sia usato solo per evidenziare ciò che è già visibile è un altro grande passo verso la creazione di un sito web altamente accessibile e quindi utilizzabile. Un utile processo di progettazione può quindi essere quello di progettare iterazioni anticipate di un prodotto in scala di grigi e quindi applicare i colori alla fine.
Non è necessario reinventare la ruota durante la creazione di disegni accessibili; ci sono molti sistemi di progettazione e linee guida che possono aiutarti.
