Forbedre webtypografi for synshemmede brukere

Vi i nettbransjen lager ofte for flertallet, noe som gjør vårt arbeid tålelig for de i minoriteten. Det er ikke bra nok. I denne artikkelen skal vi undersøke måter å forbedre den typografiske opplevelsen for synskadede brukere på nettet.

Rapporter fra slutten av 2013 antyder at det er anslått 285 millioner synskadede mennesker globalt. Mens 90% av disse menneskene bor i utviklingsland, inneholder de resterende 10% 28.500.000 mennesker som sikkert samhandler med Internett i noen kapasitet. Det er målrettede nettlesere for synskadede brukere som WebbIE som gjør alle sider til tekst-bare grensesnitt for å jobbe med skjermlesere, men er det nok? Hva med de som ikke er helt blind, men har problemer med å lese skrifttyper over nettet? Er en all-eller-ingenting tilnærming rettferdig mot dem?

WebbIE nettleser 4

La oss gå over problemene denne brukergruppen står overfor, hvordan våre bransjepraksis hjelper til med å hindre dem, og hvordan vi kan løse problemet!

Utgaver i Typeface Design

Når en designer skaper et skrifttype, har det bestemt sted å se på, en stor innflytelse. Tegn som er beregnet for å bli lest på trykte medier, vil være utformet slik at de passer best til det. En skrifttype skal først optimaliseres før den blir brukt på nettet, og mange populære skrifttyper har nettvarianter i disse dager. For eksempel kan et skrifttype som er optimalisert for nettet, ha mindre slagkontrast (som du ser på et øyeblikk), en høyere x-høyde, større tellere (hullene i et brevform) og mer åpen avstand. Selv om det sikter på å gjøre typen mer lesbar på nettet, kan noen av disse endringene faktisk ha den omvendte effekten for personer med nedsatt syn.

Unmodulated Strokes

Du vil ofte høre at folk blir sammenblandet i en diskusjon om hvilke som er mest lesbare for kopiering; serif eller sans-serif type? Faktisk er det ikke så svart og hvitt som å velge et skrift for lesbarhet.

Umodulerte slag er når vekten i et tegneslag er uvarierte hele tiden. Dette fjerner mange definerende karaktertrekk ved bokstaver som brukes av synshemmede for tolkning. For en synskadet bruker, er S av en umodulert skrift kunne ganske feasibly bli feilfortolket som en C.

I eksemplet ovenfor ser du at Arial har umodulerte slag, i motsetning til det klassiske serif Georgia. Verdana er et godt eksempel på en sans-serif som viser liten modulering. Dens utvidede terminaler (slutten av strekkene) antyder et "stopp" før leserens øye flytter til neste tegn.

I 1950 utviklet Herman Zapf Optima med nettopp dette i tankene; han siktet på en sans-serif som kunne erstatte den oftest brukte serif typen i bøker og magasiner. 

Dårlig håndtering av størrelse og vekt

Du har kanskje funnet deg selv å måtte gjøre dette før: øker vekten av en skrift i mindre størrelser for bedre lesbarhet. For det meste er dette en tilfredsstillende løsning som gir det forventede brukerens lesbare innhold. Når det gjelder synshemmede brukere, skaper dette igjen en nesten umulig leseopplevelse.

Når du kombinerer en skrift som ikke er spesielt utformet for en viss størrelse, og forbedrer lesbarheten ved å legge vekt på (spesielt hvis nettleseren legger vekten i stedet for å bruke en bestemt skriftvariant), overstyrer den effekten av umodulerte slag. Den tilsatte vekten forstyrrer bokstavsspesifikke egenskaper som brukes til lettere identifisering. 

Mangel på særskilt kjerning

Kerning er den særegne tilpasningen av avstand mellom tegn i en skrifttype. Med kerning er målet å ha en tydelig mengde mellomrom mellom tegn for hele skriftfamilien. Men i de fleste skrifttyper finner du på nettet mengden av hvite rom håndteres på en mer enhetlig måte.

