DOC. A11Y-VOORBEELDW-03
Dit is een voorbeeld onder de naam van een bureau. Voorbeeldbureau bestaat niet, net als de webshop en de bevindingen. Met een Bureau-abonnement staan hier jouw logo en huisstijlkleur, en onze naam nergens.

Toegankelijkheids­rapport

voorbeeldwinkel.example

Norm
WCAG 2.1 & 2.2 AA
Methode
axe-core, Chromium
Omvang
3 pagina's
Uitgevoerd
9 september 2026 om 10:15

66/100

Er staan kritieke fouten op deze site. Bezoekers met een screenreader lopen hier vast.

3 kritiek
6 ernstig
1 gemiddeld
0 klein

Reikwijdte van deze meting

Getoetst zijn de geautomatiseerd controleerbare criteria van WCAG 2.1 en 2.2 niveau AA — de norm waarnaar EN 301 549 en de European Accessibility Act verwijzen. Automatisch testen dekt ongeveer een derde tot de helft van alle criteria. Toetsenbordnavigatie, focusvolgorde, zinvolle alt-teksten en begrijpelijke taal vereisen handmatige beoordeling. Een score van 100 betekent dus niet dat de site voldoet. Wat hier staat, is wel daadwerkelijk aangetroffen.

Bevindingen — 6 regels, 10 elementen

BEV. 01 kritiek WCAG 1.1.1

Afbeeldingen moeten een alternatieve tekst hebben

Zonder alt-tekst weet een screenreader niet wat er op de afbeelding staat.

Elementen
2
Pagina's
1
Regel
image-alt

Element 01

.hero > img
<img src="/banner-najaar.jpg">

OplossingGeef het element een alt-attribuut, of alt="" als de afbeelding decoratief is.

Element 02

.usp img:nth-child(2)
<img src="/icon-verzending.svg">

OplossingGeef het element een alt-attribuut.

Gevonden ophttps://voorbeeldwinkel.example/

Technische uitleg bij deze regel →

BEV. 02 kritiek WCAG 4.1.2

Formuliervelden moeten een label hebben

Zonder label weet een screenreader-gebruiker niet wat er ingevuld moet worden.

Elementen
1
Pagina's
1
Regel
label

Element 01

#kortingscode
<input type="text" id="kortingscode" placeholder="Kortingscode">

OplossingEen placeholder is geen label. Voeg een <label for="kortingscode"> toe.

Gevonden ophttps://voorbeeldwinkel.example/winkelwagen

Technische uitleg bij deze regel →

BEV. 03 ernstig WCAG 1.4.3

Tekst moet voldoende contrast hebben met de achtergrond

Lichtgrijze tekst op wit is voor veel mensen onleesbaar.

Elementen
3
Pagina's
2
Regel
color-contrast

Element 01

.usp p
<p class="usp-text">Gratis verzending vanaf €50</p>

OplossingContrast is 2.4:1, vereist is 4.5:1. Gebruik #595959 of donkerder.

Element 02

footer a
<a href="/voorwaarden">Algemene voorwaarden</a>

OplossingContrast is 3.1:1, vereist is 4.5:1.

Element 03

.btn-secondary
<button class="btn-secondary">Verder winkelen</button>

OplossingContrast is 2.9:1, vereist is 4.5:1.

Gevonden ophttps://voorbeeldwinkel.example/
https://voorbeeldwinkel.example/winkelwagen

Technische uitleg bij deze regel →

BEV. 04 ernstig WCAG 2.4.4

Links moeten een herkenbare tekst hebben

Een link zonder tekst wordt voorgelezen als "link", zonder verdere uitleg.

Elementen
2
Pagina's
1
Regel
link-name

Element 01

.social a:nth-child(1)
<a href="https://instagram.com/..."><svg>…</svg></a>

OplossingVoeg tekst toe, of een aria-label op de link.

Element 02

.social a:nth-child(2)
<a href="https://facebook.com/..."><svg>…</svg></a>

OplossingVoeg tekst toe, of een aria-label op de link.

Gevonden ophttps://voorbeeldwinkel.example/contact

Technische uitleg bij deze regel →

BEV. 05 ernstig WCAG 2.5.8

Klikdoelen moeten minstens 24 bij 24 pixels zijn

Kleine knoppen zijn op een telefoon of met een motorische beperking niet te raken.

Elementen
1
Pagina's
1
Regel
target-size

Element 01

.qty-minus
<button class="qty-minus">−</button>

OplossingHet element is 18 bij 18 pixels. Vergroot het of geef het meer ruimte.

Gevonden ophttps://voorbeeldwinkel.example/winkelwagen

Technische uitleg bij deze regel →

BEV. 06 gemiddeld WCAG 1.3.1

Koppen moeten in logische volgorde staan

Een sprong van h2 naar h4 maakt de paginastructuur onnavigeerbaar.

Elementen
1
Pagina's
1
Regel
heading-order

Element 01

main h4
<h4>Openingstijden</h4>

OplossingGebruik h3 in plaats van h4.

Gevonden ophttps://voorbeeldwinkel.example/contact

Technische uitleg bij deze regel →

Herstelplan — ongeveer 4,5 uur

5 van de 10 elementen zitten in het sjabloon: de header, de footer, een component of de stylesheet. Die los je één keer op en daarmee zijn ze op alle pagina's weg — samen ongeveer 3 uur. Begin daar. Dit is een raming, geen offerte; het werkelijke werk hangt af van hoe de site in elkaar zit.

BevindingElementenBereikRaming
Formuliervelden moeten een label hebben
raakt afrekenen
1 Eén ingreep, overal opgelost 1 uur
Tekst moet voldoende contrast hebben met de achtergrond
raakt homepage, afrekenen
3 Eén ingreep, overal opgelost 1 uur
Klikdoelen moeten minstens 24 bij 24 pixels zijn
raakt afrekenen
1 Eén ingreep, overal opgelost 1 uur
Links moeten een herkenbare tekst hebben
raakt contact
2 Deels sjabloon, deels los 0,5 uur
Afbeeldingen moeten een alternatieve tekst hebben
raakt homepage
2 Per voorkomen langslopen 0,5 uur
Koppen moeten in logische volgorde staan
raakt contact
1 Per voorkomen langslopen 0,5 uur

Aanbevolen vervolgstappen