Audit digitale toegankelijkheid van website formulier.s-hertogenbosch.nl
Samenvatting
Wij hebben de website formulier.s-hertogenbosch.nl onderzocht tussen 1 en 9 juli 2025. Op dit moment zijn 37 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 18 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Toegankelijkheid van toetsenbordfocus en navigatie: Er zijn meerdere terugkerende problemen met de toetsenbordfocus, waaronder de cookiebanner die niet als eerste focus krijgt, onzichtbare toetsenbordfocus op interactieve elementen, onlogische focusvolgorde in mobiele menu's en focus die buiten het mobiele menu gaat. Dit belemmert gebruikers die afhankelijk zijn van toetsenbordnavigatie aanzienlijk.
Onjuist gebruik van HTML-elementen en ARIA-attributen voor semantiek en rol: Het rapport beschrijft veel gevallen waarin HTML-elementen (zoals <strong> in plaats van headings) en ARIA-attributen (aria-label="false", aria-selected="true" op onjuiste elementen) verkeerd worden gebruikt of ontbreken. Dit leidt tot een verkeerde interpretatie van de inhoud en functionaliteit door screenreaders en andere ondersteunende technologieën. Voorbeelden zijn koppen die niet als zodanig zijn gemarkeerd, <strong>-elementen voor opmaak, en niet-interactieve div-elementen die als knop functioneren.
Ontbrekende of ontoegankelijke labels en instructies bij invoervelden: Verschillende invoervelden missen correct gekoppelde labels (<label>-elementen), hebben placeholdertekst als enige instructie, of ontbrekende autocomplete-attributen. Ook worden instructies vaak alleen via tooltips getoond en zijn ze niet permanent zichtbaar of toetsenbordtoegankelijk. Dit maakt het invullen van formulieren lastig en ontoegankelijk voor veel gebruikers.
Alle pagina's op de website formulier.s-hertogenbosch.nl
Alle PDF's op de website formulier.s-hertogenbosch.nl
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 139
Google Chrome, versie 139
Apple Safari, versie 18
PAC software to test PDF
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
De inhoud van de cookiebanner is in het Engels. De lokale taalswitch ontbreekt. Nu wordt deze tekst met de uitspraakregels van het Nederlands voorgelezen.
Oplossing:
Voeg lang="en" toe aan deze container. Of vertaal de inhoud van de banner in het Nederlands.
SC 2.4.3 Cookiebanner krijgt niet als eerste toetsenbordfocus
Op elke pagina verschijnt er een cookiebanner wanneer de website voor het eerst wordt bezocht. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. Als de website op een klein scherm wordt bekeken, bedekt de banner de inhoud van de pagina. Wanneer de toetsenbordfocus niet eerst naar de banner gaat, kunnen bezoekers die alleen met het toetsenbord navigeren het bericht niet sluiten. Om de banner te sluiten, moet helemaal naar de onderkant van de pagina worden getabbt.
Oplossing:
Zorg dat de focus als eerste naar de cookiebanner gaat.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Op alle pagina's van de website, in de footer, is de toetsenbordfocus niet zichtbaar op de volgende links: "Privacybeleid", "Beheer cookies".
De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.
Hetzelfde probleem is waarneembaar bij alle knoppen en links die eruitzien als knoppen. Wanneer ze toetsenbordfocus krijgen, flitst de rand een seconde en keert daarna terug naar de normale staat.
Hier zijn enkele voorbeelden, maar dit is geen uitputtende lijst:
de knoppen “Alles toestaan” en “Alles weigeren” in de cookiebanner,
Volgens succescriterium 2.4.7 moet een websitebezoeker op elk moment visueel kunnen bepalen waar de toetsenbordfocus zich bevindt.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op de meeste pagina's van de website, bijvoorbeeld op pagina https://formulier.s-hertogenbosch.nl/leerlingenvervoer/introductie, staat een beige gedeelte met de kop "Voortgang" en stappen van het proces. In dit gedeelte staat bruine (#8E7237) tekst op beige achtergrond. De kleurcontrastverhouding is onvoldoende: 4,1:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 4.1.2 Dialoogvenster heeft geen toegankelijke naam
Op veel pagina’s van de website verloopt de sessie wanneer een bezoeker begint met het invullen van een formulier en vervolgens gedurende 15 minuten geen acties uitvoert. In dat geval wordt een dialoogvenster met de melding “Je sessie vervalt binnenkort” weergegeven. Dit dialoogvenster heeft geen toegankelijke naam.
Hetzelfde probleem wordt waargenomen voor het dialoogvenster "Opslaan en later verdergaan" dat kan worden geopend door de knop "Tussentijds opslaan" te activeren op elke volledig of gedeeltelijk voltooide stap.
Oplossing:
Voeg een aria-label aan het dialoogvenster toe met een duidelijke beschrijving van de inhoud.
SC 2.4.11 Focus is bedekt door een sticky footer
Wanneer de website wordt verkleind naar een lagere resolutie, bedekt een sticky header een deel van de pagina-inhoud. Onderaan de meeste stappen van de formulieren bevindt zich een “Volgende”-knop. Wanneer zo’n pagina wordt ingezoomd tot 400% en de bezoeker met behulp van Shift Tab terug omhoog navigeert (van onder naar boven), krijgt de “Volgende”-knop toetsenbordfocus, maar de focusindicator is verborgen door de sticky header. Hierdoor is het onmogelijk om te zien waar de focus zich bevindt.
Zorg ervoor dat de sticky header geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.
SC 2.4.3 Volgorde toetsenbordfocus is niet logisch
Wanneer pagina’s op een klein scherm worden bekeken, wordt het zijbalkmenu samengevouwen onder een knop met dezelfde naam als de hoofdheading van de pagina, bijvoorbeeld “Aanvraag inlogcode eParkeren voor bedrijven”. Deze knop wordt direct onder het logo geplaatst, maar de toetsenbordfocus verspringt niet naar deze knop; in plaats daarvan gaat de focus direct naar de pagina-inhoud. Deze volgorde van toetsenbordnavigatie is niet logisch. Voorbeelden hiervan zijn te zien op de volgende pagina’s:
Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.
Oplossing:
Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.
SC 2.4.3 Toetsenbordfocus gaat buiten het mobiele menu
Wanneer pagina’s op een klein scherm worden bekeken, wordt het zijbalkmenu samengevouwen onder een knop met dezelfde naam als de hoofdheading van de pagina, bijvoorbeeld “Aanvraag inlogcode eParkeren voor bedrijven”. Op dit moment kunnen bezoekers, wanneer het menu is geopend, met het toetsenbord uit het menu navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu geopend blijft.
Voorbeelden hiervan zijn te zien op de volgende pagina’s:
Bij dit soort menu’s moet je de toetsenbordfocus goed instellen. Als het menu actief is, moet de focus binnen het menu blijven, en mag deze niet op de onderliggende pagina terechtkomen. Dit kun je op een van de volgende manieren oplossen:
Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Wanneer pagina’s op een klein scherm worden bekeken, wordt het zijbalkmenu samengevouwen onder een knop met dezelfde naam als de hoofdheading van de pagina, bijvoorbeeld “Aanvraag inlogcode eParkeren voor bedrijven”. Op dit moment is, wanneer het menu geopend is en bezoekers met het toetsenbord terug navigeren naar deze knop, de toetsenbordfocus niet zichtbaar.
Voorbeelden hiervan zijn te zien op de volgende pagina’s:
De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
SC 2.4.4 Linktekst is niet duidelijk genoeg
Advies: Op alle pagina’s is er een zijmenu met links naar de verschillende stappen. De toegankelijke namen van deze links bevatten momenteel alleen de zichtbare tekst, bijvoorbeeld naam: “Startpagina”. Wanneer een stap is afgerond, verschijnt er een vinkicoon met verborgen tekst “Voltooid”. Voeg deze verborgen tekst toe aan de toegankelijke naam van de link, zodat het doel van de link duidelijker wordt voor gebruikers van ondersteunende technologie.
Voorbeelden hiervan zijn te zien op de volgende pagina’s:
Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.
Oplossing:
Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Bijvoorbeeld: ‘lees meer (over het project)’ of ‘lees meer (in onze blog)’.
Alleen de introductiepagina en startpagina zijn getest. Voor andere stappen is DigiD nodig.
SC 1.3.1 strong-element is gebruikt voor opmaak
Op deze pagina worden de strong-elementen onjuist gebruikt voor opmaakdoeleinden, bijvoorbeeld in vragen zoals: “Is dit uw eerste aanvraag, wisselt het kind van school of bent u onlangs in de gemeente ’s-Hertogenbosch komen wonen?” en andere soortgelijke zinnen.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die het bevat. Beide elementen geven aan dat de tekst extra nadruk moet krijgen. Om die reden mag je deze elementen niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt of cursief).
Een soortgelijk probleem is op pagina https://formulier.s-hertogenbosch.nl/evenementvergunning ("Soort vergunning" stap) met tekst die begint met "Je hebt geen vergunning...", die wordt weergegeven nadat de optie "Minder dan 150" is geselecteerd.
Oplossing:
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet- of schuingedrukt te maken.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
In de stap "Gegevens" staat een formulier met invoervelden voor persoonlijke gegevens (bijvoorbeeld achternaam, e-mailadres, telefoonnummer). Sommige velden missen het autocomplete-attribuut.
Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Vergelijkbare problemen komen ook voor in formulieren op andere pagina’s, zoals:
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.
Veel van de problemen op deze pagina, met name binnen het formulier op de "Locatie" stap, zijn al gedocumenteerd in het gedeelte voor de "Aanvraag subsidie wijk-, buurt- en dorpsbudget" pagina.
SC 1.3.1 Instructions are not connected to input fields
In dit formulier, in stap 5 (Omschrijving), staan er bij twee velden — “Wat wilt u plaatsen?” en “Welke werkzaamheden gaat u uitvoeren?” — instructies onder het invoerveld. De relatie tussen deze instructies en de bijbehorende invoervelden is echter niet programmatisch vastgelegd. Daardoor kunnen hulpmiddelen, zoals screenreaders, deze belangrijke informatie niet goed overbrengen aan de bezoeker.
Dit probleem kan worden opgelost door gebruik te maken van het attribuut aria-describedby op het invoerveld.
Hetzelfde probleem doet zich ook voor in dit formulier in de stap “Locatie”, bij de velden: “Wat is de locatie?” en “Van” en ook op de pagina https://formulier.s-hertogenbosch.nl/evenementvergunning (stap “Evenement”) bij het veld: “Wat is de locatie van het evenement?”
Een vergelijkbaar probleem komt ook op andere pagina’s voor.
Oplossing:
Gebruik het attribuut aria-describedby op het invoerveld, en verwijs daarin naar het id van het instructie-element. Zo wordt er een duidelijke koppeling gelegd tussen het veld en de aanvullende informatie.
SC 4.1.3 Aantal resterende tekens wordt niet automatisch voorgelezen door schermlezers
In dit formulier, in stap 5 (Omschrijving), zijn er twee tekstvelden: “Wat wilt u plaatsen?” en “Welke werkzaamheden gaat u uitvoeren?”. Onder elk van deze tekstvakken staat een teller die aangeeft hoeveel tekens er nog over zijn.
Deze teller is een statusmelding. Hoewel de informatie dynamisch wordt bijgewerkt, wordt dit niet doorgegeven aan screenreaders. Hierdoor missen gebruikers van ondersteunende technologieën belangrijke feedback over de invoerlimiet.
Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd.
Hetzelfde probleem in dit formulier bij stap "Locatie" met het veld "Wat is de locatie?".
Oplossing:
Voeg bijvoorbeeld aria-live="polite" aan de teller toe. Deze code moet er al staan op het moment dat de pagina wordt geladen.
Bezwaar maken tegen genomen besluit van de gemeente
SC 1.3.1 Visueel meerdere alinea’s, in de code maar één
In dit formulier wordt bij stap 4 (Soort vergunning), nadat de optie "150 - 500" of "Meer dan 500" is geselecteerd, hieronder extra tekst weergegeven. Dit blok tekst met drie paragrafen is onjuist gemarkeerd als een enkel p-element.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.
Oplossing:
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.
PDF Schoolverklaring leerlingenvervoer
Link naar pagina: https://formulier.s-hertogenbosch.nl/leerlingenvervoer/introductie
Het pdf-document heeft een ongeldige instelling voor de primaire taal (“äð…ò¾¬”). Deze waarde komt niet overeen met een geldige taalcode (zoals nl, en, enzovoort).
Daardoor kunnen screenreaders en andere ondersteunende technologieën de juiste taal van de inhoud niet bepalen. Dit kan leiden tot verkeerde uitspraak, onjuiste interpretatie van de inhoud en een slechte gebruikerservaring voor mensen die afhankelijk zijn van screenreaders.
Oplossing:
Verander de code in “nl”.
SC 1.1.1 Informatieve afbeelding is als achtergrondafbeelding geplaatst
This pdf-document contains a logo “’s-Hertogenbosch” as an artifact.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.
Oplossing:
Voeg het logo toe met de Figure-tag en geef het een beschrijvende alt-tekst.
PDF Verklaring samenwerkingsverband leerlingenvervoer
Link naar pagina: https://formulier.s-hertogenbosch.nl/leerlingenvervoer/introductie
Het pdf-document heeft een ongeldige instelling voor de primaire taal (“˘¡⁄˜ˆPq“«VS=VÒfiL/ÇÔ.ÆÏÛ»ûˇdˆ”). Deze waarde komt niet overeen met een erkende taalcode (zoals nl, en, enzovoort).
Als gevolg hiervan kunnen screenreaders en andere ondersteunende technologieën de juiste taal van de inhoud niet bepalen. Dit kan leiden tot verkeerde uitspraak, misinterpretatie van de inhoud en een slechte ervaring voor gebruikers die afhankelijk zijn van screenreaders.
Oplossing:
Verander de code in “nl”.
SC 1.1.1 Informatieve afbeelding is als achtergrondafbeelding geplaatst
Dit pdf-document bevat een logo "'s-Hertogenbosch" als artefact.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.
Oplossing:
Voeg het logo toe met de Figure-tag en geef het een beschrijvende alt-tekst.
Op deze pagina staat bij stap "Aanvraag" een kopje "Selecteer de wijk". In deze kop worden het heading-element en het strong-element gebruikt.
Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).
Oplossing:
Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.
SC 4.1.2 Keuzelijst heeft geen toegankelijke naam
In dit formulier staat bij stap 5 (Aanvraag) onder kopje "Selecteer de wijk" een keuzelijst (combobox-element) met het label "Wijk of dorp:". De toegankelijke naam ontbreekt. Dit voldoet ook niet aan het SC 2.5.3 omdat dit element niet met stem te bedienen is.
Oplossing:
Geef het combobox-element een toegankelijke naam.
SC 1.3.1 label-element is niet gekoppeld aan invoerveld
In dit formulier staat bij stap 5 (Aanvraag) onder "Selecteer de wijk" een keuzelijst (combobox-element). Het label-element met "Wijk of dorp:" is niet expliciet gekoppeld aan het bijbehorende invoerveld.
label-elementen moeten gekoppeld zijn aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.
Oplossing:
Koppel de label-elementen aan hun bijbehorende invoervelden door het for attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.
SC 2.4.6 Naam van de knop beschrijft niet wat de knop doet
In dit formulier staat bij stap 5 (Aanvraag) onder "Selecteer de wijk" een keuzelijst (combobox-element) met het label "Wijk of dorp:". Na het selecteren van een optie verschijnt de knop met een X. De knop heeft de functie om de geselecteerde optie te verwijderen, maar de toegankelijke naam is "Remove item: '2', wat de functie niet nauwkeurig beschrijft. Dit voldoet ook niet aan SC 3.1.2 omdat een lokaal taalwissel ontbreekt.
Een blinde bezoeker weet daardoor niet wat deze knop precies doet.
Oplossing:
Zorg ervoor dat de toegankelijke naam de tekst van de geselecteerde optie bevat. Bijvoorbeeld: "Verwijder item: Boschveld" of simpelweg "Boschveld verwijderen".
SC 3.3.2 Invoerveld voor zoekopdrachten heeft geen permanent label en een onjuiste toegankelijke naam
In dit formulier, stap 5 (Aanvraag), onder “Selecteer de wijk”, verschijnt er een zoekveld wanneer het combobox-element wordt geopend. Dit invoerveld heeft meerdere toegankelijkheidsproblemen:
Er ontbreekt een permanente, zichtbare label. Het veld is afhankelijk van de placeholdertekst (“Typ om te zoeken”), wat in strijd is met SC 3.3.2 (Labels of Instructions), aangezien de placeholder verdwijnt zodra de gebruiker begint te typen.
Het invoerveld heeft een hardcoded toegankelijke naam van “false” (via aria-label="false"). Deze naam beschrijft het doel van het veld niet en vormt een schending van SC 2.4.6 (Headings and Labels).
De zichtbare placeholdertekst (“Typ om te zoeken”) komt niet overeen met de programmatische naam (“false”). Dit schendt SC 2.5.3 (Label in Name) en belemmert spraakbesturing, omdat gebruikers het veld niet kunnen activeren via de zichtbare tekst.
Deze combinatie van problemen veroorzaakt aanzienlijke drempels. Gebruikers kunnen de context verliezen zodra de placeholder verdwijnt. Screenreadergebruikers horen een betekenisloze naam (“false”) en gebruikers van spraakbesturing kunnen het veld niet betrouwbaar aanroepen.
Oplossing:
Implementeer een correcte, permanente label voor het zoekveld. Aangezien de zoekcontext visueel al duidelijk is, kan een visueel verborgen label hier een uitstekende oplossing zijn.
Voeg een <label>-element toe dat via for/id is gekoppeld aan het zoekveld.
Geef het label een duidelijke, beschrijvende tekst, bijvoorbeeld: “Zoek wijk of dorp”.
Verberg het label visueel met een CSS-klasse zoals sr-only of visually-hidden, zodat screenreaders het nog kunnen lezen.
Verwijder het attribuut aria-label="false" uit het invoerveld, zodat de nieuwe <label> de toegankelijke naam kan leveren.
SC 4.1.3 Melding over aangepaste zoekresultaten wordt niet automatisch voorgelezen door schermlezers
In dit formulier, stap 5 (Aanvraag), onder “Selecteer de wijk”, bevindt zich een dropdownlijst (combobox-element) met het label “Wijk of dorp:”. Wanneer deze wordt geopend, verschijnt er een zoekveld. Als er geen resultaten worden gevonden, verschijnt er een melding zoals “Geen resultaten gevonden” — dit gebeurt zonder dat de pagina wordt herladen.
Deze melding is een statusmelding, maar wordt niet aangekondigd door screenreaders. Hierdoor missen gebruikers van ondersteunende technologie cruciale feedback over het resultaat van hun zoekopdracht.
Oplossing:
Statusberichten moeten automatisch voorgelezen worden door schermlezers, maar de code die dit mogelijk maakt is nog niet toegevoegd. Je lost dit op door aria-live-attribute aan de melding toe te voegen.
SC 4.1.2 & 2.4.3 Non-interactive div element works as button and receives focus due to tabindex attribute
In dit formulier, stap 5 (Aanvraag), wordt na het selecteren van een optie in het “Wijk of dorp:” combobox-element de geselecteerde waarde weergegeven. De implementatie van deze “geselecteerde item”-status is onjuist en leidt tot meerdere gerelateerde WCAG-overtredingen:
Onjuiste focusbeheer (SC 2.4.3 - Focus Order):
De toetsenbordfocus komt terecht op een niet-interactieve <div> met tabindex="0", in plaats van op een daadwerkelijk interactief element, zoals een <button>. Dit zorgt voor een onlogische focusstop en verwarring bij toetsenbordgebruikers.
Onjuiste roltoewijzing (SC 4.1.2 - Name, Role, Value):
Het element dat de geselecteerde optie weergeeft, functioneert feitelijk als een knop (het openen van de lijst bij klikken), maar is geïmplementeerd als een <div>. Het ontbreekt aan role="button", waardoor screenreaders de bedoeling en functionaliteit niet correct kunnen overbrengen.
Ongeldige ARIA-toepassing (SC 4.1.2):
De <div> met de geselecteerde waarde gebruikt ten onrechte aria-selected="true". Deze eigenschap is niet geldig op <div>-elementen en kan leiden tot onvoorspelbaar gedrag in screenreaders.
Deze combinatie van fouten zorgt voor een verwarrende en ontoegankelijke ervaring.
Toetsenbordgebruikers raken gefocust op een element waarmee ze niets kunnen, en screenreadergebruikers ontvangen foutieve informatie over rol en status. Hierdoor is het onduidelijk hoe ze de selectie kunnen wijzigen of verwijderen.
Oplossing:
Het “geselecteerde item” moet worden aangepast zodat semantiek en focusbeheer kloppen.
Gebruik een <button>:
Vervang de focusbare <div> door een semantisch correcte <button>. Dit lost zowel het focusprobleem als het rolprobleem op.
Geef een beschrijvende toegankelijke naam:
Verwijder onjuiste attributen:
Verwijder tabindex="0" van niet-interactieve containers en gebruik geen aria-selected op elementen die daar niet geschikt voor zijn.
SC 1.4.11 Contrast tussen focusindicator en achtergrond is te laag
In dit formulier staat bij stap 5 (Aanvraag) een select element. Als een optie is geselecteerd verschijnt er een "x" knop. Als deze knop de toetsenbordfocus krijgt, is hij zichtbaar door een blauwe (#00BCD4) toetsenbordfocusrand. De contrastverhouding tussen de toetsenbordfocusrand en de witte achtergrond is 2,3:1.
Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Hetzelfde probleem doet zich voor op de pagina https://formulier.s-hertogenbosch.nl/aanvraag-gebruik-gemeentegrond (stap “Locatie”) bij het veld “Het voorwerp wordt geplaatst op”.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
SC 1.3.1 strong-element in plaats van kop-element
In dit formulier op stap 6 (Motivatie) is de tekst "Draagvlak" ten onrechte gemarkeerd met strong in plaats van met een heading-element.
Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis.
Een vergelijkbaar probleem doet zich voor op de volgende pagina’s:
https://formulier.s-hertogenbosch.nl/gehandicaptenparkeerplaats/startpagina (stap “Mobiliteitsgegevens”) bij de kop “Kosten”
https://formulier.s-hertogenbosch.nl/evenementvergunning (stap “Privéfeest”) bij de kop “Evenementvergunning niet mogelijk” nadat de optie “Ja” is geselecteerd
https://formulier.s-hertogenbosch.nl/evenementvergunning (stap “Groot evenement”) bij de kop “Aanvraag vergunning voor een groot evenement”
Oplossing:
Verwijder het strong-element en gebruik het juiste kop-element om deze kop te markeren, zoals h3 of h4.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
In dit formulier op stap 8 (Overzicht) zijn de volgende teksten niet gemarkeerd als koppen: "Persoonsgegevens", "Adresgegevens" en andere soortgelijke rubrieken.
Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
Een vergelijkbaar probleem doet zich voor in de stap “Overzicht” in andere formulieren, bijvoorbeeld op de volgende pagina’s:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
SC 1.3.1, 2.4.6, 2.5.3: Invoerveld heeft placeholder tekst als label
In dit formulier, in stap 5 (“Kaartgegevens”) (nadat op stap 3 “Gehandicaptenparkeerkaart” de optie “Ja, een Europese gehandicaptenparkeerkaart” is geselecteerd), is het <label>-element met de tekst “Wat is de vervaldatum van de kaart?” niet expliciet gekoppeld aan het bijbehorende invoerveld via overeenkomende for- en id-attributen. Dit voldoet niet aan SC 1.3.1 (Informatie en relaties).
Er zijn meer toegankelijkheidsproblemen in dit element:
Doordat de koppeling ontbreekt, gebruikt de browser de placeholdertekst “dd-mm-jjjj” als toegankelijke naam van het veld. Deze naam is niet beschrijvend en voldoet daarom niet aan SC 2.4.6 (Koppen en labels).
De toegankelijke naam (“dd-mm-jjjj”) bevat de zichtbare labeltekst “Wat is de vervaldatum van de kaart?” niet. Dit faalt SC 2.5.3 (Label in Name) en verhindert dat gebruikers het veld met spraakopdrachten kunnen activeren via de zichtbare tekst.
Vergelijkbare problemen doen zich voor op andere pagina’s:
https://formulier.s-hertogenbosch.nl/aanvraag-gebruik-gemeentegrond (stap “Locatie”) – velden: “Van” en “Tot en met”
En vergelijkbare problemen zijn aanwezig op andere pagina’s.
Oplossing:
Koppel het <label>-element aan het bijbehorende invoerveld door het for-attribuut te gebruiken. De waarde van for moet gelijk zijn aan de id van het input-element waar het label bij hoort.
SC 3.3.2 Geen instructie over de schrijfwijze van de datum
In dit formulier, stap 5 ("Kaartgegevens"), vereist het datuminvoerveld "Wat is de vervaldatum van de kaart?" een specifiek datumformaat (dd-mm-jjjj). Deze instructie wordt echter alleen gegeven als plaatshouder.
Hierdoor moet een bezoeker allerlei schrijfwijzen uitproberen om te ontdekken op welke manier de datum moet worden ingevuld. Dit is ontoegankelijk voor veel bezoekers, omdat de placeholder-tekst verdwijnt zodra de bezoeker begint te typen.
Hetzelfde probleem doet zich ook voor op de volgende pagina’s:
https://formulier.s-hertogenbosch.nl/aanvraagformulier-incidentele-informatiestandplaats/startpagina (stap “Gegevens standplaats”) bij het veld “Datum waarop de activiteit begint”
https://formulier.s-hertogenbosch.nl/evenement-melden bij de velden “Datum & tijd”
https://formulier.s-hertogenbosch.nl/aanvraag-gebruik-gemeentegrond (stap “Locatie”) bij de velden “Van” en “Tot en met”
Een vergelijkbaar probleem komt ook voor op andere pagina’s.
Oplossing:
Zorg dat de instructie over de schrijfwijze van de datum altijd zichtbaar is op de pagina. De beste manier is om de formaatvereiste (bijv. 'dd-mm-jjjj') als permanente hinttekst direct onder of naast het invoerveld te plaatsen. Voor de beste toegankelijkheid moet deze hinttekst programmatisch worden gekoppeld aan het invoerveld met het aria-describedby-attribuut.
SC 2.1.1 Tooltip kan niet met toetsenbord worden opgeroepen
In dit formulier, in stap 6 (Mobiliteitsgegevens), staat naast sommige invoervelden (bijvoorbeeld “Wat is het kenteken van de auto die u vervoert?”) een pictogram van een vraagteken dat een tooltip activeert. Wanneer een bezoeker met de muis over dit pictogram beweegt, verschijnt er extra informatie.
Deze functionaliteit is echter niet beschikbaar voor gebruikers die de website alleen met het toetsenbord navigeren. Hierdoor missen zij belangrijke toelichtingen, wat leidt tot een toegankelijkheidsprobleem.
Een vergelijkbaar probleem doet zich ook voor op de volgende pagina’s:
https://formulier.s-hertogenbosch.nl/evenementvergunning (stap “Straten afsluiten”) naast het veld “Wilt u toestemming om één of meerdere straten af te sluiten?”
Dezelfde pagina, stap “Voorzieningen”, naast het veld “Zijn er toiletvoorzieningen op het evenement?”
Dit probleem is ook zichtbaar op andere stappen en in andere formulieren.
Oplossing:
Als de tooltip informatie of instructies bevat, dan moet die inhoud ook toegankelijk zijn voor bezoekers die alleen met het toetsenbord navigeren.
SC 4.1.2 Tooltip heeft geen toegankelijke rol
In dit formulier, in stap 6 (Mobiliteitsgegevens), staat naast sommige invoervelden (bijvoorbeeld “Wat is het kenteken van de auto die u vervoert?”) een pictogram van een vraagteken. Wanneer dit pictogram wordt aangewezen met de muis (hover), verschijnt er een tooltip met extra informatie.
Deze tooltip heeft echter geen programmatische rol toegewezen gekregen, zoals role="tooltip". Hierdoor wordt de tooltip niet correct herkend door ondersteunende technologieën, zoals screenreaders, en is de aanvullende informatie niet toegankelijk voor alle gebruikers.
Oplossing:
Voeg de correcte rol toe aan het element dat de tooltip-tekst bevat. Gebruik hiervoor role="tooltip".
Zorg er bovendien voor dat het trigger-element (het vraagteken-pictogram, dat een <button> zou moeten zijn) programmatisch is gekoppeld aan de tooltip. Dit wordt gedaan door het id van de tooltip te gebruiken in een aria-describedby-attribuut op de knop. Dit stelt schermlezers in staat om de relatie tussen de knop en de tooltip aan te kondigen.
Een vergelijkbaar probleem doet zich voor op de pagina https://formulier.s-hertogenbosch.nl/evenementvergunning, in de stap “Straten afsluiten” naast het veld “Wilt u toestemming om één of meerdere straten af te sluiten?” en in de stap “Voorzieningen” naast het veld “Zijn er toiletvoorzieningen op het evenement?”.
Het probleem is ook zichtbaar op andere stappen en in andere formulieren.
SC 3.3.2 Instructie bij invoerveld is niet altijd zichtbaar
In dit formulier, in stap 6 (Mobiliteitsgegevens), hebben sommige invoervelden (bijvoorbeeld “Wat is het kenteken van de auto die u vervoert?”) instructies die niet permanent zichtbaar zijn op de pagina. Ze verschijnen alleen wanneer een bezoeker met de muis over het vraagtekenpictogram naast het invoerveld beweegt.
Dit kan ontoegankelijk zijn voor bezoekers met cognitieve beperkingen, omdat belangrijke informatie over het invullen van het veld niet direct zichtbaar is.
Een vergelijkbaar probleem doet zich voor op de pagina https://formulier.s-hertogenbosch.nl/evenementvergunning, in de stap “Straten afsluiten” naast het veld “Wilt u toestemming om één of meerdere straten af te sluiten?” en in de stap “Voorzieningen” naast het veld “Zijn er toiletvoorzieningen op het evenement?”.
Het probleem is ook aanwezig op andere stappen en in andere formulieren.
Oplossing:
Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers, niet alleen in foutmeldingen. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.
SC 1.4.3 Contrast van de tekst op de knop is minder dan 4,5:1
In dit formulier, in stap 4 (Melding), verschijnt er een extra onderdeel nadat je op de knop “+ Nog één toevoegen” klikt. In die sectie staat een knop met de tekst “Annuleren”. De kleurencombinatie van die knop heeft te weinig contrast.
De roze tekstkleur (#FCE9E8) op de rode achtergrond (#D52B1E) heeft een contrastverhouding van 4,3:1. Dat voldoet niet aan de minimale eis van 4,5:1 voor gewone tekst.
Hierdoor kan de knop lastig leesbaar zijn voor mensen met een visuele beperking of kleurenzienstoornis.
Oplossing:
Zorg dat het contrast minimaal 4,5:1 is.
SC 4.1.2 Knop heeft geen toegankelijke naam
In dit formulier, in stap 4 (Melding), verschijnt er een extra gedeelte nadat je op de knop “+ Nog één toevoegen” klikt. Wanneer er een datum wordt geselecteerd, verschijnen er twee knoppen: één met een potlood-icoon (bewerken) en één met een prullenbak-icoon (verwijderen).
Deze knoppen hebben geen toegankelijke naam. Daardoor is het voor screenreadergebruikers niet duidelijk wat de knoppen doen of waar ze voor bedoeld zijn.
Alle knoppen moeten een toegankelijke naam hebben die duidelijk beschrijft wat de functie is.
Oplossing:
Geef deze knoppen een toegankelijke naam, bijvoorbeeld via beschrijvende tekst of een aria-label, of een andere passende techniek.
Voldoet of niet van toepassing: 37
Voldoet niet: 18
