Verbetering van webtypografie voor slechtziende gebruikers

Wij in de webindustrie creëren vaak voor de meerderheid, waardoor ons werk draaglijk is voor mensen in de minderheid. Dat is niet goed genoeg. In dit artikel gaan we manieren onderzoeken om de typografische ervaring voor visueel gehandicapte gebruikers op internet te verbeteren.

Uit rapporten van eind 2013 blijkt dat er naar schatting 285 miljoen mensen met een visuele beperking wereldwijd zijn. Terwijl 90% van deze mensen in ontwikkelingslanden woont, omvat de resterende 10% 28.500.000 mensen die zeker op enigerlei wijze interactie hebben met internet. Er zijn speciaal ontworpen browsers voor gebruikers met een visuele beperking, zoals WebbIE, die alle pagina's omzetten naar alleen-tekstinterfaces om met schermlezers te werken, maar is dat voldoende? Hoe zit het met degenen die niet volledig blind zijn, maar problemen hebben met het lezen van lettertypen via internet? Is een alles-of-niets benadering eerlijk voor hen?

WebbIE-webbrowser 4

Laten we eens kijken naar de problemen waarmee deze gebruikersgroep wordt geconfronteerd, hoe onze branche-activiteiten helpen deze te belemmeren en hoe we het probleem kunnen oplossen!

Problemen bij het ontwerpen van letters

Wanneer een ontwerper een lettertype maakt, heeft de voorbestemde plaats van kijken een zware invloed. Tekens die erop zijn gericht om op gedrukte media te worden gelezen, zijn ontworpen om daar het beste bij te passen. Een desktoplettertype moet eerst worden geoptimaliseerd voordat het op het web wordt gebruikt, en veel populaire lettertypen hebben tegenwoordig webvarianten. Een lettertype dat is geoptimaliseerd voor het web, heeft bijvoorbeeld mogelijk minder lijncontrast (dat zie je in een oogwenk), een grotere x-hoogte, grotere tellers (de gaten in een lettervorm) en meer open spatiëring. Hoewel het er op gericht is om het type leesbaarder te maken op het web, kunnen sommige van deze veranderingen juist het omgekeerde effect hebben voor mensen met een verminderd gezichtsvermogen.

Ongemoduleerde slagen

Je zult vaak horen dat mensen verstrikt raken in een discussie over wat het meest leesbaar is voor kopiëren; serif of sans-serif type? In feite is het kiezen van een lettertype voor leesbaarheid niet zo zwart en wit als dat.

Ongemoduleerde slagen zijn wanneer het gewicht in de slagen van een personage overal onveranderd is. Dit verwijdert veel bepalende kenmerken van letters die worden gebruikt door visueel gehandicapten voor interpretatie. Voor een gebruiker met een visuele beperking, de S van een ongemoduleerd lettertype zou heel goed als verkeerd kunnen worden geïnterpreteerd als een C.

In het bovenstaande voorbeeld ziet u dat Arial ongemoduleerde beroertes heeft, in tegenstelling tot de klassieke serif Georgia. Verdana is een goed voorbeeld van een schreefloze letter die een lichte modulatie vertoont. De verbrede aansluitingen (het einde van de slagen) suggereren een "stop" voordat het oog van de lezer naar het volgende personage beweegt.

In de jaren vijftig ontwikkelde Herman Zapf Optima met precies dit in gedachten; hij streefde naar een schreefloze letter die het vaker gebruikte serif-type in boeken en tijdschriften kon vervangen. 

Slechte omgang met afmetingen en gewicht

Misschien had je dit eerder moeten doen: het vergroten van het gewicht van een lettertype in kleinere formaten voor een betere leesbaarheid. Voor het grootste deel is dit een bevredigende oplossing die de geanticipeerde door de gebruiker leesbare inhoud geeft. In het geval van gebruikers met een visuele beperking creëert dit opnieuw een vrijwel onmogelijke leeservaring.

Wanneer u een lettertype combineert dat niet speciaal is ontworpen voor een bepaalde grootte en de leesbaarheid verbetert door gewicht toe te voegen (vooral als de browser het gewicht toevoegt, in plaats van een specifieke lettertypevariant te gebruiken), wordt het effect van ongematureerde lijnen overdreven. Het toegevoegde gewicht vervaagt letterspecifieke kenmerken die worden gebruikt voor eenvoudiger identificatie. 

Gebrek aan onderscheidend speren

