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
10 oktober 2024
Managementsamenvatting
Dit rapport bevat het deelonderzoek content. In combinatie met een deelonderzoek techniek vormt dit een volledig toegankelijkheidsonderzoek van de website. Uit dit onderzoek blijkt dat wordt voldaan aan 17 van de 27 content-specifieke 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 links een duidelijk doel hebben en dat de webpagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Onjuist opgemaakte koppen
Te laag contrast van tekst
Scope van de evaluatie
Website naam
sportsupport.almere.nl
Scope van de website
Alle pagina's op https://sportsupport.almere.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 27 van 50 WCAG 2.1 AA
Success Criteria.
14Voldoende
10Onvoldoende
3Niet van toepassing
23Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Clubondersteuning
Uitkomst: Onvoldoende
Almere Kenniscentrum Talent
Uitkomst: Onvoldoende
Buurtsportteam Almere
Uitkomst: Onvoldoende
Sportakkoord deelnemers
Uitkomst: Onvoldoende
PDF sportvisie
Uitkomst: Onvoldoende
Clubondersteuning
Onderaan de pagina staan foto’s van medewerkers. Deze foto’s hebben een lege alt-tekst. Portretfoto’s zijn echter niet decoratief (ze hebben een functie) en moeten daarom altijd een beschrijving hebben van de persoon op de foto.
Almere Kenniscentrum Talent
Op de pagina staat een afbeelding met informatie over de pijlers van AKT. Deze afbeelding heeft een lege alt-tekst, maar is niet decoratief. Zorg dat deze informatie ook in tekst beschikbaar is. Dit kan door de gehele beschrijving in de alt-tekst te zetten of (bij voorkeur) in een caption die zichtbaar is onder de afbeelding.
Buurtsportteam Almere
Onderaan de pagina staan foto’s van medewerkers. Een deel van deze foto’s heeft een lege alt-tekst. Van sommige afdelingen worden in de tekst wel namen genoemd, maar bij de foto’s niet. Het is nu niet duidelijk welke personen waar staan afgebeeld. Zie screenshot 1.
Sportakkoord deelnemers
Op de pagina staat de volgende h3-kop: ‘De volgende partijen hebben zich aangesloten bij het Lokaal Sportakkoord:’ met daarna een reeks logo’s met een lege alt-tekst. Hierdoor is het voor screenreader gebruikers niet duidelijk om welke partijen het gaat. Voeg voor elk logo een beschrijving toe.
PDF sportvisie
Op pagina 22 staat een infographic. Deze heeft geen alternatieve tekst. Screenreader gebruikers missen deze informatie nu.
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
ASM (video)
Uitkomst: Onvoldoende
ASM (video)
In de video mist een goede ondertiteling. De (Nederlandse) automatisch gegenereerde ondertiteling klopt niet overal. Voeg een correcte Nederlandse ondertiteling toe.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Kennis, talent en opleidingen (video)
Uitkomst: Onvoldoende
ASM (video)
Uitkomst: Onvoldoende
Kennis, talent en opleidingen (video)
Er komen allerlei activiteiten in beeld die niet worden genoemd. Voor mensen die de video niet kunnen zien, is het daardoor niet duidelijk wat er gebeurt. Voeg hiervoor audiodescriptie toe of een transcript. Opmerking: de muziek is harder dan de voice over, waardoor het voor sommige mensen lastig kan zijn om te tekst goed te verstaan.
ASM (video)
Er komt informatie in beeld die niet wordt uitgesproken, zoals slogans en namen en functies van sprekers. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve (extended) audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven transcript onder de video. (Extended audiodescriptie is nodig als de informatie zo snel achter elkaar volgt dat er niet voldoende pauzes zijn in de bestaande video om de audiodescriptie toe te voegen. Dan moet de video op verschillende plekken stopgezet worden. Dit is AAA-niveau. Een transcript is hier daarom wellicht een betere optie.)
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
Clubondersteuning
Uitkomst: Onvoldoende
ASM (video)
Uitkomst: Onvoldoende
Sportaccomodatie huren (tabel)
Uitkomst: Onvoldoende
Buurtsportteam Almere
Uitkomst: Onvoldoende
Rolstoelbasketbal
Uitkomst: Onvoldoende
Sportakkoord deelnemers
Uitkomst: Onvoldoende
PDF aanvraagformulier sportaccomodaties
Uitkomst: Onvoldoende
Clubondersteuning
De koppenstructuur is niet helemaal logisch opgebouwd. Onder de h2-kop ‘Ondersteuning ondernemende sportaanbieders’ staan kopjes met namen van ondersteuners. Deze hebben ook h2-niveau, maar zouden een niveau lager moeten staan. De uitklapbare kopjes daarboven lijken ook een niveau lager te horen staan dan de h2-kop ‘De gemeente Almere kan jouw club helpen’. Zie screenshot 2.
ASM (video)
Onder de video staat visueel een lijst met gegevens. In de code zijn dit allemaal paragrafen. Dit zou beter opgemaakt kunnen worden als een ongenummerde lijst of een definitielijst. Zie screenshot 3.
Sportaccomodatie huren (tabel)
De koppenstructuur is niet helemaal logisch opgebouwd. Onder de h2-kop ‘In de verhuur’ staan kopjes met soorten accomodaties. Deze hebben ook h2-niveau, maar zouden een niveau lager moeten staan. (De kopjes van de locaties daar onder worden dan ook een niveau lager).
Buurtsportteam Almere
De koppenstructuur is niet helemaal logisch opgebouwd. Onder de h2-kop ‘Buurtsportcoaches’ staan de kopjes van de stadsdelen. Deze hebben ook h2-niveau, maar zouden een niveau lager moeten staan. NB: technisch gezien zijn dit geen koppen, want er volgt geen content achter. Wanneer de foto’s alt-teksten hebben staat er wel content voor, maar die hoort dan in de code achter de kop te staan (dit valt onder Succescriterium 1.3.2 Betekenisvolle volgorde binnen een technisch onderzoek).
Rolstoelbasketbal
De eerste paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen.
Sportakkoord deelnemers
De koppenstructuur is niet helemaal logisch opgebouwd. Na de h2-kop ‘Ervaringen van ondernemers’ volgt meteen weer een h2-kop. De kop ‘De volgende partijen hebben zich aangesloten bij het Lokaal Sportakkoord:’ valt als h3-kop nu onder ‘Ingmar van Duijn’, maar lijkt op zichzelf te staan. Deze moet dan h2-niveau hebben.
PDF aanvraagformulier sportaccomodaties
De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Onvoldoende
PDF sportvisie
Uitkomst: Onvoldoende
PDF sportvisie
De bronvolgorde is niet overal gelijk aan de visuele volgorde, wat soms verwarrend is. Zo staat de h1-kop ‘Voorwoord’ op pagina 2 visueel boven de tekst, maar in de code helemaal onderaan de tekst. Op pagina 5 onderaan staan visueel drie h3-kopjes met daaronder een paragraaf tekst. In de code staan echter alle drie paragrafen onder de eerste kop, en volgt er na de twee laatste kopjes geen content. Deze bevinding komt op meer pagina’s voor.
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Niet getoetst
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Niet getoetst
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 getoetst
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Nieuwsbrief
Uitkomst: Onvoldoende
PDF sportvisie
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.
Nieuwsbrief
De knop om je aan te melden (wit/grijs, 2.32:1). De tekst van de asterisk en de foutmelding (rood, 3.47:1). De tekst van de bevestiging (groen, 3.83:1). Zie screenshot 4.
PDF sportvisie
Witte teksten op lichtblauwe achtergrond (2.5:1), bijvoorbeeld op pagina 4 en pagina 25, en omgekeerd citaten en cijfers zoals op pagina 22.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Niet getoetst
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Niet getoetst
1.4.11: Contrast van niet-tekstuele content
Hele sample
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.
De knop om te zoeken in de header (turkoois op lichtblauw, 2.8:1). NB: Je kunt ook zoeken d.m.v. de enter toets, maar niet alle gebruikers weten dit. Ook dient de knop met de loep als zichtbaar label wanneer de focus in het tekstveld staat en de placeholder niet meer zichtbaar is.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Niet getoetst
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Niet getoetst
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Niet getoetst
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Niet getoetst
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 getoetst
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Niet getoetst
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample
Uitkomst: Onvoldoende
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 aanvraagformulier sportaccomodaties
Uitkomst: Onvoldoende
PDF aanvraagformulier sportaccomodaties
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: Niet getoetst
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: Niet getoetst
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet getoetst
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Niet getoetst
2.5.3: Label in naam
Hele sample
Uitkomst: Voldoende
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet getoetst
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
Nieuwsbrief
Uitkomst: Onvoldoende
Nieuwsbrief
De foutmeldingen staan in het Engels, maar dit is niet in de code aangegeven. Screenreaders kunnen hierdoor niet de juiste taal bepalen en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse tekst aan met het attribuut lang="en" op het betreffende element of zet deze meldingen in het Nederlands.
