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
SED
Evaluatiedatum
13 februari 2025
Managementsamenvatting
Dit rapport bevat het deelonderzoek content. In combinatie met het onderzoek van de techniek vormt dit een volledig toegankelijkheidsonderzoek van de website. Uit dit onderzoek blijkt dat wordt voldaan aan 13 van de 23 content-specifieke criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat er geen afbeeldingen van tekst worden gebruikt en dat de meeste pagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Onjuiste koppenstructuur
Te laag contrast van tekst
Scope van de evaluatie
Website naam
gezinswijzerdrechterland.nl
Scope van de website
Alle pagina's op https://www.gezinswijzerdrechterland.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 23 van 50 WCAG 2.1 AA
Success Criteria.
7Voldoende
10Onvoldoende
6Niet van toepassing
27Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Kinderwens en zwanger
Uitkomst: Onvoldoende
Hulpaanbod
Uitkomst: Onvoldoende
Nieuwsbericht alcoholgebruik
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In de footer staat een logo met de tekst ‘Gezinswijzer’. De alternatieve tekst is ‘Logo Gemeente Drechterland’. Zorg dat de alt-tekst van logo’s altijd dezelfde informatie geeft als de zichtbare tekst.
Kinderwens en zwanger
De logo’s van GGD Hollands Noorden bevatten meer tekst dan er terugkomt in de alternatieve tekst. Zorg dat de alt-tekst van logo’s altijd dezelfde informatie geeft als de zichtbare tekst.
Hulpaanbod
Het logo van de gemeente Drechterland heeft een lege alt-tekst. Het logo van opvoedinformatie heeft een andere alt-tekst dan wat er zichtbaar is. Zorg dat de alt-tekst van logo’s altijd dezelfde informatie geeft als de zichtbare tekst.
Nieuwsbericht alcoholgebruik
Bovenaan het artikel staat een afbeelding met de tekst ‘Dry January Kleine pauze, grote impact’. Deze afbeelding heeft geen tekstalternatief voor screenreadergebruikers. De foto wordt geplaatst als achtergrondafbeelding. Zet bij voorkeur afbeeldingen van content als img-element in de pagina met een beschrijving in de alt-tekst.
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: Onvoldoende
Stressfactoren in je gezin
Uitkomst: Onvoldoende
Random pagina 2 - ouderschapsbelofte
Uitkomst: Onvoldoende
Stressfactoren in je gezin
In de video mist een goede ondertiteling. De automatisch gegenereerde ondertiteling klopt niet overal.
Random pagina 2 - ouderschapsbelofte
In de video mist een goede ondertiteling. De automatisch gegenereerde ondertiteling klopt niet overal.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Stressfactoren in je gezin
Uitkomst: Onvoldoende
Random pagina 2 - ouderschapsbelofte
Uitkomst: Onvoldoende
Stressfactoren in je gezin
Aan het begin van de video komt tekst in beeld die niet wordt uitgesproken. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.
Random pagina 2 - ouderschapsbelofte
Gedurende de video komen situaties in beeld die niet worden uitgesproken, zoals bezigheden thuis en op het werk. Aan het eind van de video komen teksten in beeld die niet worden uitgesproken. Mensen die deze beelden niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie onder dit criterium ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Random pagina 2 - ouderschapsbelofte
Uitkomst: Onvoldoende
Random pagina 2 - ouderschapsbelofte
Gedurende de video komen situaties in beeld die niet worden uitgesproken, zoals bezigheden thuis en op het werk. Aan het eind van de video komen teksten in beeld die niet worden uitgesproken. Mensen die deze beelden niet kunnen zien, krijgen deze informatie niet mee. Onder dit niveau AA kan niet worden volstaan met een alternatief, maar is audiodescriptie vereist.
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Veranderende hormonen
Uitkomst: Onvoldoende
Opvoeden en opgroeien
Uitkomst: Onvoldoende
Zoekresultaten
Uitkomst: Onvoldoende
Nieuwsbericht alcoholgebruik
Uitkomst: Onvoldoende
Random pagina 1 - aan je kind vertellen dat je gaat scheiden
Uitkomst: Voldoende
Homepage
De koppenstructuur is niet logisch opgemaakt. Er zijn meerdere koppen waar geen content achter volgt. Deze teksten horen geen kopopmaak te hebben. Bijvoorbeeld ‘Kinderwens en zwanger’ en ‘Overzicht van cursussen en activiteiten’. Screenreader gebruikers die navigeren via koppen kunnen hierdoor in verwarring raken. Ook staan koppen niet overal op het juiste niveau. Zo valt de h2-kop ‘Actueel’ onder de h1-kop ‘Agenda’. Visueel zijn dit aparte onderdelen. Zie ook screenshot 2.
Veranderende hormonen
De eerste paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen. Dit komt op meerdere pagina’s voor.
Opvoeden en opgroeien
Visueel is er 1 lijst met links. In de code staan echter 11 lijsten met elk maar 1 item. Voor screenreadergebruikers zorgt dit voor veel ruis (elke lijst wordt voorgelezen). Maak hier 1 lijst van.
Zoekresultaten
De koppenstructuur is niet logisch opgemaakt. De resultaten hebben h3-koppen, welke nu alle vallen onder de h2-kop ‘Type’. Deze resultaten behoren geen kopopmaak te hebben, omdat er geen content achter volgt. Een link is hier voldoende. Zie screenshot 3.
In de paginatie is via een andere vormgeving te zien op welke pagina je je bevindt, en wat de links zijn naar de andere pagina’s. Dit is voor hulpapparatuur niet af te leiden uit de code. Dit is eenvoudig op te lossen door aria-current=“page” toe te voegen aan de link met class=“active”.
Nieuwsbericht alcoholgebruik
De koppenstructuur is niet helemaal logisch opgemaakt. Er is een h3-kop ‘Het laatste nieuws’. Hieronder staan meerdere items met een kop, welke ook op h3-niveau staan. Het is hier beter om de kop ‘Het laatste nieuws’ op h2-niveau te zetten, zodat de nieuwsitems er qua hiërarchie onder vallen.
Random pagina 1 - aan je kind vertellen dat je gaat scheiden
Opmerking: in de sidebar staan links naar meer informatie. Deze links staan in tabellen. Screenreaders lezen nu alle tabelinfo voor, maar dat is hier niet nodig. Zet deze links bij voorkeur niet in tabelopmaak, of geef de tabel het attribuut role=”presentation” zodat de tabelinfo genegeerd wordt door hulpsoftware.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Niet getoetst
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Niet getoetst
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Niet getoetst
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Voldoende
Opvoeden en opgroeien
Uitkomst: Voldoende
Opvoeden en opgroeien
Opmerking: De links in de tekst worden alleen met een verschil in kleur aangegeven. Omdat het contrast tussen de links en de omliggende tekst meer dan 3:1 is, wordt dit hier toegestaan. Echter, slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijk te maken. Dit komt op meerdere plekken voor waar links binnen lijsten worden getoond.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet getoetst
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Veranderende hormonen
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.
Veranderende hormonen
De links in de sidebar op blauwe achtergrond (4.2:1). Zie screenshot 5.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Niet getoetst
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Niet getoetst
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Voldoende
1.4.12: Tekstafstand
Hele sample
Uitkomst: Niet getoetst
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Niet getoetst
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Niet getoetst
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Niet getoetst
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Stressfactoren in je gezin
Uitkomst: Onvoldoende
Stressfactoren in je gezin
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. Deze bevinding komt ook voor op de pagina Ouderschapsbelofte.
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Niet getoetst
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Niet getoetst
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: Niet getoetst
2.4.2: Paginatitel
Hele sample
Uitkomst: Onvoldoende
Samen veilig online
Uitkomst: Onvoldoende
Samen veilig online
De agenda-items hebben dezelfde titel als het agenda-overzicht, ‘Agenda – Gezinswijzer Drechterland’. Geef elke pagina een unieke titel die de content op de pagina beschrijft. Voor gebruikers van hulpsoftware is het voor de navigatie tussen webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Niet getoetst
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Kinderwens en zwanger
Uitkomst: Onvoldoende
Hulpaanbod
Uitkomst: Onvoldoende
Kinderwens en zwanger
Achter de logo’s van GGD Holland Noorden staan links. Deze links hebben dezelfde linktekst, maar hebben een ander doel. Hierdoor is het linkdoel onduidelijk. Geef de links extra tekst, bijvoorbeeld via de alt-tekst of via een extra aria-labelledby-verwijzing naar de h2-kop die ervoor staat. (Voor 2.5.3: de toegankelijke naam mag wel meer tekst bevatten dan de zichtbare tekst, maar niet minder. Best practice is dat de zichtbare tekst vooraan in de toegankelijke naam staat.)
Hulpaanbod
Binnen de h2-kop ‘Contact’ staat een link zonder tekst. Gebruikers van hulpsoftware weten nu niet waar deze link naar toe gaat. Geef de link een tekst of verwijder de link wanneer deze overbodig is (met het toetsenbord krijgt de link nu wel focus, maar met de muis werkt het niet). Zie screenshot 1.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Niet getoetst
2.4.6: Koppen en labels
Hele sample
Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Niet getoetst
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet getoetst
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Niet getoetst
2.5.3: Label in naam
Hele sample
Uitkomst: Onvoldoende
Kinderwens en zwanger
Uitkomst: Onvoldoende
Kinderwens en zwanger
Achter de logo’s van GGD Holland Noorden staan links. De toegankelijke naam van deze links moet de zichtbare tekst bevatten, zodat deze met stem bediend kan worden. De toegankelijke naam bevat nu wel een deel van de zichtbare tekst, maar om aan dit criterium te voldoen moet de gehele tekst in de naam staan. Zie ook 1.1.1.
Opmerking: onderstaande zijn technische bevindingen, maar deze implementatie is afwijkend van de implementatie in het technische onderzoek.
Zoekresultaten
Bij de filters staan knoppen met ongeldige code. Het attribuut’ aria-controls’ verwijst naar een id "searchResults" dat niet bestaat. Dit kan problemen geven voor de interpretatie door hulpsoftware.
Agenda
Wanneer je een veld of velden bij de filters aanpast en wilt zoeken (submit), krijg je geen nieuwe resultaten. Soms krijg je een popup om in te loggen. De focus gaat vervolgens wel naar de resultaten, maar er blijft een overlay overheen staan. Zie screenshot 4.
