Het kiezen van het juiste lettertype en de presentatie ervan: A Key to ADA Accessible Websites

Het web is een plaats van openbare accommodatie waar iedereen een gelijk recht heeft om deel te nemen, toegang te krijgen, te presenteren en informatie op te halen, ondanks een handicap. De “Americans with Disability Act” (ADA) werd aangenomen om te zorgen voor gelijke kansen voor personen met een handicap. Hoewel het internet toen nog in de kinderschoenen stond, is de realiteit nu dat deze wet van toepassing is op alle virtuele plaatsen, met inbegrip van digitale diensten en online inhoud.

Om aan hun wettelijke en morele verplichtingen te voldoen, zijn alle organisaties en bedrijven verplicht om hun websites en online kanalen toegankelijk te maken voor mensen met een handicap. Een van de belangrijkste pijlers van het ontwerpen van een toegankelijke website ligt in de leesbaarheid en leesbaarheid van de tekstuele inhoud. Dit kan alleen worden bereikt met behulp van toegankelijke lettertypen.

We hebben deze gids samengesteld om onze lezers te helpen vragen te beantwoorden als Wat zijn toegankelijke lettertypen en wat is het beste lettertype om te gebruiken voor een website? Lees verder om meer te weten te komen over de details van ADA-goedgekeurde lettertypen en hun kenmerken. We zullen ook enkele kenmerken behandelen die nodig zijn om een website toegankelijk te maken voor mensen met een visuele handicap, dyslexie en leesstoornissen.

Een overzicht van lettertypefamilies

Fonts en verschillende lettertypefamilies nemen een belangrijke plaats in binnen de digitale typografie. Een lettertypefamilie bestaat uit een reeks verschillende lettertypen die vergelijkbare kenmerken en eigenschappen hebben met betrekking tot ontwerpstijlen. Inzicht in hun eigenschappen kan webdesigners helpen de meest toegankelijke lettertypes voor hun websites te kiezen. Hoewel er veel lettertypefamilies zijn, noemen we er hier vier, die ook door een gebruiker in een webbrowser kunnen worden geconfigureerd:

• Serif: Serif-lettertypes hebben versieringen of versieringen aan het eind van een streep in een letter of symbool.
• Sans-Serif: Sans is het Franse woord voor “zonder”. Sans-serif lettertypen zijn eenvoudiger en hebben niet de verlengde lijnen of versieringen aan het eind van elke streek in een letter of symbool.
• Monospace: Monospace-lettertypen hebben dezelfde breedte voor elke letter of symbool. Ze worden ook wel vaste breedte of niet-proportionele lettertypen genoemd.
• Cursief: Cursieve lettertypen worden geschreven op een vloeiende manier die lijkt op handgeschreven woorden. De afzonderlijke letters kunnen worden samengevoegd om een artistieke indruk te geven.

Meeteenheden

Er zijn verschillende eenheden voor het definiëren van lettergroottes:

• Ems (em): Deze eenheid definieert een lettergrootte ten opzichte van de grootte van het parent element in een HTML-pagina. Bijvoorbeeld, als het parent element in HTML 14 px is, dan zou 2 em het 28 px maken.
• Rems (root ems): Bij het gebruik van rem-eenheden worden alle lettertypen gedefinieerd ten opzichte van de lettergrootte van het root-element in HTML. Alle tekst in de HTML wordt dus gespecificeerd ten opzichte van één basislettertype en is niet afhankelijk van waar de tekst in de HTML-hiërarchie van de webpagina’s is geplaatst.
• Pixels (px): Dit is een absolute meeteenheid en is niet gebaseerd op meting ten opzichte van een basiselement.
• Punten (pt): Punten zijn ook een absolute meeteenheid. WCAG gebruikt CSS3 waarden, waarbij 1pt 1.333 px is. Dus, 14pt en 18pt vertalen naar respectievelijk 18.5px en 24px.

Wat maakt een lettertype ontoegankelijk?

Ontoegankelijke lettertypen die zijn uitgesloten van de lijst met ADA-conforme lettertypen zijn de lettertypen die:

• de tekst moeilijker leesbaar maken
• het onderscheid tussen de vormen van verschillende letters en tekens moeilijk maken
• de leessnelheid van de gebruiker vertragen
• overlappende letters of tekens hebben, waardoor het moeilijk is de ene letter van de andere te onderscheiden.

