De toegankelijkheidschecklist voor landing pages

Een toegankelijke landing page is een pagina die iemand kan lezen, met Tab kan doorlopen en kan versturen zonder muis of perfect zicht. Deze toegankelijkheidschecklist voor landing pages begint bij de vier checks die de meeste fouten vangen: tekstcontrast van minstens 4,5 op 1, interactieve elementen van minstens 24 bij 24 CSS-pixels, een zichtbare focusstaat op elk element, en een echt label bij elk formulierveld. Alle vier zijn goedkoop in het design en duur om er later in te bouwen.

Contrast is waar de meeste landing pages sneuvelen

WCAG zet de minimale contrastverhouding voor normale tekst op 4,5 op 1 tegenover de achtergrond, op niveau AA. Grote tekst mag 3 op 1. Groot betekent minstens 18 punt, of 14 punt vet, wat in CSS ruwweg neerkomt op 24px of 18.5px vet. De waarden worden niet afgerond, dus 4,499 op 1 zakt. Lichtgrijze bodytekst op wit is de gebruikelijke boosdoener. Daarna komt witte tekst over een foto, waar het contrast bovenin de foto nog klopt en onderin uit elkaar valt.

Buttons en icoontjes hebben ook contrast nodig

Tekst is maar de helft. WCAG vraagt 3 op 1 voor interface-elementen en betekenisvolle grafische objecten tegenover de kleuren ernaast, ook op niveau AA. Dat geldt voor de rand van een invoerveld, de omlijning van een button, een checkbox, een sterretje in een beoordeling, en elk icoontje dat op zichzelf betekenis draagt. Een lichtgrijze rand om een invoerveld op een witte card is de meest voorkomende misser op een landing page. Het is ook precies het element dat mensen moeten zien voordat ze kunnen converteren.

Geef elk tapdoel 24 bij 24 pixels

WCAG 2.2 voegde een regel voor doelgrootte toe op niveau AA. Interactieve doelen horen minstens 24 bij 24 CSS-pixels te zijn. Kleinere doelen mogen als ze zo ver uit elkaar liggen dat een cirkel van 24 pixels rond het midden van elk doel geen ander doel raakt. Links midden in een zin zijn uitgezonderd. In de praktijk raakt dit icoonbuttons, de sluitknop van een modal, social icoontjes in een footer, en de dicht opeengepakte links in de juridische regel onderaan de pagina.

Toetsenbordtoegang test je in vijf minuten

Laat de muis los en druk vanaf de bovenkant van de pagina op Tab. Elke link, button, invoerveld en menu-element hoort focus te krijgen in een volgorde die de visuele layout volgt, en je moet altijd kunnen zien waar je bent. Custom componenten sneuvelen hier het vaakst. Een slider die uit divs is gebouwd sluit je op. Een videomodal laat de focus niet meer los. Een sticky header verstopt het element waar je net naartoe tabde. Kun je je belangrijkste button niet bereiken en activeren met het toetsenbord, dan is de pagina stuk.

Geef elk formulierveld een echt label

Een placeholder verdwijnt zodra iemand begint te typen, dus wie de draad kwijtraakt heeft niets meer om op terug te vallen. Screenreaders gaan bovendien wisselend om met placeholdertekst. Zet een zichtbaar label boven elk veld. Houd de placeholder voor een voorbeeldnotatie als je die wilt, en koppel het label netjes aan het invoerveld, zodat een tik op het label het veld activeert. Foutmeldingen moeten in woorden zeggen wat er misging. Kleur alleen kan nooit het teken zijn dat een veld ongeldig is.

De EU-regels die in 2025 zijn ingegaan

De European Accessibility Act is op 28 juni 2025 in werking getreden. Hij geldt voor diensten die aan consumenten in de EU worden verkocht, waaronder e-commerce, bankieren en het boeken van vervoer. Hij gebruikt EN 301 549, dat op WCAG-niveau AA is gebouwd. Verkoop je aan Europese consumenten, dan is toegankelijkheid verschoven van nette gewoonte naar wettelijke eis. De handhaving loopt via de lidstaten in plaats van via één instantie, waardoor het risico lastiger te voorspellen is, en niet kleiner.

Loop deze toegankelijkheidschecklist in twintig minuten af

Begin met een automatische checker en negeer daarna de score, want automatische tools vangen maar een deel van wat telt. Tab door de hele pagina. Meet elke tekst- en buttonkleur met een contrastchecker. Zoom je browser naar 200% en controleer of er niets overlapt of wegvalt. Zet de screenreader aan die in je besturingssysteem zit en luister naar de hero en het formulier. Fix de contrastwaarden in je designtokens in plaats van pagina voor pagina, anders staat dezelfde fout op de volgende pagina weer live.