På overflaten virker dette ikke så viktig, men en jevn tilnærming kan føre til feiltolkning av karakter. Et vanlig eksempel på dette er L og J. Plasser disse to tegnene ved siden av hverandre, og du kan enkelt misforstå dem for U, eller LI. Et annet godt eksempel er to hovedsteder v, VV. Denne kombinasjonen kan enkelt betraktes som en W.

Fargevalg

Det er umulig å diskutere lesbarhet uten å nevne fargevalg. Ulike fargekombinasjoner for skrift og bakgrunn skape forskjellige leserfaringer. For eksempel er det en vanlig sikker praksis å sette nesten svart tekst på toppen av en nesten hvit bakgrunn. I samme henseende er det dårlig praksis å bruke en gul farge med en hvit bakgrunn. Sistnevnte gir en fryktelig leserfaring, og kan indusere hodepine.

I dag, med den fremtredende bruken av flat design, utgjør disse fargeproblemene ikke så stort et problem i forhold til noen få år siden. Imidlertid er det fortsatt noe å ta i betraktning. For en video bakgrunn (også en stigende trend), vil det alltid være forskjellige scener som endrer fargebalansen. For flat design ligger problemet ved valg bare å dumpe en farge nok til hvor den gir et akseptabelt nivå av lesbarhet.

Den hvite på blå i dette eksemplet ser bra ut, men ikke hvis visjonen din ikke er 100%. Ta en titt på checkmycolours.com for å analysere eventuelle kombinasjoner du er usikker på.

Opprette bedre prosjektfontsett

Etter å ha gått over noen hurtige nøkkel ulemper overfor synshemmede brukere med webtypografi, la oss nå overgå til hva som kan gjøres som arkitekter på nettet for å hjelpe med det.

Bedre fargekombinasjoner

For å lage fargekombinasjoner mellom skjema og skrift, er det bare en enkel regel å følge. Bakgrunnen skal være tydelig og dempet nok til hvor den ikke skaper støy. For skrifttypen, en solid farge med en respektabel mengde kontrast. Enkel, rett?!

For video bakgrunn er det litt mer involvert. Mens en overlappende bakgrunnsfarge under teksten er god, kan videoen skille mellom atmosfære og støynivå gjennom skiftende scener. For å motvirke dette, sørg for å ta hensyn til alle de forskjellige sceneendringene i hele videoen.

Ser fantastisk ut! Kan ikke lese det skjønt.

Skriftstørrelse

Bare å vise en skrift på en sikker størrelse, kommer ikke til å fungere. Som du sikkert har opplevd, vises noen fonter, ujevnt eller mindre raffinert, når de brukes i forskjellige størrelser. En populær løsning for dette er litt ekstra vekt og legger til et slag. Mens det kan hjelpe, er det rotete og får ikke jobben fullstendig.

testing

Testing for å sikre at nettstedet ditt er leselig for de med synshemming er ikke så vanskelig som det høres ut. Prøv å gjøre disse tre tingene:

  • Se på nettstedet ditt i grå skala.
  • Test hvordan nettstedet ditt vil se etter brukere som skiller mellom, eller se bestemte farger (f.eks. Oransje og rødt). www.color-blindness.com/coblis-color-blindness-simulator
  • Se hvordan lesbar fonten din ser på forskjellige nivåer av blurriness ved å spille med tekstskygge.

ressurser

  • Color Contrast Checker
  • www.checkmycolours.com
  • contrastrebellion.com
  • Farge Kontrast Analyzer Chrome Extension
  • Fargeblind websidefiler
  • Sim Daltonism (Color Blindness Simulator OSX)

Konklusjon

Å være klar over at det er et problem er halv kampen. Nå bør du ha et solid utgangspunkt for å forstå hvordan du kan gi synskadede brukere en bedre opplevelse.