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 Almere
Evaluatiedatum
11 januari 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 39 van de 55 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.
Positief is bijvoorbeeld dat de content bij inzoomen goed bruikbaar blijft, dat alle onderdelen met het toetsenbord bediend 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
Onjuist opgemaakte koppen en tabellen
Gebruik van kleur voor instructies
Scope van de evaluatie
Website naam
sociaaldomeinflevoland.nl
Scope van de website
Alle pagina's op https://sociaaldomeinflevoland.nl/.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA
Success Criteria.
22Voldoende
16Onvoldoende
17Niet 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
Aanvraag tot jeugdhulp
Uitkomst: Onvoldoende
Consultatie Regionaal Expert Team (RET)
Uitkomst: Onvoldoende
PDF productenboek HS JGGZ & S JGGZ Intercultureel
Uitkomst: Onvoldoende
Aanvraag tot jeugdhulp
Op deze pagina staat een afbeelding van een tabel (stapelingsmatrix) zonder alternatieve tekst. De alt-tekst is leeg en er is geen caption of verwijzing naar een tekstalternatief. Voeg een volwaardig tekstalternatief toe. Dit kan door de afbeelding te vervangen door een HTML-tabel, of door een alt-tekst toe te voegen bij de afbeelding en een link naar een toegankelijk document, zoals een PDF.
Consultatie Regionaal Expert Team (RET)
Op deze pagina staat een infographic van een proces. Deze afbeelding heeft geen alternatieve tekst. De alt-tekst is leeg en er is geen caption of verwijzing naar een tekstalternatief. Voeg een volwaardig tekstalternatief toe. Dit kan door de informatie op de afbeelding uit te schrijven onder de afbeelding, of door een alt-tekst toe te voegen bij de afbeelding en een link naar een toegankelijk document, zoals een PDF.
PDF productenboek HS JGGZ & S JGGZ Intercultureel
Het logo op pagina 1 heeft als alternatieve tekst ‘Afbeelding met tekst, Lettertype, ontwerp Automatisch gegenereerde beschrijving’. Geef dit logo een goede beschrijving.
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
Consultatie Regionaal Expert Team (RET)
Uitkomst: Onvoldoende
Toegankelijkheid
Uitkomst: Voldoende
PDF productinrichting HS JGGZ & S JGGZ
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het tekst-invoerveld om te zoeken in de header heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Deze bevinding komt ook voor in het zoekveld binnen de pagina met zoekresultaten.
Consultatie Regionaal Expert Team (RET)
Op de pagina staat visueel het kopje ‘Hoe kun je het RET benaderen?’. Deze kop is echter niet als heading element opgemaakt in de code, maar als strong-element. Hierdoor wordt het door hulpsoftware niet als kop herkend. Maak hier bijvoorbeeld een h2 van.
Toegankelijkheid
Opmerking: Er staat een h2-kop in het artikel, ‘UITZONDERINGEN OP TOEGANKELIJKHEID’, dat geheel opgemaakt is met hoofdletters. Dit kan lastig zijn voor screenreadergebruikers omdat de kop op een aparte manier kan worden voorgelezen, zoals per letter zoals bij afkortingen. Ook visueel kan het voor sommige gebruikers lastiger te lezen zijn. Gebruik daarom bij voorkeur kleine letters.
PDF productinrichting HS JGGZ & S JGGZ
De tabellen zijn niet correct opgemaakt. De kopjes (nr, onderdeel, omschrijving) zijn niet als kopcel (th) opgemaakt, maar als datacel. De (groene) kopjes daarboven kunnen als caption worden opgemaakt voor de gehele tabel. Ook zijn de tabellen opgesplitst in meerdere tabellen na paginaonderbrekingen, waardoor de koppen ontbreken. Tabellen in een document moeten in de code doorlopen bij paginaonderbrekingen.
De lijsten zijn niet goed opgemaakt. Binnen de list item body staat voor elke tekst de letter ‘o’ als opsommingsteken. Deze wordt nu voor elke tekst opgelezen. Zorg voor een opsommingsteken binnen de list item label in plaats van de body.
De TOC items zijn ook niet goed opgemaakt. Er staan nu veel punten in als tekst, welke worden voorgelezen door de screenreader.
Ook staan er veel lege elementen in het documenten, waaronder koppen zoals h1.
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: Onvoldoende
Hele sample
Bevindingen:
Op landschapsmodus zijn niet alle items in het hoofdmenu bereikbaar. Een deel valt onderin het scherm weg en er kan niet naar beneden gescrolld worden. Mensen die motorisch beperkt zijn kunnen niet altijd het device draaien. Zorg daarom dat alles altijd bereikbaar is op portret- en op landschapsmodus. Zie screenshot 5.
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: Onvoldoende
Verwijsproces
Uitkomst: Onvoldoende
Verwijsproces
Als instructie staat er de volgende tekst: ‘Klik op het groen blok als u meer informatie wilt over de verschillende aanvragers. Als u op de blauwe button klikt maakt u daarna een keuze onder welke soort aanbieder u het verwijsproces wilt starten.’ Voor bezoekers die geen kleuren kunnen waarnemen, is dit geen duidelijke instructie. Beter is om (ook) te verwijzen naar de namen van de links en buttons. Dit zijn dan de link ‘Aanvrager’ en de knop ‘continued choices’. Deze knop kan beter een Nederlandse tekst krijgen.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Consultatie Regionaal Expert Team (RET)
Uitkomst: Onvoldoende
PDF productenboek HS JGGZ & S JGGZ Intercultureel
Uitkomst: Onvoldoende
Consultatie Regionaal Expert Team (RET)
Onderaan in de infographic staan witte teksten op een groene achtergrond. Deze hebben als contrast 2.7:1.
PDF productenboek HS JGGZ & S JGGZ Intercultureel
De tabel captions (wit op groen, 2.9: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
Hele sample
Bevindingen:
Boven de 200% is het hoofdmenu niet meer geheel te bereiken. De onderste items vallen buiten beeld, en er kan niet naartoe gescrolld worden. Zie screenshot 3. 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.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De lichtblauwe links, zoals de link ‘Informatie voor inwoners’ op de homepage, heeft op focus een lichtblauwe rand. Deze heeft te weinig contrast, namelijk 2.4:1. Grafische elementen moeten een contrast hebben van minimaal 3:1. Een oplossing is om deze focusrand ook donkerblauw te maken, zoals bij andere links zoals de nieuwsitems. Zie screenshot 2.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
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
Hele sample
Bevindingen:
Opmerking: er is een skiplink aanwezig, maar deze loopt door het logo heen. Zie screenshot 1.
2.4.2: Paginatitel
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Voldoende
PDF productenboek HS JGGZ & S JGGZ Intercultureel
Uitkomst: Onvoldoende
PDF productinrichting HS JGGZ & S JGGZ
Uitkomst: Onvoldoende
Homepage
Opmerking: de homepage heeft als unieke titel ‘Samen, dichtbij en leren wat werkt’. Dit geeft niet duidelijk aan wat de inhoud van de pagina is. Duidelijker is een omschrijving met ‘homepage’ (zoals in de verborgen h1).
PDF productenboek HS JGGZ & S JGGZ Intercultureel
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. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
PDF productinrichting HS JGGZ & S JGGZ
De titel van het document luidt ‘ 20080211 Brief vvv (vvv)’. Dit is geen duidelijke beschrijving. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Zoekresultaten jeugdhulp
Uitkomst: Voldoende
Hele sample
Bevindingen:
Na het invoerveld van de e-mail voor de nieuwsbrief gaat de focus naar de top van de pagina, in plaats van direct naar de verzend button ernaast. De focus komt eerst op een verborgen invoerveld terecht (input met het id ‘email’). Dit is verwarrend voor (ziende) toetsenbordgebruikers. Zorg dat de focus niet op dit verborgen veld kan komen.
Zoekresultaten jeugdhulp
Opmerking: de focus gaat eerst naar de resultaten en daarna naar het zoekformulier. Wanneer je bent ingezoomd, betekent dit dat je eerst naar onderen springt en daarna weer naar boven, omdat de resultaten onder het formulier komen te staan. Wanneer de visuele volgorde en de focusvolgorde van elkaar verschillen, kan dat verwarrend zijn voor ziende toetsenbordgebruikers. Daarom wordt aangeraden om deze volgordes met elkaar overeen te laten komen. Zie ook https://www.w3.org/WAI/WCAG22/Techniques/css/C27.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Voldoende
Hele sample
Bevindingen:
Opmerking: De link om het logo bovenaan de website heeft wel een tekst, maar deze is in het Engels: ‘Sociaaldomein Flevoland, to homepage’. Beter is het om deze linktekst in het Nederlands te zetten. Dit geldt ook voor het logo in de footer.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Zoekresultaten jeugdhulp
Uitkomst: Onvoldoende
Zoekresultaten jeugdhulp
Bij de paginatie staan aria-labels op de links met Engelse tekst zoals ‘Current page, page 1’. Gebruik op Nederlandse pagina’s bij voorkeur ook Nederlandse labels, zodat het voor alle gebruikers duidelijk te begrijpen is.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De links naar de gemeenten (via de logo’s) in de footer is niet zichtbaar. Daardoor is het voor ziende toetsenbordgebruikers niet duidelijk wanneer ze op deze links staan. Geef deze een duidelijke focusstijl, bijvoorbeeld een donkere rand zoals bij de tekstlinks die eronder staan.
Wanneer ingezoomd vanaf 150% komt het hoofdmenu achter een knop. Deze knop heeft geen zichtbare focus. Geef deze bijvoorbeeld een witte focusrand zoals de andere elementen in de header. Dit geldt ook voor de sluitknop wanneer het menu geopend is. Deze heeft nu een donkerblauwe rand op een zwarte achtergrond. Dit is te laag contrast, namelijk 1.3: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
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: Onvoldoende
PDF productenboek HS JGGZ & S JGGZ Intercultureel
Uitkomst: Onvoldoende
PDF productenboek HS JGGZ & S JGGZ Intercultureel
Het document heeft als taak Engels gespecificeerd, maar de content is in het Nederlands. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.
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: Onvoldoende
Hele sample
Bevindingen:
Wanneer bij het aanmelden voor de nieuwsbrief het formulier niet verzonden kan worden, komt er een (Engelstalige) tooltip in beeld bij de standaard browservalidatie. Dit is mogelijk niet voor iedereen duidelijk. Zorg voor een ‘eigen’ validatie met duidelijke Nederlandse tekst over wat er fout gaat en hoe het verbeterd kan worden. Zie screenshot 4. Nu wordt er bijvoorbeeld in Chrome wel een suggestie gegeven dat het @-teken mist, maar in Safari en Firefox wordt alleen aangegeven: ‘voer een e-mailadres in’.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Bij het aanmelden voor de nieuwsbrief staat geen zichtbaar e-mailadres label. Een placeholder tekst is niet voldoende aangezien die niet altijd beschikbaar is. Voeg een label toe die altijd zichtbaar blijft.
3.3.3: Foutsuggestie
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer bij het aanmelden voor de nieuwsbrief het formulier niet verzonden kan worden, wordt er niet altijd een suggestie voor verbetering gegeven. Zie ook 3.3.1.
Bij het artikel staat een foto van Ronald Messelink. Deze staat binnen een figure-element met role=”group”. Bij het gebruik van een groep moet een label gebruikt worden (bijvoorbeeld via aria-labelledby) om de groep een naam te geven. Deze naam is hier niet aanwezig. Hierdoor leest de screenreader niks voor over de afbeelding. Aangezien er hier maar één afbeelding is, is het logischer om het extra figure element met de ‘group’ rol hier te verwijderen, zodat de afbeelding niet genegeerd wordt door hulpsoftware.
