Website toegankelijk maken: een praktische checklist

Tekst moet minimaal 4,5:1 contrast hebben met de achtergrond (3:1 voor grote tekst vanaf 24px, of 18,66px vetgedrukt). Check dit met een contrastchecker, niet met het oog: wat op je eigen scherm goed leesbaar lijkt, is dat niet automatisch voor iedereen.

Gebruik nooit kleur als enige manier om informatie over te brengen. Een foutmelding die alleen rood gekleurd is, is voor iemand met kleurenblindheid onzichtbaar zonder een icoon of tekst erbij.

Elke interactieve component (links, knoppen, formuliervelden, dropdowns, modals) moet met alleen het toetsenbord te bereiken en te bedienen zijn. Test dit door met Tab door je site te lopen zonder de muis aan te raken.

Zorg voor een zichtbare focus-indicator. Veel CSS-resets verwijderen de standaard focus-outline zonder een alternatief terug te zetten, waardoor toetsenbordgebruikers niet meer zien waar ze zijn.

Gebruik koppen (h1 t/m h6) in een logische, aflopende volgorde, niet omdat een grotere kop toevallig beter oogt. Screenreader-gebruikers navigeren vaak per koppenstructuur door een pagina.

Geef elke afbeelding een alt-tekst die de functie of inhoud beschrijft, en laat puur decoratieve afbeeldingen leeg (alt="") zodat een screenreader ze overslaat in plaats van voor te lezen.

Elk formulierveld heeft een gekoppeld label, niet alleen een placeholder. Een placeholder verdwijnt zodra iemand gaat typen, en screenreaders lezen hem lang niet altijd voor als vervanging van een label.

Foutmeldingen moeten specifiek zijn en in tekst gekoppeld aan het veld waar het misgaat, niet alleen een rode rand of een melding bovenaan de pagina die losstaat van het veld zelf.