Volledige audit — WCAG 2.1 en 2.2 AA · EN 301 549
Rapport toegankelijkheidsaudit
Dit rapport legt elke toegankelijkheidsbarrière vast die op de hieronder genoemde site is gevonden, wat die met een echte klant doet en hoe u hem precies oplost. Het is geschreven om rechtstreeks aan uw ontwikkelaar te geven.
Onderzochte website
shop.demostore-example.com
Eigenaar van de site
Demo Store S.L. (voorbeeld)
Auditperiode
24–27 juni 2026
Rapport uitgegeven
27 juni 2026
Auditor
EAA Comply · eaacompliance.com
Reikwijdte
15 pagina’s handmatig getest over 6 templates (home, categorie, product, winkelwagen, afrekenen, account); 41 pagina’s gecrawld met axe-core
Getest op
Desktop 1280 px en mobiel 390 px · NVDA en VoiceOver · alleen toetsenbord · 200% zoom
Managementsamenvatting
shop.demostore-example.com voldoet op dit moment niet aan niveau AA. We vonden 37 afzonderlijke problemen op de zes templates binnen de reikwijdte. Zes daarvan zijn kritiek, wat in dit rapport betekent dat een klant met een toetsenbord of een schermlezer er niet zonder hulp langskomt.
Drie van die zes liggen recht op het pad naar een verkoop. De cookiebanner is niet met het toetsenbord weg te klikken, dus een bezoeker zonder muis bereikt de winkel helemaal niet. De knoppen voor winkelwagen en aantal worden alleen als “knop” aangekondigd, waardoor een schermlezergebruiker “artikel verwijderen” niet van “er een toevoegen” kan onderscheiden. En als het afrekenen een adres afwijst, wordt er niets aangekondigd: het formulier lijkt eenvoudigweg niet te reageren.
Hier is geen herontwerp voor nodig. De volledige lijst met correcties is ongeveer 11 tot 15 uur ontwikkelwerk, en het meeste is markup: labels, toegankelijke namen, focusafhandeling en vier kleurwaarden. Het visuele ontwerp verandert niet.
Het oplossen van deze 37 problemen brengt de onderzochte reikwijdte op de datum van de hertest naar niveau AA. Het maakt de site niet blijvend conform: toegankelijkheid gaat opnieuw stuk bij de volgende thema-update of de volgende reeks productfoto’s. Daar is de maandelijkse hercontrole voor.
Samenvatting van de resultaten
Niet AA
Bereikt conformiteitsniveau
61/100
Toegankelijkheidsscore
De score is een eigen samengestelde maat van EAA Comply, die ernst, frequentie en de plek in het koopproces weegt. Hij bestaat om de voortgang tussen audits te volgen. Het is geen genormeerde maat: WCAG kent geen score, alleen voldoet of voldoet niet, per criterium.
Problemen naar ernst
| Ernst | Aantal | Wat het hier betekent |
|---|
| Kritiek | 6 | Blokkeert een taak volledig voor ten minste één groep gebruikers. Een aankoop kan niet worden afgerond. |
| Ernstig | 14 | De taak kan worden afgerond, maar alleen met moeite, giswerk of hulp van buitenaf. |
| Matig | 12 | Merkbaar lastiger of verwarrender; de meeste mensen komen er uiteindelijk doorheen. |
| Klein | 5 | Blokkeert niets, maar voldoet niet aan een criterium en hoort opgeruimd te worden. |
Conformiteit per succescriterium (uittreksel)
| WCAG | Succescriterium | Niveau | Resultaat |
|---|
| 1.1.1 | Niet-tekstuele content (alternatieve tekst) | A | Voldoet niet |
| 1.3.1 | Info en relaties | A | Voldoet niet |
| 1.3.5 | Identificeer het doel van de invoer | AA | Voldoet niet |
| 1.4.1 | Gebruik van kleur | A | Voldoet niet |
| 1.4.3 | Contrast (minimum) 4,5:1 | AA | Voldoet niet |
| 1.4.10 | Herschikken bij 320 px | AA | Voldoet |
| 1.4.11 | Contrast van niet-tekstuele content (bedieningselementen) | AA | Voldoet niet |
| 2.1.1 | Toetsenbordbediening | A | Voldoet niet |
| 2.1.2 | Geen toetsenbordval | A | Voldoet niet |
| 2.4.1 | Blokken omzeilen (skiplink) | A | Voldoet niet |
| 2.4.7 | Focus zichtbaar | AA | Voldoet |
| 2.5.8 | Grootte van het doel (minimum) | AA | Voldoet niet |
| 3.3.1 | Foutidentificatie | A | Voldoet niet |
| 3.3.2 | Labels of instructies | A | Voldoet niet |
| 4.1.2 | Naam, rol, waarde | A | Voldoet niet |
| 4.1.3 | Statusberichten | AA | Voldoet niet |
Het opgeleverde rapport behandelt alle 56 criteria van niveau A en AA uit WCAG 2.1 en 2.2, elk met het bewijs achter het oordeel, en markeert als niet van toepassing wat op deze site niet voorkomt. Dit is een representatief uittreksel.
Het herstelplan, in de volgorde waarin wij het zouden doen
| Volgorde | Probleem | Inspanning |
|---|
| 1 | Kritiek F-01 — De cookiebanner is niet met het toetsenbord weg te klikken | 2-3 h |
| 2 | Kritiek F-02 — Knoppen met alleen een pictogram hebben geen toegankelijke naam | 1 h |
| 3 | Kritiek F-03 — Afrekenvelden gebruiken placeholders in plaats van labels | 2 h |
| 4 | Ernstig F-04 — Validatiefouten worden wel getoond maar nooit aangekondigd | 2 h |
| 5 | Ernstig F-05 — Prijzen en links in de voettekst blijven onder het minimumcontrast | 1 h |
| 6 | Ernstig F-06 — Productafbeeldingen gebruiken bestandsnamen als alternatieve tekst | 3 h |
| 7 | De overige 31 problemen (matig en klein) | 5–7 u |
Gerangschikt op klantimpact gedeeld door inspanning, niet op ernst alleen. F-02 is één uur werk dat twaalf bedieningselementen deblokkeert, dus het gaat vóór tragere punten van dezelfde ernst.
De bevindingen in detail
Zes van de 37 bevindingen staan hieronder in het formaat dat het volledige rapport gebruikt. Elk probleem wordt zo gedocumenteerd, en in het pakket “Begeleide correcties” komt daar de gecorrigeerde code bij, geschreven voor uw techniek.
De cookiebanner is niet met het toetsenbord weg te klikken
F-01 KritiekWCAG: 2.1.2 · 2.4.3Niveau: Aaxe-core-regel: niet automatisch detecteerbaarGevallen: 41Inspanning: 2-3 h
Waar
Alle 41 pagina’s — de toestemmingsbanner die bij het eerste bezoek verschijnt.
Wie het treft
Iedereen die zonder muis werkt: gebruikers met alleen een toetsenbord, met een schermlezer, met een schakelaar of met spraakbediening.
Waarom het niet voldoet
De banner is een <div> met tabindex="-1" en de knop “Accepteren” is een <span> met een klik-handler, dus hij krijgt geen focus en wordt niet als knop aangekondigd. De overlay bedekt de pagina, maar met Tab loopt u nog steeds door de content erachter en bereikt u “Accepteren” nooit. Een muisgebruiker klikt één keer en gaat verder; een toetsenbordgebruiker krijgt de banner niet weg en komt de winkel helemaal niet binnen. Dit voldoet niet aan 2.1.2 Geen toetsenbordval en, omdat de focusvolgorde de zichtbare volgorde niet meer volgt, evenmin aan 2.4.3 Focus volgorde.
Aangetroffen op de site
<div class="cc-bar" tabindex="-1">
<span class="cc-ok" onclick="acceptAll()">Accept</span>
</div>
Hoe u het oplost
<div class="cc-bar" role="dialog" aria-modal="true"
aria-labelledby="cc-title">
<h2 id="cc-title">Cookies</h2>
<button type="button" class="cc-ok">Accept</button>
<button type="button" class="cc-no">Reject non-essential</button>
</div>
Knoppen met alleen een pictogram hebben geen toegankelijke naam
F-02 KritiekWCAG: 4.1.2 · 1.1.1Niveau: Aaxe-core-regel: button-nameGevallen: 12Inspanning: 1 h
Waar
Winkelwagen en zoeken in de header, de verlanglijst-knop op elke productkaart, en de aantalknoppen op de winkelwagen- en producttemplates — 12 bedieningselementen.
Wie het treft
Schermlezergebruikers, en gebruikers van spraakbediening, die geen naam hebben om uit te spreken.
Waarom het niet voldoet
Elke knop bevat alleen een SVG-pictogram, zonder tekst en zonder label, dus hij wordt aangekondigd als “knop” en verder niets. Op de winkelwagenpagina staan er vier op een rij: verhogen, verlagen, bewaren voor later, verwijderen. Raden welke welke is, is raden of de bestelling zo meteen leeg is.
Aangetroffen op de site
<button class="qty-up">
<svg viewBox="0 0 16 16">...</svg>
</button>
Hoe u het oplost
<button type="button" class="qty-up" aria-label="Increase quantity">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">...</svg>
</button>
Afrekenvelden gebruiken placeholders in plaats van labels
F-03 KritiekWCAG: 3.3.2 · 1.3.1 · 1.3.5Niveau: A / AAaxe-core-regel: labelGevallen: 9Inspanning: 2 h
Waar
Afrekenen stap 1 (bezorgadres) en stap 2 (betaling) — 9 velden.
Wie het treft
Schermlezergebruikers, mensen met een cognitieve beperking, en iedereen die halverwege een lang formulier wordt gestoord.
Waarom het niet voldoet
De velden hebben een placeholder en geen <label>. Een placeholder is geen label: hij verdwijnt zodra het veld inhoud heeft, dus wie even wegkijkt kan niet meer zien waar het veld voor was, en schermlezers kondigen hem niet allemaal hetzelfde aan. Het grijs van de placeholder (#9aa4b2 op wit) haalt bovendien maar 2,52:1, ruim onder het minimum van 4,5:1.
Aangetroffen op de site
<input type="text" name="postcode" placeholder="Postcode">
Hoe u het oplost
<label for="ship-post">Postcode</label>
<input type="text" id="ship-post" name="postcode"
autocomplete="postal-code">
Validatiefouten worden wel getoond maar nooit aangekondigd
F-04 ErnstigWCAG: 3.3.1 · 4.1.3 · 1.4.1Niveau: A / AAaxe-core-regel: niet automatisch detecteerbaarGevallen: 6Inspanning: 2 h
Waar
Afrekenen, de nieuwsbriefinschrijving en het contactformulier — 6 formulieren.
Wie het treft
Vooral schermlezergebruikers, en verder iedereen die een kleurverandering niet opmerkt.
Waarom het niet voldoet
De fouttekst wordt in een <div class="err"> zonder rol geschreven, en het veld wordt alleen met een rode rand gemarkeerd. Een schermlezergebruiker drukt op Verzenden, hoort niets, en heeft geen enkele manier om te weten dat het formulier niet is doorgekomen. Het veld alleen met kleur markeren voldoet bovendien niet aan 1.4.1 Gebruik van kleur.
Aangetroffen op de site
<div class="err"></div>
<input type="email" id="mail" class="is-error">
Hoe u het oplost
<input type="email" id="mail" aria-invalid="true"
aria-describedby="mail-err">
<div id="mail-err" class="err" role="alert">
Email address: enter an address in the form name@example.com.
</div>
Prijzen en links in de voettekst blijven onder het minimumcontrast
F-05 ErnstigWCAG: 1.4.3Niveau: AAaxe-core-regel: color-contrastGevallen: 23Inspanning: 1 h
Waar
Productkaarten, het prijsblok op productpagina’s, het aanbiedingslabel en de links in de voettekst — 23 elementen.
Wie het treft
Mensen met een visuele beperking, en iedereen die buiten op een telefoonscherm leest.
Waarom het niet voldoet
De aanbiedingsprijs is #e05c5c op wit, een verhouding van 3,59:1, en de links in de voettekst zijn #8b95a5 op #f6f9fc, oftewel 2,86:1. Niveau AA vereist 4,5:1 voor tekst van normale grootte. De aanbiedingsprijs is precies het getal waarvoor de klant is gekomen.
Aangetroffen op de site
.price--sale { color: #e05c5c; } /* 3.59:1 on white */
.site-foot a { color: #8b95a5; } /* 2.86:1 on #f6f9fc */
Hoe u het oplost
.price--sale { color: #c0392b; } /* 5.44:1 on white */
.site-foot a { color: #5a6678; } /* 5.51:1 on #f6f9fc */
Productafbeeldingen gebruiken bestandsnamen als alternatieve tekst
F-06 ErnstigWCAG: 1.1.1Niveau: Aaxe-core-regel: niet automatisch detecteerbaarGevallen: 38Inspanning: 3 h
Waar
38 productafbeeldingen in de categorie- en producttemplates.
Wie het treft
Schermlezergebruikers, en iedereen bij wie afbeeldingen niet laden.
Waarom het niet voldoet
De alternatieve tekst is de bestandsnaam: alt="product-img-04.jpg". Dit is de leerzaamste bevinding in het rapport, want axe-core noteert hem als geslaagd — de regel controleert of er een alt-attribuut is dat niet leeg is, en dat is er. Pas een mens die de uitvoer leest, merkt dat de klant helemaal niets te horen krijgt over het product dat hij overweegt te kopen.
Aangetroffen op de site
<img src="/img/product-img-04.jpg" alt="product-img-04.jpg">
Hoe u het oplost
<img src="/img/product-img-04.jpg"
alt="Navy wool scarf, folded, showing the ribbed weave">
Over de toegankelijkheidsoverlay op deze webshop
Op de webshop staat een overlay-widget. We hebben de volledige audit twee keer gedraaid, één keer met de widget actief en één keer met de widget uitgeschakeld, en de 37 problemen zijn in beide runs identiek — de widget heeft er geen enkele opgelost. Er kwam er zelfs één bij: de eigen openingsknop van de widget heeft geen toegankelijke naam en is meegeteld in F-02 hierboven. Dit is geen kritiek op de beslissing om hem te installeren; het is wat de tests lieten zien.
Wat het geautomatiseerde testen wel en niet vond
axe-core vond 14 van de 37 problemen. De andere 23 kwamen uit handmatig testen met een schermlezer en een toetsenbord. Die verhouding is normaal, en ze is precies de reden dat een scan geen audit is: geautomatiseerde regels zijn goed in wat een machine kan meten — een ontbrekend attribuut, een contrastverhouding, een dubbele id — en blind voor de vraag of een naam iets betekent, of de focus uit een dialoogvenster kan ontsnappen, of een foutmelding echt helpt. F-01 en F-06 zijn hier de duidelijkste voorbeelden: de eerste is onzichtbaar voor de scanner, de tweede wordt er juist als goedgekeurd in vastgelegd.
Reikwijdte, grenzen en wat we niet hebben getest
- •De betaalstap is een gehoste iframe van de betaalprovider van de webshop. We hebben gecontroleerd of de focus er correct in en uit gaat; de markup binnenin is van de provider en kan door de webshop niet worden gewijzigd.
- •Pdf-facturen en de twee marketingvideo’s vallen buiten de reikwijdte van dit rapport. Beide vallen wel onder de EAA en kunnen apart worden geoffreerd.
- •De bevindingen beschrijven de site zoals die er tussen 24 en 27 juni 2026 bij stond. Thema-updates, nieuwe plug-ins en nieuwe productcontent kunnen problemen na die datum opnieuw introduceren.
- •Dit is een technische beoordeling, geen juridisch advies. EAA Comply is een onafhankelijke auditdienst, geen overheidsinstantie en geen certificerende instelling.
Hoe het verdergaat
- →Uw ontwikkelaar werkt het herstelplan af. Alles is markup, CSS en focusafhandeling — niets hiervan vraagt om een herontwerp.
- →U laat het weten wanneer het klaar is en wij hertesten dezelfde reikwijdte. De hertest is inbegrepen.
- →Zodra de reikwijdte slaagt, geven de betaalde pakketten het technische conformiteitscertificaat af. Voor deze fictieve webshop is dat voorbeeldcertificaat EAAC-2026-0428-17A, de andere helft van dit voorbeeld.
- →Uw toegankelijkheidsverklaring wordt op basis van deze bevindingen geschreven en bij elke hertest bijgewerkt. Hieronder staat een uittreksel uit het concept.
Bekijk het bijbehorende voorbeeldcertificaat →
Uw toegankelijkheidsverklaring (uittreksel uit het concept)
Toezegging. Demo Store S.L. streeft ernaar shop.demostore-example.com toegankelijk te maken in overeenstemming met Richtlijn (EU) 2019/882 en de geharmoniseerde norm EN 301 549.
Nalevingsstatus. Deze website voldoet gedeeltelijk aan WCAG 2.1 niveau AA. “Gedeeltelijk” betekent dat sommige delen van de content niet volledig aan de toegankelijkheidsnorm voldoen.
Niet-toegankelijke content. De toestemmingsbanner is niet met het toetsenbord te bedienen (WCAG 2.1.2). Meerdere bedieningselementen hebben geen toegankelijke naam (WCAG 4.1.2). Formulierfouten worden niet aangekondigd (WCAG 4.1.3). Geplande oplossing: 31 juli 2026.
Reactie. Komt u op deze site een barrière tegen, mail dan naar toegankelijkheid@demostore-example.com. Wij reageren binnen 10 werkdagen.
De opgeleverde verklaring is volledig, gedateerd en klaar om te publiceren; dit uittreksel toont de delen die uit de audit voortkomen. Er staat “gedeeltelijk” omdat dat op de dag van de audit klopte. Bij de hertest wordt de verklaring herschreven.
Voorbeelddocument. shop.demostore-example.com, Demo Store S.L. en alle bevindingen, cijfers en data in dit rapport zijn fictief en bestaan alleen om het formaat te tonen van het rapport dat EAA Comply oplevert. Er wordt geen echte klant, site of audit weergegeven. EAA Comply is een onafhankelijke technische auditdienst, geen overheidsinstantie en geen certificerende instelling. Een echt rapport wordt op uw live code gemaakt en de inhoud daarvan zal anders zijn.