// WCAG 2.1 AA ontwerp­richt­lijnen voor websites

Voortgang: 0 van 0 afgevinkt

// 1. Kleur en contrast

Kleur is meer dan huisstijl. Het bepaalt of mensen met slechtziendheid of kleurenblindheid jouw website kunnen lezen en gebruiken.

• Contrastverhouding tekst: minimaal 4,5:1 Alle lopende tekst (ook kleine tekst in productomschrijvingen en prijzen) heeft een contrastverhouding van minimaal 4,5:1 ten opzichte van de achtergrond.
• Contrastverhouding grote tekst: minimaal 3:1 Grote, dikgedrukte kopteksten (18pt+ of 14pt+ bold) mogen een lagere verhouding hebben, maar nooit onder 3:1.
• Contrastverhouding UI-componenten en iconen: minimaal 3:1 Knoppen, invoervelden, winkelwagenpictogrammen en andere interactieve elementen zijn ook voor slechtzienden zichtbaar.
• Informatie niet alleen door kleur overgebracht Een "uitverkocht"-status mag niet alleen rood zijn. Voeg ook een label of icoon toe. Kleurblinde bezoekers zien anders.
• Tekstkleur op achtergrond-afbeeldingen is altijd leesbaar Denk aan een hero-banner met een foto. Zorg dat de tekst erop altijd voldoende contrast heeft, ook als de afbeelding niet laadt.

// 2. Typografie en leesbaarheid

Een website leeft van sfeer, maar die sfeer mag de leesbaarheid nooit in de weg staan.

• Lettergrootte lopende tekst: minimaal 16px Productomschrijvingen, openingstijden, bezorginfo, alles wat gelezen moet worden, is minstens 16px groot.
• Tekst is tot 200% vergroot zonder verlies van inhoud of functionaliteit Wanneer een bezoeker de tekst vergroot via de browser, mag geen inhoud wegvallen of overlappen. Ontwerp hiervoor flexibele lay-outs.
• Regelafstand is voldoende Minimaal 1,5× de lettergrootte. Dichte tekst vermoeit en is moeilijk leesbaar voor mensen met dyslexie.
• Tekst is niet als afbeelding weergegeven Logo's mogen een afbeelding zijn, maar productnamen, prijzen en omschrijvingen zijn echte HTML-tekst, geen ingesloten beeldbestanden.
• Geen te smalle of decoratieve lettertypen voor lopende tekst Sierletters mogen in de header of voor sfeer. Niet voor productomschrijvingen of actieprijzen.

// 3. Navigatie en structuur

Van homepage naar croissant bestellen: de weg ernaartoe moet logisch en voorspelbaar zijn.

• Focusmarkering is duidelijk zichtbaar Wanneer een bezoeker met Tab-toets door de pagina navigeert, is altijd zichtbaar welk element actief is. De focusring is duidelijk zichtbaar. Niet weggestyled.
• Navigatiemenu is consistent op elke pagina Het hoofdmenu staat op dezelfde plek en in dezelfde volgorde, zowel op de homepage als in de webshop.
• Knoppen en links zijn groot genoeg om aan te tikken Aanraakdoelen zijn minimaal 44×44 pixels. Denk aan "Toevoegen aan winkelwagen" op mobiel.
• Actieve/huidige pagina is visueel herkenbaar in de navigatie Bezoekers zien waar ze zijn. Niet alleen via kleur, maar ook via een visueel teken zoals onderstreping, markering of een icoon.
• Skip-navigatie link is voorzien (visueel of verborgen) Bovenaan de pagina is een "Ga naar inhoud"-link aanwezig, zodat toetsenbordgebruikers het menu kunnen overslaan.
• Paginatitel en visuele koppen zijn duidelijk hiërarchisch H1, H2, H3 zijn visueel onderscheidbaar. Bezoekers en schermlezers weten direct wat de structuur van de pagina is.

// 4. Formulieren en bestelproces (webshop)

De webshop is het hart van het online kanaal. Een ontoegankelijk bestelformulier kost klanten.

• Formulierlabels zijn altijd zichtbaar Geen placeholder-only velden. Zichtbare labels (bijv. "Jouw naam", "E-mailadres") blijven zichtbaar zodra een bezoeker begint te typen.
• Foutmeldingen zijn duidelijk en beschrijvend Als een bezoeker iets verkeerd invult bij het bestellen, is de foutmelding direct naast het betreffende veld zichtbaar, en in tekst niet alleen in rood.
• Verplichte velden zijn visueel gemarkeerd Een sterretje (*) of label "verplicht" maakt duidelijk wat ingevuld moet worden. De betekenis van het sterretje wordt uitgelegd.
• Besteloverzicht is overzichtelijk en leesbaar weergegeven Productnaam, hoeveelheid en prijs zijn visueel duidelijk van elkaar gescheiden. Niet alles op één regel met weinig contrast.
• Knoppen zijn herkenbaar als knoppen "Bestellen", "Afrekenen" en "Terug" zijn visueel onderscheidbaar van elkaar én van gewone links in kleur, vorm én grootte.
• Tijdslimieten worden visueel aangegeven Als een reservering of winkelwagen een tijdslimiet heeft, wordt dit duidelijk en ruim van tevoren getoond.

// 5. Afbeeldingen en visuele content

Foto's zijn onmisbaar op een goede en sfeervolle website. Zorg dat ze ook werken voor mensen die ze niet kunnen zien.

• Productafbeeldingen hebben een duidelijke alt-tekst (in het ontwerp voorzien) In het ontwerp is ruimte voor alt-teksten én instructies voor de fotograaf/contentbeheerder over wat een goede alt-tekst is.
• Decoratieve afbeeldingen zijn duidelijk onderscheiden van informatieve Een sfeerfoto in de header is decoratief. Een foto van een product met allergeneninformatie is informatief. Het ontwerp maakt dit onderscheid duidelijk.
• Iconen hebben een tekstlabel of tooltip Een winkelwagen-icoon, hartje of "delen"-knop heeft altijd een zichtbaar of voor schermlezers beschikbaar label.
• Infographics of visuele menukaarten bevatten ook tekstuele informatie Een visuele weekkaart of assortimentsoverzicht is altijd ook als gewone tekst beschikbaar op de pagina.

// 6. Beweging en animaties

• Automatisch bewegende content kan gestopt worden Een promotie-slider of bewegende banner heeft een pauzeknop of stopt automatisch na 5 seconden.
• Geen flitsende content (meer dan 3x per seconde) Animaties, slideshows of video-intro's flitsen nooit sneller dan 3× per seconde. Dit kan epileptische aanvallen veroorzaken.
• Animaties respecteren "prefers-reduced-motion" Het ontwerp bevat een fallback voor bezoekers die in hun besturingssysteem hebben aangegeven minder beweging te willen.

// 7. Mobiel en responsive ontwerp

• De website is volledig bruikbaar op mobiel (staand én liggend) Inhoud en functionaliteit zijn beschikbaar ongeacht schermoriëntatie (inclusief het bestelproces).
• Geen horizontale scrollbalk op kleine schermen De lay-out past zich aan het scherm aan. Bezoekers scrollen alleen verticaal.
• Aanraakdoelen hebben voldoende ruimte tussen zich in Knoppen en links liggen niet te dicht op elkaar, zo voorkom je dat bezoekers per ongeluk iets verkeerds aantikken.