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
Efefctory
Evaluatiedatum
6 november 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 37 van de 50 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld dat er niet enkel kleur wordt gebruikt om betekenis over te brengen, dat er geen afbeeldingen van tekst worden gebruikt en dat de taal van de pagina’s goed is ingesteld.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Te laag contrast van tekst
De focus is niet op alle interactieve onderdelen zichtbaar
Niet alle functionaliteit werkt met het toetsenbord
Scope van de evaluatie
Website naam
Effectory Survey
Scope van de website
Single-page survey, alle onderdelen.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 50 van 50 WCAG 2.1 AA
Success Criteria.
17Voldoende
13Onvoldoende
20Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Uitkomst: Onvoldoende
Bevindingen:
De achtergrondafbeelding in de introductie heeft geen alt attribuut. Hierdoor is het voor screenreadergebruikers niet duidelijk wat voor afbeelding er staat en wordt mogelijk een (lange) bestandsnaam voorgelezen. Geef deze afbeelding een leeg alt attribuut zodat screenreaders de afbeelding negeren.
Het logo in de PDF heeft als alternatieve tekst ‘A picture containing clipart Description automatically generated‘. Hier kan beter ‘Effectory logo’ staan. Er staat visueel een onderschrift onder het logo, maar dit is een afbeelding met de alternatieve tekst ‘P17TB3#y1’. Deze afbeelding kan beter vervangen worden door een caption tekst. Zorg dat de caption binnen het figure element komt te staan, zodat de relatie voor hulpsoftware duidelijk is. Op pagina 3 staat een afbeelding over de tekst heen. Zie screenshot 12.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Uitkomst: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Uitkomst: Onvoldoende
Bevindingen:
Er zijn vragen met button elementen onder elkaar, sommige zien er uit als checkboxes (met vierkantjes en vinkjes) en sommige als ‘gewone’ buttons. In de code is er echter geen verschil en is het niet duidelijk dat hier één keuze of meerdere keuzes mogelijk zijn. Geef dit in de tekst erboven aan of (dit heeft de voorkeur) geef de opties een duidelijke rol in de HTML: radiobuttons of checkboxes. Zie screenshot 8 en screenshot 9.
Opmerking: Bovenaan de pagina staat de voortgang in de vorm 10/151. De screenreader (VoiceOver) leest alleen het eerste nummer voor. Deze tekst staat in een span element met daarbinnen het eerste nummer. Het aria-label bevat wel beide nummers, maar dit wordt waarschijnlijk niet goed ondersteund, omdat het element geen duidelijke rol heeft. Het is beter om beide nummers binnen het span element te plaatsen.
1.3.2: Betekenisvolle volgorde
Uitkomst: Voldoende
Bevindingen:
1.3.3: Zintuiglijke eigenschappen
Uitkomst: Voldoende
1.3.4: Weergavestand
Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Uitkomst: Niet van toepassing
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Uitkomst: Voldoende
1.4.2: Geluidsbediening
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Uitkomst: Onvoldoende
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. Onder andere onderstaande elementen op de website zitten qua contrast onder deze waarden.
De links, knoppen en actieve tab in de cookiemelding (wit/groen, 2,56:1)
In het introductie gedeelte:
De witte teksten op een grijze achtergrond (2,56:1).
De knop ‘Aan de slag’ (wit/groen, 2,5:1). Let ook op de hover variant (2.4:1).
(De tekst van de notificatie dat dit een voorbeeldonderzoek is.)
De witte teksten die de hoofdstukken aangeven, zoals ‘Werkplezier 6 vragen’ (wit/groen, 2,5:1).
De geselecteerde buttons (wit op groen, 2,3:1). Zie screenshot 2. Deze staan ook onder elke vraag als ‘weet niet/geen ervaring mee’.
De knop ‘Verzenden’ (wit/groen, 2,5:1).
1.4.4: Herschalen van tekst
Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Uitkomst: Voldoende
1.4.10: Reflow
Uitkomst: Onvoldoende
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.)
Op 400% ingezoomd lopen de cirkels van de antwoordopties door elkaar heen en zijn de teksten niet meer allemaal zichtbaar (wanneer je de keuze met het toetsenbord wilt selecteren). Zie screenshot 10.
1.4.11: Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
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.
In de vragenlijst:
Bij vragen met cirkelknoppen de 3e knop (grijs, 2.8:1) en 4e knop (groen, 2.8:1). Dit geldt voor de niet-geselecteerde en geselecteerde variant. De omtrekranden van de knoppen (waaraan je kunt zien waar je kunt klikken) hebben een erg laag contrast (1,1:1), maar wanneer er een tekst of grafisch symbool in de knop staat kan dat nog wel voldoende onderscheidend zijn. Dan moeten deze onderdelen dus wel voldoende contrast hebben.
De vakjes van de checkboxes, die aangeven dat meerdere antwoorden mogelijk zijn (lichtgrijs/groen, 1,2:1).
1.4.12: Tekstafstand
Uitkomst: Onvoldoende
Bevindingen:
Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is in onderstaande gevallen 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.
Bij de introductie: Er vallen teksten aan de bovenkant weg. Zie screenshot 11.
1.4.13: Content bij hover of focus
Uitkomst: Niet van toepassing
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Uitkomst: Onvoldoende
Bevindingen:
Vanaf 250% ingezoomd en meer bedekt de cookiemelding het gehele scherm. Met het toetsenbord kun je echter niet in de melding popup komen. Je kunt daardoor geen keuze maken of instellingen aanpassen.
2.1.2: Geen toetsenbordval
Uitkomst: Onvoldoende
Bevindingen:
Vanaf 250% ingezoomd en meer bedekt de cookiemelding het gehele scherm. Met het toetsenbord kun je deze echter niet sluiten, ook niet met de escape toets. Dit betekent dat je de website niet kunt gebruiken en enkel de gehele tab kunt sluiten.
2.1.4: Enkel teken sneltoetsen
Uitkomst: Niet van toepassing
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Uitkomst: Niet van toepassing
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Uitkomst: Voldoende
2.4.2: Paginatitel
Uitkomst: Voldoende
Bevindingen:
Opmerking: Het PDF document heeft een titel, maar in de eigenschappen staat ingesteld dat de bestandsnaam wordt getoond in plaats van de documenttitel. Het is beter om dit op documenttitel te zetten.
2.4.3: Focus volgorde
Uitkomst: Onvoldoende
Bevindingen:
Na het activeren van een tab in de cookie instellingen gaat de focus niet meteen in het tabpanel, maar eerst naar de andere tabs. Het voorgeschreven gedrag bij tabs is dat de focus via de tabtoets meteen in het actieve panel komt en dat je met de pijltjestoetsen tussen de tabs kunt navigeren. Zorg dat de code voor tabs is opgemaakt volgens de specificatie, zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
2.4.4: Linkdoel (in context)
Uitkomst: Voldoende
Bevindingen:
Opmerking: de link naar de supportpagina heeft als toegankelijke naam enkel een title attribuut ‘Support link’. Dit attribuut wordt slecht ondersteund door hulpsoftware. Beter is het om een bijvoorbeeld een tekst binnen het link element op te nemen of een aria-label attribuut te gebruiken. Zie screenshot 3.
2.4.5: Meerdere manieren
Uitkomst: Niet van toepassing
2.4.6: Koppen en labels
Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Uitkomst: Onvoldoende
Bevindingen:
Er is bovenaan de pagina een skiplink om de introductie over te slaan en meteen naar de vragen te gaan. Deze link krijgt toetsenbordfocus en is zichtbaar voor hulpsoftware, maar heeft geen zichtbare focus. Zie screenshot 3 en screenshot 4. Zorg dat deze op focus een zichtbare stijl heeft, en ook een goede linktekst. Deze is nu ‘home_skip_to_questionnaire’.
Wanneer je inzoomt komen de talen achter een menuknop te staan. Wanneer je deze opent met het toetsenbord, is vervolgens de focus op de taalkeuze niet zichtbaar, waardoor het niet met het toetsenbord lijkt te werken. De verwachting is dat als je met de tab-toets er op komt, het visueel duidelijk is dat je op een keuzelijst staat. Deze is dan vervolgens te bedienen met pijltoetsen.
Bij de introductie is de focus op knop met ‘Aan de slag!’ niet zichtbaar wanneer je bent ingezoomd. De knop is dan even breed als de gehele webpagina.
De toetsenbordfocus op de sliderknop is niet zichtbaar. Ook wordt de waarde visueel niet bijgewerkt. Zie screenshot 7.
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Uitkomst: Voldoende
2.5.3: Label in naam
Uitkomst: Onvoldoende
Bevindingen:
De toegankelijke naam van het taalkeuzemenu is ‘menu’, maar zichtbaar is de tekst van de geselecteerde taal. Hierdoor kan de knop niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals hier het aria-label) altijd minstens de zichtbare tekst bevat. De knop zou hier bijvoorbeeld ‘Taal’ kunnen heten, waarbij deze tekst dan ook zichtbaar is, eventueel aangevuld met de geselecteerde keuze. Ook kan het aria-label worden weggehaald, zodat de toegankelijke naam hetzelfde wordt als wat er nu zichtbaar is.
Opmerking: er staat een rol van ‘application’ op het body element. Dit zorgt ervoor dat screenreaders de gehele inhoud op een andere manier interpreteren dan een ‘gewone’ website en de standaard toegankelijkheidsfuncties om voor te lezen (‘browse mode’) worden uitgeschakeld. In deze rol wordt verwacht dat de ontwikkelaar alle toegankelijkheidsfuncties zoals toetsenbordgedrag zelf goed instelt. Het kan raadzaam zijn deze rol te verwijderen of alleen op onderdelen toe te passen. Een voorbeeld van het anders voorlezen van de applicatie is dat de taal van de content niet overal goed wordt herkend, en alles in het Engels wordt voorgelezen. Normaal gesproken gebeurt dat alleen bij de benaming van interactieve elementen (‘button’), nu met alle inhoud. Dit is getest in NVDA (Windows) en VoiceOver (Mac).
4.1.2: Naam, rol, waarde
Uitkomst: Onvoldoende
Bevindingen:
Opmerking: De naam van de knoppen met ‘weet niet/geen ervaring mee’ hebben een paragraaf tag in de naam. Deze wordt daardoor ook voorgelezen (‘kleiner dan p groter dan’). Dit kan verwarrend zijn, deze kan daarom beter worden weggehaald. Zie screenshot 5.
Er zijn vragen met een slider. Bij bijvoorbeeld de vraag ‘Ik kan een goede balans houden tussen werken en ontspannen’ staat een slider zonder naam. Geef deze input een label. Zie screenshot 6.
De waarde van de slider voor hulpsoftware is anders dan visueel. Visueel gaat het van 1 tot 10, in de code van 0 tot 1. Zie screenshot 7. Zorg dat dit hetzelfde is als visueel. Opmerking: in de Edge browser is er visueel geen cijfer.
Opmerking: met het toetsenbord is de slider niet erg gebruiksvriendelijk, de stappen zijn per 0,001 (dus van 0,5 naar 0,501 etc), dit duurt lang om te verschuiven.
Wanneer je inzoomt, verschijnt er een menuknop. De status hiervan (in- of uitgeklapt) wordt niet aangegeven. Dit kan worden opgelost met een aria-expanded attribuut. Let er op dat deze er ook al op staat wanneer de button nog niet is geactiveerd.
4.1.3: Statusberichten
Uitkomst: Onvoldoende
Bevindingen:
Op 100% zoom wordt de voortgang via aria-live doorgegeven aan screenreaders. Wanneer je bent ingezoomd, gebeurt dit niet. Deze informatie staat dan in een ander element (div element met class ‘no-padding progress-counter--mobile’) die niet als live-region is gecodeerd. Zorg dat deze ook de status doorgeeft. Zie ook 1.3.1.
