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
Ministerie van Sociale Zaken en Werkgelegenheid
Evaluatiedatum
12 juni 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 40 van de 55 criteria voor toegankelijkheid (35 van de 50 verplichte criteria).
Dit onderzoek betreft een hertoetsing van het onderzoek van 19 oktober 2023.
Er zijn eerdere bevindingen opgelost, maar met name in de nieuwe zoekfunctionaliteit zijn ook nieuwe bevindingen gedaan.
Verbeteringen zijn nog nodig op diverse punten, zoals:
Onjuist opgemaakte koppen
Niet alle functionaliteit werkt met het toetsenbord
Niet alle interactieve onderdelen hebben een toegankelijke naam en status
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij zijn er geen issues gevonden.
Scope van de evaluatie
Website naam
werkenaanonspensioen.nl versie 1.1
Scope van de website
Alle pagina's op https://www.werkenaanonspensioen.nl/ inclusief de pagina's op https://zoeken.werkenaanonspensioen.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.
22Voldoende
15Onvoldoende
18Niet 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
Onderwerp De drie pijlers van het pensioen
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Random pagina 1 - instemming werknemers
Uitkomst: Onvoldoende
Onderwerp De drie pijlers van het pensioen
Bij de voorbeelden staan 2 infographics. Deze hebben een lege alt-tekst, maar deze afbeeldingen zijn niet decoratief. Er wordt ook naar verwezen in de tekst eronder (‘De omvang van de balkjes’). Geef deze een korte beschrijving in de alt-tekst en voeg een volwaardig tekstalternatief toe naast/onder de afbeelding.
Doorzoek de wet (zoekterm eigen vermogen)
Bij de resultaten staan veel knoppen met iconen, zoals een duim omhoog en een link. Deze hebben geen alternatieve tekst. Dit geldt ook voor de popup met de uitleg. Zorg dat in de uitleg de knoppen dezelfde tekst hebben als in de zoekresultaten.
Random pagina 1 - instemming werknemers
Bovenaan de pagina staat een afbeelding van een beslisboom. Deze heeft een lege alt-tekst, maar dit is geen decoratieve afbeelding. Geef deze een korte beschrijving in de alt-tekst en voeg een volwaardig tekstalternatief toe naast/onder de afbeelding.
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
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
PDF handreiking evenwichtige transitie
Uitkomst: Niet getoetst
PDF transitieplan pensioenfonds
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: Bij het openen van de pagina verschijnt een popup. Hierin staat een lijst die niet correct is opgemaakt. Er is een ul-element, maar deze heeft geen directe list items (li-elementen). Hierdoor kunnen screenreaders de lijst mogelijk niet goed voorlezen. De list-items zitten dieper in de lagen die opengeklapt kunnen worden. Deze hebben daardoor geen bovenliggend ul-element.
De kophiërarchie is niet logisch opgemaakt. Er zijn nu enkel 3 h2-koppen op de pagina, namelijk van de soorten filters (type, document en geavanceerd). ‘Filters’ is geen kop. ‘100 resultaten gevonden’ is ook geen kop. De titels van de zoekresultaten zijn niet als kopelement opgemaakt, maar als paragraaf. Een logische opbouw zou kunnen zijn:
h1: ‘100 resultaten gevonden’
h2: ‘filters’
h3: de soorten filters (in plaats van h3 kan hier ook een legend gebruikt worden in een fieldset)
h2: de titels van de zoekresultaten
Hertoetsing: de kophiërarchie is nog niet logisch opgebouwd. De eerste kop op de pagina is de h3 ‘Doelgroep’, welke om de knop heen staat voor het invoerveld. De items die hieronder vallen hebben een hoger niveau, namelijk h2. Deze zouden een lager niveau moeten hebben. De kop voor Filters is op h2-niveau. De koppen die onder deze filters vallen, zijn ook op h2-niveau. Deze zouden een lager niveau moeten hebben. (Er staan nog wel h3-koppen onder. Dit is nu dus dubbelop.) ‘Kies uw weergave’ is geen kop. Deze moet wel als kop worden opgemaakt. De zoekresultaten hebben een h1, direct gevolgd door een h4 of een h3 (afhankelijk van de weergave) en daaronder een dubbele h2/h3 ‘Gevonden hits in bron’. Daaronder vallen soms weer nieuwe h2-koppen, die dan op een lager niveau zouden moeten staan. Zie screenshot 2. Screenreadergebruikers navigeren vaak via koppen. Voor hen is het erg lastig deze paginastructuur te begrijpen. Zorg voor een logische indeling qua opbouw, bij voorkeur zonder niveaus over te slaan.
Hertoetsing: Binnen popups zoals ‘Uitleg over de verschillende typen informatie waarin u kunt zoeken’ staan kopjes niet opgemaakt als kopelement, maar als paragraaf. Voor screenreadergebruikers zijn deze teksten daardoor niet als kop te herkennen.
Onder de filters staan de checkboxes in de code niet duidelijk gegroepeerd. Wanneer er geen gebruik wordt gemaakt van fieldset en legend, kan dit worden opgelost door een role=“group” attribuut te zetten op het div-element dat om de checkboxes heen staat. Deze heeft al wel een aria-labelledby attribuut dat verwijst naar de titel van de filter. Dit issue komt ook voor bij de checkboxes onder de knop 'filteren'. Hier moet nog een rol en een label worden toegevoegd.
Hertoetsing: de invoervelden bij de datum hebben geen label voor hulpsoftware. Ook wordt niet aangegeven aan hulpsoftware dat er een popup is geopend. Het is niet mogelijk met een screenreader een datum te selecteren. Een mogelijk alternatief is om het toe te staan de datum als tekst in te voeren naast het gebruik van de datumprikker.
PDF handreiking evenwichtige transitie
Opmerking: het document bevat veel lege kopelementen, bijvoorbeeld een lege h2 bovenaan pagina 6. Dit kan ruis veroorzaken voor screenreadergebruikers. Haal lege elementen zoveel mogelijk weg.
PDF transitieplan pensioenfonds
De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Onvoldoende
Onderwerp De drie pijlers van het pensioen
Uitkomst: Onvoldoende
Onderwerp De drie pijlers van het pensioen
Bij de voorbeelden wordt verwezen naar ‘oranje balken’ in de infographics. Niet iedereen kan deze kleur zien. Gebruik daarom ook een andere manier om de elementen te onderscheiden, bijvoorbeeld via een tekstuele beschrijving. Opmerking: de afbeelding bevat geen oranje balken, de vormgeving lijkt aangepast.
1.3.4: Weergavestand
Hele sample
Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Niet van toepassing
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Onvoldoende
Onderwerp De drie pijlers van het pensioen
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Onderwerp De drie pijlers van het pensioen
Bij de voorbeelden wordt verwezen naar ‘oranje balken’ in de infographics. Niet iedereen kan deze kleur zien. Gebruik daarom ook een andere manier om de elementen te onderscheiden, bijvoorbeeld via een tekstuele beschrijving. Opmerking: de afbeelding bevat geen oranje balken, de vormgeving lijkt aangepast.
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: De focus op de datum in de datumprikker wordt alleen aangegeven met kleur. Deze heeft ook erg laag contrast (1.1:1). Geef dit ook op een andere manier aan, bijvoorbeeld met een donkere focusrand. Zie screenshot 4.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Onderwerp De drie pijlers van het pensioen
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
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. Een aantal elementen op de website zitten qua contrast onder deze waarden.
Onderwerp De drie pijlers van het pensioen
De witte teksten in de infographic van de 2e (3.9:1) en 3e (2.2:1) pijler. Van de 2e pijler staat alle informatie ook in de tekst eronder, maar van de 3e pijler niet.
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing:
De placeholder tekst ‘Typ uw zoekopdracht en druk op enter!’ (2.5:1).
De knoppen ‘Detail’ en ‘Gegroepeerd’ wanneer ze niet geselecteerd zijn (3.64: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: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: op 400% ingezoomd moet er in twee richtingen gescrolld worden om de uitgeklapte tekst te lezen. Ook valt de knop voor technische hulp over een deel van de tekst heen. Zie screenshot 3.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: de knop om de popup window te sluiten heeft te laag contrast (2.8:1). Grafische elementen moeten een contrast hebben van minimaal 3:1. Zie screenshot 1.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is niet alle content meer beschikbaar. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html.
Startpagina
Bij lange links valt de tekst soms buiten beeld (op 400%). (Op veel plekken gaat het ook wel goed doordat de links worden afgebroken naar de volgende regel.) Hertoetsing: op de homepage gaat het nu mis bij het woord ‘personeelsvertegenwoordigers’.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Niet van toepassing
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: onderstaande functies werken niet met het toetsenbord:
Het uitklappen van de filters (behalve datum)
Het selecteren van sommige filters, zoals onder Type
De i-iconen om extra informatie te tonen
Resultaten kopiëren, liken en delen
Extra content uitklappen onder ‘gevonden hits in bron’
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Niet van toepassing
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: Onvoldoende
PDF transitieplan pensioenfonds
Uitkomst: Onvoldoende
PDF transitieplan pensioenfonds
Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: wanneer de popup window is geopend met de zoekvoorkeuren, gaat de focus niet meteen in dit venster, maar eerst nog door op de onderliggende pagina. Zorg dat de focus alleen in de popup kan komen en pas weer op de onderliggende pagina wanneer de popup gesloten is.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Onderwerp Ondernemingsraad
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Onderwerp Ondernemingsraad
Er zijn meerdere links op de pagina met de tekst ‘Bekijk het hier’. 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 een tekst elders op de pagina. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.
Ook kan het hier worden opgelost door de link te plaatsen binnen de voorgaande paragraaf. Dit kan eventueel in dezelfde bewoording, maar bij voorkeur met een meer onderscheidende linktekst binnen de paragraaftekst.
Doorzoek de wet (zoekterm eigen vermogen)
Bij elk resultaat staat een link met dezelfde tekst ‘open webpagina’. Deze links openen het document op de specifieke plek van de gevonden tekst erboven. Om deze links uniek te maken voor gebruikers van hulpsoftware kunnen ze worden gekoppeld aan de tekst van het resultaat via aria-labelledby.
Hertoetsing: de links naar de bron (achter het oog icoon) hebben geen tekst. Voor gebruikers van hulpsoftware is het niet duidelijk waar deze links naartoe gaan.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Waarom, hoe en wanneer verandert het pensioenstelsel?
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Waarom, hoe en wanneer verandert het pensioenstelsel?
De video heeft als toegankelijke naam (via het aria-label op het omliggende div-element)'videospeler'. Dit is geen goede beschrijving. Dit komt bij alle video's in de sample voor.
Doorzoek de wet (zoekterm eigen vermogen)
Hertoetsing: De knop om de popup met meer informatie te sluiten heeft als label ‘Close modal’. Dit is mogelijk niet voor iedereen duidelijk. Maak hier een Nederlandse tekst voor. Dit geldt ook voor de knop van de melding ‘Informatie op maat voor uw doelgroep’. De ‘Close modal’ naam komt ook voor bij de popup voor de technische ondersteuning.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Voldoende
2.4.11: Focus Not Obscured (Minimum)
Hele sample
Uitkomst: Voldoende
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Uitkomst: Onvoldoende
Doorzoek de wet (zoekterm eigen vermogen)
Het toegankelijke label voor het zoekveld is ‘zoektermen’ (via het aria-label). Het zichtbare label is alleen de placeholder met de tekst ‘Typ uw zoekopdracht hier en druk op enter!’. Deze teksten komen niet overeen, waardoor het lastig kan zijn om dit veld met stem te bedienen. Zorg dat de toegankelijke naam minstens de zichtbare naam bevat.
Hertoetsing: Er zijn nieuwe elementen gevonden zonder duidelijke rol en naam. Hierdoor is het voor gebruikers van hulpsoftware niet duidelijk waar deze elementen voor zijn en hoe ze bediend kunnen worden. Ook is het niet overal duidelijk wanneer er extra content wordt geopend. Voor het zoekveld staat een knop ‘Doelgroep’ waarmee een lijst wordt geopend. Dit wordt niet doorgegeven aan hulpsoftware. Dit kan worden opgelost door een aria-expanded attribuut toe te voegen aan de knop. De knoppen bovenaan met ‘filteren’ en ‘relevantie’ geven niet aan of de content eronder is in-of uitgeklapt. Dit kan worden opgelost door een aria-expanded attribuut toe te voegen aan de knop. De knop onderaan de pagina voor de technische ondersteuning heeft geen naam.
De knoppen met iconen zoals kopiëren, liken en delen binnen een resultaat hebben rol en geen naam. (Let op beide weergaves.) De links om de bron te openen (oog-icoon) hebben geen naam. De knoppen om extra info te tonen (i-iconen) hebben geen rol en naam.
Onder de filters worden interactieve elementen (buttons) genest. Dit kan problemen geven voor gebruikers van hulpsoftware. Zorg dat buttons en links los van elkaar staan zodat het duidelijk is wat er geactiveerd wordt. Dit komt ook voor binnen zoekresultaten (links binnen buttons).