Als een lettertype versierd is met versieringen, wordt het moeilijk te lezen. Alle lettertypen met versieringen aan het eind van een streek kunnen voor sommige gebruikers moeilijker te lezen zijn. Ook cursieve of handschriftelijke lettertypen maken de tekst ontoegankelijk en zijn daarom niet de beste lettertypen om voor een website te gebruiken.

Wat zijn toegankelijke lettertypen?

Bij het ontwerpen van een website is een van de belangrijkste aspecten de keuze van het juiste lettertype en de presentatie ervan. Verreweg de meeste websites vereisen veel tekstuele inhoud, die waarneembaar en zichtbaar moet zijn. De sleutel tot een toegankelijke website is daarom de leesbaarheid van de tekst, die tot uiting komt in verschillende lettertypen en kleuren.

Welke standaardlettertypen zijn toegankelijk?

Helaas lopen de meningen van deskundigen uiteen over het meest leesbare lettertype voor het web, en welk lettertype moet worden gebruikt, aangezien verschillende gebruikers verschillende eisen stellen. Een slechtziend publiek zou bijvoorbeeld meer behoefte hebben aan grotere tekst. Mensen met een beperkt gezichtsveld maar een beter gezichtsvermogen hebben meer tekens nodig om in hun gezichtsveld te passen, terwijl de tekst toch klein moet blijven. Mensen met dyslexie of leesstoornissen hebben ook hun eigen behoeften.

Het is het beste dat webdesigners flexibiliteit bieden, zodat gebruikers hun eigen lettertypen kunnen kiezen. Als een webpagina het standaardlettertype van de webbrowser gebruikt, dan hoeft een lezer niet telkens als de webpagina wordt geladen over te schakelen op een ander lettertype.

Weliswaar is er geen vaste ADA-vereiste voor de lettergrootte, maar toegankelijke ADA-conforme lettertypen zijn duidelijk, schoon en te onderscheiden van cursieve of handschriftstijlen. Men is het er algemeen over eens dat schreefloze lettertypes gemakkelijker te lezen en toegankelijker zijn dan hun tegenhangers met schreef. De lijst van ADA-geschikte lettertypen omvat, maar is niet beperkt tot Arial, Calibri, Century Gothic, Helvetica, Tahoma, en Verdana.

Het belang van toegankelijke lettertypen

De meeste informatie op het web wordt overgebracht en verspreid via tekstuele inhoud. Eén methode om tekst te presenteren is via .png- of .bmp-afbeeldingen van tekst. Dit is echter om vele redenen geen haalbare optie. Wanneer afbeeldingen bijvoorbeeld worden geschaald, gaat hun leesbaarheid achteruit. Ook kan tekst in afbeeldingen niet worden voorgelezen door screenreaders. Daarom moet alle tekst op een website bestaan uit toegankelijke lettertypen, die leesbaar en zichtbaar zijn.

Het ontwerpen van een toegankelijke website met toegankelijke lettertypen is nu niet meer alleen een aanbeveling of een optioneel kenmerk. Het is verplicht; als een website de toegankelijkheidsbeginselen schendt, loopt het gastbedrijf of de onderneming het risico op zware straffen, boetes of rechtszaken. Deze boete kan oplopen tot 75.000 dollar voor de eerste overtreding en meer voor latere niet-naleving.

Er zijn naar schatting 32,2 miljoen volwassenen met visuele beperkingen, volgens de gegevens van de National Health Interview Survey (NHIS). Dit omvat niet alleen blinden, maar ook mensen die slechtziend zijn ondanks het dragen van een bril. De CDC voorspelt dat dit aantal snel groeit als gevolg van leeftijdsgebonden of ziekte-gerelateerde visuele beperkingen.

Bij het ontwerpen van websites, bedrijven en ondernemingen die tegemoet te komen aan deze grote minderheid van de bevolking zal natuurlijk genieten van een breder publiek. Het is een bekend feit dat als de tekst op een website moeilijker te lezen is, deze een kleiner lezerspubliek zal hebben en een beperkt aantal paginabezoeken. Daarom is het toevoegen van door de ADA goedgekeurde lettertypen aan een website een essentieel aspect van het runnen van een succesvol bedrijf.

Specialistische lettertypes

