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
Watch4Media
Evaluatiedatum
24 december 2024
Managementsamenvatting
Dit onderzoek is een hertoetsing van het onderzoek van 15 november 2024. Uit dit onderzoek blijkt dat wordt voldaan aan 44 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 video’s goede ondertiteling hebben, dat er geen afbeeldingen van tekst worden gebruikt 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
Niet van alle elementen wordt de status correct aangegeven voor hulpsoftware
Scope van de evaluatie
Website naam
almere20.nl
Scope van de website
Alle pagina's op https://almere20.nl.
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.
32Voldoende
6Onvoldoende
12Niet 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
Groen en waterrijk
Uitkomst: Onvoldoende
Almere 2050
Uitkomst: Onvoldoende
PDF jaarverslag 2023
Uitkomst: Onvoldoende
Groen en waterrijk
In het hoofdartikel staat een infographic. Deze afbeelding heeft een lege alt-tekst, maar is niet decoratief. Voeg bij voorkeur een korte beschrijving toe in de alt-tekst en een volledige beschrijving van de informatie in een caption onder de figuur. Zie screenshot 1.
Hertoetsing: er is nu een alt-tekst, maar deze wordt in de caption letterlijk herhaald. Zet in de caption een volledige omschrijving van de inhoud van de infographic (alle zichtbare teksten).
Almere 2050
Bij de nieuwsberichten staat een afbeelding zonder alternatieve tekst. Het gaat om een foto van brochures bij een bericht over de uitvoeringsagenda. Deze staat in een div-element met role=”img” en een leeg aria-label attribuut. Wanneer dit een decoratieve afbeelding is, kan de rol en aria-label worden weggehaald. Wanneer de rol blijft staan, moet het aria-label attribuut een waarde krijgen. Dit komt bij meerdere afbeeldingen voor.
Hertoetsing: het is nog niet overal opgelost, zie het item ‘Stad maken aan het water’.
PDF jaarverslag 2023
Het document bevat meerdere infographics waarbij de alternatieve tekst niet alle zichtbare (tekstuele) informatie bevat. Bijvoorbeeld de infographic over Smart Mobility op pagina 91 (46 in Acrobat Reader).
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Voldoende
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: Voldoende
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Voldoende
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Hart van de stad
Uitkomst: Onvoldoende
PDF jaarverslag 2023
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
In de cookiemelding staat een lijst die niet goed is opgemaakt. Het gaat om het onderdeel waarbij een paragraaf staat met ‘Wij gebruiken geen cookies van dit type’. Hier staat nog een ul-element boven, zonder li-elementen. Dit kan verwarrend zijn voor gebruikers van hulpsoftware. Haal het ul-element hier ook weg.
Hart van de stad
Hertoetsing: De koppenstructuur is nog niet helemaal logisch opgebouwd. De kop ‘Publicaties’ lijkt visueel een zelfstandig onderdeel, maar valt als h3-kop onder ‘Ontwikkelvisie Natuurkrachtig Hart van de Stad 2040‘. Deze kop hoort een niveau hoger te staan.
PDF jaarverslag 2023
Niet alle content is correct opgemaakt. Bijvoorbeeld:
Er staan er veel lege koppen en paragrafen in het document.
Niet alle afbeeldingen zijn als figuur opgemaakt, maar bijvoorbeeld als paragraaf of als losse tekst (dus in plaats van alternatieve tekst binnen een figuur).
Sommige tabellen staan geheel binnen een kop.
Hertoetsing: de koppenstructuur is nog niet overal goed opgemaakt. Bijvoorbeeld de tussenkopjes in hoofdstuk 1 lijken visueel en qua tekst op hetzelfde niveau te staan, maar in de code niet. ‘Mijlpalen’ is een h2 en ‘Aandachtspunten’ een h3.
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: Niet van toepassing
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
Groen en waterrijk
Uitkomst: Onvoldoende
PDF jaarverslag 2023
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.
Groen en waterrijk
Hertoetsing: De groene teksten in de infographic (groen op lichtgroen, 4.2:1).
PDF jaarverslag 2023
Hertoetsing:het kopje ‘icoonprojecten’ (4:1) op pagina 46 (24 in Acrobat Reader).
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: Voldoende
Hele sample
Bevindingen:
Opmerking: Doordat de header sticky is en veel schermruimte inneemt, is de content lastig te lezen wanneer je verder bent ingezoomd. Zie screenshot 4. Overweeg om de header op dit zoomniveau minder groot te maken.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Voldoende
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
Hele sample
Bevindingen:
Opmerking: In het submenu Programmalijnen (op 100% zoom) wisselt de content in de midden- en rechterkolom wanneer je met de muis door de programmalijnen gaat, maar met het toetsenbord wisselt deze niet. Zie screenshot 3. Je kunt bij deze content komen door naar de pagina van het programma te gaan, maar het is gebruiksvriendelijker als toetsenbordgebruikers dezelfde info te zien krijgen.
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: Voldoende
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: Onvoldoende
Hele sample
Bevindingen:
Na het activeren van de tab ‘Details’ in de cookie instellingen gaat de focus niet meteen in het tabpanel, maar eerst naar de andere tabs. Het voorgeschreven gedrag bij tabs is dat de focus via de tabtoets meteen in het actieve panel komt en dat je met de pijltjestoetsen tussen de tabs kunt navigeren. Zorg dat de code voor tabs is opgemaakt volgens de specificatie, zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Voldoende
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De knop om de popup te sluiten heeft als label ‘Close widget’. Maak hier bijvoorbeeld ‘Sluit instellingen’ van. Binnen de cookie pop-up hebben de iconen een Engelse alternatieve tekst ‘Consent given’. Ook dit is mogelijk niet voor iedereen duidelijk. Maak hier een Nederlandse tekst van. Let er hierbij op dat de ‘lang’ attributen binnen de popup ook op Nederlands worden gezet.
Hertoetsing: de labels zijn aangepast, maar de taalcodes staan nog niet overal goed. Bijvoorbeeld op de sluit-knop staat nog lang=”en”. (NVDA leest de gegeven toestemmingen via de iconen ook nog in het Engels voor. VoiceOver leest deze svg-titles niet voor. Dit kan verbetered worden door een role=”img” toe te voegen op het svg-element.)
In het hoofdmenu staan links die uitklapbaar zijn. Wanneer je hier met de focus op komt, wordt dat niet doorgegeven aan hulpsoftware. Er komt pas een 'aria-expanded' attribuut op te staan nadat deze is geactiveerd. Zorg dat deze er ook al op staat als je er voor het eerst op komt, zodat het duidelijk is dat deze link uitgeklapt kan worden. Dit geldt ook voor de links van programmalijnen in het submenu die geopend kunnen worden.
Hertoetsing: op 100% gaat dit nu goed. In het ingezoomde menu wordt de status nog niet goed doorgegeven. Onder programmalijnen staan dan alle links op ‘uitgeklapt’, maar je kunt geen submenu in gaan. Dit is dus verwarrend. Als dit in dit menu niet werkt, kan deze status beter worden weggehaald.
