Rapport in PDF

Deelonderzoek techniek starterkit.iwink.nl

Inleiding

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
iWink
Evaluatiedatum
2 juni 2025

Managementsamenvatting

Dit rapport bevat het deelonderzoek techniek. In combinatie met een (deel)onderzoek content vormt dit een volledig toegankelijkheidsonderzoek van de website. Uit dit onderzoek blijkt dat wordt voldaan aan 34 van de 43 verplichte techniek-specifieke criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

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.

Positief is bijvoorbeeld dat de website goed werkt op mobiel, dat blokken met herhalende links omzeild kunnen worden en dat er een consistente navigatie aanwezig is.

Verbeteringen zijn echter nog mogelijk op enkele punten, zoals:

  • Onjuiste of missende alt-teksten bij afbeeldingen
  • Invoervelden zonder labels
  • Niet alle content is bereikbaar bij inzoomen
  • Niet alle functionaliteit werkt met het toetsenbord

Scope van de evaluatie

Website naam
starterkit.iwink.nl
Scope van de website
Alle pagina's op https://starterkit.iwink.nl/.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 48 van 55 WCAG 2.2 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Module Zorgkaart

Uitkomst: Onvoldoende

Module Blog

Uitkomst: Onvoldoende
Hele sample

In de header staat een (placeholder) logo met een lege alt-tekst. Zorg dat logo’s altijd een goede beschrijving hebben. In dit geval is de alt-tekst ook vereist voor de link.

NB: Het is duidelijk dat dit geen 'echte content' is, maar als klanten dit als voorbeeld gebruiken, is het aan te raden er ook een voorbeeld-alt-tekst in te zetten.

Homepage

Bij ‘Onze klanten’ staan (placeholder) logo’s met een lege alt-tekst. Zorg dat logo’s altijd een goede beschrijving hebben.

Module Zorgkaart

In de kaarten staan logo’s van Zorgkaart Nederland. De alt-tekst komt niet overeen met de zichtbare tekst in de logo’s. Bij logo’s moet in ieder geval de gehele zichtbare tekst terugkomen in de alternatieve tekst.

Module Blog

Alle (placeholder) afbeeldingen bij de blogs hebben een lege alt-tekst. Bij overzichten kan dit goed zijn, omdat je dan genoeg hebt aan de link. In de detailweergave van het artikel is deze afbeelding echter content, en heeft deze een alternatieve tekst nodig. Let er dus op bij het vullen van content dat dit het geval is. Dit geldt voor alle detailweergaves, bijvoorbeeld ook bij Nieuws, Personen en de Fotogalerij. In de fotogalerij zorgt de alt-tekst ook voor de linknaam.
1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Niet getoetst
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Niet getoetst
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Niet getoetst
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample

Uitkomst: Niet getoetst
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Niet getoetst
1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

Module Zorgkaart

Uitkomst: Onvoldoende

Module Nieuws

Uitkomst: Onvoldoende
Hele sample

Opmerking: De knop naar het mobiele menu is in Windows High Contrast mode niet zichtbaar. Dit komt doordat de knop geen tekst heeft en ook geen afbeelding, alleen CSS-styling. Windows herkent dit niet als content. Dit kan bijvoorbeeld worden opgelost door de afbeelding in svg te plaatsen en er een (transparante) outline omheen te zetten. Zie screenshot 4.

Module Zorgkaart

Binnen de module ‘Vind een zorgaanbieder in de omgeving’ heeft het tekst-invoerveld om te zoeken 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.

Module Nieuws

In de detailweergave van een artikel staat er een overzicht onder het artikel van andere nieuwsitems. Hierbij heeft de kop ‘Laatste nieuws’ h2-niveau, en de koppen eronder ook. Deze horen een niveau lager te staan (h3-niveau).
1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Niet getoetst
1.3.4: Weergavestand
Hele sample

Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Voldoende
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

Module Media