De British Dyslexia Association (BDA) wijst op de volgende belangrijke aspecten waarmee rekening moet worden gehouden bij het ontwerpen van websites en het selecteren van toegankelijke lettertypes voor mensen met dyslexie:

• Het gekozen lettertype moet zo zijn ontworpen dat gebruikers gemakkelijk het verschil kunnen zien tussen verschillende letters en cijfers. Bijvoorbeeld, l (kleine L), 1, en I (hoofd i), kunnen er allemaal hetzelfde uitzien.
• De letters b en d, en p en q, zijn spiegelbeelden van elkaar. Dyslectici kunnen het moeilijk vinden ze van elkaar te onderscheiden. De letters moeten zo worden weergegeven dat ze niet langer spiegelbeelden zijn.
• De meeste door het BDA ondervraagde personen gaven de voorkeur aan een afgeronde “g” en een afgeronde “a”. Afronding van deze letters mag echter niet leiden tot verwarring met een “o”.
• Letterafstand moet voldoende zijn om onderscheid te kunnen maken tussen verschillende tekens, b.v. “rn” kan samen worden verward met de letter “m”, zodat “learn” kan worden verward met “leam”.

Specialistische lettertypen zijn ontworpen voor mensen met dyslexie, b.v. Dyslexie en OpenDyslexic. Beide fonts zijn vrij verkrijgbaar en kunnen zonder kosten worden gedownload. Zij behoren tot de beste lettertypes om te gebruiken voor een website voor dyslectische personen. Ook het lettertype Fs Me is bedoeld voor mensen met leermoeilijkheden en wordt ondersteund door de Britse liefdadigheidsinstelling voor leermoeilijkheden Mencap.

Naleving van de richtlijnen voor toegankelijkheid van webinhoud

De richtlijnen voor toegankelijkheid van webinhoud (WCAG) zijn ontwikkeld en gepubliceerd door het World Wide Web Consortium (W3C). Deze aanbevelingen vormen de algemeen aanvaarde norm voor het ontwerp van toegankelijke websites en online-inhoud. In de VS schrijft de definitieve regel van Section 508 rechtstreeks voor dat WCAG moet worden gevolgd met ten minste niveau AA. Voor rechtszaken in verband met de ADA hebben het ministerie van Justitie en de Amerikaanse rechtbanken vaak naar deze richtsnoeren verwezen om de toegankelijkheid van openbare websites te beoordelen.

WCAG heeft duidelijke richtsnoeren voor toegankelijke lettertypen voor gebruikers met een visuele handicap, waaronder kenmerken en ontwerpkenmerken zoals kleur, contrast, grootte en verhoudingen van de tekst. Er zijn ook aanbevelingen voor de lay-out en structuur van tekstuele inhoud die een webpagina leesbaarder en toegankelijker maken. Het is essentieel om deze kenmerken in een website op te nemen om tegemoet te komen aan gebruikers met slechtziendheid, dyslexie, leesstoornissen of andere cognitieve handicaps.

Deze gids bespreekt de verschillende W3C-aanbevelingen voor het kiezen van de beste lettertypen voor toegankelijkheid, het onderhouden van ADA-conforme lettertypen, en hun belangrijke kenmerken.

Fontgrootte en proporties: laat de gebruiker ze bepalen

Bij het schrijven van tekst varieert de vorm, en dit hangt ook af van de taal. Sommige alfabetvormen zijn complex, terwijl andere eenvoudiger zijn en zelfs bij kleinere afmetingen gemakkelijker te lezen. Dit is de belangrijkste reden waarom in de WCAG geen minimale lettergrootte is vastgelegd. De volgende aspecten zijn belangrijk bij het kiezen van de beste lettertypen voor toegankelijkheid en het beste lettertype voor lezen op het scherm:

