Door Roy
In dit artikel neem ik je mee in de belangrijkste onderdelen voor de basis van toegankelijke vormgeving. Dit is een onderdeel van de digitale toegankelijkheid. Zowel voor grafische vormgeving als voor toegankelijke vormgeving geldt als vanzelfsprekend, dat geen element zomaar voor de vorm wordt gebruikt. Voor beide is er een doordacht argument, dat als basis gelegd wordt. De doelgroep speelt altijd mee in de gedachte. Vanuit de grafische vormgeving wordt gekeken welke vormen en kleurgebruik aanspreekt. Om te zorgen dat grafische en toegankelijke vormgeving hand in hand gaan en elkaar niet gaan steken worden de toegankelijkheid principes in het begin van het proces gelijk meegenomen.
De principes van toegankelijke vormgeving bestaan uit 7 waarden:
Dit houdt in dat de verschillende gebruikers van een website een taak op een zelfde wijze kunnen doen. Een aantal elementen die toegepast kunnen worden om dit te bereiken zijn:
Niet iedere gebruiker ervaart het gebruik van de website op dezelfde manier. Dit kan te maken hebben met bijvoorbeeld zicht. Het hebben van slecht zicht, in een slecht belichte ruimte of te maken hebben met schittering van zonlicht kan het gebruik van een website verhinderen.
Enkele oplossingen hiervoor zijn:
De gebruikte elementen door de hele website moeten op dezelfde manier gebruikt worden. Zodat de navigatie er altijd hetzelfde uit ziet en op dezelfde plek wordt vertoond.
Dit doe je door genoeg ruimte te creëren zodat bij het inzoomen alles goed zichtbaar en leesbaar blijft. Daarbij zorg je dat de gebruiker animaties op de website kan stoppen, omdat deze voor sommige gebruikers te afleidend kunnen werken.
Maak gebruik van meerdere alternatieven zoals bij contactgegevens. Bied iemand die bijvoorbeeld doof is en niet in staat om te bellen de mogelijkheid om via e-mail contact op te nemen. Geef bij een fotogalerij de optie om via een slider de foto’s te bekijken en een optie ze in een grid te bekijken.
Het gebruik van goede hiërarchische koppen kan hier aan bijdragen. Beginnen met een een kleine en krachtige samenvatting (TL;DR)* van de informatie op een pagina aan het begin van een artikel wordt ook als prettig ervaren.
*to long;didn’t read
De vormgegeven functionaliteit moet waarde toevoegen zodat het de gebruikerservaring verbetert. Zorg bijvoorbeeld bij een interactieve map dat de adressen ook als lijst te zien zijn. Een ander goed voorbeeld is de optie geven om het wachtwoord te zien, terwijl de gebruiker het intypt.
2 basiselementen die belangrijk zijn voor een prettige ervaring op een website zijn contrast (kleurgebruik) en typografie (hoe zet je tekst goed leesbaar neer).
Voor toegankelijkheid wordt een minimaal contrast ratio van 3:1 verlangd. Dit kun je eenvoudig zelf meten met een browser-extensie zoals de accessibleweb contrast checker: https://accessibleweb.com/color-contrast-checker/
Voor toegankelijkheid is het beter om geen waarde toe te kennen aan kleuren. Dat wil zeggen, niet iedereen kan kleur zien of ziet de kleur op dezelfde wijze. Het is handig om ter ondersteuning van de kleur een melding en iconen te gebruiken. Zoals bij het foutief invullen van een formulier. Gebruik niet alleen rood en groen als markering, maar geef door contrast, een icoon of een bericht aan dat een veld niet goed is ingevuld.
Vaak wordt voor typografie lettertypes uitgezocht, die mede de sfeer bepalen van een website. Een lettertype grootte van 16 pt wordt als een goed leesbare grootte gezien. Belangrijk daarbij is dat voor de tekstparagrafen een goed leesbaar lettertype wordt gebruikt. Meest voor de hand liggend hiervoor is een sans serif, deze blijven altijd goed helder in tegenstelling tot de serifs (lettertypen met schreven), die soms op beeldschermen wazig overkomen. Beperk het aantal lettertypen. Een aantal van 3 wordt als prettig ervaren. Bij gebruik van meer dan 3 wordt het vaak als rommelig ervaren. Maak tekstregels niet te lang. Uit onderzoek is gebleken dat 50 tot 75 karakters het beste leescomfort geeft. Het is niet aan te raden om uitgevuld zetsel te gebruiken, omdat hierdoor in regels gaten vallen wat de leesbaarheid beïnvloedt. Links lijnend geeft de beste leeservaring.
Ons brein zoekt naar patronen, dit kun je gebruiken door de elementen in patronen op de website te plaatsen. 2 principes die hier handig zijn om te gebruiken zijn ‘nabijheid’ en ‘gelijkenis’. Bij nabijheid plaats je elementen die bij elkaar horen dichtbij elkaar. Dit helpt wanneer er wordt ingezoomd de context gelijk te houden. Als je elementen te ver van elkaar plaatst kan de context bij inzoomen verloren gaan. Dit principe is ook goed toe te passen bij formulieren door gegevens in logische groepen te plaatsen. Gelijkenis gaat over elementen die een bepaalde functie hebben zoals knoppen dezelfde kleur en vorm te geven. Hierdoor maak je het begrijpelijk welke onderdelen welke functie hebben op een website.
Tot zover de toegankelijke vormgeving in vogelvlucht. Mocht je nog meer willen weten of verdere vragen hebben over toegankelijke vormgeving? Neem gerust contact met ons op contact@catapult.nl of bel naar (0548) 654 954.
Heb je de eerste blog ‘Je zei: “wei•kek?” (WCAG)’ gemist, lees hem hier terug.
Het afgelopen jaar is onze collega Roy Giezen opgeleid tot expert digitale toegankelijkheid. Roy schrijft een serie blogs over dit onderwerp. Volg het blog van Roy in deze 4-delige serie. Dit was deel 2. Binnenkort volgt deel 3 met als onderwerp ‘toegankelijke codering’. Volg onze socials om op de hoogte te blijven wanneer de volgende blog van Roy geplaatst wordt.