1. Inleiding
1.1 Achtergrond
Dit rapport bevat de resultaten van het WCAG 2.2 toegankelijkheidsonderzoek voor Komnaarhoorn.nl conform de Web Content Accessibility Guidelines (WCAG) 2.2 Level A en AA.
1.2 Web Content Accessibility Guidelines (WCAG) 2.2
De Web Content Accessibility Guidelines (WCAG) 2.2 zijn ontwikkeld door het World Wide Web Consortium (W3C) en vormen de internationale standaard voor webtoegankelijkheid. WCAG 2.2 bouwt voort op WCAG 2.1 en bevat aanvullende richtlijnen voor toegankelijkheid op mobiele apparaten, voor mensen met een beperkt gezichtsvermogen en voor mensen met cognitieve en leerbeperkingen.
1.3 Vier principes van WCAG 2.2
WCAG 2.2 is georganiseerd rond vier hoofdprincipes die de basis vormen voor toegankelijkheid. Deze principes zijn:
- Waarneembaar: Informatie en gebruikersinterface-componenten moeten op een manier worden gepresenteerd die gebruikers kunnen waarnemen.
- Bedienbaar: Gebruikersinterface-componenten en navigatie moeten bedienbaar zijn.
- Begrijpelijk: Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn.
- Robuust: Inhoud moet robuust genoeg zijn om betrouwbaar geïnterpreteerd te worden door een grote verscheidenheid aan gebruikersagenten, inclusief ondersteunende technologieën.
1.4 Conformiteitsniveaus
WCAG 2.2 heeft drie conformiteitsniveaus:
- Level A: Het minimum niveau van toegankelijkheid
- Level AA: Het standaardniveau van toegankelijkheid (wettelijk vereist)
- Level AAA: Het hoogste niveau van toegankelijkheid
Dit onderzoek richt zich op Level A en AA conformiteit, zoals voorgeschreven in de Nederlandse wetgeving voor digitale toegankelijkheid van overheidsorganisaties en in de European Accessibility Act.
1.5 Onderzochte succescriteria
In totaal zijn 55 succescriteria onderzocht, verdeeld over de vier WCAG principes. Van deze criteria zijn:
- 23 criteria die voldoen aan de eisen
- 12 criteria die niet voldoen aan de eisen
- 20 criteria die niet van toepassing zijn
- 0 criteria die nog beoordeeld moeten worden
2. Onderzoeksresultaat
Slaagpercentage
Aandachtspunten
3. Onderzoeksgegevens
3.1 Onderzoeksmethode en toegepaste norm
Dit onderzoek is uitgevoerd volgens de Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0. Deze methodologie is ontwikkeld door het W3C om een gestructureerde en reproduceerbare manier te bieden voor het evalueren van de toegankelijkheid van websites.
De toegankelijkheid is getoetst aan de Web Content Accessibility Guidelines (WCAG) 2.2 op niveau A en AA. WCAG 2.2 is de meest recente versie van de internationale standaard voor webtoegang ankelijkheid en wordt wereldwijd erkend als de norm voor digitale toegankelijkheid.
3.2 Basisniveau van toegankelijkheidsondersteuning
Voor dit onderzoek is uitgegaan van het basisniveau van toegankelijkheidsondersteuning zoals gedefinieerd in WCAG-EM. Dit betekent dat de website is getest met standaard instellingen van browsers en ondersteunende technologieën, zonder gebruik te maken van geavanceerde of experimentele functies.
https://komnaarhoorn.nl/ voldoet wel aan het basisniveau van toegankelijkheidsondersteuning.
3.3 Gebruikte technieken
Bij de evaluatie zijn de sufficient techniques en advisory techniques uit de WCAG 2.2 Techniques als leidraad gebruikt. Deze technieken bieden concrete implementatiemethoden om aan de WCAG-succescriteria te voldoen.
3.4 Ondersteunende technieken
De volgende webstandaarden zijn gebruikt bij het onderzoek:
- HTML5 - Voor de structuur en semantiek van webpagina's
- WAI-ARIA - Voor verbeterde toegankelijkheid van dynamische content
- CSS - Voor visuele presentatie en responsive design
- DOM (Document Object Model) - Voor dynamische interacties
- SVG - Voor schaalbare vector graphics
3.5 Webbrowsers (useragents)
Het onderzoek is uitgevoerd met de volgende browsers:
- Google Chrome (versie 147)
- Mozilla Firefox (versie 150)
- Microsoft Edge (versie 147)
- Adobe Acrobat Pro 2025
- Colour Contrast Analyser (versie 3.5.5)
- Audit House PDF Analyzer 2026
- PAC 2026 PDF
Deze browsers zijn geselecteerd omdat ze breed worden gebruikt en goede ondersteuning bieden voor moderne webstandaarden en toegankelijkheidsfuncties.
4. Scope van het onderzoek
4.1 Binnen scope
https://komnaarhoorn.nl/
4.2 Buiten scope
Niet gespecificeerd
5. Steekproef
Steekproef: 13 pagina's (11 gestructureerd, 2 willekeurig).
Gestructureerde steekproef
- Homepage https://komnaarhoorn.nl/
- Contactpagina https://komnaarhoorn.nl/contact/
- Agenda https://komnaarhoorn.nl/agenda/
- Agenda item https://komnaarhoorn.nl/agenda/koningsnacht-hoorn/
- Pagina https://komnaarhoorn.nl/in-de-stad/8x-best-lunch-spots-in-hoorn/
- Pagina https://komnaarhoorn.nl/shoppen-in-hoorn/
- Pagina https://komnaarhoorn.nl/plan-je-bezoek/
- Nieuwsbrief https://komnaarhoorn.nl/nieuwsbrief/
- Aanmelden https://komnaarhoorn.nl/aanmelden-activiteit/
- Pagina https://komnaarhoorn.nl/ontdekken/
- Pagina https://komnaarhoorn.nl/overnachten/
Willekeurige steekproef
Principe 1: Waarneembaar
Informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze.
Richtlijn 1.1 Tekstalternatieven
Details voor criterium 1.1.1 - Niet-tekstuele content
Beschrijving van het criterium:
❌ Afgekeurde bevinding:
Informatieve afbeelding zonder alternatieve tekst. Redacteur Hoge impact - Weinig werk
De SVG-afbeeldingen binnen het logo-element hebben geen beschrijvende alternatieve tekst. Dit maakt de inhoud ontoegankelijk voor gebruikers die vertrouwen op screenreaders.
<svg class="fill-sand group-hover:hidden" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none"><path d="M1.604 11.463.408 1.723l3.377-.415..." fill=""></path></svg>
Alternatieve tekst is hetzelfde als titel/koptekst. Redacteur Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/shoppen-in-hoorn/
Op de pagina komt de titel van de artikelen 1-op-1 hetzelfde terug in de alternatieve tekst van de afbeeldingen. Laat de alternatieve tekst leeg, zodat gebruikers van schermlezers niet twee keer dezelfde tekst horen.
Dit gebeurt bij 3 van de 6 afbeeldingen.
Alternatieve tekst is hetzelfde als titel/koptekst. Redacteur Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/plan-je-bezoek/
Op de pagina komt de titel van de artikelen 1-op-1 hetzelfde terug in de alternatieve tekst van de afbeeldingen. Laat de alternatieve tekst leeg, zodat gebruikers van schermlezers niet twee keer dezelfde tekst horen.
Richtlijn 1.2 Op tijd gebaseerde media
Richtlijn 1.3 Aanpasbaar
Details voor criterium 1.3.1 - Info en relaties
Beschrijving van het criterium:
❌ Afgekeurde bevinding:
Visuele tussenkoppen zijn programmatisch dikgedrukte tekst, in plaats van headers (H2, H3 etc.). Webbouwer Hoge impact - Veel werk
In de cookie melding is een visuele kop gevonden, welke programmatisch is opgemaakt als dikgedrukte tekst. Hierdoor kunnen gebruikers van assisterende software die op tussenkoppen navigeren de onderdelen niet herkennen. Als gevolg hiervan wordt de inhoud mogelijk overgeslagen door schermlezers. Gebruik daarom standaard HTML-elementen (h2, h3 etc.). Dit gaat fout op vergelijkbare pagina’s.
Visuele tussenkoppen zijn programmatisch dikgedrukte tekst, in plaats van headers (H2, H3 etc.). Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/agenda/
Op de pagina zijn visuele tussenkoppen gevonden, welke programmatisch zijn opgemaakt als dikgedrukte tekst. Hierdoor kunnen gebruikers van assisterende software die op tussenkoppen navigeren de onderdelen niet herkennen. Als gevolg hiervan wordt de inhoud mogelijk overgeslagen door schermlezers. Gebruik daarom standaard HTML-elementen (h2, h3 etc.). Dit gaat fout op vergelijkbare pagina’s.
De titel is opgemaakt als <span> met CSS-classes om het eruit te laten zien als een kop.
Visuele tussenkoppen zijn programmatisch dikgedrukte tekst, in plaats van headers (H2, H3 etc.). Webbouwer Hoge impact - Veel werk
“Jouw avontuur” functioneert als kop in de footer, maar is niet als kop opgemaakt in de code (geen <h1>–<h6> of andere structurele markering).
Visuele tussenkoppen zijn programmatisch dikgedrukte tekst, in plaats van headers (H2, H3 etc.). Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/in-de-stad/ontbijten-in-hoorn/
Op de pagina zijn visuele tussenkoppen gevonden, welke programmatisch zijn opgemaakt als dikgedrukte tekst. Hierdoor kunnen gebruikers van assisterende software die op tussenkoppen navigeren de onderdelen niet herkennen. Als gevolg hiervan wordt de inhoud mogelijk overgeslagen door schermlezers. Gebruik daarom standaard HTML-elementen (h2, h3 etc.). Dit gaat fout op vergelijkbare pagina’s.
Details voor criterium 1.3.5 - Identificeer het doel van de input
Beschrijving van het criterium:
❌ Afgekeurde bevinding:
Invoervelden die om persoonsgegevens vragen bevatten geen autocomplete-attribuut. Webbouwer Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Invoervelden die om persoonsgegevens vragen, moeten voorzien zijn van het autocomplete-attribuut. Hierdoor kunnen. Wanneer dit niet gebeurt, kunnen browsers en assisterende software het doel van de input niet bepalen, waardoor het mogelijk niet automatisch ingevuld kan worden. Zorg er daarom voor dat de juiste autocomplete-attributen gebruikt worden bij invoervelden die om persoonsgegevens vragen. Bezoek de https://www.w3.org/TR/WCAG21/#input-purposes. First Name:
Invoervelden die om persoonsgegevens vragen bevatten geen autocomplete-attribuut. Webbouwer Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/contact/
Invoervelden die om persoonsgegevens vragen, moeten voorzien zijn van het autocomplete-attribuut. Hierdoor kunnen. Wanneer dit niet gebeurt, kunnen browsers en assisterende software het doel van de input niet bepalen, waardoor het mogelijk niet automatisch ingevuld kan worden. Zorg er daarom voor dat de juiste autocomplete-attributen gebruikt worden bij invoervelden die om persoonsgegevens vragen. Bezoek de https://www.w3.org/TR/WCAG21/#input-purposes. First Name:
Richtlijn 1.4 Onderscheidbaar
Details voor criterium 1.4.3 - Contrast (minimum)
Beschrijving van het criterium:
De visuele presentatie van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve voor de volgende gevallen:
- Grote tekst: Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1;
- Bijzaak: Tekst of afbeeldingen van tekst die onderdeel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significante andere visuele content bevat, hebben geen contrastvereiste;
- Logotypes: Tekst die onderdeel is van een logo of merknaam heeft geen minimum contrastvereiste.
❌ Afgekeurde bevinding:
Tekstkleur heeft onvoldoende contrast ten opzichte van de achtergrondkleur. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/ontdekken/
De kleurencombinatie van de pauzeknop met kleuren: #A88BE2 en #FBF5F5 contrasteert niet voldoende (2,61:1). Dit zorgt ervoor dat deze mogelijk slecht leesbaar is voor sommige bezoekers. Zorg daarom voor een minimale kleurcontrastverhouding van 4,5:1 voor normale, lopende tekst. Voor grote of dikgedrukte tekst geldt een minimum van 3,0:1. Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) voor normale tekst, of 14pt (19px) voor dikgedrukte tekst (font-weight 700 of hoger). Voor grote tekst gelden lagere contrastvereisten.
Tekstkleur heeft onvoldoende contrast ten opzichte van de achtergrondkleur. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
De kleurencombinatie #e24037 en #ffffff contrasteert niet voldoende (4,18:1). Dit zorgt ervoor dat deze mogelijk slecht leesbaar is voor sommige bezoekers. Zorg daarom voor een minimale kleurcontrastverhouding van 4,5:1 voor normale, lopende tekst. Voor grote of dikgedrukte tekst geldt een minimum van 3,0:1. Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) voor normale tekst, of 14pt (19px) voor dikgedrukte tekst (font-weight 700 of hoger). Voor grote tekst gelden lagere contrastvereisten.
Tekstkleur heeft onvoldoende contrast ten opzichte van de achtergrondkleur. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
De kleurencombinatie #f56c6c en #ffffff contrasteert niet voldoende (2,90:1). Dit zorgt ervoor dat deze mogelijk slecht leesbaar is voor sommige bezoekers. Zorg daarom voor een minimale kleurcontrastverhouding van 4,5:1 voor normale, lopende tekst. Voor grote of dikgedrukte tekst geldt een minimum van 3,0:1. Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) voor normale tekst, of 14pt (19px) voor dikgedrukte tekst (font-weight 700 of hoger). Voor grote tekst gelden lagere contrastvereisten.
Tekstkleur heeft onvoldoende contrast ten opzichte van de achtergrondkleur. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/shoppen-in-hoorn/
De kleurencombinatie #1C5E70 en #5833A4 contrasteert niet voldoende (1,19:1). Dit zorgt ervoor dat deze mogelijk slecht leesbaar is voor sommige bezoekers. Zorg daarom voor een minimale kleurcontrastverhouding van 4,5:1 voor normale, lopende tekst. Voor grote of dikgedrukte tekst geldt een minimum van 3,0:1. Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) voor normale tekst, of 14pt (19px) voor dikgedrukte tekst (font-weight 700 of hoger). Voor grote tekst gelden lagere contrastvereisten.
Tekstkleur heeft onvoldoende contrast ten opzichte van de achtergrondkleur. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/zoekresultaten/?q=hoorn
De kleurencombinatie #5833A4 en #A2205E contrasteert niet voldoende (1,20:1). Dit zorgt ervoor dat deze mogelijk slecht leesbaar is voor sommige bezoekers. Zorg daarom voor een minimale kleurcontrastverhouding van 4,5:1 voor normale, lopende tekst. Voor grote of dikgedrukte tekst geldt een minimum van 3,0:1. Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) voor normale tekst, of 14pt (19px) voor dikgedrukte tekst (font-weight 700 of hoger). Voor grote tekst gelden lagere contrastvereisten.
Details voor criterium 1.4.11 - Contrast van niet-tekstuele content
Beschrijving van het criterium:
Voor niet-tekstuele ondelen van de gebruikersinterface geldt een minimale contrastverhouding van 3,0:1 ten opzichte van de aangrenzende kleur(en). Dit geldt voor de volgende componenten en objecten:
- Componenten van de gebruikersinterface: visuele informatie die nodig is om componenten en hun status te herkennen. Dit geldt niet voor inactieve componenten of voor componenten waarvan het uiterlijk wordt bepaald door de user agent en niet door de auteur is aangepast.
- Grafische objecten: onderdelen van grafische objecten die nodig zijn om de content te begrijpen. Dit geldt niet wanneer een specifieke visuele weergave essentieel is voor de informatie die wordt overgebracht.
❌ Afgekeurde bevinding:
De randen van invoervelden contrasteren niet genoeg. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/contact/
Het Invoerveld heeft onvoldoende contrast (1,08:1). De kleurencombinatie #ffffff en #fbf5f5 voldoet niet aan de vereiste 3:1 ratio.
Hierdoor is het voor sommige bezoekers mogelijk moeilijk om te zien waar de invoervelden beginnen en eindigen. Zorg daarom voor een contrastverhouding van minstens 3,0:1 voor niet-tekstuele content. Om dit op te lossen kan de achtergrondkleur aangepast worden of een alternatief zoals een onderstreping of omlijnen van het invoerveld.
De randen van invoervelden contrasteren niet genoeg. UX/UI Hoge impact - Veel werk
De kleurencombinatie #FFFFFF en #FBF5F5 contrasteert niet voldoende (1,08:1). Hierdoor is het voor sommige bezoekers mogelijk moeilijk om te zien waar de invoervelden beginnen en eindigen. Zorg daarom voor een contrastverhouding van minstens 3,0:1 voor niet-tekstuele content. Om dit op te lossen kan de achtergrondkleur aangepast worden of een alternatief zoals een onderstreping of omlijnen van het invoerveld.
Deze e-mailbox staat op elke pagina
De randen van invoervelden contrasteren niet genoeg. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Het Rand/border heeft onvoldoende contrast (1,19:1). De kleurencombinatie #ebebeb en #ffffff voldoet niet aan de vereiste 3:1 ratio. Hierdoor is het voor sommige bezoekers mogelijk moeilijk om te zien waar de invoervelden beginnen en eindigen. Zorg daarom voor een contrastverhouding van minstens 3,0:1 voor niet-tekstuele content. Om dit op te lossen kan de achtergrondkleur aangepast worden of een alternatief zoals een onderstreping of omlijnen van het invoerveld.
De randen van invoervelden contrasteren niet genoeg. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Het Rand/border heeft onvoldoende contrast (1,19:1). De kleurencombinatie #ebebeb en #ffffff voldoet niet aan de vereiste 3:1 ratio.
Hierdoor is het voor sommige bezoekers mogelijk moeilijk om te zien waar de invoervelden beginnen en eindigen. Zorg daarom voor een contrastverhouding van minstens 3,0:1 voor niet-tekstuele content. Om dit op te lossen kan de achtergrondkleur aangepast worden of een alternatief zoals een onderstreping of omlijnen van het invoerveld.
De randen van invoervelden contrasteren niet genoeg. UX/UI Hoge impact - Veel werk
Het Rand/border heeft onvoldoende contrast (1,19:1). De kleurencombinatie #ebebeb en #ffffff voldoet niet aan de vereiste 3:1 ratio.
Hierdoor is het voor sommige bezoekers mogelijk moeilijk om te zien waar de invoervelden beginnen en eindigen. Zorg daarom voor een contrastverhouding van minstens 3,0:1 voor niet-tekstuele content. Om dit op te lossen kan de achtergrondkleur aangepast worden of een alternatief zoals een onderstreping of omlijnen van het invoerveld.
Knoppen en iconen contrasteren niet voldoende. UX/UI Hoge impact - Veel werk
Alle interactieve onderdelen moeten voldoen aan de minimale contrastverhouding van 3,0:1. Dit geldt ook voor knoppen zoals een hamburgermenu en iconen.
De focus bevat onvoldoende contrast. UX/UI Hoge impact - Veel werk
De focusrand die interactieve content krijgt wanneer deze met het toetsenbord geselecteerd wordt, moet ook voldoen aan de minimale contrastverhouding 3,0:1. Als er te weinig contrast is ten opzichte van de achtergrondkleur, is de focus mogelijk slecht te zien.
De focus bevat onvoldoende contrast. UX/UI Hoge impact - Veel werk
De focusrand die interactieve content krijgt wanneer deze met het toetsenbord geselecteerd wordt, moet ook voldoen aan de minimale contrastverhouding 3,0:1. Als er te weinig contrast is ten opzichte van de achtergrondkleur, is de focus mogelijk slecht te zien.
De focus bevat onvoldoende contrast. UX/UI Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/agenda/
De focusrand die interactieve content krijgt wanneer deze met het toetsenbord geselecteerd wordt, moet ook voldoen aan de minimale contrastverhouding 3,0:1. Als er te weinig contrast is ten opzichte van de achtergrondkleur, is de focus mogelijk slecht te zien.
Principe 2: Bedienbaar
Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn.
Richtlijn 2.1 Toetsenbordtoegankelijk
Details voor criterium 2.1.1 - Toetsenbord
Beschrijving van het criterium:
Alle functies op de pagina moeten met het toetsenbord te gebruiken zijn.
De gebruiker mag niet afhankelijk zijn van een precies tempo of specifieke timing bij het indrukken van toetsen.
Een uitzondering geldt voor functies waarbij de beweging zelf belangrijk is, bijvoorbeeld tekenen of slepen langs een bepaalde route.
❌ Afgekeurde bevinding:
Onderdelen van de website zijn niet bereikbaar via toetsenbordnavigatie. Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Alle onderdelen die met de muis beschikbaar zijn, moeten ook via toetsenbordnavigatie te bereiken zijn. Dit geldt voor alle hyperlinks, knoppen en interactieve onderdelen. Zorg dat alle bezoekers dezelfde mogelijkheden hebben.
De buttons “Betaald” / “Gratis” en alle buttons bij "Soort evenementen" zijn niet met het toetsenbord te bereiken, omdat de checkboxen verborgen zijn met "display: none" en daardoor niet in de tabvolgorde zitten.
Hierdoor kan een gebruiker die alleen het toetsenbord gebruikt deze keuze niet maken, terwijl dit wel nodig is om het formulier goed in te vullen.
Onderdelen van de website zijn niet bereikbaar via toetsenbordnavigatie. Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/agenda/
Alle onderdelen die met de muis beschikbaar zijn, moeten ook via toetsenbordnavigatie te bereiken zijn. Dit geldt voor alle hyperlinks, knoppen en interactieve onderdelen. Zorg dat alle bezoekers dezelfde mogelijkheden hebben.
Het filtermenu aan de linkerkant is niet bereikbaar met het toetsenbord.
Richtlijn 2.2 Genoeg tijd
Details voor criterium 2.2.2 - Pauzeren, stoppen, verbergen
Beschrijving van het criterium:
Voor bewegende, knipperende, scrollende of automatisch bijgewerkte informatie gelden de volgende voorwaarden:
- Bewegend, knipperend of scrollend: als informatie automatisch start, langer dan vijf seconden duurt en tegelijk met andere content wordt getoond, moet de gebruiker deze informatie kunnen pauzeren, stoppen of verbergen. Dit geldt niet als de beweging, het knipperen of het scrollen essentieel is voor de activiteit.
- Automatisch bijgewerkt: als informatie automatisch wordt bijgewerkt, automatisch start en tegelijk met andere content wordt getoond, moet de gebruiker deze informatie kunnen pauzeren, stoppen of verbergen. De gebruiker mag ook de updatesnelheid kunnen aanpassen. Dit geldt niet als het automatisch bijwerken essentieel is voor de activiteit.
❌ Afgekeurde bevinding:
Automatisch bewegende / vernieuwende informatie kan niet gepauzeerd worden. Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/ontdekken/
De pauzeknop in de Instagram-feed hapert. Bij de eerste paar pogingen pauzeert alleen de bovenste rij; pas na herhaaldelijk drukken stopt de hele feed met bewegen.
Richtlijn 2.3 Toevallen en fysieke reacties
Richtlijn 2.4 Navigeerbaar
Details voor criterium 2.4.4 - Linkdoel (in context)
Beschrijving van het criterium:
❌ Afgekeurde bevinding:
Het logo bevat een hyperlink zonder toegankelijke naam. Redacteur Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Het plaatje heeft geen linkdoel, hierdoor weten bezoekers niet waar ze heen gaan.
<a href="https://22b9cdb6.delivery.rocketcdn.me/wp-content/uploads/2024/08/form-upload.svg"><img class="alignnone size-medium wp-image-715 entered lazyloaded" role="img" src="https://22b9cdb6.delivery.rocketcdn.me/wp-content/uploads/2024/08/form-upload.svg" alt="" width="300" height="300" data-lazy-src="https://22b9cdb6.delivery.rocketcdn.me/wp-content/uploads/2024/08/form-upload.svg" data-ll-status="loaded"><noscript><img class="alignnone size-medium wp-image-715" role="img" src="https://22b9cdb6.delivery.rocketcdn.me/wp-content/uploads/2024/08/form-upload.svg" alt="" width="300" height="300" /></noscript></a>
Een knop van een vergrootglas voor de zoekfunctie bevat geen toegankelijke naam. Redacteur Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/zoekresultaten/?q=hoorn
De knop voor het doorzoeken van de website van het zoekformulier in de headernavigatie is niet voorzien van een toegankelijke tekst. Hierdoor wordt er alleen ‘knop‘ opgelezen aan gebruikers van assisterende software, in plaats van ‘doorzoek website‘. Zorg dat het doel van de link voor alle gebruikers duidelijk is.
Linktekst onduidelijk Redacteur Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/agenda/
De huidige linktekst van de pagination beschrijft het doel van de linktekst onvoldoende aan gebruikers van schermlezers. Deze groep hoort alleen de interactieve tekst, in plaats van 'ga naar pagina 2' horen ze nu '2'. Zorg dat het doel van de link voor alle gebruikers duidelijk is.
Linktekst onduidelijk Redacteur Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/overnachten/
De interactieve plaatjes lijken links te zijn, maar dat zijn het niet. Als het wel links moeten zijn, dan ontbreekt er een link beschrijving.
Details voor criterium 2.4.7 - Focus zichtbaar
Beschrijving van het criterium:
❌ Afgekeurde bevinding:
Onderdelen krijgen geen zichtbare focus via toetsenbordnavigatie. UX/UI Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Een knop, hyperlink of ander interactief onderdeel krijgt geen zichtbare focus wanneer deze hyperlink geselecteerd wordt. Zorg dat alle interactieve onderdelen zichtbare focus krijgen, zodat gebruikers van assisterende software weten op welk deel van de pagina zij zich bevinden.
Onderdelen krijgen geen zichtbare focus via toetsenbordnavigatie. UX/UI Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/zoekresultaten/?q=hoorn
Een knop, hyperlink of ander interactief onderdeel krijgt geen zichtbare focus wanneer deze hyperlink geselecteerd wordt. Zorg dat alle interactieve onderdelen zichtbare focus krijgen, zodat gebruikers van assisterende software weten op welk deel van de pagina zij zich bevinden.
De knop "leeg zoekresultaat" is niet zichtbaar wanneer voice-over actief is.
Richtlijn 2.5 Input Modaliteiten
Details voor criterium 2.5.8 - Grootte van het aanwijsgebied (minimum)
Beschrijving van het criterium:
Het aanwijsgebied van elk aanwijzerdoel moet minimaal 24 bij 24 CSS-pixels zijn.
Dit geldt niet in de volgende gevallen:
- Gelijkwaardig: hetzelfde doel is beschikbaar via een gelijkwaardige link of knop op dezelfde pagina met een aanwijsgebied van minimaal 24 bij 24 CSS-pixels.
- Inline: het aanwijzerdoel staat in een zin of tekstblok.
- Bepaald door user agent: de grootte van het aanwijsgebied wordt bepaald door de user agent en is niet aangepast door de auteur.
- Essentieel: een specifieke weergave van het aanwijzerdoel is essentieel of wettelijk verplicht voor de informatie die wordt overgebracht.
❌ Afgekeurde bevinding:
Het aanwijsgebied is niet groot genoeg. Webbouwer Hoge impact - Veel werk
Zorg dat interactieve onderdelen groot genoeg zijn en voldoende afstand hebben ten opzichte van andere onderdelen.
De interactieve navigatie buttons zijn nu 8x8.
Dit zorgt ervoor dat gebruikers de onderdelen gemakkelijk kunnen gebruiken, zonder fouten te maken. Het minimale formaat van iconen, knoppen en andere interactieve elementen is 24x24 pixels.
Het aanwijsgebied is niet groot genoeg. Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Zorg dat interactieve onderdelen groot genoeg zijn en voldoende afstand hebben ten opzichte van andere onderdelen. Dit zorgt ervoor dat gebruikers de onderdelen gemakkelijk kunnen gebruiken, zonder fouten te maken. Het minimale formaat van iconen, knoppen en andere interactieve elementen is 24x24 pixels.
Principe 3: Begrijpelijk
Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn.
Richtlijn 3.1 Leesbaar
Richtlijn 3.2 Voorspelbaar
Richtlijn 3.3 Assistentie bij invoer
Details voor criterium 3.3.2 - Labels of instructies
Beschrijving van het criterium:
❌ Afgekeurde bevinding:
Formulier bevat asterisks zonder instructie. UX/UI Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/contact/
De verplichte invoervelden voor e-mailadres en wachtwoord van het formulier op de pagina zijn voorzien een asterisk (*). Er staat niet vermeld wat deze symbolen betekenen. Voorzie het formulier daarom van een instructie zoals ’velden met een * zijn verplicht’.
Formulier bevat asterisks zonder instructie. UX/UI Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
De verplichte invoervelden voor e-mailadres en wachtwoord van het formulier op de pagina zijn voorzien een asterisk (*). Er staat niet vermeld wat deze symbolen betekenen. Voorzie het formulier daarom van een instructie zoals ’velden met een * zijn verplicht’.
Een invoerveld bevat geen label. Webbouwer Hoge impact - Weinig werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Voorzie alle invoervelden van een tekstueel label of een visueel label met toegankelijk alternatief. Op deze manier is het voor alle bezoekers duidelijk wat het doel van het invoerveld is.
Dit geldt voor alle invoervelden.
Principe 4: Robuust
Content moet robuust genoeg zijn om betrouwbaar geïnterpreteerd te kunnen worden door een grote verscheidenheid aan user agents, inclusief hulptechnologieën.
Richtlijn 4.1 Compatibel
Details voor criterium 4.1.2 - Naam, rol, waarde
Beschrijving van het criterium:
Voor alle onderdelen van de gebruikersinterface moeten de naam en rol door software kunnen worden bepaald.
Dit geldt onder andere voor formulierelementen, links en onderdelen die met scripts zijn gemaakt.
Daarnaast geldt het volgende:
- Toestanden: de status van een onderdeel, zoals ingeschakeld, uitgeschakeld of geselecteerd, moet door software kunnen worden bepaald.
- Eigenschappen en waarden: eigenschappen en waarden die de gebruiker kan aanpassen, moeten ook door software kunnen worden ingesteld.
- Wijzigingen: veranderingen in deze onderdelen moeten beschikbaar zijn voor user agents, waaronder hulptechnologieën zoals schermlezers.
❌ Afgekeurde bevinding:
De tabbladen zijn programmatisch niet correct gestructeerd. Webbouwer Hoge impact - Veel werk
URL: https://komnaarhoorn.nl/aanmelden-activiteit/
Aria-selected staat op de li, maar het geselecteerde state-attribuut hoort bij het element met role="tab" (dus op de <a role="tab">), niet op de container li.
De tabs hebben geen programmatische relatie met een bijbehorend paneel (role="tabpanel"), omdat aria-controls ontbreekt en er ook geen tabpanel-structuur aanwezig is.
Hierdoor kan hulpsoftware de rol, status (geselecteerd/niet geselecteerd) en relatie “tab ↔ paneel” niet betrouwbaar bepalen.
Om dit veel simpeler en in orde te maken, raden we aan om te kijken op deze pagina: https://www.audithouse.nl/kennisbank/digitaal-toegankelijke-tablist/ (Praktijkvoorbeeld: een toegankelijke tablist)
<ul role="tablist" class="flex justify-between">
<template x-for="(step, index) in steps" :key="index">
<li :class="{'done': step.done}" :aria-selected="step.done ? 'true' : 'false'">
<a href="#" ... role="tab" tabindex="0"><span x-text="step.label"></span></a>
</li>
</template>
</ul>
Onjuist gebruik van ARIA-labels Webbouwer Hoge impact - Veel werk
De slider control button heeft geen ID, waardoor de relatie verloren gaat. Dit kan leiden tot verwarring voor schermlezers en andere assistieve technologieën wanneer er geen expliciete actie of manipulatie van content plaatsvindt.
Dit gaat fout bij alle drie de buttons.
<button class="swiper-pagination-bullet swiper-pagination-bullet-active" aria-label="Ga naar slide 1" title="Ga naar slide 1" role="button" aria-controls="swiper-slide-1" style="outline: rgb(66, 153, 225) solid 3px; transition: outline 0.2s;" data-wcag-target-id="0"></button>
Onjuist gebruik van ARIA-labels Webbouwer Hoge impact - Veel werk
In de <footer> staat aria-labelledby="footer-heading", maar in de footer ontbreekt een element met id="footer-heading". Daardoor verwijst deze ARIA-relatie naar een niet-bestaand label en kan de toegankelijke naam van de footer niet correct worden bepaald.
<footer data-rocket-location-hash="cb7896d30667957f50d4a4fb1dd1d6a2" class="bg-purple text-sand px-3 sm:px-5 lg:px-16 pb-12 lg:pb-16 flex flex-col" aria-labelledby="footer-heading">...</footer>