• Lettergrootte en -eenheden: Volgens WCAG moet de lettergrootte worden gespecificeerd met behulp van ems en rems, d.w.z. de richtlijn geeft de voorkeur aan relatieve lettertype-eenheden boven absolute eenheden. Webdesigners moeten vermijden een basislettergrootte in het basiselement in te stellen. In plaats daarvan kan de standaard lettergrootte van de browser worden gebruikt, die als referentiepunt kan dienen om alle andere lettergroottes te definiëren. Als de gebruiker de basis font size verandert dan verandert de hele pagina mee.
• Zoom feature: Gebruikers moeten controle hebben over de lettergrootte, inclusief het zoomen van tekst tot 200%. De tekst moet leesbaar blijven bij vergroting zonder overvol te zijn of overlappingen te hebben. Deze vergroting moet mogelijk zijn zonder het gebruik van ondersteunende technologie, bijvoorbeeld een eenvoudige regelaar zoals een schuifregelaar kan aan de website worden toegevoegd voor het vergroten of verkleinen van de tekstgrootte. Deze functie moet toegankelijk zijn op alle apparaten, bv, mobiel, desktop, tablet, etc.

Tekstafstand: maak het relatief aan de lettergrootte

WCAG 2.1 heeft de volgende aanbevelingen voor tekstafstand:

• Lijnafstand moet worden ingesteld op ten minste 1,5 keer de lettergrootte.
• Spatie na een alinea moet ten minste 2 keer de lettergrootte zijn.
• Letterafstand moet ten minste 0,2 maal de lettergrootte zijn.
• Woordafstand moet ten minste 0,16 maal de lettergrootte zijn.

Lijnbreedte: tekstomloop toestaan

In het algemeen wordt het aantal tekens gebruikt als maateenheid voor de lengte van een regel. Ondanks een handicap is het voor mensen moeilijker om langere regels te lezen dan kortere, omdat regelafbrekingen de ogen rust gunnen. Uiteindelijk mag de regellengte niet meer dan 80 tekens bedragen.

Mensen met een kleiner gezichtsveld hebben smallere tekstgedeelten nodig, waarin zij gemakkelijk het einde van een regel en het begin van de volgende kunnen onderscheiden. Daarom moet de regellengte door de gebruiker kunnen worden geregeld. Als zij de viewport aanpassen, moeten de tekstregels automatisch omwikkelen en terugvloeien, zodat de gebruiker de tekst kan lezen zonder horizontaal te hoeven scrollen.

Paragrafen: lijn paragrafen links of rechts uit

Alle webinhoud moet worden gestructureerd en georganiseerd in korte paragrafen, en lange zinnen moeten worden vermeden. De alinea’s moeten links of rechts uitgelijnd zijn. Hoewel tekst die uitgelijnd is visueel aantrekkelijker oogt, moet dit worden vermeden omdat extra spaties binnen de regels de tekst ontoegankelijk maken. Hetzelfde geldt voor gecentreerde alineastijlen, die het voor een lezer moeilijk kunnen maken het begin van de volgende regel te vinden.

De verstandige benadering van letterkleur

Effectief gebruik van kleur is belangrijk voor het overbrengen van zinvolle informatie aan de gebruiker. Verplichte velden in formulieren kunnen bijvoorbeeld met kleur worden gemarkeerd, fouten kunnen in rood worden weergegeven, de blauw onderstreepte tekst geeft meestal hyperlinks aan, en grijs kan worden gebruikt om gehandicapte formuliervelden aan te geven.

Hoewel kleuren de esthetische aantrekkelijkheid van een webpagina vergroten, moet rekening worden gehouden met mensen met een lage kleurwaarneming, die wellicht de kleurverschillen niet kunnen zien. WCAG 2.1 stelt dat alternatieve visuele aanwijzingen moeten worden gebruikt voor het onderscheiden van verschillende kenmerken, behalve alleen kleur.

Het gebruik van kleur hangt nauw samen met contrastverhoudingen. Het is essentieel om een goed kleurcontrast te hebben voor leesbare en toegankelijke tekst. De volgende punten zijn belangrijk bij het overwegen van toegankelijke lettertypen voor visueel gehandicapte gebruikers:

• Kleurcontrast moet het mogelijk maken om voorgrondtekst te onderscheiden van de achtergrond. Het mag niet te laag of te hard zijn.
• De tekstkleur grijs (#777777) op een witte achtergrond is het minimum voor het WCAG-niveau AA. Voor grotere tekst is 52 procent grijs (#828282) acceptabel.
• Reverse tekst, dat is lichte tekstkleur op de voorgrond op een donkere achtergrond, moet zoveel mogelijk worden vermeden omdat deze moeilijker te lezen is.

Contrastverhouding: maak alles te onderscheiden

De WCAG 2.1-richtlijnen voor contrastverhouding staan hieronder:

1. 1. Koppen: Contrastverhouding voor tekstkoppen en grotere tekst moet minimaal 3:1 zijn. 18 punts tekst of 14 punts vette tekst wordt als grote tekst beschouwd en moet aan deze eis voldoen.
2. 2. Hoofdtekst: Voor andere tekst dan koppen moet een contrastverhouding van ten minste 4,5:1 worden aangehouden.
3. 3. Logotype: Tekst die deel uitmaakt van een logo of merk heeft geen contrast eis.
4. 4. Incidentele Tekst: Tekst die deel uitmaakt van een inactieve gebruikersinterface, pure decoratie, onzichtbaar is, of deel uitmaakt van een afbeelding, en geen zinvolle informatie overbrengt, heeft geen contrastvereiste.

Er zijn verschillende aanbevolen manieren om de aanbevolen contrastverhouding te handhaven. Als bijvoorbeeld een letter of tekstsymbool aan de onderkant lichter is, kan dat de contrastverhouding van de hele letter schenden. In dat geval kan een ontwerper de achtergrond donkerder maken of een dunne zwarte omlijning aan de letter toevoegen om de vereiste contrastverhouding te handhaven. De relatieve helderheid van de voorgrondletters of de achtergrond kan ook worden gewijzigd om het gewenste resultaat te bereiken. De verschillende hulpmiddelen die kunnen worden gebruikt om de contrastverhouding te controleren, staan op de website van WCAG

Presentatie van tekst

Naast de integratie van lettertypen voor visueel gehandicapte gebruikers is het ook belangrijk aandacht te besteden aan de lay-out en structuur van de tekst. Als het gaat om de algehele presentatie van tekst op een webpagina, moeten de volgende belangrijke punten in acht worden genomen:

• Documenten moeten worden geschreven met hetzelfde lettertype of met zo weinig mogelijk lettertypen. Een pagina met meerdere lettertypen, zelfs als het ADA-conforme lettertypen zijn, is moeilijker te lezen.
• Heading HTML-tags, bijv. <h1>, <h2>, enz. moeten worden gebruikt om de structuur en hiërarchie van het document over te brengen en mogen niet worden toegepast alleen omdat een bepaalde lettergrootte nodig was om een element visueel te benadrukken.
• Geanimeerde en bewegende tekst moet volledig worden vermeden.
• Tekstuele inhoud moet worden gepresenteerd via tekstgegevens in plaats van met afbeeldingen of grafieken. Lettertypen van tekst verliezen bij vergroting over het algemeen niet hun leesbaarheid en behouden hun kwaliteit. Afbeeldingen van tekst hebben de neiging het tegenovergestelde gedrag te vertonen en hun kwaliteit kan verslechteren wanneer erop wordt ingezoomd.
• Hoofdletters moeten worden gebruikt en kleine letters moeten worden vermeden.
• Vet en cursief moeten niet worden gecombineerd.
• Blokken tekst met cursief zijn niet toegankelijk en zijn moeilijker te lezen.
• Onderstreep tekst niet, tenzij het een link is.

Conclusie

Het wegnemen van digitale barrières en het bieden van dezelfde internetervaring voor alle personen, met of zonder handicap, zou de hoogste prioriteit van alle bedrijven en organisaties moeten zijn. Om dit te bereiken geeft WCAG waardevolle aanbevelingen voor het kiezen van de beste lettertypen voor een website, die leesbare tekst opleveren voor alle gebruikers, inclusief mensen met slechtziendheid, dyslexie of leesstoornissen.

Bedrijven met weinig of geen ADA-ervaring kunnen zich tot deskundigen wenden bij het ontwerpen en maken van nieuwe websites of het saneren van hun bestaande sites. Proactief zijn om de toegankelijkheid van alle webinhoud en online diensten te waarborgen, zal helpen zware geldboetes en schade te voorkomen.

Het is verstandig om hulp in te schakelen van een team van ontwikkelaars, ontwerpers en ingenieurs die de expertise en ervaring hebben met het ontwikkelen van ADA- en 508-conforme websites. Als onderdeel van onze webtoegankelijkheidsdiensten bieden wij complete pakketten voor het ontwikkelen van websites op basis van WCAG-normen, het saneren van verouderde websites en het uitvoeren van regelmatige audits om de toegankelijkheid van uw website te waarborgen.