Rapport in PDF

Onderzoek toegankelijkheid alsiklatergrootbeninalmere.nl versie 1.1

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, 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
8 augustus 2024

Managementsamenvatting

Dit onderzoek is een hertoetsing van het eerste onderzoek in 2021. Uit deze hertoetsing blijkt dat wordt voldaan aan 39 van de 50 criteria voor toegankelijkheid.

Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk. Zo zijn er nog video's gevonden zonder (goede) ondertiteling, worden kopjes nog niet overal logisch opgemaakt en zijn er invoervelden gevonden zonder (groeps)label.

Scope van de evaluatie

Website naam
alsiklatergrootbeninalmere.nl
Scope van de website
Alle pagina's op https://www.alsiklatergrootbeninalmere.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.

Alle resultaten

1 Waarneembaar

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

Uitkomst: Voldoende
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

Droomvideo's

Uitkomst: Onvoldoende
Droomvideo's

Hertoetsing: Niet alle video’s op deze pagina hebben een goede ondertiteling. Bijvoorbeeld de video ‘Piloot Peter’ heeft helemaal geen ondertiteling, en de video ‘Architect Egbert’ heeft alleen een automatisch gegenereerde ondertiteling, waar veel fouten in zitten. Doven en slechthorenden kunnen de inhoud van deze video’s daardoor niet of slecht volgen.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Onvoldoende

Droomvideo's

Uitkomst: Onvoldoende
Droomvideo's

Op pagina "Droomvideo's" staan video’s. Een deel daarvan zijn online vergaderingen waar meerdere mensen aan deelnemen. Zie bijvoorbeeld “Architect Egbert”. Op de slides in het begin is de informatie te lezen over het onderwerp, de datum en andere wellicht belangrijke informatie over deze bijeenkomsten. Tijdens de bijeenkomst komen meerdere mensen aan het woord. Dat is te zien aan de lichte rand van een foto van de spreker. Deze informatie die alleen visueel kan worden waargenomen moet ook toegankelijk worden gemaakt voor mensen die deze video niet kunnen zien. Blinde bezoekers missen teksten en andere visuele clues die in beeld komen maar niet worden uitgesproken. Voor al deze visuele informatie moet een alternatief geboden worden voor mensen die blind zijn. Dit kan voor dit succescriterium door een volledig transscript in tekst aan te bieden waar alle
(visuele en auditieve) informatie uit de video in zit. Om te voldoen aan niveau AA is echter ook succescriterium 1.2.5 van toepassing die aangeeft dat een transscript geen oplossing meer is. Het alternatief moet dan in de video zelf aangeboden worden door een audiodescriptie te geven voor alle visuele informatie. Die kan door dit in het bestaande audiospoor op te nemen, of door dit in een apart audiospoor erbij te plaatsen.
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

Droomvideo's

Uitkomst: Onvoldoende
Droomvideo's

Op pagina "Droomvideo's" staan video’s. Een deel daarvan zijn online vergaderingen waar meerdere mensen aan deelnemen. Zie bijvoorbeeld “Architect Egbert”. Deze opnames bevatten informatie die niet toegankelijk is voor blinde gebruikers. Blinde bezoekers missen teksten en andere visuele clues die in beeld komen maar niet worden uitgesproken. Deze informatie moet deel gaan uitmaken van de toegankelijke content. Deze informatie moet in een audiodescriptie voorkomen. Dit is een
(alternatief) geluidsspoor dat alle belangrijke visuele informatie in geluid overbrengt. Onder dit succescriterium is het niet meer voldoende om gebruik te maken van een media-alternatief.
1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

De Brievenbus

Uitkomst: Onvoldoende

Activiteit aanmelden 2

Uitkomst: Onvoldoende
Home

Hertoetsing: de koppenhiërarchie is niet geheel correct. Er is een h2-kop met Tips, met daaronder een aantal activiteiten. Deze activiteiten hebben ook een h2-kop, maar deze moeten op een lager niveau staan
(h3). Dit geldt ook voor de activiteiten onder ‘Populair’.

De Brievenbus

Op pagina "De brievenbus" de alinea die begint met “Hoe werkt het?” is opgemaakt met een h3-element. Hier is h3-element gebruikt voor styling om deze alinea groter lettertype te geven. Een blinde gebruiker genereert een lijst met koppen om de inhoud van de pagina te scannen. Als een hele alinea is opgemaakt als een kop, krijgt de gebruiker nog steeds geen overzicht. Gebruik CSS om deze tekst te stylen.

