Miglioramento della tipografia Web per gli utenti con disabilità visive

Noi del settore web spesso creiamo per la maggior parte, rendendo il nostro lavoro tollerabile per quelli in minoranza. Non è abbastanza buono. In questo articolo esamineremo come migliorare l'esperienza tipografica per gli utenti ipovedenti sul web.

Rapporti di fine 2013 suggeriscono che ci sono circa 285 milioni di persone con disabilità visive a livello globale. Mentre il 90% di queste persone vive in nazioni in via di sviluppo, il restante 10% comprende 28.500.000 persone che certamente interagiscono con il web in qualche modo. Esistono browser specifici per utenti ipovedenti come WebbIE che trasformano tutte le pagine in interfacce di solo testo per lavorare con gli screen reader, ma è sufficiente? Che dire di coloro che non sono completamente ciechi, ma hanno problemi a leggere i caratteri sul web? È un approccio tutto o niente per loro?

WebbIE Web Browser 4

Esaminiamo i problemi che questo gruppo di utenti deve affrontare, il modo in cui le nostre pratiche del settore aiutano a ostacolarli e come possiamo risolvere il problema!

Problemi nella progettazione del carattere tipografico

Quando un designer crea un carattere tipografico, il luogo di visualizzazione destinato ha una forte influenza. I personaggi destinati a essere letti su supporti stampati sarebbero stati progettati per adattarsi al meglio. Un font desktop dovrebbe essere prima ottimizzato prima di essere utilizzato sul web, e molti font popolari hanno varianti web in questi giorni. Ad esempio, un carattere tipografico che è ottimizzato per il web potrebbe avere meno contrasto di tratti (che vedrai in un attimo), un contatore più alto di x, contatori più grandi (i buchi all'interno di una forma di lettera) e una spaziatura più aperta. Pur mirando a rendere il tipo più leggibile sul web, alcuni di questi cambiamenti possono effettivamente avere l'effetto opposto per le persone con problemi di vista.

Strozzi non modellati

Sentirai spesso persone intrappolate in una discussione su quale sia più leggibile per la copia; tipo serif o sans-serif? In effetti, la scelta di un carattere tipografico per la leggibilità non è così in bianco e nero.

Colpi non modulati sono quando il peso nei tratti di un personaggio è invariato per tutto. Ciò rimuove molte caratteristiche che definiscono le lettere che vengono utilizzate dagli ipovedenti per l'interpretazione. Per un utente ipovedente, il S di un carattere tipografico non modulato potrebbe essere interpretato in modo del tutto errato come a C.

Nell'esempio sopra vedrai che Arial ha tratti non modulati, a differenza del classico serif Georgia. Verdana è un buon esempio di un sans-serif che mostra una leggera modulazione. I suoi terminali allargati (la fine dei colpi) suggeriscono una "sosta" prima che l'occhio del lettore si sposti sul prossimo personaggio.

Negli anni '50 Herman Zapf sviluppò Optima proprio pensando a questo; mirava a un sans-serif che potesse sostituire il tipo serif più usato in libri e riviste. 

Scarsa gestione di dimensioni e peso

Potresti esserti trovato a doverlo fare prima: aumentare il peso di un font di dimensioni più piccole per una migliore leggibilità. Per la maggior parte questa è una soluzione soddisfacente che fornisce il contenuto leggibile dall'utente previsto. Nel caso di utenti ipovedenti, questo crea di nuovo un'esperienza di lettura quasi impossibile.

Quando si combina un font non particolarmente progettato per una determinata dimensione e si migliora la leggibilità aggiungendo peso (specialmente se il browser aggiunge il peso anziché utilizzare una variante di carattere specifica), esagera l'effetto dei tratti non modulati. Il peso aggiunto sfoca le caratteristiche specifiche della lettera utilizzate per una più facile identificazione. 

Mancanza di Kerning distintivo

Il crenatura è l'adattamento distintivo della spaziatura tra i caratteri in un font. Con il kerning, l'obiettivo è avere una quantità distinta di spazi bianchi tra i caratteri per l'intera famiglia di font. Tuttavia, nella maggior parte dei tipi di carattere si trova sul Web la quantità di spazio bianco viene gestita in modo più uniforme.

Sulla superficie questo non sembra così importante, ma un approccio uniforme può portare a interpretazioni errate dei personaggi. Un esempio comune di questo è L e J. Metti questi due personaggi uno accanto all'altro e potresti facilmente interpretarli erroneamente U, o LI. Un altro grande esempio è due capitali v, VV. Questa combinazione potrebbe facilmente essere vista come un W.

Scelte di colore

È impossibile discutere di leggibilità senza menzionare le scelte di colore. Diverse combinazioni di colori per il carattere e lo sfondo creano diverse esperienze di lettura. Ad esempio, è una pratica comune per mettere un testo quasi nero su uno sfondo quasi bianco. Allo stesso modo, è una cattiva pratica usare un colore giallo con uno sfondo bianco. Quest'ultimo offre un'esperienza di lettura orrenda e può causare mal di testa.

Oggi, con l'uso preminente del design piatto, questi problemi di colore non rappresentano un grosso problema rispetto a qualche anno fa. Tuttavia, è ancora qualcosa da prendere in seria considerazione. Per uno sfondo video (anche una tendenza in aumento), ci saranno sempre diverse scene che cambiano il bilanciamento del colore. Per la progettazione piatta, il problema risiede nelle scelte semplicemente nel muting di un colore abbastanza da fornire un livello accettabile di leggibilità.

Il bianco sul blu in questo esempio sembra ottimo, ma non se la tua visione non è al 100%. Dai uno sguardo a checkmycolours.com per analizzare le combinazioni di cui non sei sicuro.

Creazione di set di caratteri di progetto migliori

Dopo aver esaminato alcuni svantaggi chiave per gli utenti ipovedenti con la tipografia del web, passiamo ora a ciò che può essere fatto da architetti del Web per aiutarci.

Migliori combinazioni di colori

Per creare combinazioni di colori tra lo schema e il carattere, c'è solo una semplice regola da seguire. Lo sfondo dovrebbe essere chiaro e sufficientemente smorzato da non creare rumore. Per il carattere, un colore solido con una quantità di contrasto rispettabile. Semplice, giusto?!

Per gli sfondi video c'è un po 'più coinvolto. Mentre un colore di sfondo sovrapposto sotto il testo è ottimo, il video può differenziare l'atmosfera e i livelli di rumore cambiando le scene. Per contrastare questo, assicurati di prendere in considerazione tutti i diversi cambi di scena in tutto il video.

Sembra stupendo! Non posso leggerlo però.

Dimensione del font

La semplice visualizzazione di un font a dimensioni sicure non funzionerà sempre. Come probabilmente hai già sperimentato, alcuni font appaiono frastagliati, o meno raffinati, se usati con dimensioni diverse. Una soluzione popolare per questo è un po 'di peso extra e l'aggiunta di un tratto. Mentre ciò può aiutare, è disordinato e non riesce a completare il lavoro.

analisi

Test per assicurarsi che il tuo sito sia leggibile per le persone con disabilità visive non è così difficile come sembra. Prova a fare queste tre cose:

  • Guarda il tuo sito in scala di grigi.
  • Verifica come il tuo sito cercherà utenti che distinguono o vedono determinati colori (arancione e rosso per esempio). www.color-blindness.com/coblis-color-blindness-simulator
  • Guarda quanto leggibile il tuo font guarda a diversi livelli di sfocatura, giocando con text-shadow.

risorse

  • Controllo del contrasto di colore
  • www.checkmycolours.com
  • contrastrebellion.com
  • Estensione Chrome Color Contrast Analyzer
  • Filer per pagine Web in colore cieco
  • Sim Daltonism (Color Blindness Simulator OSX)

Conclusione

Essere consapevoli che c'è un problema è metà della battaglia. Ora dovresti avere un solido punto di partenza per capire come puoi offrire agli utenti ipovedenti un'esperienza migliore.