Toegankelijkheid is niet te onderschatten.

Een website hoort aantrekkelijk te zijn voor de doelgroep om zo de gebruikers te overtuigen. Echter zijn er een hoop mensen, ook in Nederland, die deze ervaring maar gedeeltelijk meekrijgen. Mensen die een beperking ervaren zoals slechtziendheid of zelfs blindheid hebben nog vaak moeite om gemakkelijk door een website heen te komen. En daarom zijn er richtlijnen die helpen om een website toegankelijker te maken. Deze richtlijnen (WCAG 2.0) zijn internationaal en een goede houvast voor iedere developer.

Kleur contrast en typografie

Google Chrome heeft in zijn development tools een kleur contrast controle zitten, om zo te zien of het contrast voldoet aan de richtlijnen.

Een contrast van 4.5 is nodig op normale tekst van 16px of groter. Voor het hoogste nivea is een contrast van 7.0 nodig.

Nu kan het voorkomen dat de huisstijl van een project niet genoeg contrast heeft. In dat geval zou je ook een 'hoog contrast mode' kunnen toevoegen. Door in SCSS variables te overschrijven op het moment dat je gaat compilen, zou je een tweede css bestand kunnen maken waarbij je website een hoger contrast heeft. Vervolgens kan je de gebruiker door middel van een herkende knop het contrast laten verhogen.

Een goed voorbeeld komt van strijen.nl waarbij rechtsboven een hoog contrast knop zit. Daar is ook de typografie te vergroten. Dit kan op dezelfde manier als het hoog contrast, door goed gedefineerde variables te overschrijven tijdens het compilen van je CSS.

contrast voorbeeld

Navigeerbaar

Naar contrast en typografie is een belangrijk deel de manier waarop slechtzienden of gebruikers met een andere beperking door een website nagiveren. Heb je wel eens een websites geprobeerd te gebruiken via een screenreader?

Chrome heeft zijn eigen screenreader plugin onder de naam Chromevox.

Bronnen