Inclusive design vergroot je doelgroep en online zichtbaarheid

Met inclusieve en accessible design principes houd je rekening met mensen met tijdelijke of langdurige beperkingen, en wordt er gekeken naar de mogelijkheden om het consumeren van digitale content voor hen gemakkelijker te maken. Op die manier zorg je er met kleine aanpassingen voor dat jouw digitale dienst voor zoveel mogelijk mensen toegankelijk wordt, ongeacht achtergrond of beperking. In dit blog nemen we jou mee in hoe wij user experience (UX) en user interface (UI) designs inrichten zodat ze voor iedereen toegankelijk zijn en we jouw online zichtbaarheid vergroten.

Voordat je gaat designen, heb je een goede paginaopbouw nodig. Slechtzienden en blinden maken vaak gebruik van een screen reader. Dit hulpmiddel leest de HTML-code op jouw website en zet dit om naar een tekst, een audiobestand of bijvoorbeeld een braille display. Hiervoor zijn duidelijke en uitgebreide alt-tags en de juiste opbouw van de code van jouw HTML website essentieel. Door gebruik te maken van de juiste titels of headings, zoals H1, H2 en H3, weten browsers en screen readers hoe een pagina is opgebouwd en welk deel waarbij hoort. Dat zorgt ervoor dat het scannen door de pagina en het voorlezen van de tekst en afbeeldingen gemakkelijker is. Als je niet zeker weet of jouw website duidelijk genoeg is, kan je zelf de pagina’s toetsen met een screen reader zoals NVDA voor Windows, screen reader Chrome extensions en Voiceover voor Mac. Microsoft heeft in 2020 een gemaakt om de gedachte achter inclusive design behapbaar te maken:

Het gebruik van Alt-tags is met name belangrijk voor mensen die gebruik maken van een screen reader. Alt-tags zijn de beschrijvingen van foto’s, video’s en iconen op website pagina’s. Deze Alt-tags zijn bedoeld om afbeeldingen te beschrijven voor slechtzienden en worden voorgelezen door een screenreader. Een voorbeeld van hoe het niet moet is: “man roltrap”. Hiermee breng je niet over wat er daadwerkelijk gebeurt of te zien is in de afbeelding. Het is dus beter om je Alt-tags beeldender te schrijven: ‘volwassen, goed geklede, zakenman in jas met aktetas die op een bewegende roltrap staat terwijl hij wegkijkt.’ Op deze manier krijg je echt een duidelijk beeld van hoe de afbeelding eruitziet. Let er wel op dat je de Alt-tag niet té lang maakt, sommige screenreaders lezen kappen de tekst na de eerste 125 karakters af. Vermijd daarnaast overbodige toevoegingen als “foto van” of “afbeelding van” aan het begin van de tag. Reden om dit niet te doen is omdat de screenreader dit al benoemd bij het voorlezen.

Niet alle kleuren kunnen gezien worden door slechtzienden of mensen die kleurenblind zijn, of gelezen worden door screen readers. Zo is een lichtgrijze tint, wat vaak gebruikt wordt in moderne UI en UX designs voor inactive velden, niet inclusief. Een goede manier om jouw kleurkeuzes te toetsen is de ‘Web Content accessibility Guidelines’, ofwel WCAG. Hier verifieer je de toegankelijkheid van de gebruikte kleuren en kleurcontrasten op jouw webpagina. Komodo Digital heeft een blog toegewijd aan kleurcontrasten en legt uit dat je de kleurcombinaties in de linkerhelft van onderstaande foto moet vermijden. En dat je beter voor contrasten in de rechterhelft kunt kiezen om een groter publiek te bedienen en jouw website en designs toegankelijk te maken.

Bij het leesbaar maken van jouw teksten is het juiste lettertype en lettergrootte erg belangrijk. Kies voor een lettertype waar letters niet teveel op elkaar lijken en er voldoende ruimte tussen de letters aanwezig is. Een lettertype uit de sans-serif familie is al een stuk toegankelijker dan een serif lettertype. De algemene vuistregel voor toegankelijkheid is dat een platte tekst minimaal 16 pt groot moet zijn. Hierdoor zijn jouw teksten gemakkelijker te lezen voor slechtzienden.

Regellengte

Zorg ervoor dat je een maximale regellengte op je website toepast. Niet elk scherm is even groot en te lange of te korte leesregels zijn niet prettig. Over het algemeen is de ideale regellengte 65 tekens, inclusief interpunctie en spaties.

Het automatisch afspelen van audio en video op jouw website is niet aan te raden. Vaak wordt dit als vervelend ervaren en zeker voor mensen met een screenreader. Screenreaders lezen informatie namelijk op een lineaire manier. Websites worden gelezen van boven naar beneden en van links naar rechts. Als je op jouw website automatisch een audio of video laat afspelen is het voor mensen met een screenreader vrijwel onmogelijk om de pauzeer of mute knop te vinden. Wil jij toch graag een audio of video laten afspelen? Zorg dan dat deze standaard uit staat en dat er een mogelijkheid bestaat deze op een eenvoudige manier aan te zetten.

Het is belangrijk jouw teksten altijd zo simpel mogelijk te houden. Vermijd hierin altijd afkortingen (bijvoorbeeld geen d.o.b, maar juist date of birth) en jargon. Schrijf je teksten zoveel mogelijk in B1, zodat je weet dat het leesbaar is voor het grootste gedeelte van de bevolking. Ben jij er niet zeker van, controleer dan jouw woorden op www.ishetb1.nl.

Aangezien de groep die een tijdelijke of langdurige beperking heeft veel groter is dan je op voorhand zouden denken is de kans groot dat je een groot gedeelte van jouw doelgroep niet bereikt. Het is bij het maken van jouw teksten, website en ander beeldmateriaal belangrijk rekening te houden met de juiste inclusieve design principes. Door dit op de juiste manier toe te passen, vergroot je de toegankelijk van jouw content en website. Het zorgt ervoor dat je op de lange termijn meer zichtbaarheid creëert voor jouw website, wat uiteindelijk weer kan leiden tot meer mogelijke klanten of andere mogelijkheden. 

Wil je ook inclusive designs voor jou merk, neem dan contact met ons op.