Uitkomst: Onvoldoende
Hele sample

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.

Module Media

De ‘Preview’-tekst en het afgespeelde aantal in de SoundCloud embed (2.61:1). NB: dit is van een derde partij, maar wanneer een klant dit als embed implementeert, hoort het wel bij de content die moet voldoen aan WCAG.
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Niet getoetst
1.4.10: Reflow
Hele sample

Uitkomst: Onvoldoende

Module Zorgkaart

Uitkomst: Onvoldoende
Hele sample

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.)

Module Zorgkaart

Op 400% ingezoomd is niet alle content meer leesbaar. Zie screenshot 2.
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Module Fotogalerij

Uitkomst: Onvoldoende
Hele sample

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.

Module Fotogalerij

In de popup hebben de knoppen te weinig contrast (grijs op donkergrijs, 2:1). Ook de focusrand heeft hier te weinig contrast.
1.4.12: Tekstafstand
Hele sample

Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Onvoldoende

Componenten

Uitkomst: Onvoldoende
Componenten

Component Formulier: De tooltips kunnen alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kunnen worden, bijvoorbeeld met de escape toets. Zie screenshot 3.

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Onvoldoende

Module Afbeelding met markers

Uitkomst: Onvoldoende
Hele sample

Opmerking: Het uitklappen van het Contact submenu in de header werkt niet met enter, maar met de spatietoets. Het openen van de talenopties werkt wel met de enter toets. Het gebruik van de enter toets is logischer; beter is om dit bij beide links te gebruiken. Zie ook https://webaim.org/techniques/keyboard/#testing. NB: omdat ‘enter’ de verwachte toets is, sla je met het toetsenbord nu heel snel en misschien onbedoeld het submenu over. Om toch ook direct naar het hoofditem te kunnen gaan, kun je een aparte uitklapknop toevoegen achter de eerste link. (Bij inzoomen gebeurt dit al.)

Module Afbeelding met markers

Bij de afbeelding met modal popup komt de focus niet in de modal, waardoor deze niet te bedienen is. De focus blijft nu op de onderliggende pagina. Zorg bij modals dat de focus alleen in de modal kan komen totdat deze weer gesloten is.
2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Onvoldoende

Module YouTube

Uitkomst: Onvoldoende
Module YouTube

Op deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Een oplossing is om de embedcode van de YouTube video aanpassen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb
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: Voldoende
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Voldoende
Hele sample

Opmerking: De links naar social media in de footer hebben teksten als ‘Facebook van’. De naam van de organisatie mist hier nog.
2.4.5: Meerdere manieren
Hele sample

Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample

Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Voldoende
Hele sample

Opmerking: wanneer je bent ingezoomd en het kruimelpad een knop wordt, is de zichtbare focus wat verwarrend. Eerst zit de focusrand om zowel de link als de knop, en daarna alleen om de knop. Het zou logischer zijn om de eerste focusrand alleen om de link te zetten. Nu is het niet duidelijk wat je kunt activeren. Zie screenshot 1.
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: Voldoende

Module Zorgkaart

Uitkomst: Voldoende
Module Zorgkaart

Opmerking: In de kaarten staan links met daarin het logo van Zorgkaart Nederland. Deze link heeft een andere toegankelijke naam dan wat er zichtbaar is (‘Zoek, vind en waardeer zorgaanbieders op ZorgkaartNederland.nl’). Hierdoor kan de link mogelijk lastig met stem bediend worden. Zorg er bij voorkeur voor dat de zichtbare tekst aan het begin van de toegankelijke naam (alt-tekst) staat.
2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet van toepassing
2.5.7: Dragging Movements
Hele sample

Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample

Uitkomst: Voldoende

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Niet van toepassing
3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Voldoende
3.2.2: Bij input
Hele sample

Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample

Uitkomst: Voldoende
3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende
3.2.6: Consistent Help
Hele sample

Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Voldoende
3.3.2: Labels of instructies
Hele sample

