Per knelpunt: het WCAG-criterium, waar het zit, voorbeelden uit de code en de oplossing. De nummers verwijzen naar het adviesrapport, zodat ondernemer en bouwer over hetzelfde praten.
TG-001 · Bedienen
Knoppen zonder naam
BlokkerendWCAG 4.1.2 · niveau A2× gevondenInspanning: klein
- Waar
- /, /winkelwagen
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. Een screenreader zegt bij deze knoppen alleen 'knop', niet wat ze doen. Denk aan een winkelmandje of zoekknop met alleen een icoon. Blinde bezoekers kunnen dan niet verder.
Oplossing. Geef elke <button> zichtbare tekst of een aria-label, bijvoorbeeld aria-label="Winkelwagen openen".
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-002 · Begrijpen
Invulvelden zonder label
BlokkerendWCAG 4.1.2 · niveau A2× gevondenInspanning: klein
- Waar
- /winkelwagen
- Last van
- blinde bezoekers (screenreader), bezoekers met een cognitieve beperking of leesproblemen, oudere bezoekers
- Wie lost het op
- de webbouwer
Wat er misgaat. Bij deze invulvelden staat voor een screenreader niet wat je moet invullen. Een blinde bezoeker hoort alleen 'invoerveld' en kan het formulier niet invullen. Ook een placeholder die verdwijnt bij het typen telt niet als label.
Oplossing. Koppel elk veld aan een zichtbaar <label for="id">, of gebruik aria-labelledby. Een placeholder alleen is niet genoeg.
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-003 · Begrijpen
Keuzelijsten zonder label
BlokkerendWCAG 4.1.2 · niveau A2× gevondenInspanning: klein
- Waar
- /afrekenen, /producten
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. Bij deze keuzelijst (bijv. maat, aantal of datum) staat niet wat je kiest.
Oplossing. Koppel elke <select> aan een <label>.
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-004 · Bedienen
Met het toetsenbord kom je ergens niet meer uit
BlokkerendWCAG 2.1.2 · niveau A1× gevondenInspanning: middel
- Waar
- /
- Last van
- bezoekers die geen muis kunnen gebruiken, blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. Met de Tab-toets kom je vast te zitten in een onderdeel en kun je niet verder naar de rest van de pagina. Voor wie geen muis gebruikt, eindigt het bezoek daar.
Oplossing. Zorg dat Tab en Shift+Tab altijd uit elk onderdeel leiden; bij een pop-up moet Escape hem sluiten en de focus teruggaan naar de knop die hem opende.
Gevonden
Bron: eigen toetsenbordtest
TG-005 · Zien
Tekst met te weinig contrast
ErnstigWCAG 1.4.3 · niveau AA48× gevondenInspanning: middel
- Waar
- /, /afrekenen, /contact, /producten, /winkelwagen
- Last van
- slechtziende bezoekers, oudere bezoekers
- Wie lost het op
- de ontwerper of webbouwer
Wat er misgaat. Deze tekst is te licht ten opzichte van de achtergrond. Voor slechtziende en oudere bezoekers, en voor iedereen buiten in de zon op een telefoon, is hij moeilijk of niet te lezen.
Oplossing. Zorg voor een contrastverhouding van minimaal 4,5:1 voor gewone tekst en 3:1 voor grote tekst (vanaf 24px, of 18,66px vet). Pas kleur van tekst of achtergrond aan in de huisstijl.
Gevonden
- / ·
nav > a[href="index.html"]<a href="index.html">Home</a>
- / ·
a[href$="producten.html"]<a href="producten.html">Producten</a>
- / ·
a[href$="over-ons.html"]<a href="over-ons.html">Over ons</a>
en nog 45 keer op dezelfde manier.
Bron: axe-core · uitleg van de regel (Engels)
TG-006 · Zien
Afbeeldingen zonder beschrijving
ErnstigWCAG 1.1.1 · niveau A28× gevondenInspanning: klein
- Waar
- /, /afrekenen, /contact, /producten, /winkelwagen
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- wie de teksten en afbeeldingen beheert
Wat er misgaat. Een screenreader leest bij deze afbeeldingen niets of alleen een bestandsnaam voor. Blinde bezoekers missen dan wat er te zien is, zoals een product of een knop met een plaatje.
Oplossing. Geef elke informatieve <img> een alt-tekst die zegt wat de afbeelding laat zien of doet. Decoratieve afbeeldingen krijgen alt="".
Gevonden
- / ·
img[width="40"]<img src="img/logo.jpg" width="40">
- / ·
img[width="24"]<img src="img/mand.jpg" width="24">
- / ·
img[src$="hero.jpg"]<img src="img/hero.jpg" style="width:100%;height:240px;object-fit:cover">
en nog 25 keer op dezelfde manier.
Bron: axe-core · uitleg van de regel (Engels)
TG-007 · Bedienen
Links zonder naam
ErnstigWCAG 2.4.4 en 4.1.2 · niveau A23× gevondenInspanning: klein
- Waar
- /, /afrekenen, /contact, /producten, /winkelwagen
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. Een screenreader leest bij deze links niets zinnigs voor, vaak omdat het alleen een icoon of afbeelding is. Blinde bezoekers weten niet waar de link heen gaat.
Oplossing. Geef elke link tekst, of een aria-label bij icoonlinks (bijv. aria-label="Instagram"). Bij een afbeelding in een link: alt-tekst met het doel.
Gevonden
- / ·
header > a[href="index.html"]<a href="index.html"><img src="img/logo.jpg" width="40"></a>
- / ·
a[href$="winkelwagen.html"]<a href="winkelwagen.html"><img src="img/mand.jpg" width="24"></a>
- / ·
a[href="https://facebook.com/…"]<a href="https://facebook.com/…"><img src="img/logo.jpg" width="16"></a>
en nog 20 keer op dezelfde manier.
Bron: axe-core · uitleg van de regel (Engels)
TG-008 · Zien
Inzoomen op de telefoon is geblokkeerd
ErnstigWCAG 1.4.4 · niveau AA5× gevondenInspanning: klein
- Waar
- /, /afrekenen, /contact, /producten, /winkelwagen
- Last van
- slechtziende bezoekers, oudere bezoekers
- Wie lost het op
- de webbouwer
Wat er misgaat. De site verbiedt inzoomen op mobiel. Slechtziende bezoekers kunnen de tekst dan niet groter maken.
Oplossing. Verwijder user-scalable=no en maximum-scale lager dan 2 uit <meta name="viewport">.
Gevonden
en nog 4 keer op dezelfde manier.
Bron: axe-core · uitleg van de regel (Engels)
TG-009 · Bedienen
Klikbare onderdelen niet bereikbaar met het toetsenbord
ErnstigWCAG 2.1.1 · niveau A5× gevondenInspanning: middel
- Waar
- /
- Last van
- bezoekers die geen muis kunnen gebruiken, blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. Er zijn onderdelen die met de muis aanklikbaar lijken, maar met het toetsenbord niet te bereiken zijn. Denk aan een zelfgebouwde knop of een tegel die als link werkt.
Oplossing. Gebruik echte <button>- en <a href>-elementen. Moet het een <div> blijven: geef role="button", tabindex="0" en laat Enter en Spatie werken.
Gevonden
- / ·
div<div onclick="location.href='product.html'" style="cursor:pointer"><img src="img/kaas.jpg" width="300"><h4>Boerenkaas jong belegen</h4><span class="prijs">€ 8,95</span></div>
- / ·
div<div onclick="location.href='product.html'" style="cursor:pointer"><img src="img/honing.jpg" width="300"><h4>Veluwse heidehoning</h4><span class="prijs">€ 7,50</span></div>
- / ·
div<div onclick="location.href='product.html'" style="cursor:pointer"><img src="img/appelsap.jpg" width="300"><h4>Appelsap Elstar</h4><span class="prijs">€ 3,25</span></div>
en nog 2 keer op dezelfde manier.
Bron: eigen toetsenbordtest
TG-010 · Bedienen
Je ziet niet waar je bent met het toetsenbord
ErnstigWCAG 2.4.7 · niveau AA2× gevondenInspanning: klein
- Waar
- /
- Last van
- bezoekers die geen muis kunnen gebruiken, slechtziende bezoekers
- Wie lost het op
- de webbouwer
Wat er misgaat. Als je met de Tab-toets door de site gaat, zie je niet welke knop of link actief is. Wie geen muis gebruikt, raakt dan direct de weg kwijt.
Oplossing. Verwijder outline: none zonder vervanging. Gebruik bijvoorbeeld :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } met voldoende contrast.
Gevonden
Bron: eigen toetsenbordtest
TG-011 · Bedienen
Te kleine klikdoelen
HinderlijkWCAG 2.5.8 · niveau AA4× gevondenInspanning: klein
- Waar
- /afrekenen
- Last van
- bezoekers die geen muis kunnen gebruiken, oudere bezoekers
- Wie lost het op
- de ontwerper of webbouwer
Wat er misgaat. Deze knoppen of links zijn kleiner dan 24 bij 24 pixels en liggen dicht bij elkaar. Met trillende handen of een dikke duim tik je er makkelijk naast.
Oplossing. Maak klikdoelen minimaal 24×24 px (liefst 44×44 px op mobiel), of zorg voor voldoende ruimte eromheen.
Gevonden
- /afrekenen ·
#checkout-email<input type="email" id="checkout-email" placeholder="E-mailadres">
- /afrekenen ·
#checkout-naam<input type="text" id="checkout-naam" placeholder="Naam" autocomplete="naam">
- /afrekenen ·
#checkout-postcode<input type="text" id="checkout-postcode" placeholder="Postcode">
en nog 1 keer op dezelfde manier.
Bron: axe-core · uitleg van de regel (Engels)
TG-012 · Begrijpen
Taal van de pagina niet ingesteld
HinderlijkWCAG 3.1.1 · niveau A1× gevondenInspanning: klein
- Waar
- /
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. De pagina zegt niet in welke taal hij is. Een screenreader leest Nederlandse tekst dan mogelijk voor met een Engelse uitspraak.
Oplossing. Zet <html lang="nl">.
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-013 · Techniek
Geen hoofdinhoud aangeduid
HinderlijkGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein
- Waar
- /
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- de webbouwer
Wat er misgaat. De pagina geeft niet aan waar de hoofdinhoud begint. Screenreadergebruikers springen daar normaal direct naartoe.
Oplossing. Zet de hoofdinhoud in één <main>-element.
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-014 · Techniek
Geen hoofdkop op de pagina
HinderlijkGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein
- Waar
- /
- Last van
- blinde bezoekers (screenreader), bezoekers met een cognitieve beperking of leesproblemen
- Wie lost het op
- wie de teksten en afbeeldingen beheert
Wat er misgaat. De pagina heeft geen hoofdkop. Screenreadergebruikers navigeren via koppen en missen dan het startpunt.
Oplossing. Geef elke pagina één <h1> die zegt waar de pagina over gaat.
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-015 · Zien
Automatisch invullen werkt niet goed
HinderlijkWCAG 1.3.5 · niveau AA1× gevondenInspanning: klein
- Waar
- /afrekenen
- Last van
- bezoekers die geen muis kunnen gebruiken, bezoekers met een cognitieve beperking of leesproblemen
- Wie lost het op
- de webbouwer
Wat er misgaat. Velden zoals naam, adres en e-mail hebben een verkeerde code voor automatisch invullen. Juist bezoekers voor wie typen lastig is, hebben daar veel aan.
Oplossing. Gebruik geldige autocomplete-waarden (name, email, tel, street-address, postal-code, ...).
Gevonden
Bron: axe-core · uitleg van de regel (Engels)
TG-016 · Techniek
Kopjes in de verkeerde volgorde
HinderlijkGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein
- Waar
- /afrekenen
- Last van
- blinde bezoekers (screenreader)
- Wie lost het op
- wie de teksten en afbeeldingen beheert
Wat er misgaat. De koppen slaan niveaus over. Wie de pagina via koppen doorloopt, mist de structuur.
Oplossing. Gebruik koppen in logische volgorde: h1, dan h2, dan h3.
Gevonden
- /afrekenen ·
h4<h4>Je gegevens</h4>
Bron: axe-core · uitleg van de regel (Engels)
TG-017 · Begrijpen
Geen informatie over toegankelijkheid
VerbeteringGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein
- Waar
- /
- Last van
- blinde bezoekers (screenreader), slechtziende bezoekers, bezoekers die geen muis kunnen gebruiken
- Wie lost het op
- wie de teksten en afbeeldingen beheert
Wat er misgaat. De site zegt nergens hoe het met de toegankelijkheid zit of waar je terechtkunt als iets niet werkt. Voor webwinkels onder de Europese toegankelijkheidswet hoort die informatie erbij.
Oplossing. Voeg een pagina 'Toegankelijkheid' toe (link in de footer) met de status, bekende knelpunten en een contactmogelijkheid.
Bron: eigen toetsenbordtest
Methode: WCAG 2.2 niveau AA, Chromium-browser, axe-core 4.14 en eigen gedragstests (toetsenbord, focus, smal scherm, klikdoelen). Scanner-versie 0.1.0. Gescand op 20 oktober 2026. Domein en links zijn geanonimiseerd.