Een Nederlandse duikwinkel

Inhoud

1. Samenvatting
2. Begin hier
3. Per pagina
4. Alle bevindingen (9)
5. Met het toetsenbord
6. Op een telefoon
7. Vergeleken met andere webshops
8. Werklijst voor je bouwer
9. Wat is er gemeten
10. Wat er niet is gemeten
11. Begrippen

Samenvatting

Op 9 september 2026 hebben we homepage, categoriepagina, productpagina, winkelwagen en afrekenen van Een Nederlandse duikwinkel gemeten, en de homepage nog eens op telefoonbreedte. We vonden 412 bevindingen in 9 soorten.

• 4 soorten zijn kritiek: formulierveld zonder label; afbeelding zonder alt-tekst; keuzelijst zonder naam; de menuknop op een telefoon werkt niet voor iedereen. Kritiek betekent dat een stap onmogelijk is voor wie een schermlezer of alleen het toetsenbord gebruikt.
• 4 soorten zijn ernstig, waarvan de grootste tekst met te weinig contrast tegen de achtergrond met 251 gevallen.
• 6 van de 9 soorten zitten in de bestelstroom (productpagina, winkelwagen of afrekenen). Daar verlies je omzet, dus daar begint de volgorde van dit rapport.
• De drie punten onder Begin hier dekken 96 procent van alle gevallen en zijn klein tot middelgroot werk.
• Werk in totaal: 5 soorten klein werk, 4 middel, 0 groot. De inschatting gaat over het soort ingreep, niet over jouw codebase.
• Vergeleken met 30 Nederlandse webshops die wij op de homepage maten: 100 procent deed het beter. De middelste shop had 17 bevindingen op de homepage, deze 141.

Dit is een geautomatiseerde meting. Reken erop dat een handmatige toets met een schermlezer nog meer vindt. Nul bevindingen in dit rapport is dan ook geen bewijs dat je voldoet; het is wel het deel dat je met zekerheid en tegen de laagste kosten kunt oplossen.

Begin hier

Drie dingen met het meeste effect voor het minste werk. Samen dekken ze 96 procent van alle bevindingen.

1. Tekst met te weinig contrast tegen de achtergrond

   ernstig klein werk voor de ontwerper 251 keer

   Verhoog het contrast naar minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. Meestal één kleurwaarde in de stylesheet.

2. Link zonder leesbare naam

   ernstig middel werk voor de bouwer 128 keer

   Tekst in de link zetten, of aria-label. Bij een afbeelding als link: geef die afbeelding een alt-tekst.

3. Formulierveld zonder label

   kritiek middel werk voor de bouwer 17 keer

   <label for="veld-id"> koppelen aan het veld. Een placeholder is geen label, want die verdwijnt zodra je typt.

De inschatting van het werk gaat over het soort ingreep, niet over jouw codebase. Een kleurwaarde aanpassen is klein werk, ook als het op tweehonderd plekken doorwerkt; de structuur van een menu herbouwen is dat nooit.

Per pagina

Per pagina, per zwaarte. Fouten dichter bij het afrekenen wegen in de volgorde van dit rapport zwaarder, want daar verlies je omzet.

Alle bevindingen, op volgorde van wat het bestellen het hardst raakt

Per soort bevinding: wat het is, waarom het geld kost, hoe je het oplost met een voorbeeld van foute en goede code, waar het op jouw pagina's staat, wat we precies aantroffen in jouw code, en hoe je na de reparatie controleert of het echt klopt.