Hertoetsing: de alinea is niet meer opgemaakt als kop, maar met het strong-element. Het strong-element heeft een bepaalde semantische betekenis en mag alleen gebruikt worden om op enkele woorden of zinsdelen nadruk te leggen. Ook zijn de tussenkopjes van de stappen opgemaakt met het strong-element, in plaats van met een kop. Dit zouden in deze hiërarchie h4-kopjes moeten zijn.

Activiteit aanmelden 2

Op pagina "Activiteit aanmaken 2" is de eerste alinea opgemaakt met het em-element. Het em-element heeft een bepaalde semantische betekenis en mag alleen gebruikt worden om op enkele woorden of zinsdelen nadruk te leggen. Deze tekst wordt anders voorgelezen dan de rest. Gebruik CSS om de tekst opvallend te stylen.

Op pagina "Activiteit aanmaken 2" hebben de invoervelden en select-elementen zichtbare labels, maar deze labels zijn programmatisch niet gekoppeld aan de erbij behorende invoervelden. Dit is belangrijk voor gebruikers die afhankelijk zijn van hulpsoftware, omdat zij anders niet weten wat in deze velden moet worden ingevuld. Het koppelen kan door de tekstlabels in een label element te plaatsen en een for-attribuut bij het label element te plaatsen en deze te laten verwijzen naar een id attribuut bij het invoerveld waar het bij hoort. Een bijkomend voordeel van het koppelen van labels aan de invoervelden is het vergroten van de klikbare ruimte om het selectie-vakje te activeren. Hertoetsing: dit gaat nog steeds niet overal goed, zie bijvoorbeeld de foto-upload en de dagen van de week.

In dit formulier pagina "Activiteit aanmaken 2" staan groepen elementen in die programmatisch niet als groep zijn gecodeerd. Het gaat om de selectie-vakjes onder de vragen
(zie vorige bevinding), maar ook geldt dit voor kopjes waar de relatie met de onderliggende content niet duidelijk is. Zie bijvoorbeeld “Kies subrubriek(en)”. Dit label is niet gekoppeld aan de opties die verschijnen als een van de verplichte rubrieken in de vraag erboven wordt geselecteerd. De relatie tussen deze stukken content is niet programmatisch bepaald waardoor een blinde gebruiker niet weet wat deze elementen met elkaar te maken hebben. Deze groep moet ook in de code als groep gecodeerd zijn. Een groep interactieve elementen heeft een naam nodig. Een van de oplossingen is het gebruik van fieldset-element waarin het label met de vraag voor de naam zorgt.
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: Voldoende
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

Activiteit aanmelden 2

Uitkomst: Onvoldoende
Activiteit aanmelden 2

Hertoetsing: De data in de kalender hebben te laag contrast
(wit/oranje, 2.4:1). Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden.
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
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Activiteit aanmelden 2

Uitkomst: Onvoldoende
Activiteit aanmelden 2

Hertoetsing: Het invoerveld voor de beschrijving heeft te weinig contrast
(wit/lichtgrijs/lichtblauw). Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden.
1.4.12: Tekstafstand
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

In de header van de website staat een zoekbalk. De placeholder tekst op desktop is “doorzoek de hele sit”. De laatste letter is slecht deels zichtbaar. Wanneer de tekstafstanden uit dit succescriterium worden toegepast, blijft alleen “doorzoek de hel” over. Zie screenshot 7. De tekst is niet goed leesbaar. Dit kan worden opgelost door containers in de lay-out te laten meegroeien met de tekst.
1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Voldoende

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

Uitkomst: Voldoende
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: Voldoende
2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Onvoldoende

Activiteiten

Uitkomst: Onvoldoende
Activiteiten

Op pagina "Activiteiten" dienen de activiteiten als links om een pop-up te openen. Als een pop-up geopend is, verplaatst de focus zich niet naar de pop-up, maar blijft op de onderliggende pagina lopen. De gebruiker ziet niet waar de focus zich bevindt. Hierdoor kunnen links en andere interactieve elementen onbedoeld worden geactiveerd. Alleen interactieve elementen die in beeld zijn mogen focus ontvangen.

Hertoetsing: de focus verplaatst nu naar de popup, maar loopt daarna door op de onderliggende pagina. Zorg dat de focus alleen op de onderliggende pagina kan komen als de popup weer gesloten is.
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

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: 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: Voldoende
3.3.2: Labels of instructies
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

De zoekbalk bovenaan de pagina heeft geen zichtbaar label. Zie screenshot 8. Er is slechts een placeholdertekst aanwezig. De placeholdertekst kan niet als label dienen omdat het verdwijnt zodra de gebruiker begint met typen. Een invoerveld zonder zichtbare label kan meerdere groepen bezoekers verwarren, omdat ze niet begrijpen wat hier ingevuld moet worden.
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

