Onderzoek toegankelijkheid www.groningenfietsstad.nl
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
- Julia Zjochova
- Evaluatie opdrachtgever
- Gemeente Groningen
- Evaluatiedatum
- 9 juni 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 34 van de 55 criteria voor toegankelijkheid (30 van de verplichte 50 criteria). 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:
- Onjuiste of missende alt-teksten bij afbeeldingen
- Missende ondertiteling in video
- Missende audiodescriptie in video
- Onjuist opgemaakte koppen en lijsten
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij was er één bevinding.
Scope van de evaluatie
- Website naam
- https://www.groningenfietsstad.nl/
- Scope van de website
- Alle pagina's op https://www.groningenfietsstad.nl/.
- WCAG Versie
- 2.2
- Conformiteitsdoel
- AA
- Basisniveau van toegankelijkheid-ondersteuning
- Gangbare browsers en hulpapparatuur.
- Verdere onderzoeksvereisten
- Niet ingevuld
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA Success Criteria.
- 28 Voldoende
- 20 Onvoldoende
- 7 Niet van toepassing
- 0 Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.1.1: Niet-tekstuele content | Uitkomst: Onvoldoende | Bevindingen: Het logo bovenaan de pagina bevat tekst ‘050 Groningen fietsstad’. De alternatieve tekst is ‘Logo Groningen fietsstad’. Het woordje ‘050’ ontbreekt. Zorg ervoor dat alle tekst van het logo in de alternatieve tekst terugkomt. Zie https://www.groningenfietsstad.nl/. Een functionele afbeelding moet een tekstalternatief hebben dat uniek is en de afbeelding of de functie van de afbeelding beschrijft. Als alle pagina's op een klein scherm worden weergegeven, verschijnt er bovenaan een hamburger-menuknop, weergegeven door een pictogram met drie horizontale lijnen. De alternatieve tekst voor dit pictogram is 'Open'. Deze tekst beschrijft de functie van de afbeelding niet goed. Een meer geschikte alternatieve tekst zou zijn "Menu openen". Wanneer op deze knop wordt geklikt, verandert het pictogram in een kruis. De alternatieve tekst blijft echter ongewijzigd. Het is belangrijk om de alternatieve tekst bij te werken om de nieuwe functie van de knop nauwkeurig te beschrijven. In dit geval zou "Menu sluiten" geschikter zijn. https://www.groningenfietsstad.nl/ Op de homepagina worden naast het kopje "Groningen Fietsstad op Instagram" verschillende afbeeldingen getoond. Deze afbeeldingen zijn informatief, omdat ze als links fungeren naar verschillende bronnen. Momenteel hebben deze afbeeldingen lege alt-attributen. Het is noodzakelijk om alternatieve tekst te voorzien voor deze afbeeldingen. Als een informatieve afbeelding wordt toegevoegd via een img-element, mag het alt-attribuut niet leeg zijn. Deze lege links worden onder succescriterium 2.4.4 genoemd. https://www.groningenfietsstad.nl/ Op de homepagina worden naast het kopje "Groningen Fietsstad op Instagram" verschillende afbeeldingen getoond. Wanneer op deze afbeeldingen wordt gefocust, verschijnen er pictogrammen die "reacties" en "vind ik leuk" aangeven. Deze pictogrammen zijn verborgen voor schermlezers met aria-hidden="true". Schermlezers negeren inhoud met het attribuut role="presentation" of aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Omdat deze pictogrammen de categorieën |
1.2 Op tijd gebaseerde media
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen) | Uitkomst: Niet van toepassing | |
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen) | Uitkomst: Onvoldoende | Bevindingen: Een video met gesproken woord |
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen) | Uitkomst: Onvoldoende | Bevindingen: Wanner in de video tekst, logo’s of andere visuele informatie in beeld komt, kunnen mensen die blind zijn k deze informatie niet zien. Hiervoor is dus een audiodescriptie nodig die deze informatie doorgeeft aan een bezoeker met visuele beperkingen. Dat kan bijvoorbeeld door dezelfde voice-over die tijdens de video zelf al aan het woord is, of door een aparte voice-over. Als alternatief mag voor dit niveau A ook een volledig uitgeschreven tekst worden geboden waarin deze informatie wordt opgenomen. Deze ontbreekt echter ook. Dit is overigens geen oplossing meer voor niveau AA |
1.2.4: Ondertitels voor doven en slechthorenden (live) | Uitkomst: Niet van toepassing | |
1.2.5: Audiodescriptie (vooraf opgenomen) | Uitkomst: Onvoldoende | Bevindingen: Een video kan tekst of logo's bevatten die een blinde bezoeker niet kan zien. Deze informatie moet toegankelijk worden gemaakt. Volgens dit succescriterium is een audiobeschrijving van de visuele inhoud vereist. Voeg de audiodescriptie op de plekken toe waar daar ruimte voor is. Dit kan aan het begin en op het einde van de video. Zie bevindingen onder succescriterium 1.2.3. Op de homepagina staan video's waar op verschillende momenten tekst verschijnt. Bijvoorbeeld, in de video bij het kopje "Alle richtingen tegelijk groen" verschijnt tekst rond 00:12 en 01:48. Er is echter geen audiobeschrijving bij deze informatie. In de video bij het kopje "Groningen Fietsstad," wordt alle informatie gepresenteerd door middel van tekst en afbeeldingen, zonder audiobeschrijving. https://www.groningenfietsstad.nl/ https://www.groningenfietsstad.nl/over-ons/alle-richtingen-tegelijk-groen |
1.3 Aanpasbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.3.1: Info en relaties | Uitkomst: Onvoldoende | Bevindingen: Het strong-element heeft een semantische betekenis en mag alleen worden gebruikt om inhoud te benadrukken. Dit element mag niet worden gebruikt voor visuele presentatie om tekst vet te laten lijken. Gebruik in plaats daarvan CSS. Op de pagina "Zoeken" wordt het strong-element gebruikt voor de zoekterm "fiets" in de tekst "U hebt gezocht op "fiets", dit leverde de volgende resultaten op" onder het zoekveld. https://www.groningenfietsstad.nl/zoeken?q=fiets Op de pagina "Fietsstrategie" is de eerste paragraaf opgemaakt met een strong-element. Gebruik CSS om een introtekst in een vetgedrukt weer te geven. https://www.groningenfietsstad.nl/fietsstrategie Op de pagina "T-shirt Groningen Fietsstad" is het kopje "Beschikbare kleuren" gemarkeerd met een strong-element. Het strong-element heeft een specifieke semantische betekenis en mag niet worden gebruikt als alternatief voor koppen. Verwijder dit element. De juiste HTML-elementen Tekst die eruitziet en functioneert als een kop, maar niet als zodanig is opgemaakt, is ontoegankelijk voor blinde bezoekers. Koppen kunnen worden gebruikt om de inhoud van de pagina te scannen of om naar een sectie te navigeren. Koppen die niet als zodanig zijn opgemaakt, kunnen niet voor deze doeleinden worden gebruikt. Een ander probleem is de structuur en hiërarchie van de informatie. Wanneer tekst alleen visueel als een kop verschijnt, verschilt de structuur van de informatie in de HTML van de zichtbare structuur. De juiste HTML-elementen Op pagina https://www.groningenfietsstad.nl/fietsparkeren staan kopjes “Binnenstad”, “Stations” en meer. Onder deze kopjes staat geen inhoud. Er zijn verborgen teksten aanwezig, bijvoorbeeld “Meer informatie over binnenstad” en dat zorgt ervoor dat het kopje “Binnenstad” als een koptekst mocht worden opgemaakt. Echter, deze secties konden simpeler worden gemaakt door het h-element en de verborgen tekst te verwijderen. De tekst “Binnenstad” kan dan een link worden. Dit komt op meerdere pagina’s voor. Op pagina https://www.groningenfietsstad.nl/webshop/t-shirts/t-shirt-groningen-fietsstad-heren staat een prijs. Deze tekst is opgemaakt als een kop Op de pagina "Fietsstrategie" staat een lijst met vijf items. De juiste opmaak ontbreekt. Inhoud die wordt weergegeven als een lijst moet als zodanig worden gemarkeerd om een blinde bezoeker dezelfde informatiestructuur te bieden als op de pagina te zien is. Een ander voordeel van het gebruik van een lijst is dat de schermlezer het aantal items aankondigt voordat ze worden voorgelezen. Zo weet een blinde bezoeker hoeveel informatie er volgt. https://www.groningenfietsstad.nl/fietsstrategie Op de homepagina worden naast het kopje "Groningen Fietsstad op Instagram" verschillende foto's getoond. Wanneer op deze foto's wordt gefocust, verschijnen er icoontjes die "reacties" en "likes" aangeven. Dit is informatieve inhoud, maar deze pictogrammen hebben het attribuut aria-hidden="true", waardoor de informatieve inhoud niet toegankelijk is voor ondersteunende technologie. Omdat deze pictogrammen het aantal opmerkingen en 'vind ik leuk'-pictogrammen aangeven, mogen ze niet worden verborgen. Anders blijven alleen de getallen staan, wat onduidelijk is voor bezoekers die afhankelijk zijn van schermlezers of gebruikers die CSS-stijlen uitschakelen. https://www.groningenfietsstad.nl/ De pdf-documenten hebben geen codes en daardoor is voor hulpsoftware |
1.3.2: Betekenisvolle volgorde | Uitkomst: Voldoende | |
1.3.3: Zintuiglijke eigenschappen | Uitkomst: Voldoende | |
1.3.4: Weergavestand | Uitkomst: Voldoende | |
1.3.5: Identificeer het doel van de input | Uitkomst: Onvoldoende | Bevindingen: Wanneer in een formulier persoonlijke gegevens ingevuld moeten worden, waaronder een achternaam, e-mailadres en telefoonnummer, moet een autocomplete attribuut aanwezig zijn bij deze input-elementen. Dit zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Dit kan door bijvoorbeeld de invoervelden al automatisch in te vullen. Het autocomplete attribuut ontbreekt op dit moment bij deze invoervelden. Bij het invoerveld voor een e-mailadres moet bijvoorbeeld autocomplete=”email” gebruikt worden. Op de volgende pagina is meer informatie te vinden over de toepassing van dit attribuut en welke waardes verplicht zijn om te gebruiken. Zie: https://www.w3.org/TR/WCAG21/#input-purposes. Op de pagina "T-shirt Groningen Fietsstad" en "Contact" staat een formulier met invoervelden waarin persoonlijke gegevens worden verzameld. Het attribuut autocomplete ontbreekt. https://www.groningenfietsstad.nl/webshop/t-shirts/t-shirt-groningen-fietsstad-heren https://www.groningenfietsstad.nl/contact/ |
1.4 Onderscheidbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
1.4.1: Gebruik van kleur | Uitkomst: Onvoldoende | Bevindingen: In het PDF-document Uitvoeringsprogramma 2019-2022 op pagina 19 wordt gele en groene kleur gebruikt om informatie te geven. In de tabel op pagina 20 hebben sommige rijen een groene of een gele achtergrond om aan te geven tot welke categorie ze horen. Een bezoeker die de kleuren niet kan onderscheiden, heeft geen toegang tot deze informatie. Gebruik een andere visuele clue om deze informatie te geven. |
1.4.2: Geluidsbediening | Uitkomst: Niet van toepassing | |
1.4.3: Contrast (minimum) | Uitkomst: Onvoldoende | Bevindingen: Op de homepage staat een link met 'Nieuws' boven een foto. Deze linktekst wordt op focus zwart op een zwarte Op de pagina "Contact" staat een kruimelpad. De tekst van de kruimelpad links, zoals "Home" en "Contact", is grijs Op de pagina "Contact" staat een formulier. Als het formulier wordt verzonden met ongeldige gegevens, verschijnen de foutmeldingen. De tekstkleur is rood In het PDF-document "Uitvoeringsprogramma 2019-2022," staat op pagina 1 een kopje met de tekst "UITVOERINGSPROGRAMMA." De tekst is wit en staat op een foto waarin witte vlekken voorkomen, waardoor de contrastverhouding 1:1 is. Voor deze grote tekst moet de contrastverhouding minstens 3,0:1 zijn om leesbaarheid en toegankelijkheid te garanderen. |
1.4.4: Herschalen van tekst | Uitkomst: Voldoende | |
1.4.5: Afbeeldingen van tekst | Uitkomst: Voldoende | |
1.4.10: Reflow | Uitkomst: Voldoende | |
1.4.11: Contrast van niet-tekstuele content | Uitkomst: Onvoldoende | Bevindingen: Op de pagina "T-shirt Groningen Fietsstad" staat een formulier. De randkleur van de invoervelden is grijs. In combinatie met de witte achtergrond van de pagina is het kleurcontrast 1,7:1. Ook het keuzevakje in CAPTCHA heeft onvoldoende kleurcontrast. De rand van dit selectievakje is grijs Het volgende wordt niet afgekeurd, toch kan het de toegankelijkheid van de pagina verbeteren. Wanneer de website op een klein scherm bekeken wordt, staat in de header een menuknop. Deze knop opent een zijpanel waarin een zoekveld geen rand heeft. Het verschil tussen de achtergrondkleur van het zoekveld en de pagina resulteert in de contrastverhouding van 1,3:1. Dit moet minimaal 3,0:1 zijn. Deze bevinding wordt niet afgekeurd omdat de placeholder tekst genoeg contrast heeft. Echter, de placeholdertekst verdwijnt wanneer de bezoeker begint te typen. Maak dit invoerveld toegankelijker door een donkere rand aan te bieden. |
1.4.12: Tekstafstand | Uitkomst: Onvoldoende | Bevindingen: De stijlkenmerken zoals in dit succescriterium zijn beschreven, zijn van belang voor bijvoorbeeld mensen met dyslexie. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit. Als bezoekers op alle pagina's van de site tekstafstand vergroten zoals beschreven in dit succescriterium, verdwijnen de zoekknop en een deel van de tekst "Algemene voorwaarden" in de header. Zorg ervoor dat de tekst zichtbaar blijft. https://www.groningenfietsstad.nl/ |
1.4.13: Content bij hover of focus | Uitkomst: Onvoldoende | Bevindingen: Wanneer een bezoeker met de muis over het hoofdmenu beweegt, verschijnt er aanvullende content. Deze extra content bedekt informatie die op de pagina staat. Zie bijvoorbeeld de links "Fietsstrategie", "Webshop" en "Over ons". De bezoeker moet in staat zijn om deze aanvullende content te sluiten zonder de muis te verplaatsen of de toetsenbordfocus te wijzigen, bijvoorbeeld door gebruik te maken van de Escape-toets. Hierdoor kan de gebruiker gemakkelijk en efficiënt de aanvullende content verbergen en de focus behouden op de relevante delen van de pagina. https://www.groningenfietsstad.nl/ |
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.1.1: Toetsenbord | Uitkomst: Voldoende | |
2.1.2: Geen toetsenbordval | Uitkomst: Voldoende | |
2.1.4: Enkel teken sneltoetsen | Uitkomst: Onvoldoende | Bevindingen: Binnen deze videospelers is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Bij de Youtube video’s kan de ’k’ gebruikt worden om de video te starten dan wel te stoppen en de ’m’ om het geluid uit te zetten. Deze sneltoetsen mogen alleen actief zijn als de focus op de betreffende knop staat. 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. Bij de YouTube videospeler kan dit eventueel opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML code. Zie ook de Engelstalige pagina https://developers.google.com/youtube/player_parameters#disablekb . Op de pagina "Home" staat naast het kopje "Groningen Fietsstad" een Youtube video. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken. https://www.groningenfietsstad.nl/ In de Vimeo video’s kan de ’s’ gebruikt worden om de video te delen en de ’d’ om de technische gegevens van de video te bekijken. Ook andere sneltoetsen kunnen actief zijn. Deze sneltoetsen zitten de werking van een voorleessoftware in de weg. 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. Bij deze Vimeo-videospeler kan dit opgelost worden door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. De bediening met deze toetsen wordt dan uitgeschakeld, maar het is dan nog wel mogelijk om de video te bedienen met het toetsenbord. Zie ook de Engelstalige pagina https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters. Op de pagina "Home" staan twee Vimeo video's naast het kopje "Alle richtingen tegelijk groen," en "Fietsles". Binnen deze videospeler is het mogelijk om sneltoetsen met één letter te gebruiken. https://www.groningenfietsstad.nl/ https://www.groningenfietsstad.nl/over-ons/alle-richtingen-tegelijk-groen |
2.2 Genoeg tijd
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.2.1: Timing aanpasbaar | Uitkomst: Voldoende | |
2.2.2: Pauzeren, stoppen, verbergen | Uitkomst: Voldoende |
2.3 Toevallen en fysieke reacties
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.3.1: Drie flitsen of beneden drempelwaarde | Uitkomst: Voldoende |
2.4 Navigeerbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.4.1: Blokken omzeilen | Uitkomst: Voldoende | |
2.4.2: Paginatitel | Uitkomst: Onvoldoende | Bevindingen: Een PDF-document dient een titel te hebben die een korte beschrijving van de inhoud van het bestand bevat. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Dit kan worden ingesteld via de bestandseigenschappen. Hier moet ook worden ingesteld dat de titel wordt getoond in de titelbalk en niet de bestandsnaam, zoals nu het geval is. Het PDF-document "Fietsfolder november 2019, Engelse versie" heeft geen titel. |
2.4.3: Focus volgorde | Uitkomst: Onvoldoende | Bevindingen: Wanneer de website wordt bekeken op een klein scherm, verschijnt er een menuknop in de rechterbovenhoek van elke pagina. Deze knop activeert een zijpaneel met het mobiele menu. Echter, na het navigeren door het laatste item van dit menu, verplaatst de focus zich naar interactieve elementen op de pagina, in plaats van binnen het mobiele menu te blijven totdat de gebruiker het sluit. Dit is niet in lijn met een logische focusvolgorde, wat de navigatie voor gebruikers met beperkte mobiliteit kan bemoeilijken. https://www.groningenfietsstad.nl/ |
2.4.4: Linkdoel (in context) | Uitkomst: Onvoldoende | Bevindingen: Op de homepagina worden naast het kopje "Groningen Fietsstad op Instagram" verschillende afbeeldingen getoond. Deze afbeeldingen fungeren als links, maar hebben geen toegankelijke naam, waardoor hun doel onduidelijk is voor blinde of slechtziende bezoekers die afhankelijk zijn van schermlezers. Om dit probleem aan te pakken, moet een toegankelijke naam worden geven die duidelijk het doel van elke link beschrijft. https://www.groningenfietsstad.nl/ Linkteksten die kort zijn en niet goed beschrijven waar de link naartoe leidt, helpen bezoekers die schermlezers gebruiken niet om te begrijpen wat het doel of de bestemming van de link is. Een blinde bezoeker genereert lijsten met links om zo de inhoud van de pagina te scannen. Linkteksten die dezelfde tekst binnen een pagina bevatten of nietszeggend zijn, zoals "lees meer", helpen niet om te begrijpen waar de pagina over gaat. Op de homepagina, onder het kopje "Wethouder Philip Broeksma: 'Groningen is een gemeente waar ontzettend veel gefietst wordt'," staat een link met de tekst 'Lees meer'. Ook onder het kopje "Alle richtingen tegelijk groen" staat een link met de tekst 'Lees verder'. https://www.groningenfietsstad.nl/ Wanneer links naar verschillende bestemmingen verwijzen en binnen een pagina staan, mag de linktekst niet dezelfde zijn. Linkteksten die dezelfde tekst binnen een pagina bevatten maken het linkdoel niet duidelijk. Op de pagina "Zoeken" staan meerdere links met dezelfde tekst "Download bestand". Er is een title-attribuut gebruikt om deze links unieke content te geven, maar dit attribuut wordt niet door alle hulpsoftware ondersteund. Een betere oplossing is het gebruik van een verborgen tekst. https://www.groningenfietsstad.nl/zoeken?q=fiets |
2.4.5: Meerdere manieren | Uitkomst: Voldoende | |
2.4.6: Koppen en labels | Uitkomst: Onvoldoende | Bevindingen: Als alle pagina's op een klein scherm worden weergegeven, verschijnt bovenaan een hamburger-menuknop, weergegeven door een pictogram met drie horizontale lijnen. Deze knop heeft een toegankelijke naam "Open", die niet duidelijk aangeeft wat er geopend wordt, in dit geval het menu. De tekst op een knop moet de functie nauwkeurig beschrijven om duidelijkheid te verschaffen en de gebruikerservaring te verbeteren. Een meer geschikte toegankelijke naam zou "Menu openen" zijn. Wanneer het menu geopend is, dient de naam te veranderen in “Menu sluiten”. In het mobiele menu staan knoppen om de submenu’s van een lager niveau te openen. Al deze knoppen hebben dezelfde naam “Toggle menu”. Zorg voor unieke namen zodat het duidelijk wordt, welk onderdeel elke knop opent. https://www.groningenfietsstad.nl/ Op de homepagina wordt er gebruik gemaakt van koppen welke geen duidelijk doel beschrijven van de content die volgt. Teksten zoals 'Snel naar', 'Direct naar', 'Ga naar' beschrijven niet het doel omdat alle links in principe snel naar een andere pagina gaan. Gebruikers met screenreaders gebruiken koppen om de structuur van de pagina te scannen en gemakkelijk content te vinden, daarbij is het belangrijk dat de koppen afdoende beschrijvend zijn, zodat ze weten welke content er volgt. Zie de kop “Ga direct naar” onder het logo. Een iframe heeft een goede beschrijving nodig. Dit kan worden gegeven in het title-attribuut van het iframe. Deze titel moet het type inhoud in het iframe beschrijven en een unieke beschrijving van de inhoud geven. Deze tekst zal een blinde bezoeker helpen beslissen of de inhoud van het iframe de moeite waard is om te openen. Op de homepagina staan video's waar het titelattribuut op het iframe ontbreekt. Bijvoorbeeld, in de video naast de kop "Alle richtingen tegelijk groen," en de video bij de kop "Fietsles". De iframes moeten worden voorzien van een titelattribuut dat het woord "video" plus de titel van de video bevat om gebruikers een betere context te bieden. https://www.groningenfietsstad.nl/ https://www.groningenfietsstad.nl/over-ons/alle-richtingen-tegelijk-groen |
2.4.7: Focus zichtbaar | Uitkomst: Voldoende | |
2.4.11: Focus Not Obscured (Minimum) | Uitkomst: Onvoldoende | Bevindingen: Op alle pagina's staat een navigatiemenu met links die submenu's kunnen openen, zoals "Fietsstrategie", "Webshop" en "Over ons". Wanneer een bezoeker navigeert met het toetsenbord en een submenu “Over ons” opent, blijft het submenu open staan. De bezoeker navigeert verder en komt in een situatie waarin een van de video’s onder dit submenu komt te staan. De focus landt op de knoppen in de video die op dat moment niet zichtbaar zijn onder het submenu. Elementen die focus krijgen mogen niet verborgen zijn. https://www.groningenfietsstad.nl/ |
2.5 Input Modaliteiten
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
2.5.1: Aanwijzergebaren | Uitkomst: Niet van toepassing | |
2.5.2: Aanwijzerannulering | Uitkomst: Voldoende | |
2.5.3: Label in naam | Uitkomst: Onvoldoende | Bevindingen: In de header van de website staat een knop met een vergrootglas. Deze knop opent een zoekveld. De placeholdertekst is “Zoeken”. De toegankelijkheidsnaam van dit invoerveld is “Doorzoek de website”. Omdat deze teksten verschillen is dit zoekveld niet met stem te bedienen. Zie https://www.groningenfietsstad.nl/. |
2.5.4: Bewegingsactivering | Uitkomst: Niet van toepassing | |
2.5.7: Dragging Movements | Uitkomst: Niet van toepassing | |
2.5.8: Target Size (Minimum) | Uitkomst: Voldoende |
3 Begrijpelijk
3.1 Leesbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.1.1: Taal van de pagina | Uitkomst: Onvoldoende | Bevindingen: In de meta data van de PDF-documenten “Uitvoeringsprogramma 2019-2022” en “Fietsfolder november 2019, Engelse versie” is de taal niet ingesteld. De taal hoort ingesteld te worden, zodat hulpsoftware de informatie uit het bestand in de correcte taal kan overdragen aan de bezoeker. Dit kan worden ingesteld via de bestandseigenschappen. |
3.1.2: Taal van onderdelen | Uitkomst: Voldoende |
3.2 Voorspelbaar
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.2.1: Bij focus | Uitkomst: Voldoende | |
3.2.2: Bij input | Uitkomst: Voldoende | |
3.2.3: Consistente navigatie | Uitkomst: Voldoende | |
3.2.4: Consistente identificatie | Uitkomst: Onvoldoende | Bevindingen: Het invoerveld voor het e-mailadres heeft als label “Emailadres” op pagina https://www.groningenfietsstad.nl/contact en “Mailadres” op pagina https://www.groningenfietsstad.nl/webshop/t-shirts/t-shirt-groningen-fietsstad-heren. De invoervelden die herhaaldelijk voorkomen binnen een verzameling van de webpagina’s en identieke functies binnen deze webpagina’s hebben, moeten dezelfde labels hebben. Dit helpt bezoekers met cognitieve beperkingen deze invoervelden makkelijker te gebruiken. |
3.2.6: Consistent Help | Uitkomst: Voldoende |
3.3 Assistentie bij invoer
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
3.3.1: Foutidentificatie | Uitkomst: Voldoende | |
3.3.2: Labels of instructies | Uitkomst: Voldoende | |
3.3.3: Foutsuggestie | Uitkomst: Voldoende | |
3.3.4: Foutpreventie (wettelijk, financieel, gegevens | Uitkomst: Niet van toepassing | |
3.3.7: Redundant Entry | Uitkomst: Voldoende | |
3.3.8: Accessible Authentication (Minimum) | Uitkomst: Voldoende |
4 Robuust
4.1 Compatibel
Success Criterium | Uitkomst | Bevindingen |
---|---|---|
4.1.2: Naam, rol, waarde | Uitkomst: Onvoldoende | Bevindingen: Op de homepagina worden naast het kopje "Groningen Fietsstad op Instagram" verschillende afbeeldingen getoond. Deze afbeeldingen fungeren als links, maar hebben geen toegankelijke naam, waardoor ze ontoegankelijk zijn voor blinde of slechtziende bezoekers die afhankelijk zijn van schermlezers. Om dit probleem aan te pakken, moet een toegankelijke naam worden geven die duidelijk het doel van elke link beschrijft. https://www.groningenfietsstad.nl/ Een iframe moet een toegankelijke naam hebben. Een bezoeker die een schermlezer gebruikt, moet deze naam horen om te begrijpen wat er in het iframe staat. Dit kan worden gedaan via een title-attribuut op het iframe. Het title-attribuut moet unieke en betekenisvolle tekst bevatten die de inhoud en het inhoudstype beschrijft. Op de homepagina staan verschillende video's in iframes. De toegankelijke namen zijn leeg. Bijvoorbeeld, in het iframe van de video naast de kop "Alle richtingen tegelijk groen," en de video bij de kop "Fietsles". https://www.groningenfietsstad.nl/ https://www.groningenfietsstad.nl/over-ons/alle-richtingen-tegelijk-groen |
4.1.3: Statusberichten | Uitkomst: Voldoende |
Sample met getoetste webpagina's
- Homepagina - https://www.groningenfietsstad.nl/
- Contact - https://www.groningenfietsstad.nl/contact/
- Zoekresultaten - https://www.groningenfietsstad.nl/zoeken?q=fiets
- Nieuws - https://www.groningenfietsstad.nl/nieuws
- Fietsparkeren - https://www.groningenfietsstad.nl/fietsparkeren
- Fietsstrategie - https://www.groningenfietsstad.nl/fietsstrategie
- Webshop - https://www.groningenfietsstad.nl/webshop
- T-shirt Groningen Fietsstad - https://www.groningenfietsstad.nl/webshop/t-shirts/t-shirt-groningen-fietsstad-heren
- Over ons - https://www.groningenfietsstad.nl/over-ons
- Alle richtingen tegelijk groen - https://www.groningenfietsstad.nl/over-ons/alle-richtingen-tegelijk-groen
- Sitemap - https://www.groningenfietsstad.nl/sitemap
- Algemene voorwaarden - https://www.groningenfietsstad.nl/algemene-voorwaarden-2
- PDF: Uitvoeringsprogramma 2019-2022 - https://www.groningenfietsstad.nl/contact/download-pers/$171/$173
- Download / pers - https://www.groningenfietsstad.nl/contact/download-pers
- PDF: Fietsfolder november 2019, Engelse versie - https://www.groningenfietsstad.nl/contact/download-pers/$171/$699
Webtechnologie
HTML,CSS,WAI-ARIA,JavaScript,SVG,PDF
Onderbouwing van de evaluatie
Google Chrome, versie 125 (primair) Mozilla Firefox, versie 125 Microsoft Edge, versie 125 Adobe Acrobat Pro PDF Accessibility Checker (PAC) NVDA in combinatie met Mozilla Firefox VoiceOver in combinatie met Apple Safari