.prijs-oud { color: #9a9a9a; background: #ffffff; }  /* 2,8 : 1 */

.prijs-oud { color: #6b6b6b; background: #ffffff; }  /* 5,3 : 1 */

<a href="https://voorbeeld.nl/…">Home</a>

<a href="https://voorbeeld.nl/…" class="dropdown">Duiken</a>

<a href="https://voorbeeld.nl/…" class="dropdown">Snorkelen &amp; Freedive</a>

<a href="/product/duikbril-x"><img src="duikbril.jpg" alt=""></a>

<a href="/product/duikbril-x"><img src="duikbril.jpg" alt="Duikbril X, zwart"></a>

<a href="https://voorbeeld.nl/…" target="_blank"><img src="https://voorbeeld.nl/…" alt="" class="thuiswinkel-color"></a>

<a href="https://voorbeeld.nl/…" class="account header-link" data-fancy="fancy-account-holder" data-tooltip="" title="" data-placement="bottom" data-original-title="Mijn account">

<a href="https://voorbeeld.nl/…" class="header-link" data-tooltip="" title="" data-placement="bottom" data-fancy="fancy-account-holder" data-original-title="Verlanglijst"><i class="nova-icon nova-icon-heart"></i></a>

<input type="text" placeholder="Postcode">

<label for="postcode">Postcode</label>
<input id="postcode" name="postcode" type="text" autocomplete="postal-code">

<input type="text" name="2457783105" class="quantity qty-fast" value="1">

<input type="text" class="qty-fast" name="quantity" value="1">

<img src="regulator-r2.jpg">

<img src="regulator-r2.jpg" alt="Regulator R2, eerste trap DIN">
<!-- decoratie: --> <img src="golf.svg" alt="">

<img src="https://voorbeeld.nl/…" class="rowmargin">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<select name="maat"><option>S</option><option>M</option></select>

<label for="maat">Maat</label>
<select id="maat" name="maat"><option>S</option><option>M</option></select>

<select id="gui-form-country" name="country" class="fancy-select"></select>

<div class="hamburger" onclick="toggleMenu()"><span></span><span></span></div>

<button type="button" class="hamburger" aria-label="Menu" aria-expanded="false" aria-controls="hoofdmenu">
  <span aria-hidden="true"></span>
</button>

<div class="header-left" data-afr-menu="1" style=""><div class="categories-button small scroll scroll-nav hidden-sm hidden-xs hidden-xxs"><div class="nav-icon"><div class="bar1"></div><div class="bar3

p a { color: #4a6cf7; text-decoration: none; }

p a { color: #4a6cf7; text-decoration: underline; }

<a href="#information" class="product-readmore">Lees meer..</a>

<iframe src="https://betalen.voorbeeld.nl/…"></iframe>

<iframe src="https://betalen.voorbeeld.nl/…" title="Betaalformulier"></iframe>

<iframe frameborder="0" allowtransparency="true" src="https://voorbeeld.nl/…" width="400" height="222"></iframe>

Met het toetsenbord

We liepen elke pagina door met alleen de Tab-toets, zoals iemand doet die geen muis gebruikt. Dit is een geautomatiseerde benadering: hij ziet of de focus ergens komt en of hij zichtbaar is, niet of het logisch voelt.

• Homepage: bij 2 elementen is niet te zien waar de focus staat; 30 van 179 bedienbare elementen zijn met Tab niet bereikt; geen link om het menu over te slaan.
  Zonder zichtbare focus: input.searchbox.searchfocus, iframe.
• Categoriepagina: bij 2 elementen is niet te zien waar de focus staat; geen link om het menu over te slaan.
  Zonder zichtbare focus: input.searchbox.searchfocus, iframe.
• Productpagina: bij 2 elementen is niet te zien waar de focus staat; geen link om het menu over te slaan.
  Zonder zichtbare focus: input.searchbox.searchfocus, iframe.
• Winkelwagen: bij 2 elementen is niet te zien waar de focus staat; geen link om het menu over te slaan.
  Zonder zichtbare focus: input.searchbox.searchfocus, iframe.
• Afrekenen: bij minstens 8 elementen is niet te zien waar de focus staat; 7 van 98 bedienbare elementen zijn met Tab niet bereikt; geen link om het menu over te slaan.
  Zonder zichtbare focus: input.searchbox.searchfocus, a.gui-checkout-login "Inloggen of registreren", input#gui-form-details-firstname.gui-validate, input#gui-form-details-lastname.gui-validate, input#gui-form-customer-email.gui-validate.

Zo los je het op. Een zichtbare focus is meestal één regel in de stylesheet: :focus-visible { outline: 3px solid #1c4e80; outline-offset: 2px }. Haal elke outline: none weg die dat overschrijft. Een link om het menu over te slaan is de eerste link op de pagina, naar #main, die zichtbaar wordt zodra hij focus krijgt. Dit hoort bij WCAG 2.4.7 Focus zichtbaar en 2.4.1 Blokken omzeilen.

Op een telefoon

De homepage is ook gemeten op 390 bij 844 pixels, de maat van een gangbare telefoon. Daar zit het hamburgermenu dat op een breed scherm nooit in beeld komt, en daar zit meer dan de helft van je bezoekers.

• De pagina past binnen het scherm van 390 pixels; geen zijwaarts scrollen.
• De menuknop "MENU" is een <div> zonder knoprol, zonder aria-expanded, en gaat niet open met Enter (5 links in beeld ervoor, 5 erna). Zie de bevinding over de menuknop hierboven.

Vergeleken met andere webshops

100% van de 30 Nederlandse webshops die wij maten, deed het beter. De middelste shop in die steekproef had 17 bevindingen op de homepage; deze had er 141. Alleen homepages zijn vergeleken, want de steekproef is een homepage-meting.

Werklijst voor je bouwer

Alle bevindingen op een rij, als opdracht voor wie het gaat oplossen. Vink af wat klaar is, meet daarna opnieuw en je ziet in de vergelijking precies wat er opgelost is.

Wat is er gemeten

Elke pagina is geladen in Chrome op 1366 bij 900 pixels, zoals een bezoeker hem ziet, en gemeten met axe-core op de regels voor WCAG 2.1 niveau A en AA. Daarna liepen we elke pagina met alleen de Tab-toets door. De meting leest alleen openbare pagina's; er is niet ingelogd, niets besteld en niets betaald.

Voor het meten van de winkelwagen en de afrekenpagina hebben we eerst een product toegevoegd via de knop "Toevoegen aan winkelwagen", zoals een bezoeker dat doet. Zo zijn ook de aantalknoppen, het kortingscodeveld en de verzendopties gemeten.

• Homepage
• Categoriepagina
• Productpagina
• Winkelwagen
• Afrekenen

De homepage is daarnaast gemeten op telefoonbreedte (390 pixels), met een controle van de menuknop en van zijwaarts scrollen.

Wat er niet is gemeten

Een geautomatiseerde meting vindt ongeveer een derde tot de helft van wat er werkelijk mis kan zijn. Niet meegenomen: of teksten begrijpelijk zijn, of alt-teksten kloppen met wat er op de foto staat, of de volgorde waarin focus door de pagina loopt logisch is, of foutmeldingen in het bestelformulier bruikbaar zijn, of video's ondertiteld zijn, en hoe de pagina zich gedraagt met een echte schermlezer. De toetsenbordcontrole ziet of de focus ergens komt en zichtbaar is, niet of het bedienen logisch voelt.

Geen enkele bevinding hierboven is een oordeel over of je aan de wet voldoet. Het zijn gemeten feiten over je pagina's op de datum van de meting. Wil je een uitspraak over de wet, dan is daar een handmatig onderzoek volgens WCAG-EM voor nodig, door een auditor.

Begrippen

Alt-tekst

Korte beschrijving van een afbeelding in de code, voor wie de afbeelding niet ziet. Ook wat Google leest.

ARIA

Een set attributen (aria-label, aria-expanded, role) waarmee je hulpsoftware vertelt wat een element is en doet, als de gewone HTML dat niet al zegt. Gewone HTML gaat altijd voor.

axe-core

De open-source meetengine van Deque waarmee dit rapport is gemaakt. Dezelfde engine zit in Chrome Lighthouse en wordt door professionele auditors gebruikt.

Contrastverhouding

Het verschil in helderheid tussen tekst en achtergrond, uitgedrukt als 4,5 op 1. Zwart op wit is 21 op 1. WCAG eist minimaal 4,5 op 1 voor gewone tekst en 3 op 1 voor grote tekst.

Focus

De plek waar het toetsenbord "staat": het element dat reageert als je op Enter drukt. Hoort altijd zichtbaar te zijn, meestal als een rand.

Hulpsoftware

Schermlezers, vergrotingssoftware, spraakbediening: programma's die een website anders bedienen of voorlezen. Op een Mac zit VoiceOver ingebouwd, op Windows is NVDA gratis.

Landmark of gebied

De hoofddelen van een pagina: header, nav, main, footer. Hulpsoftware laat bezoekers ertussen springen, zoals jij met je ogen doet.

Schermlezer

Software die de pagina voorleest of naar een brailleleesregel stuurt. Leest niet wat er staat, maar wat er in de code staat.

Selector

Het adres van een element in de code, zoals .header > a.logo. Plak hem in de ontwikkelaarstools van je browser en je springt naar het element.

WCAG 2.1 niveau AA

De internationale richtlijn voor toegankelijke websites, in de versie en op het niveau waar de Europese norm EN 301 549 en daarmee de European Accessibility Act naar verwijzen.

Zwaarte

De inschatting van axe: kritiek maakt een stap onmogelijk voor wie een schermlezer of alleen het toetsenbord gebruikt; ernstig maakt een stap heel moeilijk, of onmogelijk voor een deel van de bezoekers; matig hindert, kost tijd en vertrouwen, maar er is een weg omheen; klein onhandig, geen blokkade.