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
Gemeente Groningen
Evaluatiedatum
2 december 2024
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 er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat er geen bewegende onderdelen worden gebruikt die niet gepauzeerd kunnen worden en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Onjuist opgemaakte koppen
Te laag contrast van tekst
De toetsenbordfocus is niet overal (goed) zichtbaar
Scope van de evaluatie
Website naam
groningengehoord.nl
Scope van de website
Alle pagina's op https://groningengehoord.nl/.
Niet de rapporten op https://publicaties.oisgroningen.nl/ (deze vallen onder een ander onderzoek).
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
18Onvoldoende
15Niet 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
Homepage
Uitkomst: Onvoldoende
Resultaten
Uitkomst: Onvoldoende
Privacyverklaring
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het logo van de website bevat de tekst “Onderzoek Informatie Statistiek Groningen gehoord“. De alternatieve tekst van deze afbeelding is “Het logo van OIS”. Voor afbeeldingen met tekst geldt dat alle tekst in een afbeelding terug moet komen in de alternatieve tekst, zodat een screenreadergebruiker dezelfde informatie krijgt als een ziende gebruiker. Vermeld de volledige tekst van het logo in de alternatieve tekst. Dit geldt ook voor het OIS logo in de footer.
Homepage
In de blokken met de panels staan afbeeldingen zonder alt-attribuut. Screenreader gebruikers weten niet wat voor afbeelding dit is, en krijgen mogelijk de bestandsnaam voorgelezen. Voor decoratieve afbeeldingen kan het best een leeg alt-attribuut worden gebruikt, dus zo: alt=””. Dan negeren screenreaders de afbeeldingen.
Resultaten
De foto’s bij de onderzoeken hebben niet alle goede beschrijvingen. Bijvoorbeeld:
‘Arm’ bij een foto waarbij iemand wordt vastgepakt
‘Entree’ (van wat?)
‘Afbeelding’ (nietszeggend en dubbel want ‘afbeelding’ wordt standaard al voorgelezen)
Privacyverklaring
Het logo bovenaan de pagina heeft geen alt-attribuut. Een logo geeft informatie en heeft daarom altijd een goed beschrijvende alt-tekst nodig, waarbij alle visuele tekst ook in de beschrijving voorkomt.
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: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Aanmelden
Uitkomst: Onvoldoende
Wachtwoord vergeten
Uitkomst: Onvoldoende
Homepage
De koppenstructuur op deze pagina is niet logisch opgemaakt. In de footer staat de h3-kop ‘Abonneer op onze nieuwsbrief’. Deze valt qua hiërarchie onder de h2-kop ‘Veelgestelde vragen’. Dit is geen vraag, dus deze kop hoort op een hoger niveau te staan. Dit komt op meerdere pagina’s voor. Daarnaast heeft deze pagina 2 h1-koppen. Het wordt aangeraden 1 h1-kop te gebruiken die de pagina beschrijft. Screenreadergebruikers navigeren vaak via koppen. Zorg daarom voor een goede koppenhiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan.
Aanmelden
De invoervelden bij de vraag ‘Student’ zijn niet gegroepeerd en hebben geen groepslabel. Dit kan worden gedaan via een fieldset en legend of via role="group" en een “aria-labelledby”-attribuut dat hier verwijst naar het beschrijvende label. Dit geldt ook voor de checkboxes met panels waarvoor je je kunt aanmelden. Dit issue komt ook voor op de pagina Profiel bij de velden onder Geslacht. Met een groepslabel worden bij losse invoervelden met waarden als ‘ja’ en ‘nee’ ook het groepslabel voorgelezen, zodat de relatie ook duidelijk is wanneer je deze niet kunt zien. NB: er staat een title attribuut met ‘Bent u student’ op de invoervelden. Dit attribuut wordt echter slecht ondersteund door hulpsoftware en niet voorgelezen door de screenreader.
Wachtwoord vergeten
Het invoerveld heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een label-element toe dat met een id wordt verbonden aan het invoerveld. Voor hulpsoftware is een programmatisch verbonden label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.
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
Hele sample
Bevindingen:
De invoervelden voor persoonlijke informatie op deze site zoals naam en e-mailadres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. 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: Onvoldoende
Aanmelden
Uitkomst: Onvoldoende
Toegankelijkheidsverklaring
Uitkomst: Voldoende
Aanmelden
In dit formulier wordt kleur gebruikt om aan te geven dat het wachtwoord niet voldoet aan de minimale eisen of niet overeenkomt met een eerder ingevoerd wachtwoord. Deze kleurenhint verschijnt terwijl de gebruiker typt. Het is gebruiksvriendelijk om tijdens het invullen van het formulier feedback te geven over mogelijke foutieve invoer. Echter, deze informatie mag niet alleen in kleur worden gegeven. Voeg bijvoorbeeld tekst onder het invoerveld toe of een icoontje die dit duidelijk maakt. Let er wel op dat deze informatie ook aan screenreaders wordt doorgegeven (4.1.3).
Toegankelijkheidsverklaring
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 ook voor op de Faq pagina.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Resultaten
Uitkomst: Onvoldoende
Aanmelden
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.
De links in de header (grijs op grijsblauw, 3,2:1). Zie screenshot 3.
De tekst ‘Abonneer op onze nieuwsbrief, het label met ‘e-mailadres’ en de tekst ‘Groningen Gehoord is een initiatief van...’ in de footer (blauw/rood, 3,64:1).
Resultaten
De links ‘Lees het rapport’ op hover (zwart/donkergroen, 2:1).
Aanmelden
De foutmeldingen (rood/wit, 3,99: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
Toegankelijkheidsverklaring
Uitkomst: Onvoldoende
Privacyverklaring
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.)
Toegankelijkheidsverklaring
Boven de 200% zoom moet je horizontaal scrollen om de content te kunnen lezen. De titel ‘Toegankelijkheidsverklaring’ wordt deels verborgen in het rode vlak. Zie screenshot 4. Een oplossing is mogelijk in het laten afbreken van de titel (via CSS) en eventueel het laten meeschalen van de afbeelding.
Privacyverklaring
Boven de 300% moet je horizontaal scrollen om de content te kunnen lezen. Een oplossing is mogelijk in het laten afbreken van de titel (via CSS).
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Resultaten
Uitkomst: Onvoldoende
Aanmelden
Uitkomst: Onvoldoende
Hele sample
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.
Resultaten
Het verschil tussen de niet-gefocuste en gefocuste stijl van de links naar de rapporten (lichtblauw/wit, 1,4:1). Zie screenshot 1. Wanneer je zelf een focusstijl toevoegt (in plaats van de standaard browser stijl te gebruiken), zorg dan voor voldoende contrast.
Dezelfde lichtblauwe focusstijl wordt ook gebruikt in het aanmeldformulier. Zie screenshot 2.
Aanmelden
De randen van de invoervelden (1,5:1). Slechtzienden kunnen hierdoor moeite hebben om te bepalen waar ze input kunnen geven.
De toggle buttons wanneer ze uit staan (2,1:1).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Resultaten
Uitkomst: Onvoldoende
Hele sample
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.
Resultaten
De teksten in de blokken worden afgebroken en de links naar de rapporten worden onbereikbaar. Zie screenshot 5.
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: Voldoende
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
Toegankelijkheidsverklaring
Uitkomst: Onvoldoende
Toegankelijkheidsverklaring
De pagina heeft geen unieke titel, enkel ‘Groningen Gehoord Inwonerspanel’. Voor gebruikers van hulpsoftware is het voor de navigatie tussen webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Geef daarom altijd een beschrijving van de pagina in het title-element, bij voorkeur in de vorm ‘onderwerp – organisatie’.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Resultaten
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De link naar de top (achter het pijl icoon) heeft geen tekst. 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. Geef de link een beschrijving via bijvoorbeeld een verborgen screenreadertekst of een aria-label.
Resultaten
Er zijn meerdere links op de pagina met de tekst ‘Lees het rapport’. 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, zoals hier de h3-kop die ervoor staat. 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: Onvoldoende
Hele sample
Bevindingen:
De knop van het hoofdmenu heeft als label ‘Toggle navigation’. Dit is mogelijk niet voor iedereen duidelijk. Geef deze knop een Nederlandse tekst.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Aanmelden
Uitkomst: Onvoldoende
Aanmelden
De focus is niet zichtbaar op een toggle button die aan staat (groen). Wanneer je met het toetsenbord deze wilt wijzigen, is het nu niet duidelijk wanneer je hier op staat.
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:
De link achter het logo in de header heeft een andere toegankelijke naam dan wat er zichtbaar is. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minstens de zichtbare tekst bevat.
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
Privacyverklaring
Uitkomst: Onvoldoende
Privacyverklaring
De pagina heeft geen taal gespecificeerd. Screenreaders lezen hierdoor de pagina mogelijk niet in de juiste taal voor. Stel de juiste taal in op het html element.
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.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In de formulieren op deze website wordt er alleen standaard browser validatie gebruikt: hoe deze getoond wordt is afhankelijk van de browser. Hierdoor is niet goed te testen of deze wel altijd toegankelijk getoond wordt. Soms blijft een melding bijvoorbeeld maar heel kort in beeld of wordt deze in het Engels getoond. Zie screenshot 6 en screenshot 7. Zorg zelf voor een goede en toegankelijke cliënt validatie met duidelijke teksten over wat er fout gaat, dus niet alleen ‘Vul dit veld in’ of ‘Dit veld is verplicht’, maar bijvoorbeeld ‘Het veld wachtwoord is nog geen tweede keer ingevuld, en dit is verplicht’.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Aanmelden
Uitkomst: Onvoldoende
Aanmelden
Het invoerveld “Postcode” vereist een bepaald formaat. Welk formaat het is (postcode zonder spatie) staat in een placeholdertekst. Deze tekst verdwijnt zodra de bezoeker begint te typen. Mensen met kort werkgeheugen kunnen deze instructie vergeten. Deze instructie moet te aller tijden zichtbaar zijn. Verplaats deze instructie naar het label boven het invoerveld.
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer het e-mailadres voor de nieuwsbrief foutief wordt ingevoerd, worden er geen suggesties gegeven om dit te verbeteren. Zie screenshot 8.
De link naar de top in de footer (achter het pijl icoon) heeft geen naam. Geef de link bijvoorbeeld een (verborgen) tekst binnen het link element of een aria-label attribuut.
