Toegankelijke CSS

Er zijn veel manieren waarop we rekening moeten houden met toegankelijkheid in CSS. Het belangrijkste is dat we de instellingen van de browser en de gebruiker respecteren.

Geen "reset CSS"

Gebruik nooit een "reset css" bestand, tenzij je goed weet wat het doet. Veel van deze bestanden maken de hele website minder toegankelijk.

Een van de grote no-go's is namelijk "outline" op "none" zetten, wat veel van deze bestanden doen. De "reset css" die Tailwind gebruikt heeft geen negatieve invloed op de toegankelijkheid.

Tailwind CSS

Tailwind CSS is een framework dat standaard voor alle groottes rem gebruikt. Hierdoor schaalt je hele website mooi mee met de tekstgrootte van de gebruiker. Ook zijn er handige utilities zoals 'sr-only' om een element alleen voor screenreaders zichtbaar te maken. Ook is er een 'motion-reduce' en 'motion-safe' utility om makkelijk bewegingen te verminderen of toe te voegen.

Units: rem

Gebruik rem voor alles, nooit px of vh/vw. Op een goed toegankelijke website zijn alle groottes gedefinieerd in rem. Deze unit schaalt mee met de tekst grootte instellingen van een gebruiker. Er zijn heel veel mensen die grotere tekst hebben ingesteld op hun apparaat, waaronder veel ouderen. Als alle elementen rem gebruiken, schalen deze mee met de tekst en blijft alles goed passen. Je hoeft dan verder niks aan te passen als je website al goed responsive is, om de tekst grootte instellingen te respecteren. Als je een andere unit moet gebruiken als uitzondering, mag dit nooit ten koste gaan van de toegankelijkheid. Why you should never use px to set font-size in CSS - Josh Collinsworth blog.

Outline

Alle interactieve elementen moeten een outline hebben wanneer ze focus hebben. Verwijder deze nooit. Past de standaard outline niet bij de stijl, dan kan je deze zelf stijlen in CSS. Ook hiervoor zijn regels.

Animaties (beweging)

Animaties zijn heel leuk voor veel mensen, maar er zijn ook veel mensen die er op verschillende manieren last van kunnen hebben. Dat is vooral wanneer er elementen bewegen op het scherm. Respecteer hiervoor de systeeminstellingen van de gebruiker en plaats animaties in CSS altijd alleen onder:

@media (prefers-reduced-motion: no-preference) {
    // animaties
}

Meer informatie: prefers-reduced-motion - CSS: Cascading Style Sheets Je test snel je eigen CSS door in Windows bij [instellingen > toegankelijkheid > visuele effecten] animatie-effecten uit en aan te zetten. Met deze instelling op uit moeten bewegingen zoveel mogelijk worden vermeden. Fade-in en fade-out zijn wel oké.

Touch targets

Alles wat interactief is moet minimaal 1.5rem * 1.5rem groot zijn. Kleiner dan dit vergroot de kans dat mensen de eerste keer niet goed kunnen tikken of klikken.

Layout & consistentie

Gebruik simpele layouts met niet te veel content tegelijkertijd op 1 scherm. Tijdens het wisselen tussen schermen moet de context duidelijk blijven.

Media & informatie

Laat nooit alleen informatie zien in een afbeelding of video. Afbeeldingen moeten een goede alternatieve tekst hebben en video moet ondertiteling hebben. Streef naar audiodescriptie, ondertiteling is soms minimaal. Gebruik nooit CSS om afbeeldingen op een pagina te plaatsen die informatie bevatten.

Contrast

Niet te weinig, maar ook niet te veel.

Gebruik genoeg contrast tussen kleuren. Meet je contrast met onze contrast meter. Er kan ook te veel contrast zijn. Dat gebeurt bijvoorbeeld met zwart op wit of andersom. Veel ouderen en mensen met ogen die niet snel scherp kunnen stellen, moeten hierdoor extra veel moeite doen om te kunnen focussen. Dit is snel vermoeiend en zorgt dat ze minder lang van jouw content gebruik kunnen maken. Het beste is om niet puur zwart of niet puur wit te gebruiken.

Kleur

Gebruik nooit alleen kleur om iets over te brengen. Gebruik een combinatie van kleur, vorm en tekst.

Tekst uitlijnen & lettertype

Gebruik een font zonder streef (sans-serif). Gebruik nooit justified, maar lijn de tekst links uit. De spaties moeten altijd even lang zijn. Schrijf geen belangrijke tekst in CAPS-LOCK. Veel mensen zijn afhankelijk van de vormen van woorden om ze goed te kunnen herkennen en lezen. HOOFDLETTERS zorgen ervoor dat woorden nóg meer op elkaar lijken en patronen daarin niet meer te zien zijn. Daardoor wordt het voor sommige mensen moeilijk om te lezen.