Digitale toegankelijkheid is geen eenmalig project, maar een doorlopende activiteit. Daarom zijn er richtlijnen opgesteld die continu worden bijgewerkt. In deze serie artikelen leggen we uit waarom digitale toegankelijkheid zo belangrijk is en delen we inzichten waarmee je zelf aan die richtlijnen kunt voldoen. In het eerste deel legden we uit waarom dit onderwerp ook voor jou belangrijk is en bespraken we de technische kant. In dit tweede deel gaat het om wat visueel belangrijk is.
Visuele speerpunten
Contrast
Om ervoor te zorgen dat zowel slechtzienden als kleurenblinde gebruikers alles goed kunnen zien, is een sterk contrast belangrijk. De norm is dat platte tekst, dus normale alinea’s, een contrastwaarde heeft van minimaal 4,5:1. Wordt tekst groter weergegeven, dan mag het contrast lager zijn: minimaal 3:1.
In de praktijk zien we regelmatig dat de kleuren uit de huisstijl een-op-een op de website worden doorgevoerd. Dat is consistent voor de branding, maar niet toegankelijk.
Neem bijvoorbeeld een huisstijl met oranje of geel. Worden die kleuren als achtergrond gebruikt met witte tekst, dan is de tekst leesbaar voor mensen met normaal zicht, maar is het contrast te laag voor slechtzienden. Een oplossing is om deze kleuren alleen te gebruiken in visuele elementen die niet noodzakelijk zijn voor de inhoud van de pagina. Zo blijft de content goed leesbaar en komt de huisstijl toch goed tot zijn recht.
Benieuwd of de kleuren in je website of applicatie genoeg contrast hebben? Dan kun je de contrastchecker van WebAIM gebruiken.
Consistentie
Interfaces zoals websites bevatten veel functionele elementen: buttons, links, invulvelden. Door die steeds dezelfde opmaak te geven, maak je het voor mensen makkelijker om te begrijpen hoe iets werkt. De leercurve van een interface wordt daardoor minder steil.
Kleurafhankelijkheid
Kleur mag niet de enige aanwijzing zijn dat een element klikbaar is. Als klikbare elementen alleen met kleur worden aangegeven, is het voor mensen met kleurenblindheid lastig of zelfs onmogelijk om door een website te navigeren.
Tekstlinks zijn hiervan een goed voorbeeld. Die krijgen vaak alleen een andere kleur dan de rest van het tekstblok. Een best practice is daarom om links te onderstrepen of er een visueel element aan toe te voegen, zoals een icoon.
Alternatieve lay-out
Zoals we bij de functionele speerpunten al aangaven, moeten gebruikers een website op verschillende manieren kunnen bekijken. Zo moet een website of applicatie tot 200% ingezoomd kunnen worden zonder stuk te gaan. Ook een voorleesfunctie en de mogelijkheid om over te schakelen naar een zwart-witweergave mogen niet ontbreken.
Regelhoogte en alinea-afstand
De regelhoogte moet minimaal 1,5 keer de lettergrootte zijn en de ruimte tussen alinea’s minimaal 2 keer de lettergrootte. Daarnaast moet er genoeg ruimte zitten tussen letters en woorden. Tekst mag niet overlappen of te dicht op elkaar staan, zodat gebruikers tekstblokken en informatie goed van elkaar kunnen onderscheiden.
Afbeeldingen
Bij afbeeldingen is het belangrijk dat er geen tekst in de afbeelding zelf staat. Volgens de WCAG mag dat nog wel, zolang er een goede alternatieve tekst bij staat, maar in de praktijk zien we dat het vaak voor problemen zorgt. Websites en applicaties zijn meestal responsive, waardoor afbeeldingen op veel verschillende manieren worden weergegeven, bijvoorbeeld liggend op desktop en staand op mobiel. De uitsnede is daardoor altijd variabel en tekst in de afbeelding kan worden afgesneden. Een goede oplossing is om de tekst in HTML over een achtergrondafbeelding heen te plaatsen, zodat die gegarandeerd zichtbaar is. Dat werkt zowel responsive als voor gebruikers met verminderd zicht die voorleessoftware gebruiken.