Onderzoek toegankelijkheid ggd.groningen.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, worden hiervan een of meer voorbeelden gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten 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
SQUID Media
Evaluatiedatum
24 januari 2022

Managementsamenvatting

Uit dit onderzoek blijkt dat wordt voldaan aan 32 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 de website een consistente navigatie heeft. Content is op meerdere manieren te vinden. Er zijn skiplinks waarmee herhaalde content kan worden overgeslagen met het toetsenbord. Ook werkt de site goed op mobiele apparaten.

Verbeterpunten zijn er o.a. bij enkele alternatieve teksten van logo's en iconen en bij het correct aangeven van koppen in de code. Ook is het contrast niet overal voldoende, zoals bij sommige rode en groene teksten. Ook gaat het bij het inzoomen nog niet helemaal goed en verdwijnen sommige onderdelen uit beeld of overlappen elkaar.

Scope van de evaluatie

Website naam
ggd.groningen.nl
Scope van de website
Alle pagina's op https://ggd.groningen.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.

Alle resultaten

1 Waarneembaar

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

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Gezond op reis

Uitkomst: Onvoldoende

PDF Omgaan met aardbevingen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Doordat de afbeelding van het GGD Groningen logo verborgen is voor hulpsoftware (d.m.v. visibility:hidden) is deze informatie over de afzender niet beschikbaar voor screenreadergebruikers. Dit geldt voor zowel het logo in de header als in de footer. Verwijder deze CSS zodat de alt- tekst wordt voorgelezen.

Contact

In de Facebook-feed staan veel afbeeldingen zonder alt-tekst. Screenreadergebruikers kunnen het idee hebben dat ze hierdoor content missen. Het zijn visueel onzichtbare afbeeldingen met de class ‘cff-linebreak’. Gebruik bij het embedden van widgets altijd een toegankelijke implementatie. Zie screenshot 1.

Gezond op reis

Verschillende links hebben een icoontje dat aangeeft dat ze naar een externe site gaan. Dit icoon wordt geplaatst met CSS en heeft geen tekstalternatief. Geef dit ook in de linktekst aan, zodat deze informatie ook beschikbaar is voor screenreaders.

PDF Omgaan met aardbevingen

De afbeeldingen in het document hebben geen alternatieve tekst. Hierdoor is het voor gebruikers die de afbeeldingen niet kunnen zien niet duidelijk waar deze afbeeldingen over gaan. Voeg een alternatieve tekst toe of verberg de afbeeldingen wanneer ze decoratief zijn door er een artifact (achtergrondafbeelding) van te maken.
1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Onvoldoende

Locaties coronavaccinaties

Uitkomst: Onvoldoende

Locaties coronavaccinaties

Onder ‘Hoe gaat vaccineren in zijn werk?’ staat een video. Hierin komen teksten in beeld die niet worden uitgesproken. Mensen die deze teksten niet (goed) kunnen lezen krijgen de informatie daarom niet mee. Voeg een voiceover toe of zorg dat alle tekst die in de video voorkomt, ook in tekst boven of onder de video staat (dit is nu al voor een deel het geval).
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: Onvoldoende

Video's over vaccineren

Uitkomst: Onvoldoende

Video's over vaccineren