Kerning is de kenmerkende aanpassing van de spatiëring tussen tekens in een lettertype. Met kerning is het doel een duidelijke hoeveelheid witruimte te hebben tussen tekens voor de gehele lettertypefamilie. In de meeste lettertypen vindt u echter op internet de hoeveelheid witruimte op een meer uniforme manier.

Op het eerste gezicht lijkt dit niet zo belangrijk, maar een uniforme benadering kan tot verkeerde interpretaties leiden. Een bekend voorbeeld hiervan is L en J. Plaats deze twee personages naast elkaar en je kunt ze gemakkelijk verkeerd interpreteren U, of LI. Een ander geweldig voorbeeld is twee kapitaal v, VV. Deze combinatie kan gemakkelijk worden bekeken als een w.

Kleurkeuzes

Het is onmogelijk om de leesbaarheid te bespreken zonder kleurkeuzes te noemen. Verschillende kleurencombinaties voor het lettertype en de achtergrond creëren verschillende leeservaringen. Het is bijvoorbeeld een veel voorkomende veilige praktijk om bijna-zwarte tekst op een bijna witte achtergrond te plaatsen. In hetzelfde opzicht is het een slechte gewoonte om een ​​gele kleur met een witte achtergrond te gebruiken. De laatste zorgt voor een vreselijke leeservaring en kan hoofdpijn veroorzaken.

Vandaag, met het prominente gebruik van een plat ontwerp, vormen deze kleurproblemen niet zo'n groot probleem in vergelijking met een paar jaar geleden. Het is echter nog steeds iets om rekening mee te houden. Voor een video-achtergrond (ook een stijgende trend) zullen er altijd verschillende scènes zijn die de kleurbalans veranderen. Voor een plat ontwerp ligt het probleem bij het eenvoudigweg dempen van een kleur om te zorgen voor een acceptabel niveau van leesbaarheid.

Het wit op blauw in dit voorbeeld ziet er geweldig uit, maar niet als uw zicht niet 100% is. Neem een ​​kijkje op checkmycolours.com om combinaties te analyseren waarvan u niet zeker bent.

Betere projects Font Sets maken

Nadat we een aantal belangrijke nadelen hebben besproken waarmee visueel gehandicapte gebruikers te maken hebben met webtypografie, gaan we nu over op wat we kunnen doen als architecten van het web om daarmee te helpen.

Betere kleurencombinaties

Als u kleurcombinaties wilt maken tussen uw schema en lettertype, hoeft u slechts één eenvoudige regel te volgen. De achtergrond moet duidelijk en gedempt genoeg zijn om te bepalen waar deze geen ruis veroorzaakt. Voor het lettertype een effen kleur met een respectabel contrast. Eenvoudig, toch?!

Voor video-achtergronden is er iets meer betrokken. Hoewel een overlappende achtergrondkleur onder de tekst geweldig is, kan de video de sfeer en het geluidsniveau differentiëren door van scène te veranderen. Om dit tegen te gaan, moet je rekening houden met alle verschillende scènewisselingen in de video.

Ziet er gaaf uit! Ik kan het echter niet lezen.

Lettertypegrootte

Gewoon een lettertype op een veilige grootte weergeven, zal niet altijd werken. Zoals je waarschijnlijk hebt ervaren, zien sommige lettertypen er gekarteld of minder verfijnd uit, wanneer ze in verschillende formaten worden gebruikt. Een populaire oplossing hiervoor is wat extra gewicht en het toevoegen van een streek. Hoewel dat kan helpen, is het rommelig en wordt het werk niet helemaal gedaan.

testen

Testen om te zorgen dat uw site leesbaar is voor mensen met een visuele beperking is niet zo moeilijk als het klinkt. Probeer deze drie dingen te doen:

  • Bekijk uw site op een grijze schaal.
  • Test hoe uw site eruitziet voor gebruikers die onderscheid maken tussen, of bepaalde kleuren zien (bijvoorbeeld oranje en rood). www.color-blindness.com/coblis-color-blindness-simulator
  • Bekijk hoe leesbaar je lettertype kijkt naar verschillende niveaus van wazigheid door te spelen met tekstschaduw.

Middelen

  • Kleurcontrastcontrole
  • www.checkmycolours.com
  • contrastrebellion.com
  • Kleur Contrast Analyzer Chrome-extensie
  • Kleurenblinde webpaginadrager
  • Sim Daltonism (Color Blindness Simulator OSX)

Conclusie

Zich bewust zijn van een probleem is de helft van de strijd. Nu zou u een solide uitgangspunt moeten hebben om te begrijpen hoe u visueel beperkte gebruikers een betere ervaring kunt geven.