Audit digitale toegankelijkheid van website Werken bij gemeente Kerkrade
Samenvatting
Wij hebben de website Werken bij gemeente Kerkrade onderzocht tussen 10 en 20 juni 2025. Op dit moment zijn 30 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 25 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.
Toegankelijke naam/tekst ontbreekt of is onjuist: Dit probleem komt herhaaldelijk voor bij links, logo's, knoppen en iframes, waardoor schermlezers en andere hulpsoftware de functie of bestemming van deze elementen niet goed kunnen doorgeven (o.a. SC 2.4.4, SC 4.1.2, SC 2.5.3, SC 2.4.6).
Kleurcontrast is te laag: Veel teksten en interactieve elementen (zoals links, iconen, randen van invoervelden en focusindicatoren) hebben een onvoldoende contrastverhouding met de achtergrond, zowel in normale staat als bij hover/focus (o.a. SC 1.4.3, SC 1.4.11).
Onjuist gebruik van HTML-elementen voor koppen en opmaak: strong-elementen worden gebruikt voor visuele opmaak in plaats van semantische nadruk, of voor koppen in plaats van de juiste heading-elementen. Ook zijn er lege koppen of koppen van hetzelfde niveau direct onder elkaar, wat de paginastructuur onduidelijk maakt voor hulpsoftware (o.a. SC 1.3.1).
Problemen met toetsenbordfocus en -navigatie: De toetsenbordfocus is niet logisch, niet permanent zichtbaar, of ontsnapt uit interactieve elementen zoals het mobiele menu of dialoogvensters (o.a. SC 2.4.3, SC 2.4.7, SC 2.1.1, SC 2.4.11).
Zoomfunctionaliteit veroorzaakt problemen: Bij inzoomen tot 200% of 400% verdwijnt inhoud of wordt deze onleesbaar/onbedienbaar, wat duidt op een gebrek aan responsiviteit (o.a. SC 1.4.4, SC 1.4.10).
Alle pagina's op de website 96067.outsitetijdelijk.afas.online
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 140
Google Chrome, versie 139
Apple Safari, versie 17
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
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.
Op alle pagina’s ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Daarvoor wordt een skiplink gebruikt. Daarmee kunnen vaste blokken met herhalende inhoud worden overgeslagen. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra die focus krijgt.
Oplossing:
Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.
Zorg dat de skiplink:
de eerste link op de pagina is;
visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.
SC 1.1.1 Logo heeft geen alt-tekst
Op alle pagina’s ontbreekt een tekstalternatief voor het logo bovenaan de website. Als het alt-attribuut van een afbeelding leeg is (alt=""), wordt de afbeelding genegeerd door schermlezers. Daarmee wordt aangegeven dat de afbeelding decoratief is en geen informatie bevat. Er wordt dan niets voorgelezen. Een logo is een informatieve afbeelding en moet daarom altijd een alt-tekst krijgen.
De link om dit logo heeft geen linkdoel (SC 2.4.4) en geen toegankelijke naam (SC 4.1.2). Deze link is niet met stem te bedienen omdat de zichtbare tekst van het logo niet in de toegankelijke naam staat (SC 2.5.3). Al deze issues kunnen worden opgelost door het alt-tekst aan te passen.
Oplossing:
Voeg een alt-tekst toe die de volledige tekst van het logo bevat.
SC 4.1.2 Menu-knop heeft niet de juiste rol
Op alle pagina’s ontbreekt op een klein scherm de juiste toegankelijke rol bij de menuknop bovenaan de pagina. De juiste rol voor de menuknop zou button (knop) moeten zijn, omdat hiermee een actie wordt uitgevoerd: het openen of sluiten van het menu. Als de knop niet de juiste rol heeft, kunnen schermlezers of andere hulpsoftware de knop niet goed herkennen, waardoor deze moeilijker te gebruiken is voor mensen die deze hulpmiddelen nodig hebben.
Oplossing:
Zorg dat de menuknop de juiste rol krijgt, door het button-element ervoor te gebruiken, of role="button" toe te voegen.
SC 4.1.2 Informatie over de toestand van de menuknop verandert niet
Op alle pagina’s verschijnt op een klein scherm een menuknop om het mobiele menu te openen. De waarde van het attribuut aria-expanded op de knop wordt echter niet correct bijgewerkt om de toestand van het menu weer te geven. Het blijft op “false” staan, ook wanneer het menu geopend is.
Oplossing:
Dit attribuut zou de waarde “true” moeten krijgen als het menu zichtbaar is en “false" als het gesloten is.
SC 2.1.1 Knop kan niet bediend worden met spatiebalk en Enter-toets
Op alle pagina’s verschijnt op een klein scherm een menuknop om het mobiele menu te openen. Deze knop is niet toegankelijk met een toetsenbord.
Oplossing:
Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.
SC 2.4.3 Volgorde toetsenbordfocus is niet logisch
Op alle pagina’s verschijnt op een klein scherm een menuknop om het mobiele menu te openen. Deze knop krijgt pas toetsenbordfocus nadat alle links op de pagina zijn doorlopen. Deze volgorde van toetsenbordnavigatie is niet logisch. Interactieve elementen zoals knoppen en links moeten in een volgorde toetsenbordfocus krijgen die aansluit op de visuele volgorde op de pagina. Als dit niet gebeurt, wordt navigeren met alleen een toetsenbord lastiger voor bezoekers met een motorische of visuele beperking of een leesstoornis.
Oplossing:
Zorg ervoor dat de volgorde van de toetsenbordfocus logisch is.
SC 2.4.3 Toetsenbordfocus gaat buiten het mobiele menu
Op alle pagina’s is op een klein scherm bovenaan de website een menuknop aanwezig die een mobiel menu opent. Op dit moment is het mogelijk om met het toetsenbord uit het mobiele menu te navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu open blijft staan.
Oplossing:
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 1.3.1 Relatie tussen elementen in een groep is niet in de code vastgelegd
Op alle pagina’s is op een klein scherm in het mobiele menu een groep links zichtbaar die visueel bij elkaar hoort. Deze onderlinge relatie is echter niet terug te vinden in de HTML-structuur. Als voor een ziende bezoeker duidelijk is dat een groep links of teksten bij elkaar hoort, moet die structuur ook in de HTML-code aanwezig zijn.
Oplossing:
Neem de elementen bijvoorbeeld op in een ul- of nav-element.
SC 2.4.11 Elementen die toetsenbordfocus krijgen vallen onder mobiel menu
Wanneer de website op een klein scherm wordt bekeken met het mobiele menu open, overlapt het menu interactieve elementen op de onderliggende pagina (zoals de link “Meer weten?”). Deze onderliggende elementen kunnen nog steeds toetsenbordfocus krijgen, ook al zijn ze verborgen achter het menu. Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken.
Oplossing:
Je lost dit op een van de volgende manieren op:
Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het chatvenster automatisch: sluit het menuvenster automatisch op het moment dat de focus eruit gaat.
Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Op alle pagina’s is op het kleine scherm in het mobiele menu een knop te zien met een slot-icoon en het label “Inloggen”. De toetsenbordfocus is op deze knop niet zichtbaar.
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 is niet duidelijk op welk moment op Enter gedrukt moet worden om een knop of link te bedienen.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
Footer
SC 1.3.1 Kop is niet gemarkeerd als koptekst
De volgende tekst is niet als kop gemarkeerd: “Volg ons”. Bezoekers die hulpsoftware gebruiken, hebben niets aan een (tussen)kop die er alleen visueel uitziet als een kop, maar in de code niet als zodanig is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een specifieke sectie springen. Dat werkt alleen als de kop ook daadwerkelijk in de HTML-code als kop is opgenomen. Wanneer koppen enkel visueel als kop zijn vormgegeven (bijvoorbeeld door vetgedrukte tekst), ontstaat bovendien een ander probleem: de structuur van de informatie in de code komt dan niet overeen met de visuele structuur.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6.
SC 1.3.1 Relatie tussen elementen in een groep is niet in de code vastgelegd
Onder de tekst “Volg ons” staat een groep socialmedialinks die er visueel uitziet als een geheel. Maar die samenhang is niet terug te vinden in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of teksten bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.
Oplossing:
Neem de elementen bijvoorbeeld op in een ul- of nav-element of verander "Volg ons" in een kop.
SC 1.1.1 Logo heeft geen alt-tekst
Onder de tekst “Volg ons” staan sociale-medialogo’s zonder tekstalternatief. De links om deze logo's missen het linkdoen (SC 2.4.4) en een toegankelijke naam (SC 4.1.2).
Oplossing:
Voeg een alt-tekst toe die de volledige tekst van het logo bevat.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Er staan oranje links (#F59F39) “T: 14045” en “Privacyverklaring” op een grijze achtergrond (#DAE1E7). De kleurcontrastverhouding is te laag: 1,6:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 4.1.2 Iframe heeft geen toegankelijke naam
De footer bevat een iframe zonder title-attribuut. Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
Oplossing:
Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.
Op deze pagina, onder de kop “Trots op Kerkrade!”, staat een iframe met een video zonder een title-attribuut en dus zonder een toegankelijke naam.
Oplossing:
Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.
SC 1.3.1 strong-element is gebruikt in koptekst
Op deze pagina staan de koppen “Gemeente Kerkrade biedt jou:”, “We horen graag van je!”, “Benieuwd naar Kerkrade als werkgever?” en “Ontdek jouw mogelijkheden!” Het heading-element en het strong-element worden gebruikt in deze koppen. Het strong-element heeft een semantische waarde. Het geeft aan dat de tekst extra nadruk verdient. Daarom mag je dit element niet gebruiken om alleen een visueel effect te bereiken (zoals vetgedrukte tekst).
Oplossing:
Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.
SC 1.3.1 strong-element in plaats van kop-element
Op deze pagina zijn de volgende teksten onjuist gemarkeerd met het strong-element in plaats van met juiste heading-elementen: “Betekenisvol werk”, "Ontwikkelingsmogelijkheden" en andere. 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. Het strong-element gebruik je wel als je nadruk wilt geven op enkele woorden of een zinsdeel.
Oplossing:
Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.
SC 1.3.1 lege kop
Op deze pagina staat boven de kop “Gemeente Kerkrade biedt jou:” een lege h1-kop. Schermlezers gebruiken koppen om door de pagina te navigeren. Een lege kop wordt aangekondigd als “kop”, maar zonder tekst. Dit kan verwarrend zijn voor de bezoeker en maakt het moeilijker om de structuur van de inhoud te begrijpen.
Oplossing:
Verwijder het element of voeg er inhoud aan toe.
SC 1.3.1 Er staan twee kops van hetzelfde niveau direct onder elkaar
Op deze pagina wordt een kop van niveau 1 direct gevolgd door een andere kop van hetzelfde niveau. Zie “Gemeente Kerkrade biedt jou:” en de lege kop erboven. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de juiste manier gebruikt. Direct onder het eerste h1-element mag een h2-element of andere content komen, maar niet nog een keer een h1-element. Hetzelfde probleem doet zich verderop voor bij de koppen van niveau 2: “Benieuwd naar Kerkrade als werkgever?” en “Ontdek jouw mogelijkheden!”.
Oplossing:
Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven.
SC 2.1.4 De Youtube-video’s gebruiken letters als sneltoetsen
Op deze pagina, in de buurt van de kop “Trots op Kerkrade!”, staat een YouTube-videospeler die gebruikmaakt van sneltoetsen bestaande uit één teken.
De Youtube-speler gebruikt sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.
Oplossing:
Je lost dit op door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).
SC 1.2.3, 1.2.5 Video bevat tekst of logo’s waarvoor geen alternatief is
Op deze pagina wordt een video getoond in de buurt van de kop “Trots op Kerkrade!”. De video bevat op verschillende momenten tekst en logo’s (bijvoorbeeld rond 0:44, 1:15, 1:20). Er is echter geen media-alternatief of audiodescriptie beschikbaar. Deze video bevat visuele informatie (zoals tekst en logo’s) die niet toegankelijk is voor blinde gebruikers. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.
Oplossing:
Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.
SC 1.4.4 Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken
Wanneer de tekst op deze pagina tot 200% wordt ingezoomd, zijn de footer met alle inhoud en de video op de pagina niet zichtbaar en niet bedienbaar.
Oplossing:
Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, zijn de footer met alle inhoud en de video op de pagina niet zichtbaar en niet bedienbaar.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 2.4.7 Advies
Op deze pagina hebben de links “Bekijk onze vacatures!”, “Meer weten?” en “Onze arbeidsvoorwaarden” wel zichtbare toetsenbordfocus, maar deze focus verschijnt slechts als een korte flikkering. Voor een betere toegankelijkheid van de website moet de toetsenbordfocus permanent zichtbaar zijn, bijvoorbeeld door een rand toe te voegen. Zo kunnen alle bezoekers begrijpen welk element op dat moment de focus heeft.
Op deze pagina verschijnt op een klein scherm een mobiel menu in de footer, dat dezelfde toegankelijkheidsproblemen heeft als het hoofdmenu hierboven beschreven. Hetzelfde probleem wordt waargenomen op de pagina Alle vacatures en op paginaSollicitatieproces.
SC 1.4.1 Links niet visueel te onderscheiden van gewone tekst
Op deze pagina staan, onder de kop “Contact opnemen”, links in de lopende tekst (zoals “po@kerkrade.nl” en “klik om te bellen”). Kleur is het enige verschil tussen de link en de gewone tekst. Deze links zijn alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat.
Oplossing:
Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn die niet afhankelijk is van kleur. Bijvoorbeeld:
Onderstrepen: geef de links een onderstreping.
Rand: voeg een subtiele rand (kader) toe aan de links.
Verhoogd contrast + hover-effect: verhoog het contrast tussen de kleur van de links en de omringende tekst tot minimaal 3,0:1, en voeg een tweede visuele indicator toe bij hover, zoals een onderstreping of verandering in de achtergrondkleur.
SC 1.4.4, 1.4.10 Bezoekers die inzoomen tot 200% (400%) kunnen niet meer alle functies gebruiken
Wanneer de tekst op deze pagina wordt ingezoomd tot 200% en tot 400% zijn de links “Heb je een vraag of wil je … 14045 (klik om te bellen)” niet zichtbaar en niet bedienbaar.
Oplossing:
Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.
Onder de kop “Alle vacatures”, staat de link “IGOM”. Kleur is het enige verschil tussen de link en de gewone tekst. Hoewel de contrastratio tussen de link en de gewone tekst groter is dan 3.0:1, ontbreekt een extra visuele hint bij hover.
Oplossing:
Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn die niet afhankelijk is van kleur. Bijvoorbeeld:
Onderstrepen: geef de links een onderstreping.
Rand: voeg een subtiele rand (kader) toe aan de links.
Verhoogd contrast + hover-effect: verhoog het contrast tussen de kleur van de links en de omringende tekst tot minimaal 3,0:1, en voeg een tweede visuele indicator toe bij hover, zoals een onderstreping of verandering in de achtergrondkleur.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Onder de kop “Alle vacatures”, staat een oranje (#F59F39) link “IGOM” op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,1:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 strong-element is gebruikt in koptekst
In de koppen “Benieuwd naar Kerkrade als werkgever?” en “Ontdek jouw mogelijkheden!” zijn het heading-element en het strong-element gebruikt.
Oplossing:
Verwijder het strong-element.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op een klein scherm, staat de donkerblauwe tekst (#011F5D) “Onze vacatures zijn terug te vinden op IGOM” gedeeltelijk op een afbeelding en heeft deze een lage contrastverhouding. Op een bruine achtergrond (#6D5649) is de contrastverhouding 2,3:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Kop-element gebruikt voor tekst die geen kop is
Op deze pagina is de tekst “Van sollicitant tot medewerker:” geen kop, maar deze is onjuist gemarkeerd met een h3-element om de lettergrootte te vergroten. Het kop-element (h3) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.
Oplossing:
Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.
SC 1.3.1 Er staan twee koppen van hetzelfde niveau direct onder elkaar
Op deze pagina wordt een kop van niveau 3 direct gevolgd door een andere kop van hetzelfde niveau. Zie “Ons sollicitatieproces” en “Van sollicitant tot medewerker: alle stappen op een rij”. Hetzelfde probleem doet zich verderop voor bij de koppen “Benieuwd naar de gemeente Kerkrade als werkgever?” en “Ontdek jouw mogelijkheden!”.
Oplossing:
Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst groter dan 24px)
Op een klein scherm staat de donkerblauwe tekst (#011F5D) “Ons sollicitatieproces Van sollicitant tot medewerker: alle stappen op een rij” gedeeltelijk op een afbeelding en heeft een lage contrastverhouding. Op een zwarte achtergrond ( #081622) is de contrastverhouding 1,2:1.
Oplossing:
Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaan de teksten onder de koppen “1. Reageren op een vacature”, “2. Beoordeling sollicitatie”, “4. Tweede gesprek”, “5. Arbeidsvoorwaardengesprek”, “6. Welkom bij Kerkrade!” gedeeltelijk verloren.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaat de volgende kop gedeeltelijk verloren: “5. Arbeidsvoorwaardengesprek”.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op deze pagina is een formulier aanwezig. De contrastverhouding tussen de grijze (#E1E7EF) randen van de invoervelden en de witte achtergrond is 1,2:1. Ook is de contrastverhouding tussen de oranje (#F59B04) randen van de invoervelden en de witte achtergrond 2,2:1.
Hetzelfde probleem wordt waargenomen op de pagina Inloggen en op pagina Aanvragen vergeten wachtwoord.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
SC 1.4.3 Placeholder-tekst heeft een te laag contrast
In het invoerveld “Mobiel privé” staat een placeholder met instructies voor het formaat van een telefoonnummer. De grijze tekst (#C8C5BC) op een lichtgele achtergrond ( #FFFBEB) heeft een lage contrastverhouding van 1,7:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut
Op deze pagina bevat een formulier voor het verzamelen van persoonlijke gegevens (zoals “Voornaam”, “E-mailadres”) invoervelden met een onjuiste waarde zoals "none". 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. Hetzelfde probleem wordt waargenomen op de pagina Inloggen en op pagina Aanvragen vergeten wachtwoord.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
SC 1.3.1 label-element is niet gekoppeld aan zijn selectievakje
Deze pagina bevat een formulier waarbij het label-element met de tekst “Mijn gegevens mogen 1 jaar bewaard worden” niet expliciet gekoppeld is aan het bijbehorende selectievakje.
label-elementen moeten gekoppeld zijn aan de bijbehorende selectievakje. Hierdoor krijgt het selectievakje een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het selectievakje op dit moment geen toegankelijke naam heeft, is dit ook een afkeur onder SC 4.1.2 en SC 2.5.3.
Oplossing:
Koppel de label-elementen aan hun bijbehorende selectievakje door het for attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het selectievakje waar het label bij hoort.
SC 2.4.6 Naam van de knop beschrijft niet wat de knop doet
Onder de kop “Foto” staat een knop met een pijltje-omlaag-icoon, maar de toegankelijke naam is “▼”, wat de functie van de knop niet goed beschrijft. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Hetzelfde probleem doet zich voor onder de kop “Motivatie en CV”.
Oplossing:
Voeg tekst toe die deze knop goed beschrijft.
SC 4.1.2 Knop geeft geen informatie over status
Onder de kop “Foto” geeft de knop met een pijltje-omlaag geen informatie over de status (open of gesloten) aan bezoekers die dit element niet kunnen zien, zoals mensen die een schermlezer gebruiken. Hetzelfde probleem doet zich voor onder de kop “Motivatie en CV”.
Oplossing:
Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knop, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.
SC 1.4.13 Tooltip klapt dicht als de muis overheen wordt bewogen
Sommige invoervelden hebben “!”-icontjes die een tooltip openen bij hover, bijvoorbeeld “Dit veld is verplicht” of de foutmeldingen. Het is niet mogelijk om over deze inhoud te hoveren. Wanneer je de muis over deze inhoud beweegt, klapt de inhoud dicht.
Bezoekers moeten in staat zijn om over deze inhoud te hoveren zonder dat deze verdwijnt. Dit is belangrijk voor bezoekers die software gebruiken die tekst leest op basis van de positie van de muisaanwijzer. Hetzelfde probleem wordt waargenomen op pagina Aanvragen vergeten wachtwoord.
Oplossing:
Maak het mogelijk om over de tooltip te hoveren zonder dat deze verdwijnt.
SC 2.1.1 Tooltip kan niet met toetsenbord worden opgeroepen
Sommige invoervelden hebben “!”-icontjes die een tooltip openen bij hover, bijvoorbeeld “Dit veld is verplicht” of de foutmeldingen. Deze functionaliteit is niet beschikbaar voor gebruikers die alleen het toetsenbord gebruiken. Zij kunnen de tooltip niet openen.
Als de tooltip informatie of instructies bevat, dan moet die inhoud voor iedereen beschikbaar zijn. Hetzelfde probleem wordt waargenomen op pagina Aanvragen vergeten wachtwoord.
Oplossing:
Zorg dat de inhoud van de tooltips ook toegankelijk is voor bezoekers die met het toetsenbord navigeren.
SC 4.1.2 Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam
Op deze pagina verschijnt een modaal dialoogvenster wanneer een formulier leeg of met onjuiste gegevens wordt verzonden. Dit dialoogvenster mist zowel een correct ARIA-role als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.
Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
SC 2.4.3 Toetsenbord focus gaat buiten het dialoogvenster
Op deze pagina verschijnt een dialoogvenster wanneer een formulier leeg of met onjuiste gegevens wordt verzonden. Op dit moment kan de toetsenbordfocus ontsnappen uit het openstaande dialoogvenster en zich verplaatsen naar de onderliggende pagina.
Bij dit soort dialoogvensters moet je de toetsenbordfocus goed instellen. Als het venster actief is, moet de toetsenbordfocus binnen het venster blijven, en mag deze niet op de onderliggende pagina terechtkomen.
Je lost dit op door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Je kunt er ook voor kiezen om het venster automatisch te sluiten op het moment dat de focus eruit gaat.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Op deze pagina verschijnt een dialoogvenster met een foutmelding wanneer een formulier leeg of met onjuiste gegevens wordt verzonden, bijvoorbeeld: “Achternaam: Dit veld is verplicht”. Dit is een instructie, geen foutmelding.
Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is, bijvoorbeeld “Achternaam: Dit veld is niet ingevuld.”
SC 1.4.11 Kleurcontrast van informatieve icon is niet voldoende
Onder de kop “Foto” heeft de knop met een pijltje-omlaag onvoldoende kleurcontrast. Het zwarte icoon op de donkerblauwe achtergrond (#011F5D) heeft een contrastverhouding van 1,4:1, wat lager is dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen.
Hetzelfde probleem doet zich voor onder de kop “Motivatie en CV”. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn.
Oplossing:
Zorg dat de iconen voldoende contrast hebben.
SC 1.4.3 Kleurcontrast van tekst is niet voldoende bij toetsenbordfocus en als de muiscursor erover beweegt
Onder de koppen “Foto” en “Motivatie en CV” verandert de tekst van de knoppen “Afbeelding kiezen” en “Bestanden kiezen” bij hover. De witte tekst op een oranje achtergrond (#F59F39) heeft een lage contrastverhouding van 2,1:1. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbord focus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover). Hetzelfde probleem doet zich voor bij de tekst in de tooltip bij de ”!”-iconen.
Oplossing:
Zorg dat de tekst ook als de muis eroverheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond.
SC 1.4.11 Contrast tussen focusindicator en achtergrond is te laag
Op deze pagina is de toetsenbordfocus op het selectievakje “Mijn gegevens mogen 1 jaar bewaard worden.” zichtbaar door een lichtblauwe rand. De contrastverhouding tussen de focusrand en de witte achtergrond is 2,5:1.
Hetzelfde probleem doet zich voor bij de selectelementen “Geslacht” en “Informatiebron”. Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
SC 2.4.6 Naam van de knop beschrijft niet wat de knop doet
Op deze pagina verschijnt een dialoogvenster met een knop “OK” wanneer een formulier leeg of met onjuiste gegevens wordt verzonden. De functie van de knop is het sluiten van het dialoogvenster, maar de toegankelijke naam is “OK”, wat de functie niet nauwkeurig beschrijft. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.
SC 4.1.3 Blinde bezoekers krijgen geen bericht van de foutmelding
Op deze pagina verschijnt een dialoogvenster met een foutmelding wanneer een formulier leeg of met onjuiste gegevens wordt verzonden, bijvoorbeeld: “Achternaam: Dit veld is verplicht”. Deze melding krijgt geen focus en wordt niet aangekondigd door de schermlezer.
Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer.
Zoals eerder is vermeldt, mist dit dialoog de juiste rol (role=”dialog”) en de toegankelijke naam (aria-label=”Foutmelding”). Als deze attributen worden toegevoegd, wordt de informatie correct voorgelezen.
Op deze pagina worden het heading-element en het strong-element gebruikt in koppen. Zie bijvoorbeeld “Samenwerken aan een Veilige en Leefbare Gemeente”, “Wat ga je doen” en andere.
Oplossing:
Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.
SC 1.3.1 Kop-element gebruikt voor tekst die geen kop is
Op deze pagina is de tekst “Je hebt een sterke … resultaten. Daarnaast heb je:” geen kop, maar deze is onjuist gemarkeerd met een h3-element om de lettergrootte te vergroten.
Oplossing:
Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.
SC 1.4.3 Kleurcontrast van tekst is niet voldoende bij hover
Op deze pagina verandert de tekst van de link “Solliciteren” bij hover. De oranje tekst (#F59F39) van de link op een witte achtergrond heeft een lage contrastverhouding van 2,1:1.
Oplossing:
Zorg dat de tekst ook als de muis eroverheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond.
Op deze pagina staan boven de koppen “Salaris” en “Werktijden en hybride werken” lege h1-koppen. Schermlezers gebruiken koppen om door de pagina te navigeren. Een lege kop wordt aangekondigd als “kop”, maar zonder tekst. Dit kan verwarrend zijn voor de bezoeker en maakt het moeilijker om de structuur van de inhoud te begrijpen.
Oplossing:
Verwijder het element of voeg er inhoud aan toe.
SC 1.3.1 Er staan twee koppen van hetzelfde niveau direct onder elkaar
Op deze pagina wordt een kop van niveau 1 direct gevolgd door een andere kop van hetzelfde niveau. Zie “Salaris” en “Werktijden en hybride werken” en de lege koppen erboven.
Oplossing:
Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven.
SC 1.4.12 Pagina is niet meer leesbaar als tekstafstand wordt aangepast
Op deze pagina wordt de tekst onder de kop "Gemeente Kerkrade is Vietaal" gedeeltelijk onzichtbaar en onleesbaar wanneer gebruikers tekstafstand toepassen zoals beschreven in dit succescriterium. Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet de tekst leesbaar blijven.
Oplossing:
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
SC 1.4.4, 1.4.10 Bezoekers die inzoomen tot 200 en 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200% en tot 400%, gaat de tekst onder de kop “Salaris” en andere koppen gedeeltelijk verloren, bijvoorbeeld: “Je krijgt een goed … dan de functieschaal: de uitloopschaal”.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 200% en tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina staat een oranje (#F59F39) link “Wachtwoord opvragen” op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,1:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op deze pagina verschijnt een dialoogvenster wanneer een formulier leeg of met onjuiste gegevens wordt verzonden. De volgende tekst is niet gemarkeerd als kop: “Foutmelding!”.
Oplossing:
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.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina heeft een invoerveld een “!”-icoon dat een tooltip activeert bij hover. De witte tekst op een oranje achtergrond (#F59F39) heeft een lage contrastverhouding van 2,1:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Visueel meerdere alinea’s, in de code maar één
Op deze pagina, onder "Wij zijn trots op Kerkrade!", is een tekstblok met 4 alinea’s onjuist gemarkeerd als 3 p-elementen. 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.
SC 1.4.4, 1.4.10 Bezoekers die inzoomen tot 200 en tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200% en tot 400%, verdwijnen de kop “Wij zijn trots op Kerkrade!” en alle inhoud daaronder.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 200% (400%) op een scherm van 1280 bij 1024 pixels.
Onder de kop "Kwaliteitsmedewerker Sociaal Domein", wordt het strong-element onjuist gebruikt voor opmaakdoeleinden bij de tekst “Kwaliteitsmedewerker Sociaal Domein (Specialisatie Participatiewet)”.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).
Oplossing:
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
De volgende teksten zijn niet gemarkeerd als koppen: “In Kerkrade? Ja, want …”, “Wat ga je doen?”, “Je vindt het leuk om bezig te zijn met:” en andere.
Oplossing:
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.4.3 Kleurcontrast van tekst is niet voldoende bij hover
Op deze pagina verandert de tekst van de link “Solliciteren” wanneer de bezoeker de muis over deze link beweegt. De oranje tekst (#F59F39) van de link op een witte achtergrond heeft dan een lage contrastverhouding van 2,1:1.
Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbord focus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover).
Oplossing:
Zorg dat de tekst ook bij hover minimaal een contrast van 4,5:1 heeft met de achtergrond.
SC 2.4.5 Er is maar één manier om een webpagina te vinden
Er is geen tweede manier om deze pagina’s van deze website te vinden:
Voldoet of niet van toepassing: 30
Voldoet niet: 25