Er komt informatie in beeld die niet wordt uitgesproken. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie (onder dit niveau A 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

Video's over vaccineren

Uitkomst: Onvoldoende

Video's over vaccineren

Er komt informatie in beeld die niet wordt uitgesproken. 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

PDF Youth Health Care

Uitkomst: Onvoldoende

PDF Omgaan met aardbevingen

Uitkomst: Onvoldoende

Ship Sanitation Certificate

Uitkomst: Onvoldoende

Homepage

Er zijn meerdere koppen op de pagina die niet zijn opgemaakt als kop, maar als div-element, paragraaf of strong-element. Hierdoor worden deze koppen door hulpsoftware niet herkend. Screenreadergebruikers navigeren vaak via koppen, maar voor hen staat er op deze pagina alleen ‘Nieuws’. Zie screenshots 3, 4 en 5. Voeg voor de visuele koppen kop-elementen toe (h1, h2, h3...). Let er op dat koppen in een juiste hiërarchie worden geplaatst. Dit probleem komt op meerdere pagina’s voor, bijvoorbeeld bij Locaties Coronavaccinaties, Contact en Kind en opvoeding.

PDF Youth Health Care

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.

PDF Omgaan met aardbevingen

Kopjes in het document worden in de code niet als kop aangegeven. Hierdoor is er geen manier om gemakkelijk door de content te navigeren. Er zijn ook geen bookmarks (deze worden vaak gegenereerd uit de koppen).

Ship Sanitation Certificate

De kopjes in de tabel zijn niet opgemaakt als tabelkop (via <th>) maar via het strong-element. Dit is nodig zodat de screenreader te kopcellen gecombineerd met de datacellen kan voorlezen, om zo de informatie logisch over te kunnen brengen voor iemand die de tabel layout niet kan zien.
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
1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Contact

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, met name voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat zoals bijvoorbeeld het aanwijzen van letters. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.
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

PDF Youth Health Care

Uitkomst: Onvoldoende

PDF Omgaan met aardbevingen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Niet alle teksten hebben voldoende contrast. Zorg voor een contrast van minimaal 4.5:1. Het gaat o.a. om de volgende teksten:

  • De rode tekst van de actieve pagina (en dus ook de mouseover kleur van de overige links)
  • De groene links onder ‘Direct naar’
  • De groene links op grijze vlakken bij Contact
  • De grijze teksten (datum plaatsing) onder ‘Dit gebeurt er op Facebook’.
  • De tekst om akkoord te gaan met het verwerken van persoonsgegevens (screenshot 2).
  • De witte teksten in de footer
  • De tekst’ Waar ben je naar op zoek?’
PDF Youth Health Care

De tekst ‘Contact information Public Health Service GGD Groningen‘ op pagina 2 heeft te weinig contrast (4.1:1).

PDF Omgaan met aardbevingen

De rode kopjes en de witte teksten in het rode vlak (pagina 5) hebben te weinig contrast (4.3:1).
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Locaties coronavaccinaties

Uitkomst: Onvoldoende

Homepage

Wanneer je verder inzoomt dan 150% verdwijnt een deel van de content: tekst en afbeeldingen van 3 nieuwsberichten en de ‘Over ons’ links in de footer. Slechtzienden die inzoomen om de tekst beter te kunnen lezen missen nu een deel van de informatie. Tekst moet in ieder geval tot 200% geschaald kunnen worden zonder verlies van content.

Locaties coronavaccinaties

Bij het inzoomen overlappen de iconen van het menu en het zoeken elkaar, zie screenshot 6. (1280px breed, ingezoomd op 110% en 125%). De zoekfunctie is hierdoor onbereikbaar.
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

Contactformulier

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De iconen van Twitter en Whatsapp bij het delen van de pagina hebben te weinig contrast. Het contrast tussen het icoon en de achtergrond moet minimaal 3:1 zijn. Een oplossing hier kan zijn om een tekst van het medium er bij te zetten.

Contactformulier

De randen van de invoervelden van het formulier hebben een te laag contrast (1.2:1). Slechtzienden kunnen hierdoor moeite hebben om te bepalen waar ze input kunnen geven. Verhoog het contrast van de randen van de interactieve elementen ten opzichte van de achtergrondkleur tot tenminste 3:1.
1.4.12: Tekstafstand
Hele sample

Uitkomst: Onvoldoende

Gezond leven in Groningen

Uitkomst: Onvoldoende

Gezond leven in Groningen

Wanneer text spacing instellingen worden aangepast (zoals line-height, letter of word spacing) valt een deel van de teksten weg. Zie screenshot 7. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Bezoekers die hun eigen styles gebruiken om de tekst leesbaar te maken missen nu mogelijk een deel van de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: http://www.html5accessibility.com/tests/tsbookmarklet.html
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
Hele sample

Bevindingen:

Wanneer je bent ingezoomd heeft het hoofdmenu een uitklapbutton bij Home en Contact. Deze buttons werken niet met het toetsenbord.
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: Onvoldoende

PDF Youth Health Care

Uitkomst: Onvoldoende

PDF Omgaan met aardbevingen

Uitkomst: Onvoldoende

PDF Youth Health Care

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.

PDF Omgaan met aardbevingen

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: Voldoende
Hele sample

Bevindingen:

Opmerking: In de header komen visueel gezien eerst de topmenu-items en daarna de zoekfunctie. Met het toetsenbord is dit andersom, dit kan verwarrend zijn. Het is zo ook wel te gebruiken, maar het zou beter zijn de volgorde gelijk te maken.
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Zoekresultaten

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link naar de homepage achter het GGD Groningen logo heeft geen tekst. De afbeelding heeft een alt-tekst, maar is verborgen voor hulpsoftware d.m.v. visibility:hidden.

Contact

Binnen de iframe van Facebook staat een link zonder tekst. Deze staat om het GGD-logo heen en deze afbeelding heeft een lege alt-tekst.

Zoekresultaten

Er zijn meerdere links op de pagina met de tekst ‘Meer informatie’. 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.
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
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
Hele sample

Bevindingen:

Doordat de link achter het logo geen toegankelijke naam heeft, is deze niet met stem te bedienen. Zie ook 1.1.1
2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet van toepassing

3 Begrijpelijk

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

Uitkomst: Onvoldoende

PDF Youth Health Care

Uitkomst: Onvoldoende

PDF Youth Health Care

De taal van het document is ingesteld op Nederlands, terwijl het Engelse content heeft. Screenreaders lezen het hierdoor mogelijk niet goed voor. De taal kan worden ingesteld bij de Bestandseigenschappen in Adobe PDF.

3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Onvoldoende

Kind en opvoeding

Uitkomst: Onvoldoende

Coronavirus English

Uitkomst: Onvoldoende

Kind en opvoeding

Het gedeelte met de Engelse content is niet in de code aangegeven als Engels. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse tekst aan met het attribuut lang="en" op het betreffende element.

Coronavirus English

Het gedeelte met de Engelse content is niet in de code aangegeven als Engels. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse tekst aan met het attribuut lang="en" op het betreffende element.
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.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

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Onvoldoende

Locaties coronavaccinaties

Uitkomst: Onvoldoende

Contactformulier

Uitkomst: Onvoldoende

Locaties coronavaccinaties

Er worden elementen niet correct geopend of gesloten (div, section en p). ​​Bij incorrecte opmaak kan hulpsoftware de pagina mogelijk lastiger interpreteren.Dit komt ook voor bij de pagina's Contactformulier, Video’s over vaccineren, Tatoeëren, piercen en permanente make-up en Ship Sanitation Certificate.

Contactformulier
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Contact

Onderaan de Facebook feed staat een iframe. De iframe heeft geen toegankelijke naam. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg bijvoorbeeld een title attribuut met beschrijving toe of een aria-label.
4.1.3: Statusberichten
Hele sample

Uitkomst: Niet van toepassing

Sample met getoetste webpagina&#39;s

  1. Homepage - https://ggd.groningen.nl/
  2. Coronavirus - https://ggd.groningen.nl/gezondheid/coronavirus/
  3. Locaties coronavaccinaties - https://ggd.groningen.nl/gezondheid/coronavirus/locaties-corona-vaccinaties/
  4. Contact - https://ggd.groningen.nl/contact/
  5. Contactformulier - https://ggd.groningen.nl/contact/formulier/
  6. Zoekresultaten - https://ggd.groningen.nl/zoeken/hulp/
  7. Gezond op reis - https://ggd.groningen.nl/gezond-op-reis/
  8. Kind en opvoeding - https://ggd.groningen.nl/kind-en-opvoeding/
  9. PDF Youth Health Care - https://ggd.groningen.nl/wp-content/uploads/2020/04/JGZ_F30_Youth-health-care_20-04_WEB.pdf
  10. Gezond leven in Groningen - https://ggd.groningen.nl/gezond-leven-in-groningen/
  11. PDF Omgaan met aardbevingen - https://ggd.groningen.nl/wp-content/uploads/2021/09/Folder-Kop-dr-veur-aardbevingen-16092021.pdf
  12. Coronavirus English - https://ggd.groningen.nl/where-can-you-get-answers-to-your-questions-about-coronavirus/
  13. Video's over vaccineren - https://ggd.groningen.nl/videos-over-vaccineren/
  14. Tatoeëren, piercen en permanente make-up - https://ggd.groningen.nl/voor-professionals/overige-professionals/tatoeeren-piercen-en-permanente-make-up/
  15. Ship Sanitation Certificate - https://ggd.groningen.nl/voor-professionals/overige-professionals/ship-sanitation-certificate/

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,PDF

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek:

Screenshots

Facebook afbeeldingen
Figuur 1: afbeeldingen zonder alt attribuut in de Facebook feed
contactformulier
Figuur 2: tekst om akkoord te gaan heeft te weinig contrast
koppenlijst homepage
Figuur 3: koppen op de pagina komen niet terug in de koppenlijst
kopjes in footer
Figuur 4: koppen in de footer komen niet terug in de koppenlijst
uitgeklapte tekst over corona
Figuur 5: kopje is opgemaakt via strong in plaats van met een kop-element
iconen menu en zoeken overlappen
Figuur 6: bij het inzoomen valt het zoeken icoon over het menu icoon heen
tekst in kaders
Figuur 7: bij het aanpassen van tekststijlen valt een deel buiten de kaders en wordt daarmee onleesbaar