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
23 april 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 40 van de 55 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 blokken met herhalende links omzeild kunnen worden en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Missende alt-teksten bij afbeeldingen
Missende audiodescriptie in video
Niet alle functionaliteit is bereikbaar bij inzoomen
Niet alle onderdelen hebben de juiste taal gespecificeerd
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.
Scope van de evaluatie
Website naam
almere.nl
Scope van de website
Alle pagina's op https://www.almere.nl/, english.almere.nl en wijkteams.almere.nl.
Niet de pagina's op andere (sub)domeinen en achter inlog, zoals formulieren en surveys.
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.
23Voldoende
15Onvoldoende
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
Koningsdag
Uitkomst: Onvoldoende
PDF verordening duurzaamheidsleningen
Uitkomst: Onvoldoende
PDF Coalitieakkoord Almere 2022-2026
Uitkomst: Onvoldoende
Random pagina 1 Almeerse beiaardiers
Uitkomst: Onvoldoende
Koningsdag
Op deze pagina staan meerdere kaarten. Elke kaart heeft dezelfde alt-tekst met de legenda-items. Het is hierdoor niet duidelijk dat het afbeeldingen van verschillende gebieden zijn. Geef in de alt-tekst de titel van de kaart aan, bijvoorbeeld ‘Koningsdag Centrum Almere Buiten’. Hierdoor worden de linkteksten om deze kaarten te vergroten ook uniek.
PDF verordening duurzaamheidsleningen
Het logo van de gemeente Almere heeft geen alternatieve tekst en is daardoor voor screenreadergebruikers niet aanwezig.
PDF Coalitieakkoord Almere 2022-2026
Er zijn veel afbeeldingen gevonden in het document zonder alternatieve tekst. Hieronder vallen afbeeldingen van content, zoals de logo’s van politieke partijen. Ook zijn er decoratieve afbeeldingen zoals achtergrondfoto’s die niet als decoratief zijn opgemaakt.
Random pagina 1 Almeerse beiaardiers
De foto’s van de torens hebben een lege alt-tekst, maar deze afbeeldingen zijn duidelijk wel onderdeel van de content (niet decoratief). Geef bij elke foto aan om welke toren het gaat.
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
Archeologie in Almere (video)
Uitkomst: Onvoldoende
Archeologie in Almere (video)
In de video mist een goede ondertiteling. De automatisch gegenereerde ondertiteling klopt niet overal. Voeg een correcte ondertiteling toe.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Archeologie in Almere (video)
Uitkomst: Onvoldoende
Random pagina 1 Almeerse beiaardiers
Uitkomst: Onvoldoende
Archeologie in Almere (video)
Er komt informatie in beeld die niet wordt uitgesproken, zoals belangrijke gebeurtenissen (ronddraaiende klok, aftellende klok) inleidende teksten en wie er aan de film hebben meegewerkt. Mensen die deze beelden 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.
Random pagina 1 Almeerse beiaardiers
In het begin en aan het eind van de video komen teksten in beeld die niet worden uitgesproken (titel en aftiteling). Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Aangezien deze informatie niet tijdsgevoelig is, kan dit ook via een alternatief worden aangeboden, zoals een extra 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
Archeologie in Almere (video)
Uitkomst: Onvoldoende
Archeologie in Almere (video)
Er komt informatie in beeld die niet wordt uitgesproken, zoals belangrijke gebeurtenissen (ronddraaiende klok, aftellende klok) inleidende teksten en wie er aan de film hebben meegewerkt. 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
Contact
Uitkomst: Onvoldoende
Wijkteams startpagina
Uitkomst: Onvoldoende
Wijkteams contact
Uitkomst: Onvoldoende
Passport
Uitkomst: Onvoldoende
PDF Coalitieakkoord Almere 2022-2026
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Opmerking: De knop naar de chat is in Windows High Contrast mode niet zichtbaar. Dit komt doordat het enkel een transparante (zwarte) afbeelding is die niet wordt herkend als tekst. Dit kan worden verbeterd door tekst in de knop te zetten en er eventueel ook een (transparante) outline omheen te zetten. Zie screenshot 7.
Contact
De kophiërarchie is niet helemaal correct. Binnen de uitklapbare onderdelen staan koppen, welke hetzelfde niveau hebben als die van de kop waar ze onder vallen (beide h2). Deze moeten logischerwijs een niveau lager zijn. Dit komt voor bij ‘Voor doven en slechthorenden’ en ‘Social media en chat’.
Wijkteams startpagina
De kophiërarchie is niet helemaal correct. In de footer staan 2 kopjes, waarvan de eerste een h1 is en de tweede een h2. Deze zijn qua betekenis hetzelfde niveau. Het zou daarom logischer zijn als ‘Contact met de wijkteams’ ook h2-niveau krijgt. Dit komt bij meerdere pagina’s onder dit subdomein voor.
Wijkteams contact
De kophiërarchie is niet helemaal correct. Onder de h3-koppen ‘Oostvaarders-, Eilanden-, Striphelden-, Sieraden-, Seizoenen-, Regenboog- en Indische Buurt en Buitenvaart’ en ‘Haven en Hout’ staan kopjes die ook op h3-niveau staan. Deze moeten een niveau lager zijn, zoals bij de uitkapbare onderdelen ervoor.
Passport
De kophiërarchie is niet helemaal correct. Onder de h1-kop ‘Step 1:…’ staan 2 koppen. Deze staan ook op h2-niveau, maar zouden logischerwijs op een lager niveau moeten staan.
PDF Coalitieakkoord Almere 2022-2026
Er is geen logische kophiërarchie. Bijvoorbeeld op pagina 2 staan enkel h1-koppen, terwijl er visueel 3 kopniveaus te zien zijn. Ook zijn er koppen die in de code niet als kop zijn opgemaakt, bijvoorbeeld op pagina 8.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
PDF verordening duurzaamheidsleningen
Uitkomst: Onvoldoende
PDF Coalitieakkoord Almere 2022-2026
Uitkomst: Onvoldoende
Homepage
Bij de nieuwsberichten staat de datum in de broncode voor de kop waar die bij hoort. Hierdoor verandert de betekenis van de volgorde, en valt de zichtbare datum (in de layout) onder de vorige kop. Dit kan erg verwarrend zijn voor screenreadergebruikers. Zorg dat de datum in de code na de kop staat. Dit komt op meerdere pagina’s voor.
PDF verordening duurzaamheidsleningen
De visuele volgorde en de bronvolgorde komen niet overeen. Zo staat er eerst de inhoud van de wijziging, en daarna de header en footer.
PDF Coalitieakkoord Almere 2022-2026
De visuele volgorde en de bronvolgorde komen niet overeen. Zo staan bijvoorbeeld op pagina 2 de lijstjes voor ‘Bouwen aan vertrouwen’ en ‘Huishoudboekje op orde houden’ door elkaar heen (eerst 2 h1-koppen, daarna 2 lijsten). Voor screenreaders is de volgorde nu niet correct. Koppen, lijsten en afbeeldingen die visueel bij elkaar horen, staan in de code door elkaar heen.
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
PDF verordening duurzaamheidsleningen
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.
Wanneer je het chatvenster sluit, krijg je 2 knoppen: ‘ja’ en ‘nee’. De ‘Ja’-knop heeft te weinig contrast (wit op groen, 1.91:1). Zie screenshot 1.
De tekst ‘Druk op Enter om te versturen’ onder het invoerveld (3.2:1) van de chat. Zie screenshot 2.
De gemarkeerde letters binnen de zoeksuggesties (oranje, 2.4:1). Zie screenshot 5.
PDF verordening duurzaamheidsleningen
Het oranje nummer bovenaan het document (2.2: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:
Op 400% is het chatvenster deels onzichtbaar. Zie screenshot 4. De chat kan dan ook niet gesloten worden (de sluitknop is buiten beeld en de escape-toets werkt niet). Je kunt er alleen uit komen door de pagina geheel te sluiten. Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320px 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: 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: Onvoldoende
Zoekresultaten verhuizen
Uitkomst: Onvoldoende
Zoekresultaten verhuizen
Binnen de paginatie werken de knoppen met de pijltjes (vorige en volgende) niet met het toetsenbord.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Archeologie in Almere (video)
Uitkomst: Onvoldoende
Archeologie in Almere (video)
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
NB: Momenteel staat er wel het attribuut disablekb=”1” in de HTML, maar dit wordt op deze manier niet uitgevoerd door de player.
Dit komt ook voor op de pagina Random pagina 1 Almeerse beiaardiers.
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 verordening duurzaamheidsleningen
Uitkomst: Onvoldoende
PDF Coalitieakkoord Almere 2022-2026
Uitkomst: Onvoldoende
PDF verordening duurzaamheidsleningen
Het document heeft een titel, maar in de eigenschappen staat ingesteld dat de bestandsnaam wordt getoond in plaats van de documenttitel.
PDF Coalitieakkoord Almere 2022-2026
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: Onvoldoende
Koningsdag
Uitkomst: Onvoldoende
Koningsdag
Wanneer je de link met de afbeelding van de kaart activeert, opent deze in een popup. De focus blijft echter op de pagina er onder staan en gaat pas helemaal aan het eind (na de footer) in de popup. Zorg dat de focus hier meteen in komt en de links eronder geen focus kunnen krijgen wanneer de popup geopend is.
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:
Er zijn meerdere knoppen gevonden op Nederlandse pagina’s met Engelse namen (labels). Dit is mogelijk niet voor iedereen duidelijk. Maak hier Nederlandse teksten van. Bijvoorbeeld:
De knop om het chatvenster te sluiten heeft als naam ‘close’.
De knoppen om de chat geheel af te sluiten hebben als naam ‘yes’ en ‘no’. (De aria-labels overschrijven de Nederlandse knopteksten.)
Omgekeerd: de knop ‘Menu Zoeken’ op Engelstalige pagina’s. Maak hier Engels van.
Opmerking: de links in de breadcrumb overlappen elkaar net, doordat de line-height iets kleiner is dan de hoogte van de links. Dit valt onder de uitzondering omdat het een inline element is, maar kan verbeterd worden door de line-height van de links iets te vergroten (van 1.2 naar 1.5 minimaal). Zie screenshot 6.
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample
Uitkomst: Onvoldoende
English startpage
Uitkomst: Onvoldoende
Random pagina 2 Україна
Uitkomst: Onvoldoende
English startpage
De skiplink staat in het Nederlands (‘Direct naar paginainhoud’), zonder dat hier een taalwissel voor wordt gegeven. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Het is aan te raden de skiplink hier in het Engels te zetten, zodat een taalwissel niet nodig is. Dit geldt ook voor de kop ‘Waar ben je naar op zoek?’ binnen het uitklapmenu. Zie screenshot 3. Dit komt op meerdere Engelstalige pagina’s voor.
Random pagina 2 Україна
De gedeelten met de Oekraïense teksten zijn niet in de code aangegeven als Oekraïens. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd of niet voor (VoiceOver op Mac slaat deze teksten geheel over terwijl de taal wel geïnstalleerd is). Geef de taal van de Oekraïense teksten aan met het attribuut lang="uk" op het betreffende element.
Het zoeken invoerveld bovenaan de pagina’s is niet helemaal correct opgemaakt. Voor screenreadergebruikers is er geen aankondiging dat er tijdens het zoeken een lijst is geopend met zoeksuggesties. Dit kan worden opgelost door het gebruik van een combobox eh het aria-expanded attribuut om aan te geven dat er een lijst is geopend. Zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/.
Onderaan de pagina staat een knop met de naam ‘chat scherm zichtbaarheid schakelen’. Wanneer deze wordt geactiveerd, blijft de naam hetzelfde en wordt er geen status aangegeven zoals ‘chatvenster geopend’ of aria-expanded=”true”. Hierdoor is het voor gebruikers van hulpsoftware niet duidelijk dat er iets veranderd is. Opmerking: op mobiel met Android is deze knop via de TalkBack screenreader niet te activeren.
Koningsdag
Wanneer je de kaart opent in een popup, staan hier knoppen zonder duidelijke naam. Deze hebben als tekst pijltjes en een ‘x’. Maak hier bijvoorbeeld ‘sluiten’, ‘vorige’ en ‘volgende’ van.