Uitkomst: Voldoende
3.3.3: Foutsuggestie
Hele sample

Uitkomst: Voldoende
3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet van toepassing
3.3.7: Redundant Entry
Hele sample

Uitkomst: Niet van toepassing
3.3.8: Accessible Authentication (Minimum)
Hele sample

Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

Module Media

Uitkomst: Onvoldoende
Hele sample

In de header staan 2 menu-items die kunnen worden uitgeklapt. Op de eerste link, ‘Contact’, staat een (correct) ‘aria-expanded’-attribuut. De tweede link, ‘nl Nederlands’ geeft niet aan dat er een lijst geopend kan worden. Dit kan hier ook worden gedaan via het ‘aria-expanded’-attribuut.

Module Media

De SoundCloud embed heeft een ongeldige role=”bar’, een ongeldig attribuut ‘aria-role’ en een ongeldige ‘aria-owns’-waarde. Ongeldige ARIA-markup kan problemen geven bij de bediening met hulpsoftware.
4.1.3: Statusberichten
Hele sample

Uitkomst: Voldoende

Sample

  1. Homepage - https://starterkit.iwink.nl/
  2. Zoeken - https://starterkit.iwink.nl/zoekpagina?q=module
  3. Modules - https://starterkit.iwink.nl/modules-in-actie
  4. Module Zorgkaart - https://starterkit.iwink.nl/modules-in-actie/zorgkaart
  5. Module Evenementen - https://starterkit.iwink.nl/modules-in-actie/evenementen
  6. Module Feiten & Cijfers - https://starterkit.iwink.nl/modules-in-actie/feiten-cijfers
  7. Module FAQ - https://starterkit.iwink.nl/modules-in-actie/faq
  8. Module Begrippen - https://starterkit.iwink.nl/modules-in-actie/begrippen
  9. Module Google Maps - https://starterkit.iwink.nl/modules-in-actie/google-maps
  10. Module Afbeelding met markers - https://starterkit.iwink.nl/modules-in-actie/afbeelding-met-markers
  11. Module Vacature - https://starterkit.iwink.nl/modules-in-actie/vacatures
  12. Module Locaties - https://starterkit.iwink.nl/modules-in-actie/locaties
  13. Module Media - https://starterkit.iwink.nl/modules-in-actie/media
  14. Module Blog - https://starterkit.iwink.nl/modules-in-actie/blogs
  15. Module Nieuws - https://starterkit.iwink.nl/modules-in-actie/nieuws
  16. Module Personen - https://starterkit.iwink.nl/modules-in-actie/personen
  17. Module Fotogalerij - https://starterkit.iwink.nl/modules-in-actie/foto-galerij
  18. Module Slider - https://starterkit.iwink.nl/modules-in-actie/slider
  19. Module Cases en Referenties - https://starterkit.iwink.nl/modules-in-actie/cases-en-referenties
  20. Module verhalen - https://starterkit.iwink.nl/modules-in-actie/verhalen
  21. Module YouTube - https://starterkit.iwink.nl/modules-in-actie/youtube
  22. Module Zorg - https://starterkit.iwink.nl/modules-in-actie/zorg
  23. Componenten - https://starterkit.iwink.nl/componentenbibliotheek
  24. Hero’s - https://starterkit.iwink.nl/heros-in-beeld

Technologie

HTML,CSS,WAI-ARIA,JavaScript,SVG,DOM

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek:

Screenshots

  1. focusrand breadcrumb
    Figuur 1: de focusrand staat zichtbaar om 2 elementen heen
    ↩
  2. zorgkaart deels buiten beeld
    Figuur 2: bij inzoomen is niet alle tekst meer leesbaar
    ↩
  3. tooltip geopend
    Figuur 3: de tooltips moeten kunnen worden gesloten met het toetsenbord
    ↩
  4. header in Windows High Contrast
    Figuur 4: op Windows High Contrast verdwijnt de menuknop
    ↩