Home

Uitkomst: Onvoldoende
Home

Op de homepagina komen parseproblemen voor doordat dubbele id’s zijn gebruikt. Het gaat om een id met de waarde “c53044”.
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende
Home

Hertoetsing: Op de homepagina onder de grote afbeelding staat en invoerveld om te zoeken. De input geeft niet aan hulpsoftware door dat er een lijst met suggesties is geopend. Dit kan worden gedaan door het aria-expanded-attribuut toe te voegen.
4.1.3: Statusberichten
Hele sample

Uitkomst: Voldoende

Sample met getoetste webpagina's

  1. Home - https://www.alsiklatergrootbeninalmere.nl/
  2. De Brievenbus - https://www.alsiklatergrootbeninalmere.nl/de-brievenbus
  3. Droomvideo's - https://www.alsiklatergrootbeninalmere.nl/droomvideos
  4. Organisaties - https://www.alsiklatergrootbeninalmere.nl/organisaties
  5. Hoe werkt het - https://www.alsiklatergrootbeninalmere.nl/hoe-werkt-het
  6. Veel gestelde vragen - https://www.alsiklatergrootbeninalmere.nl/veel-gestelde-vragen
  7. Help mee - https://www.alsiklatergrootbeninalmere.nl/help-mee
  8. Inloggen - https://www.alsiklatergrootbeninalmere.nl/inloggen
  9. Activiteiten - https://www.alsiklatergrootbeninalmere.nl/activiteiten
  10. Activiteit 1 Beroep voetballer (vervangende pagina) - https://www.alsiklatergrootbeninalmere.nl/activiteiten?tx_sfeventmgt_pievent%5Baction%5D=detail&tx_sfeventmgt_pievent%5Bcontroller%5D=Event&tx_sfeventmgt_pievent%5Bevent%5D=412&cHash=0e541600b967a02dc98feeacf10d5801
  11. Activiteit 2 KIDS/Junior Krav Maga (vervangende pagina) - https://www.alsiklatergrootbeninalmere.nl/activiteiten?tx_sfeventmgt_pievent%5Baction%5D=detail&tx_sfeventmgt_pievent%5Bcontroller%5D=Event&tx_sfeventmgt_pievent%5Bevent%5D=461&cHa
  12. Activiteit 3 Zomervakantie: TIO-Lympics stedenwijk (vervangende pagina) - https://www.alsiklatergrootbeninalmere.nl/activiteiten?tx_sfeventmgt_pievent%5Baction%5D=detail&tx_sfeventmgt_pievent%5Bcontroller%5D=Event&tx_sfeventmgt_pievent%5Bevent%5D=918&cHash=fe318cadeed5d84ffaec8194f469e0a2
  13. Activiteit 4 - https://www.alsiklatergrootbeninalmere.nl/activiteiten?tx_sfeventmgt_pievent%5Baction%5D=detail&tx_sfeventmgt_pievent%5Bcontroller%5D=Event&tx_sfeventmgt_pievent%5Bevent%5D=770&cHash=12e40871be155972b2ff2a904fc7ffea
  14. Activiteit 5 - https://www.alsiklatergrootbeninalmere.nl/activiteiten?tx_sfeventmgt_pievent%5Baction%5D=detail&tx_sfeventmgt_pievent%5Bcontroller%5D=Event&tx_sfeventmgt_pievent%5Bevent%5D=100&cHash=814099f50b5a2bf86d316ea72be7e170
  15. Activiteit aanmelden - https://www.alsiklatergrootbeninalmere.nl/activiteit-aanmelden?tx_sfeventmgt_pievent%5Baction%5D=edit&tx_sfeventmgt_pievent%5Bcontroller%5D=Event&tx_sfeventmgt_pievent%5Bevent%5D=925&cHash=29d532f11e49a49e3a22c21f45f8a5d0
  16. Activiteit aanmelden (overzicht) - https://www.alsiklatergrootbeninalmere.nl/activiteit-aanmelden
  17. Contact - https://www.alsiklatergrootbeninalmere.nl/contact
  18. Activiteit aanmelden 2 - https://www.alsiklatergrootbeninalmere.nl/activiteit-aanmelden?tx_sfeventmgt_pievent%5Baction%5D=new&tx_sfeventmgt_pievent%5Bcontroller%5D=Edit&cHash=96aabbd2c43897b0af282469eefeff64

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: