Zorg voor een optimale ervaring voor je bezoekers. Houd rekening met hun behoeftes tijdens het ontwerpen en bouwen van je website. Doe dit door in te spelen op voorkeuren die de bezoeker heeft ingesteld ingesteld in een systeem of browser.
Het is voor mensen vaak mogelijk om in systemen en browsers gebruikersvoorkeuren aan te geven. Bijvoorbeeld om inhoud op een website beter te zien of minder prikkels te krijgen. Zij kunnen hun voorkeur instellen voor bijvoorbeeld:
Via CSS en Javascript kan je inspelen op de instellingen van de bezoeker. Je doet dit door extra code toe te voegen voor bepaalde gebruikersvoorkeuren. Bijvoorbeeld als een gebruiker de instelling ‘verhoogd contrast’ op hoog heeft staan. Voeg dan code toe die een knop zwart maakt met een witte tekst in plaats van grijs met een witte tekst.
Maak het mogelijk informatie kleiner of groter te maken. Gebruik %, em, rem, vh of vw om posities en formaat aan te geven. Hierdoor passen elementen zich aan aan de wens van de bezoeker. Dit helpt mensen met een visuele beperking, omdat inhoud makkelijk vergroot of verkleind kan worden.
Beperk de bewegingen van de animaties op je website. Gebruik hiervoor prefers-reduced-motion. Dit helpt mensen met een cognitieve beperking doordat er minder prikkels te verwerken zijn.
Houd er rekening mee dat er ‘beperkte beweging’ staat en niet ‘geen beweging’. Verminder het, maar haal het niet altijd helemaal weg. Beweging kan gebruikers ook helpen bepaalde acties of overgangen beter te begrijpen.
Bied je website aan in een licht en donker kleurenschema. Gebruik hiervoor prefers-color-scheme. Een donkere modus kan mensen helpen die last hebben van fel licht. Bijvoorbeeld mensen met migraine.
Geef kleurcombinaties een verhoogd contrast. Gebruik hiervoor prefers-contrast. Verhoog bijvoorbeeld het contrast naar de eisen zoals beschreven in WCAG – Succescriterium 1.4.6 Contrast (Versterkt). Dit helpt mensen met een visuele beperking die zelfs moeite hebben met het wettelijk verplichte kleurcontrast.
Verminder de hoeveelheid transparantie op pagina’s. Gebruik hiervoor prefers-reduced-transparency. Dit kan mensen helpen met een visuele beperking.
Houd rekening met gedwongen kleuren. Gebruik hiervoor forced-colors. Sommige systemen dwingen kleuren af, bijvoorbeeld in een modus voor hoog contrast. Vervang bijvoorbeeld schaduw om een tekst met een rand om een tekst. Zo houd je een afbeelding toegankelijk als gedwongen kleuren actief is.
Bied een variant van je website aan die minder data gebruikt. Gebruik hiervoor prefers-reduced-data. Maak bijvoorbeeld gebruik van kleinere afbeeldingen, systeemfonts in plaats van webfonts en laad minder zware videobestanden. Dit helpt mensen met beperkte data-abonnementen, trage of onstabiele internetverbindingen of voor wie datakosten een zorg zijn.
In veel componenten van het NL Design System wordt al rekening gehouden met een aantal van de voorkeuren. De komende tijd zullen hier nog meer componenten en voorkeuren bij komen. Lees meer over het NL Design System.
Fijn dat je het antwoord op je vraag hebt kunnen vinden. Heb je een idee over hoe we onze kennisbank kunnen verbeteren?
Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.
Waar was je naar op zoek?
Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.