Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?
Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.
Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.
De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).
Over deze evaluatie
Rapport auteur
Janita Top
Evaluatie opdrachtgever
FUMO
Evaluatiedatum
6 mei 2025
Managementsamenvatting
Dit is een hertoetsing van het onderzoek van 3 oktober 2024.
Uit dit onderzoek blijkt dat wordt voldaan aan 42 van de 50 verplichte criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat de video’s goede ondertiteling hebben, dat er geen afbeeldingen van tekst worden gebruikt en dat de pagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alternatieve teksten
Onjuist opgemaakte koppen
Niet alle functionaliteit werkt met het toetsenbord
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.
Scope van de evaluatie
Website naam
werkenbijnod.nl
Scope van de website
Alle pagina's op https://werkenbijnod.nl/.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA
Success Criteria.
34Voldoende
8Onvoldoende
13Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Thema energie/duurzaamheid
Uitkomst: Onvoldoende
Homepage
De kaart heeft geen tekstalternatief. Voor een svg afbeelding kan dit worden gedaan door middel van het toevoegen van een ‘role=”img” en een title element. (Alleen een title element wordt niet goed ondersteund in alle screenreaders, in combinatie met een expliciete rol gaat dit wel goed). Dit geldt ook voor de kaart in de footer. Hertoetsing: zie 4.1.2.
Thema energie/duurzaamheid
De foto van Arnoud heeft een lege alt-tekst. Portretfoto’s zijn echter niet decoratief (ze hebben een functie) en moeten daarom altijd een beschrijving hebben van de persoon op de foto.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample
Uitkomst: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Voldoende
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Voldoende
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Thema energie/duurzaamheid
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Hertoetsing: Het tekst-invoerveld om te zoeken heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.
Homepage
De koppenstructuur is niet geheel logisch opgebouwd. De h3-kop ‘Snel naar’ in de footer valt qua hiërarchie onder de h2-kop ‘Onze collega’s aan het woord’, maar is een zelfstandig onderdeel. Dit zou dan een h2-kop moeten zijn. Bovenaan de pagina zijn 2 teksten opgemaakt als kop die eigenlijk een paragraaf zijn, zoals ‘Wij zijn de FUMO, de Omgevingsdienst Groningen en de RUD Drenthe: De drie noordelijke omgevingsdiensten van Nederland.‘ Het kopje ‘Bouw met ons mee aan een schoon en veilig Noord-Nederland’ is niet als kop opgemaakt, maar met het strong-element. Dit element is bedoeld om één of enkele woorden uit te lichten in een paragraaf, niet om kopjes aan te geven. Screenreader gebruikers die navigeren via koppen missen deze kop nu. Maak hier bijvoorbeeld h2 van.
Vacatures
De koppenstructuur is niet geheel logisch opgebouwd. De h3-kopjes zoals ‘Direct de nieuwste vacatures ontvangen?‘ en de vacaturetitels vallen nu onder de h2-kop ‘Filter vacatures’ maar deze onderdelen vallen daar niet onder. Deze koppen moeten daarom een niveau hoger zijn. Screenreader gebruikers die navigeren via koppen kunnen deze nu gemakkelijk missen. Binnen de vraag ‘Hoe verloopt de sollicitatieprocedure?' staan de kopjes opgemaakt met het strong-element. Zie screenshot 1.
Thema energie/duurzaamheid
De paragraaf bovenaan de pagina (‘Dat betekent dat…’) is in het geheel opgemaakt met het strong-element. Als hier een aparte styling gewenst is, kan dat beter worden geregeld via CSS.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking hertoetsing: het hoofdmenu is in landschapsmodus/ingezoomd nu wel te gebruiken, maar het is nog wel lastig dat het logo en het zoekveld over het menu heen vallen. Zie screenshot 6. Op de homepage vallen de blokken met ‘Meer over ons’ en ‘Vacatures’ ook over het menu heen.
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking hertoetsing: op de pagina Contact bij het veld telefoonnummer is de autocomplete waarde voor het nummer inclusief landcode, maar de placeholder laat een nummer zien zonder landcode. Dit is verwarrend. Zorg dat dit consistent is.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Voldoende
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Vergunningverlener
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
De buttons in de cookiemelding (wit/oranje, 2.73:1).
Vergunningverlener
De hoofdmenu-items t.o.v. van de foto eronder (1.8:1). Zie screenshot 3. Dit kan worden opgelost door bijvoorbeeld standaard een donker vlak onder de tekst te plaatsen voor op lichtere foto’s. Hertoetsing: het is nu donkerder, maar nog onder de 4.5:1. (bijvoorbeeld Vacatures 3.5:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Voldoende
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Contact
De randen van de invoervelden (lichtgrijs/wit, 1.4:1).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Voldoende
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Vacatures
De filters in de popup kunnen niet gesloten worden met het toetsenbord. Zie ook 4.1.2.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Voldoende
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Niet van toepassing
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample
Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Hele sample
Uitkomst: Voldoende
2.4.2: Paginatitel
Hele sample
Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Voldoende
Vacatures
Uitkomst: Onvoldoende
Functies
Uitkomst: Voldoende
Contact
Opmerking: wanneer er fouten in het formulier zijn gevonden na verzenden, komt de focus op het eerstvolgende veld dat gecorrigeerd moet worden. Dit is goed. Alleen bij het laatste verplichte veld, de checkbox, gebeurt dit niet en kom je helemaal bovenaan de pagina te staan. De foutmelding is dan ook niet zichtbaar. Het zou beter zijn als hier ook de focus op wordt gezet als alleen dit veld nog moet worden ingevuld.
Vacatures
Wanneer je bent ingezoomd boven de 150% komen de filters achter een knop te staan, welke een popup window opent. De focus gaat na de onderdelen in deze popup door op de pagina eronder, die niet zichtbaar is. Zorg dat de focus hier pas op kan komen wanneer de popup weer gesloten is. Wanneer de popup gesloten wordt door ‘Filters toepassen’ te selecteren en er zijn geen resultaten, dan komt de focus in de FAQ te staan. Dit is verwarrend, want hierdoor zie je niet de resultaten. Hiervoor moet je eerst weer terug naar boven navigeren. Zorg dat de focus terug komt op de filter knop of daar vlakbij.
Functies
Opmerking: bij elke functie staat 3 keer dezelfde link: achter de zin die als h2 is opgemaakt, de ‘meer informatie…’-link en de foto. Hierdoor hebben toetsenbordgebruikers bij elke functie 3 ‘tabstops’. Het is gebruiksvriendelijker om 1 link te hebben, achter de ‘meer informatie…’ of als blok als geheel.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Vacatures
Uitkomst: Onvoldoende
Thema energie/duurzaamheid
Uitkomst: Onvoldoende
Verhalen
Uitkomst: Onvoldoende
Homepage
Er zijn links op de pagina gevonden zonder tekst:
De links van de gebieden in de kaart. (Hertoetsing: dit zijn nu geen links meer. Wanneer het weer links worden, hebben ze een tekst nodig. Het title-attribuut is hier geen goede oplossing voor. Beter kan een aria-label worden gebruikt.)
De links naar de vacatures onder ‘Een selectie uit onze openstaande vacatures‘.
De links naar de social media kanalen.
Vacatures
Er zijn meerdere links op de pagina met de tekst ‘Bekijk vacature’. Hierdoor is het doel niet duidelijk. Dit kan worden opgelost met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar de h3-kop ervoor.
Thema energie/duurzaamheid
Er staat een link op de pagina met enkel de tekst ‘Lees meer’. Hierdoor is het doel niet duidelijk. Dit kan worden opgelost met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar de h2-kop ervoor. Dit komt op meerdere plekken voor, bijvoorbeeld bij het blok over het Young Professionalprogramma op de pagina Vacatures.
Verhalen
De links naar de verhalen onder ‘Collega’s aan het woord’ hebben geen tekst. Dit kan bijvoorbeeld worden opgelost door een aria-label attribuut toe te voegen of een aria-labelledby verwijzing naar de h3-kop.
Er zijn meerdere links op de pagina met de tekst ‘Lees verder’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar de h3-kop ervoor. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html. Hertoetsing: ‘aria-labelledby’ werkt door middel van een id te zetten in de waarde van het attribuut. Daarmee verwijs je dan naar een al bestaande tekst op de pagina. Hier kun je een id op de h3-kop zetten en daar vervolgens naar verwijzen. Nu zijn de linkteksten nog steeds enkel ‘lees verder’.
Hertoetsing: Het zoeken invoerveld is niet correct opgemaakt. Voor screenreadergebruikers is er geen aankondiging dat er tijdens het zoeken een lijst is geopend met zoeksuggesties. Dit kan worden opgelost door het gebruik van een combobox en het ‘aria-expanded’-attribuut om aan te geven dat er een lijst is geopend. Zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/.
Hertoetsing: het ‘aria-expanded’-attribuut op het menu wijzigt niet naar ‘true’ wanneer het menu is uitgeklapt. Zie screenshot 7.
Homepage
Hertoetsing: de links naar de diensten achter de provincies op de kaart hebben nu geen goede rol en naam meer. Via role=”img” is het nu geen link meer, maar een afbeelding met de naam van de provincie. Voor screenreadergebruikers is het nu niet duidelijk meer dat dit een link naar een dienst is. Beter is het om deze rol weg te halen. Zet vervolgens op de svg erboven (de gehele kaart) een role=”img” en voeg een title element (geen attribuut) toe met de alternatieve tekst. Zie ook https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title.
Vacatures
De veelgestelde vragen zijn h2-koppen die met de muis als link dienen. Ze hebben echter geen rol waaruit door hulpsoftware kan worden opgemaakt dat het interactieve elementen zijn. Voeg hier bijvoorbeeld button elementen aan toe (binnen de h2), met een aria-expanded attribuut om aan te geven of de vragen geopend of gesloten zijn. Hertoetsing: het zijn nu button elementen en daarmee voldoet het aan dit criterium. De kopopmaak is echter weg, doordat er een role=”button” op de h2 is gezet. Wanneer je de koppen wel wilt behouden, kun je de button elementen binnen de koppen plaatsen. Dan kan er nog naar de koppen genavigeerd worden en zijn de buttons ook toegankelijk.
Wanneer je bent ingezoomd boven de 150% komen de filters achter een knop te staan, welke een popup window opent. Deze heeft een kruisje om dit weer te sluiten. Dit is een span element zonder goede rol. Maak hier een button element van met duidelijke naam.
