Rapport:
Audit digitale toegankelijkheid website Visit Amstelveen
- Onderzoeker
- Yulia Valencia van Swink; Jules Ernst van 200 OK
- Datum
- 30 juni 2021
- Opdrachtgever
- Gemeente Amstelveen, René Buitenhuis
Samenvatting onderzoeksresultaat
De website Website Visit Amstelveen voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 26 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.
De website visitamstelveen.nl is onderzocht tussen 16 en 30 juni 2021. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Doel van dit rapport is om de vervolgstappen te bepalen om tot een toegankelijke website te komen.
Het onderzoek richt zich specifiek op de toegankelijkheid van de website voor mensen met een functiebeperking, zoals mensen die blind, doof, laaggeletterd zijn of andere functieproblemen hebben. Voor hen is het van belang dat de website technisch en inhoudelijk zo is ingericht dat de site voor hen goed bruikbaar is. Een website optimaliseren voor toegankelijkheid heeft meer voordelen; het maakt de website beter bruikbaar voor iedereen (bijvoorbeeld ook voor mensen die op hun mobieltje kijken in een zonnige omgeving) en het maakt de site beter vindbaar in zoekmachines.
Scope van de evaluatie
| Naam website | Website Visit Amstelveen |
|---|---|
| Scope van de website |
Alle pagina's op visitamstelveen.nl/ |
| Conformiteitsdoel | WCAG 2.1 niveau AA |
| Basisniveau van toegankelijkheid ondersteund | Gangbare browsers en hulpapparatuur |
Overzicht toetsresultaat
| Principe | Voldoende | Onvoldoende | Onbekend |
|---|---|---|---|
| 1 Waarneembaar | 8 | 12 | 0 |
| 2 Bedienbaar | 10 | 7 | 0 |
| 3 Begrijpelijk | 5 | 5 | 0 |
| 4 Robuust | 1 | 2 | 0 |
| Totaal | 24 | 26 | 0 |
Leeswijzer
Dit onderzoek is een momentopname. De website kan inmiddels veranderd zijn. De gevonden problemen zijn slechts voorbeelden. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de sample om zo een goede indruk te krijgen van de toegankelijkheid. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website/app kunnen nieuwe problemen ontstaan. Succescriteria gemarkeerd met "Niet aanwezig" worden automatisch goedgekeurd. Succescriteria gemarkeerd met "Onbekend" worden niet goedgekeurd.
Uitgebreide toetsresultaten
1. Waarneembaar
1.1 Tekstalternatieven
1.1.1 Niet-tekstuele content (Niveau A)
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.
- Bedieningselementen, invoer: Als niet-tekstuele content een bedieningselement is of gebruikersinvoer accepteert, dan heeft ze een naam die het doel ervan beschrijft. (We verwijzen naar succescriterium 4.1.2 voor aanvullende eisen over bedieningselementen en content die gebruikersinvoer accepteren.)
- Op tijd gebaseerde media: Als niet-tekstuele content op tijd gebaseerde media is, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content. (We verwijzen naar Richtlijn 1.2 voor aanvullende eisen ten aanzien van media.)
- Test: Als niet-tekstuele content een test of oefening is die, als ze door middel van tekst gepresenteerd wordt onjuist zou zijn, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.
- Zintuiglijk: Als niet-tekstuele content primair is bedoeld om een specifieke zintuiglijke ervaring te creëren, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.
- CAPTCHA: Als het doel van niet-tekstuele content is om te bevestigen dat content wordt gebruikt door een persoon in plaats van een computer, dan worden tekstalternatieven geleverd die het doel van de niet-tekstuele content identificeren en beschrijven. En er worden alternatieve vormen van CAPTCHA aangeboden gebruikmakend van uitvoermodes voor verschillende soorten van zintuiglijke perceptie om tegemoet te komen aan verschillende functiebeperkingen.
- Decoratie, opmaak, onzichtbaar: Als niet-tekstuele content puur decoratief is, slechts voor visuele opmaak wordt gebruikt, of niet aan gebruikers wordt gerepresenteerd, dan wordt het op zo'n manier geïmplementeerd dat het genegeerd kan worden door hulptechnologie.
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl staan meerdere afbeeldingen in <figure> elementen met aria-labels 'Afbeeldingsgallerij' en 'Afbeelding'. Deze overschrijven de lege alt-tekst. De afbeeldingen zijn decoratief en hebben dus geen aria-labels nodig.
Op pagina https://www.visitamstelveen.nl/nl staan een aantal klikbare blokken met achtergrondfoto, zoals 'Lekker eten in Amstelveen'. De linktekst is leeg en er is gebruik gemaakt van het title-attribuut. Deze wordt wisselend ondersteund door browsers en hulpsoftware. Zorg ervoor dat de teksten die nu in beeld staan als tekst klikbaar zijn en laat het title-attribuut achterwege.
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier staat een icoontje van de vlag van het VK met als alt-tekst "Google (Android 11); UK: Great Britain & Northern Ireland". Dit is geen goed tekstalternatief. De afbeelding kan als decoratief worden beschouwd, laat in dat geval het alt-attribuut leeg (alt="").
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier is een formulier waar, als je iets niet goed invult, een melding verschijnt. Deze melding wordt voorafgegaan door een afbeelding, een uitroepteken in een cirkel. Dit geeft aan dat de melding belangrijk is. Deze informatie is niet beschikbaar voor hulpsoftware. Zorg dat deze informatie ook voor hulpsoftware beschikbaar is.
Wanneer op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier is een foto wordt geüpload bij 'Kies een foto', heeft de geüploade foto geen alt-attribuut. Een afbeelding heeft altijd een alt-attribuut nodig.
Op pagina https://www.visitamstelveen.nl/nl/zoeken?query=winkel staan onder 'Evenementen', 'Locaties' en 'Routes' klikbare afbeeldingen. Het tekstalternatief beschrijft de afbeelding niet voldoende. Ook is het title-attribuut gebruikt voor copyrights; daar is het title-attribuut niet voor bedoeld.
Best practice is om de link van deze afbeeldingen af te halen en alleen de titel de focus te laten ontvangen. De afbeeldingen kunnen dan een leeg alt-attribuut krijgen. Zie ook 2.4.7.
Op pagina https://www.visitamstelveen.nl/nl/richtlijnen staat afbeelding van een de Annakerk. Deze afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. De afbeelding moet wel een leeg alt-attribuut in het img-element hebben.
Op pagina https://www.visitamstelveen.nl/nl/bestaatniet staat afbeelding van een zwart-witfoto met het raadhuis uit 1962. Deze afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. De afbeelding moet wel een leeg alt-attribuut in het img-element hebben.
Op pagina https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid is bij de achtergrondafbeeldingen het title-attribuut en de <figcaption> gebruikt voor copyrights. Deze elementen zijn hier niet voor bedoeld.
Ook onder 'Plan je bezoek' zijn copyrights op de verkeerde plek geplaatst, namelijk in een aria-label.
Dit type probleem komt op meerdere pagina's voor.
Op pagina https://www.visitamstelveen.nl/nl/zoeken?query=winkel staat onder 'Routes' een icoon van een fiets. Deze heeft een title-attribuut 'Recreatief'. Het wordt afgeraden om enkel een title-attribuut te gebruiken, omdat niet alle hulpsoftware goed met het attribuut omgaat. Daarnaast omschrijft 'Recreatief' het icoon niet - het icoon geeft aan dat het om een fietsroute gaat.
Dit komt ook voor op pagina https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min .
Bovenstaande geldt ook voor het icoon bij de evenementen op pagina https://www.visitamstelveen.nl/nl/uitagenda . Dit icoon brengt over dat het om de locatie van het evenement gaat, maar het icoon heeft geen tekstalternatief.
Dit geldt ook voor de locatie-iconen onder 'Uitagenda Amstelveen' op https://www.visitamstelveen.nl/nl
Op pagina https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min is een afbeelding van een fiets vlak voor de afstand van de route. Met deze fiets wordt aangegeven dat dit de route met de fiets gedaan kan worden. Deze informatie is niet beschikbaar voor hulpsoftware. Zorg dat deze informatie ook voor hulpsoftware beschikbaar is.
In de PDF 'Instructie gebruik invoerformulier' op https://www.visitamstelveen.nl/uploads/media/5ebbf46ce18ca/200429-def-instructies-gebruik-invoerformulier.pdf staan twee afbeeldingen. Het logo heeft een tekstalternatief nodig. De voorbeeldafbeelding heeft een beter tekstalternatief nodig (nu is dat 'cid:87E0A874-10CC-4853-A9C8-54523E522D29@home').
1.2 Op tijd gebaseerde media
1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)
Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:
- Vooraf opgenomen louter-geluid: Er wordt een alternatief geleverd voor op tijd gebaseerde media dat equivalente informatie geeft voor vooraf opgenomen louter-geluid content.
- Vooraf opgenomen louter-videobeeld: Er wordt een alternatief geleverd voor op tijd gebaseerde media of een geluidsspoor dat equivalente informatie geeft voor vooraf opgenomen louter-videobeeld content.
Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
Uitkomst: Niet aanwezig
1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)
Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Uitkomst: Voldoende
1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)
Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie staat een video. In deze video is belangrijke visuele informatie te zien die niet terugkomt in het audiospoor. Het gaat bijvoorbeeld om het logo van Gemeente Amstelveen bij de in- en outro, en de namen en functies van de sprekers die in beeld komen. Deze informatie moet terugkomen in het audiospoor, of in een alternatief, zoals een transcript of audiodescriptie.
1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)
Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.
Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)
Uitkomst: Niet aanwezig
1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)
Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.
Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie staat een video. In deze video is belangrijke visuele informatie te zien die niet terugkomt in het audiospoor. Het gaat bijvoorbeeld om het logo van Gemeente Amstelveen bij de in- en outro, en de namen en functies van de sprekers die in beeld komen. Deze informatie moet terugkomen in het audiospoor of in een audiodescriptie.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevindingen: In de footer staan opsommingen van links onder de koppen 'Snel naar' en 'Meer informatie'. Deze opsommingen zijn niet opgemaakt met de juiste HTML. Gebruik het ul-element en li-elementen om deze lijsten correct te markeren.
In de footer van elke pagina kan je je inschrijven voor de nieuwsbrief. Er zit hier een verborgen veld 'Voornaam'. Deze is beschikbaar voor hulpsoftware. Zorg ervoor dat deze informatie ook voor bezoekers met een screenreader verborgen is.
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier missen de select-elementen onder 'Starttijd' en 'Eindtijd' in de code een label voor de uren en minuten.
Op pagina https://www.visitamstelveen.nl/nl/privacy staan verschillende koppen die niet als koptekst zijn gemarkeerd. Het gaat om de vetgedrukte koppen als 'Persoonsgegevens die VisitAmstelveen verwerkt' en de schuingedrukte koppen als 'Geheimhoudingsplicht'. Gebruik het h2-, h3- en eventueel h4-element zodat de structuur van de pagina goed is te bepalen.
Op pagina https://www.visitamstelveen.nl/nl/privacy staan een paar opsommingen (te herkennen aan de bullet points), bijvoorbeeld 'Voornaam, Achternaam en E-mailadres' die niet als opsomming gemarkeerd zijn. Gebruik het ul- en li-element om de opsommingen op correcte wijze te markeren.
Dit komt ook voor op https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum onder 'Tentoonstellingen die in het Cobra Museum te zien zijn (of te zien waren)'.
Op pagina https://www.visitamstelveen.nl/en/shopping/opening-times is de kop 'General opening times' niet als koptekst gemarkeerd, maar met het strong-element. Het strong-element is bedoeld voor nadruk, niet voor opmaak. Het gebruik van <strong> voor kopteksten komt ook voor op pagina https://www.visitamstelveen.nl/nl/richtlijnen en op https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum .
En ook bij de titels van de locaties op de kaart, wanneer er op een locatie wordt geklikt, op https://www.visitamstelveen.nl/nl/map .
Op pagina https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum zijn de 3 items onder 'Fietsroutes van Amsterdam naar het Cobra museum' gecodeerd met <strong>. Dit element is niet voor opmaak bedoeld.
Ook is <strong> gebruikt voor de getallen op de kaart.
Op pagina https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid staan onder 'Plan je dag in Amstelveen' 3 teksten 'Eten&Drinken', 'Overnachten' en 'Winkelen'. Deze zijn nu als koptekst gemarkeerd, maar dit is niet nodig. De teksten hebben namelijk geen onderliggende content en zijn daarom geen koptekst.
Dit komt ook voor op https://www.visitamstelveen.nl/nl onder 'Beleef Amstelveen tips'
Op pagina https://www.visitamstelveen.nl/nl/uitagenda is in de paginanavigatie visueel zichtbaar welke pagina de huidige pagina is. Deze informatie moet ook tekstueel beschikbaar zijn. De tekst hoeft niet visueel zichtbaar te zijn.
Op pagina https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid is de hele tekst "AMSTELVEEN MET HET OPENBAAR VERVOER" en de tekst die eronder staat in één h2-element. Visueel is het een kop met eronder cursieve tekst. Het eerste deel moet in de <h2>. De rest van de tekst moet opgenomen worden in een p-element (alinea).
Op pagina https://www.visitamstelveen.nl/nl/richtlijnen komt een lege kop (h2) voor.
De PDF 'Greenmap' https://www.visitamstelveen.nl/uploads/media/5ef4a4816ecdc/greenmap-pdf.pdf is niet gecodeerd. Hierdoor kunnen gebruikers van hulpsoftware de inhoud van de PDF niet (goed) lezen. Ook kan de PDF hierdoor niet volledig op de toegankelijkheid onderzocht worden.
In de PDF 'Instructies gebruik invoerformulier' op pagina https://www.visitamstelveen.nl/uploads/media/5ebbf46ce18ca/200429-def-instructies-gebruik-invoerformulier.pdf zijn niet alle teksten goed gecodeerd. Alles is als een <p> gecodeerd, maar sommige teksten (te herkennen aan vet-/schuingedrukt) zijn kopteksten en moeten als koptekst gecodeerd worden.
1.3.2 Betekenisvolle volgorde (Niveau A)
Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.
Informatie over succescriterium 1.3.2 Betekenisvolle volgorde
Uitkomst: Onvoldoende
Bevindingen: Op meerdere pagina's staan zogenaamde 'cards', bijvoorbeeld bij de uitagenda; het blok met een afbeelding, datum, titel en locatie. Hierbij is de afbeelding in de code boven de titel geplaatst. Wanneer de afbeelding een tekstalternatief heeft, moet deze in de code onder de titel (kop) geplaatst worden waar hij bij hoort.
Dit komt bijvoorbeeld voor op https://www.visitamstelveen.nl/nl/zoeken?query=winkel en https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid.
Op pagina https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min staat de kop in de HTML na de kaart. Zorg ervoor dat de kop voor de content (dus ook de kaart komt). Visueel kan wel deze volgorde worden aangehouden.
1.3.3 Zintuiglijke eigenschappen (Niveau A)
Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.
Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen
Uitkomst: Niet aanwezig
1.3.4 Weergavestand (Niveau AA)
De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.
Informatie over succescriterium 1.3.4 Weergavestand
Uitkomst: Voldoende
1.3.5 Identificeer het doel van de input (Niveau AA)
Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:
- Het invoerveld een doel dient dat is geïdentificeerd in de paragraaf Inputdoelen voor Componenten van de Gebruikersinterface; en
- De content wordt geïmplementeerd met behulp van technologieën die ondersteuning bieden bij het identificeren van de verwachte betekenis van formulier-invoergegevens.
Informatie over succescriterium 1.3.5 Identificeer het doel van de input
Uitkomst: Onvoldoende
Bevindingen: Op https://www.visitamstelveen.nl/nl/eventaanmeldformulier staan formuliervelden waaraan het autocomplete attribuut moet worden gegeven. Het gaat om de velden onder 'Uw gegevens'. Zie https://www.w3.org/TR/WCAG21/#input-purposes voor een compleet overzicht.
Op elke pagina in de footer is een aanmeldformulier voor de nieuwsbrief waar het e-mailadres van de bezoeker kan worden ingevuld. Het doel van dit veld moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Op de pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier is een formulier waar onder andere het e-mailadres en telefoonnummer van de bezoeker kunnen worden ingevuld. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevindingen: In de PDF 'Greenmap' https://www.visitamstelveen.nl/uploads/media/5ef4a4816ecdc/greenmap-pdf.pdf staat kleurafhankelijke informatie. Zo zijn de verschillende routes met verschillende kleuren aangegeven. Kleurenblinde gebruikers kunnen moeite hebben met het waarnemen van deze routes die kleurafhankelijk zijn. Biedt naast kleur een tweede manier om de routes te herkennen, zoals een patroon.
1.4.2 Geluidsbediening (Niveau A)
Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.
Informatie over succescriterium 1.4.2 Geluidsbediening
Uitkomst: Niet aanwezig
1.4.3 Contrast (minimum) (Niveau AA)
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:
- Grote tekst: Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1;
- Incidenteel: Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis.
- Woordmerken: Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevindingen: De goudkleurige knop op bijvoorbeeld de cookiemelding verloopt van donker naar licht. De contrastverhouding verloopt van 4,5:1 tot 2,2:1. Dat betekent dat alle tekst in de knop een te laag contrast heeft. De contrastverhouding moet minimaal 4,5:1 zijn.
Dit geldt ook voor de goudkleurige links die eruit zien als knoppen op de homepage zoals 'Inspiratie voor zien en doen in Amstelveen'.
Op elke pagina heeft de skiplink een te lage contrastverhouding van 2,2:1. Dit geldt ook voor de navigatieknop en de map-link, wanneer deze de focus ontvangt.
Deze kleurencombinatie (#D4A95E met wit) wordt op meerdere plekken/pagina's gebruikt, bijvoorbeeld een link in de lopende tekst bij focus of bij hover. De contrastverhouding moet minimaal 4,5:1 zijn.
Op pagina https://www.visitamstelveen.nl/nl heeft de tekst 'Actief, culinair of cultureel genieten' een te laag contrast. De contrastverhouding is circa 2:1 waar dit 3:1 moet zijn. Dit geldt ook voor de tekst eronder. Let op, dit hangt af van de schermresolutie en is bij een lage resolutie hoofdzakelijk aan de rechterzijde van te laag.
Bij een lage resolutie (bijvoorbeeld een schermbreedte van 1024) wordt de navigatie vervangen door een navigatieknop. Als de navigatie uitgevouwen wordt, verschijnen de items in een blauwe achtergrond dat van donker naar licht verloopt. In het lichte deel is het contrast te laag. De contrastverhouding is circa 3,8:1 waar dit 4,5:1 moet zijn.
Op pagina https://www.visitamstelveen.nl/nl hebben de goudkleurige knoppen, zoals 'Bekijk de actie' een contrastwaarde van tussen de 2,6:1 en 4,1:1. Deze kleurencombinatie komt op meerdere plekken/pagina's voor.
Op de homepage wordt op meerdere plekken teksten over afbeeldingen heen getoond. Deze teksten zijn, afhankelijk van de foto, soms lastig te lezen. Er is een schaduwrand gegeven aan de tekst, maar op lichte foto's is dat contrast nog net te laag. De contrastverhouding is circa 2,6:1 waar dit 3:1 moet zijn.
Dit komt ook op andere pagina's voor zoals https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid
In de footer op elke pagina hebben de links een te laag contrast bij focus of bij hover. De contrastverhouding is circa 3:1 waar dit 4,5:1 moet zijn.
In de footer op elke pagina kan je je inschrijven voor de nieuwsbrief. De placeholdertekst 'E-mailadres' heeft een te laag contrast. De contrastverhouding is 2,5:1 waar dit 4,5:1 moet zijn.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda heeft de placeholdertekst 'Wat wil je gaan doen?' in het zoekveld een te laag contrast. De contrastverhouding is 2:1 waar dit 4,5:1 moet zijn.
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier heeft alle zwarte tekst op blauwe achtergrond onder 'Kies een foto' een te laag contrast. De contrastverhouding is 3,1:1 waar dit 4,5:1 moet zijn. Als je het veld niet invult en verstuurd krijg je een rode foutmelding met een te laag contrast. De contrastverhouding is 1,5:1 waar dit 4,5:1 moet zijn.
Op pagina https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min heeft de tekst 'Leaflet' op de kaart een te lage contrast. De contrastverhouding is 4,2:1 waar dit 4,5:1 moet zijn.
Dit komt op alle pagina's voor waar een kaart staat.
Wanneer een van de filteropties op pagina https://www.visitamstelveen.nl/nl/map de focus krijgt met de muis, verandert de achtergrondkleur naar goud. Het contrast is dan te laag in combinatie met zwarte tekst. De contrastverhouding bij zwarte tekst is 2:1 waar dit 4,5:1 moet zijn. Bij hover wordt de zwarte tekst wit en de achtergrondkleur wordt lichter. De contrastverhouding is dan 2,2:1 waar dit 4,5:1 moet zijn.
In de PDF 'Greenmap' https://www.visitamstelveen.nl/uploads/media/5ef4a4816ecdc/greenmap-pdf.pdf hebben een aantal teksten een te lage contrastwaarde.
De combinatie wit met pastelgroen heeft een contrastwaarde van 2,3:1.
De combinatie met een feller groen ('Green map') heeft een contrastwaarde van tussen de 2,0:1 en 2,2:1.
De combinatie met rood (voor de getallen) heeft een contrastwaarde van 3,5:1.
Zo kunnen er nog meer contrastproblemen voorkomen die niet benoemd zijn.
1.4.4 Herschalen van tekst (Niveau AA)
Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie schaalt de video niet goed mee, wanneer de pagina wordt bekeken in een schermresolutie van 1024x768px in combinatie met inzoomen tot 200%. De video kan niet volledig worden bekeken en de tekst 'Online rondleiding open monumentendag 2020' komt eroverheen te staan.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda verschijnt bij inzoomen een kalenderknop op de plaats van 'Kies datum'. Deze knop heeft geen (goede) toegankelijke naam. Het is voor screenreadergebruikers nu niet duidelijk wat de knop doet.
1.4.5 Afbeeldingen van tekst (Niveau AA)
Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:
- Aanpasbaar: De afbeelding van tekst kan visueel aangepast worden aan de eisen van de gebruiker;
- Essentieel: Een specifieke weergave van tekst is essentieel voor de informatie die wordt overgebracht.
Informatie over succescriterium 1.4.5 Afbeeldingen van tekst
Uitkomst: Niet aanwezig
1.4.10 Reflow (Niveau AA)
Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:
- Verticaal scrollbare content met een breedte gelijkwaardig aan 320 CSS-pixels;
- Horizontaal scrollbare content met een hoogte gelijkwaardig aan 256 CSS-pixels.
Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevindingen: Wanneer https://www.visitamstelveen.nl/nl/eventaanmeldformulier wordt bekeken in een schermbreedte van 320px en er wordt een afbeelding geüpload, moet er horizontaal gescrold worden om de tekst te kunnen lezen. Zorg dat er geen horizontale scrolbalk nodig is (uitgezonderd zijn afbeeldingen met informatie, kaarten en tabellen).
Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan komt op pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie de tekst 'Online rondleiding open monumentendag 2020' over de video te staan. De video is daardoor slecht of niet te zien.
Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://www.visitamstelveen.nl/nl/richtlijnen een deel van de content onder de onderdelen die altijd in beeld blijven staan zoals de header van de pagina en onderin de witte tekst "Stadshart Winkels in Amstelveen". Ook verdwijnt er tekst rechts uit beeld. Teksten zijn daar slecht of niet leesbaar.
Dit komt ook op andere pagina's voor.
Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan is niet alles bereikbaar als de navigatie uitgeklapt wordt. De navigatie blijft uitgeklapt en alle content erachter is wel bereikbaar maar niet zichtbaar. Met toetsenbord is nu niet duidelijk waar je bent.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:
- Componenten van de gebruikersinterface: Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;
- Grafische objecten: Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevindingen: Op veel plaatsen heeft de focus een te laag contrast. Zorg voor een duidelijke focusrond. Zie ook SC 2.4.7.
1.4.12 Tekstafstand (Niveau AA)
Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:
- Regelhoogte (regelafstand) naar minstens 1,5 keer de lettergrootte;
- Afstand tussen alinea's naar minstens 2 keer de lettergrootte;
- Letterafstand (spatieren van letters) naar minstens 0,12 keer de lettergrootte;
- Spatieren van woorden naar minstens 0,16 keer de lettergrootte.
Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze stijleigenschappen voor tekst in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.
Informatie over succescriterium 1.4.12 Tekstafstand
Uitkomst: Onvoldoende
Bevindingen: Op de pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie verdwijnt een deel van de tekst als je de tekstspatiering aan zet. Het gaat om het laatste deel bij bijvoorbeeld de blokken 'HISTORISCHE ROUTES AMSTELVEEN' en 'FIETS EN WANDEL LANGS ERFGOED'.
Dit komt ook voor op andere pagina's zoals https://www.visitamstelveen.nl/nl/agenda
1.4.13 Content bij hover of focus (Niveau AA)
Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:
- Sluiten: Er is een mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen, tenzij de aanvullende content een invoerfout communiceert of andere content niet verbergt of vervangt;
- Aanwijsbaar: Wanneer een aanwijzer hover aanvullende content kan activeren, dan kan de aanwijzer over de aanvullende content worden bewogen zonder dat deze verdwijnt;
- Aanhouden: De aanvullende content blijft zichtbaar totdat de oorzaak voor de hover of focus is verwijderd, de gebruiker de content sluit of de informatie niet langer geldig is.
Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.
Informatie over succescriterium 1.4.13 Content bij hover of focus
Uitkomst: Niet aanwezig
2. Bedienbaar
2.1 Toetsenbordtoegankelijk
2.1.1 Toetsenbord (Niveau A)
Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier is de functionaliteit 'Kies een foto' niet bedienbaar met het toetsenbord.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda zijn de filteropties 'Vandaag', 'Morgen', etc. en 'Film', 'Uitgaan', etc. niet bedienbaar met het toetsenbord.
Op pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie is de knop van de video 'Online rondleiding Monumentendag 2020' niet bedienbaar.
Op pagina https://www.visitamstelveen.nl/nl/map vormen de filteropties een accordeon. Het kruisje om de filteropties af te sluiten is niet bedienbaar met het toetsenbord, en ook de knop 'Filters' niet, die verschijnt wanneer het filtermenu is gesloten.
De verschillende uitklapbare elementen zijn niet goed bedienbaar met het toetsenbord, en ook niet de verschillende opties per uitklapbaar element. Met de pijltjestoetsen lukt het redelijk, maar niet met de tabtoets.
Dit geldt ook voor de locaties op de kaart, met de pijltjestoetsen kunnen deze enigszins bediend worden, al werkt het niet heel goed (soms lukt het niet om deze elementen met enter te activeren), maar niet met de tabtoets.
2.1.2 Geen toetsenbordval (Niveau A)
Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.
Informatie over succescriterium 2.1.2 Geen toetsenbordval
Uitkomst: Voldoende
2.1.4 Enkel teken sneltoets (Niveau A)
Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:
- Uitzetten: Er is een mechanisme beschikbaar waarmee de sneltoets kan worden uitgezet;
- Opnieuw toewijzen: Er is een mechanisme beschikbaar om de sneltoets opnieuw toe te wijzen aan één of meerdere niet-afdrukbare tekens (bijvoorbeeld Ctrl, Alt, enz.);
- Alleen actief bij focus: De sneltoets voor een component van de gebruikersinterface is alleen actief wanneer de betreffende component de focus heeft.
Informatie over succescriterium 2.1.4 Enkel teken sneltoets
Uitkomst: Onvoldoende
Bevindingen: Op de pagina https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie wordt gebruik gemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld 'F' voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.
2.2 Genoeg tijd
2.2.1 Timing aanpasbaar (Niveau A)
Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:
- Uitzetten: De gebruiker kan de tijdslimiet uitzetten voordat die wordt bereikt; of
- Aanpassen: De gebruiker mag de tijdslimiet aanpassen voordat deze is verstreken over een bereik van ten minste tien keer de standaardinstelling; of
- Verlengen: De gebruiker wordt gewaarschuwd voor de tijd afloopt en krijgt ten minste 20 seconden om de tijdslimiet met een eenvoudige handeling te verlengen (bijvoorbeeld, "druk op de spatiebalk"), en de gebruiker mag de tijdslimiet ten minste tien keer verlengen; of
- Real-time uitzondering: De tijdslimiet is onderdeel van een realtime gebeurtenis (een veiling bijvoorbeeld) en er is geen alternatief voor de tijdslimiet mogelijk; of
- Essentiële uitzondering: De tijdslimiet is essentieel en verlenging zou de activiteit ongeldig maken; of
- 20 uur uitzondering: De tijdslimiet is langer dan 20 uur.
Informatie over succescriterium 2.2.1 Timing aanpasbaar
Uitkomst: Niet aanwezig
2.2.2 Pauzeren, stoppen, verbergen (Niveau A)
Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:
- Bewegen, knipperen, scrollen: Voor bewegende, knipperende of scrollende informatie die (1) automatisch start, (2) langer dan vijf seconden duurt, en (3) parallel met andere content wordt getoond, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen, tenzij de beweging, knippering of scrolling, onderdeel is van een activiteit waar ze essentieel is en
- Automatisch actualiserend: Voor elke soort automatisch actualiserende informatie die (1) automatisch start en (2) parallel met andere content wordt gepresenteerd, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen of de frequentie van de actualisering in te stellen, tenzij de automatische actualisering onderdeel is van een activiteit waar ze essentieel is.
Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen
Uitkomst: Niet aanwezig
2.3 Toevallen en fysieke reacties
2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)
Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.
Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde
Uitkomst: Niet aanwezig
2.4 Navigeerbaar
2.4.1 Blokken omzeilen (Niveau A)
Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.
Informatie over succescriterium 2.4.1 Blokken omzeilen
Uitkomst: Voldoende
2.4.2 Paginatitel (Niveau A)
Webpagina's hebben titels die het onderwerp of doel beschrijven.
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevindingen: In de metadata van de PDF 'Instructies gebruik invoerformulier' https://www.visitamstelveen.nl/uploads/media/5ebbf46ce18ca/200429-def-instructies-gebruik-invoerformulier.pdf is de titel niet ingesteld.
Dit geldt ook voor de PDF 'Greenmap' https://www.visitamstelveen.nl/uploads/media/5ef4a4816ecdc/greenmap-pdf.pdf .
2.4.3 Focus volgorde (Niveau A)
Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevindingen: Op elke pagina verschijnt een cookiemelding. Deze krijgt pas de focus aan het einde van de pagina. De cookiemelding moet als eerste de focus ontvangen.
Op elke pagina staan in de header een paar links: zoeken, map, NL, EN, navigatieknop. De focusvolgorde wijkt af van de visueel volgorde, de focus gaat heen en weer: navigatie, NL, EN, map, zoeken.
Wanneer de hoofdnavigatie met het toetsenbord wordt geopend, blijft de focus niet op de knop staan, maar moet eerst één keer de tabtoets gebruikt worden om op de navigatieknop/sluitknop te komen.
De focus gaat vervolgens eerst langs andere items (taalknoppen, zoekveld) voordat deze in het navigatiedeel komt. De focus moet hier direct in komen.
Elk list-item krijgt de focus voordat de afzonderlijke links de focus krijgen. Dit komt doordat de <li> een tabindex=0 heeft gekregen. Deze items horen niet de focus te ontvangen.
Wanneer het laatste item uit het de navigatie de focus heeft gekregen, gaat de toetsenbordfocus verder over de achterliggende pagina, terwijl de navigatie open blijft staan. De focus moet in de navigatie blijven, totdat deze is afgesloten.
Wanneer met het toetsenbord wordt genavigeerd, krijgen na de zoekfunctionaliteit de navigatie-items de focus, ook al is de hoofdnavigatie niet opengeklapt. Deze items horen alleen de focus te krijgen wanneer de navigatie is opengeklapt.
Op https://www.visitamstelveen.nl/nl/bestaatniet krijgen de items 'Terug naar homepage', 'Zoek op trefwoord of thema' en 'Uitagenda Amstelveen' alle drie drie maal de focus. Dit lijkt niet de bedoeling.
Wanneer op pagina https://www.visitamstelveen.nl/nl/map een van de locaties met het toetsenbord wordt geactiveerd, opent een card met de gegevens en een link. De focus komt niet direct in deze card, maar gaat eerst langs de andere elementen op de kaart.
2.4.4 Linkdoel (in context) (Niveau A)
Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen.
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl kan de taal gekozen worden door middel van vlaggen, de Nederlandse en de Britse vlag. Aan elke link is een naam toegekend, nl' en 'en'. Deze tekst is nu verborgen met 'display:none' en wordt dus ook verborgen gehouden voor hulpsoftware. De tekst moet overigens ook duidelijker, bijvoorbeeld 'English' en 'Nederlands'. Zie ook SC 4.1.2.
Op pagina https://www.visitamstelveen.nl/nl staat de link 'Bekijk het hier!'. Het linkdoel kan niet uit deze linktekst bepaald worden. Dit geldt ook voor 'Bekijk de actie'.
Op de homepage staat meerdere keren een link met de naam 'Uitagenda'. De ene link gaat naar 'UITAGENDA AMSTELVEEN' en de andere naar 'ACTIVITEITEN IN AMSTELVEEN'. Zorg voor eenduidige benaming van de link waarbij de linknaam altijd naar dezelfde pagina wijst.
Op pagina https://www.visitamstelveen.nl/nl/zoeken?query=winkel staan meerdere 'Bekijk deze pagina' links. Deze beschrijven het linkdoel niet voldoende. Een mogelijke oplossing is de titel van de betreffende pagina in visueel verborgen tekst toe te voegen aan de linktekst.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda heeft de paginanavigatie een duidelijker linkdoel nodig. Aan de getallen moet nog (in verborgen tekst) 'Pagina' worden toegevoegd.
Op pagina https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum staan een afbeelding en twee video's van het Cobra Museum. Deze missen nu een linkdoel. Door erop te klikken wordt de foto uitvergroot/begint de video te spelen. Dit is nu niet duidelijk op basis van het linkdoel.
NB: Op veel plekken is zowel title-attribuut als tekst binnen een span-element gebruikt (bijv. bij de navigatieknop en de social media links in de footer). Hierdoor wordt tekst mogelijk dubbel voorgelezen. De <span> tekst is voldoende.
2.4.5 Meerdere manieren (Niveau AA)
Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.
Informatie over succescriterium 2.4.5 Meerdere manieren
Uitkomst: Voldoende
2.4.6 Koppen en labels (Niveau AA)
Koppen en labels beschrijven het onderwerp of doel.
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevindingen: Op de pagina https://www.visitamstelveen.nl/nl kan je je aanmelden voor de nieuwsbrief onder 'MIS NIETS'. Voornaam en e-mailadres hebben een placeholder-tekst, maar dat is niet genoeg voor dit succescriterium. Een placeholder wordt namelijk niet door alle voorleessoftware voorgelezen en verdwijnt als de gebruiker begint te typen. Zorg dat de tekst zichtbaar blijft door een label te gebruiken.
Dit geldt ook voor het inschrijven voor de nieuwsbrief in de footer.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda kan een datum gekozen worden. Dit werkt door middel van een kalender die uitklapt. Het wordt niet zichtbaar gemaakt dat er een begin- en einddatum opgegeven moet worden.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda staat een combobox met de naam 'Sorteren op'. In eerste instantie zie je daar 'Datum oplopend'. Doordat er geen label staat kan het voor sommige mensen lastig zijn om te bepalen wat het veld doet. Ook met spraakbediening kan het lastig zijn dit veld te bereiken. Zorg voor een zichtbaar label.
2.4.7 Focus zichtbaar (Niveau AA)
Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevindingen: Wanneer de link 'map' in de header de toetsenbordfocus krijgt in Firefox, verschijnt er een verticale streep door de link heen. In Chrome staat de onderste rand net deels over de tekst heen, waardoor deze slechter leesbaar is.
Dit komt op elke pagina voor.
De focus is niet zichtbaar op zoekfunctionaliteit in de header. In een normale weergave opent automatisch het zoekveld, maar in een kleinere weergave gebeurt dit niet. De focus moet te allen tijde zichtbaar zijn.
Op pagina https://www.visitamstelveen.nl/nl is de focusrand niet goed zichtbaar op de link 'Actief, culinair of cultureel genieten'.
Op pagina https://www.visitamstelveen.nl/nl is de focus helemaal niet zichtbaar op de links naar de deelfunctie op social media. Het gaat hier om 5 blokken onder het onderwerp 'OVERNACHTEN IN AMSTELVEEN?'.
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier is de focus niet zichtbaar op de <select> elementen.
Op pagina https://www.visitamstelveen.nl/nl/zoeken?query=winkel krijgt onder 'Evenementen' elk evenement twee keer de focus. De eerste keer is de focus niet zichtbaar, de tweede keer is er alleen één verticale streep te zien.
Best practice is om alleen de titel de focus te laten ontvangen, en vervolgens het klikbare gebied te vergroten. Zie ook 1.1.1.
Dit komt op meerdere pagina's/plekken voor, zie bijvoorbeeld https://www.visitamstelveen.nl/nl/uitagenda en https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min
En iets soortgelijks komt voor op https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid, daar is de focus steeds niet zichtbaar op de afbeelding.
Op https://www.visitamstelveen.nl/nl/bestaatniet is de focus niet zichtbaar op 'Terug naar homepage', 'Zoek op trefwoord of thema' en 'Uitagenda Amstelveen'.
Op pagina https://www.visitamstelveen.nl/nl/map is de focus niet zichtbaar op de interactieve elementen op de kaart (zoom in/out, Leaflet, locaties) en ook niet op de elementen in de filterfunctionaliteit.
Dit komt op alle pagina's met een kaart voor.
2.5 Input modaliteiten
2.5.1 Aanwijzergebaren (Niveau A)
Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.
Informatie over succescriterium 2.5.1 Aanwijzergebaren
Uitkomst: Niet aanwezig
2.5.2 Aanwijzerannulering (Niveau A)
Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:
- Geen down-event: Het down-event van de aanwijzer wordt niet gebruikt om enig onderdeel van de functie uit te voeren;
- Afbreken of ongedaan maken: De functie wordt voltooid door het up-event en er is een mechanisme beschikbaar om de functie af te breken voordat deze wordt voltooid of om de functie ongedaan te maken als deze is voltooid;
- Up reversal: Met het up-event wordt elk resultaat van het voorgaande down-event ongedaan gemaakt;
- Essentieel: Het voltooien van de functie met het down-event is essentieel.
Informatie over succescriterium 2.5.2 Aanwijzerannulering
Uitkomst: Voldoende
2.5.3 Label in naam (Niveau A)
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Voldoende
2.5.4 Bewegingsactivering (Niveau A)
Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:
- Ondersteunde interface: De beweging wordt gebruikt om de functionaliteit te bedienen via een door toegankelijkheid ondersteunde interface;
- Essentieel: De beweging is essentieel voor de functie en wanneer de reactie op de beweging wordt uitgeschakeld, wordt de activiteit ongeldig gemaakt.
Informatie over succescriterium 2.5.4 Bewegingsactivering
Uitkomst: Niet aanwezig
3. Begrijpelijk
3.1 Leesbaar
3.1.1 Taal van de pagina (Niveau A)
De standaard menselijke taal van elke webpagina kan door software bepaald worden.
Informatie over succescriterium 3.1.1 Taal van de pagina
Uitkomst: Voldoende
3.1.2 Taal van onderdelen (Niveau AA)
De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.
Informatie over succescriterium 3.1.2 Taal van onderdelen
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum hebben de knoppen in de Vimeo videospeler Engelstalige namen. Hiervoor moet in de code een taalwisseling worden gegeven. Het is echter beter Nederlandstalige namen te gebruiken.
Op pagina https://www.visitamstelveen.nl/en/shopping/opening-times staan de dagen en tijden in het Nederlands. Deze tekst is echter niet gemarkeerd met "nl". Zorg dat de taal te bepalen is door hulpsoftware. Beter is om de tekst te vertalen naar het Engels.
3.2 Voorspelbaar
3.2.1 Bij focus (Niveau A)
Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.
Informatie over succescriterium 3.2.1 Bij focus
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/uitagenda staat een combobox ('Sorteren op') Wanneer er met het toetsenbord naar dit element wordt genavigeerd, en er langs de keuzeopties wordt gegaan, ververst de pagina direct zodra één van de keuzeopties de focus krijgt. Hierdoor vindt er een contextwijziging plaats. Dat is niet toegestaan, tenzij het gedrag van tevoren aan de gebruiker wordt gemeld.
3.2.2 Bij input (Niveau A)
Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.
Informatie over succescriterium 3.2.2 Bij input
Uitkomst: Niet aanwezig
3.2.3 Consistente navigatie (Niveau AA)
Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.
Informatie over succescriterium 3.2.3 Consistente navigatie
Uitkomst: Voldoende
3.2.4 Consistente identificatie (Niveau AA)
Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.
Informatie over succescriterium 3.2.4 Consistente identificatie
Uitkomst: Voldoende
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier verschijnen bij het leeg laten van enkele formuliervelden meldingen als 'Deze waarde mag niet leeg zijn.' en 'Selecteer minimaal 1 categorie.'. Dit zijn instructies, geen foutmeldingen. Een foutmelding geeft aan wat er mis is gegaan en waar, zoals 'Het veld [naam veld] is niet ingevuld'.
Op pagina https://www.visitamstelveen.nl/nl verschijnen bij de 2 formulieren om aan te melden voor de nieuwsbrief geen foutmelding als er geen E-mailadres is ingevuld. Er wordt hier gebruik gemaakt van foutmeldingen die door de browser wordt gegenereerd. HTML5-foutmeldingen worden niet in alle browsers even goed ondersteund of blijven soms niet lang genoeg staan. Voeg zelf foutmeldingen toe aan formulieren om dit probleem op te lossen.
3.3.2 Labels of instructies (Niveau A)
Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.
Informatie over succescriterium 3.3.2 Labels of instructies
Uitkomst: Onvoldoende
Bevindingen: In de footer op elke pagina mist het invoerveld 'E-mailadres' een visueel label. Placeholdertekst geldt niet als label omdat deze verdwijnt wanneer men begint te typen.
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier missen de select-elementen onder 'Starttijd' en 'Eindtijd' een duidelijk label. Bijvoorbeeld 'Uren' en 'Minuten'.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda mist de combobox om de evenementen te sorteren een visueel label.
3.3.3 Foutsuggestie (Niveau AA)
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.
Informatie over succescriterium 3.3.3 Foutsuggestie
Uitkomst: Onvoldoende
Bevindingen: Bij alle formulieren wordt gebruik gemaakt van HTML5-validatie door de browser. HTML5-validatie worden niet in alle browsers even goed ondersteund. Niet elke browser geeft (voldoende) suggesties.
3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)
Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door de gebruiker te beheren gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt minstens één van de volgende zaken:
- Omkeerbaar: Verzendingen kunnen ongedaan gemaakt worden.
- Gecontroleerd: Door de gebruiker ingevoerde gegevens worden gecontroleerd op invoerfouten en de gebruiker wordt de mogelijkheid gegeven om ze te verbeteren.
- Bevestigd: Er is een mechanisme beschikbaar voor het beoordelen, bevestigen en verbeteren van informatie voordat de verzending wordt voltooid.
Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
Uitkomst: Niet aanwezig
4. Robuust
4.1 Compatibel
4.1.1 Parsen (Niveau A)
In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.
Informatie over succescriterium 4.1.1 Parsen
Uitkomst: Onvoldoende
Bevindingen: Op de homepage wordt in de hoofdnavigatie gebruik gemaakt van een opsomming door middel van het ul-element. Binnen deze opsomming bij 'Contact' komen elementen voor die geen opsommingsitem zijn (li-element) zijn. Zorg ervoor dat in de opsomming alleen li-elementen worden gebruikt.
Op de homepage is het button-element niet goed afgesloten. Zorg ervoor dat de HTML valideert zodat browsers de code interpreteren zoals het bedoeld is.
Op de homepage komen dubbele id's voor, namelijk id="mc-embedded-subscribe" en id="MERGE1". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.
4.1.2 Naam, rol, waarde (Niveau A)
Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://www.visitamstelveen.nl/nl kan de taal gekozen worden door middel van vlaggen, de Nederlandse en de Britse vlag. Aan elke link is een naam toegekend, nl' en 'en'. Deze tekst is nu verborgen met 'display:none' en wordt dus ook verborgen gehouden voor hulpsoftware. De tekst moet overigens ook duidelijker, bijvoorbeeld 'English' en 'Nederlands'. Zie ook SC 2.4.4.
Op elke pagina staat een navigatieknop. Deze is nu als link gecodeerd, terwijl het functioneel een knop is.
Op pagina https://www.visitamstelveen.nl/nl missen de pijltjesknoppen onder 'Uitagenda Amstelveen' een naam.
Op pagina https://www.visitamstelveen.nl/nl/eventaanmeldformulier is de functionaliteit 'Kies een foto' gecodeerd als <label>, dit is de verkeerde rol.
Dit komt ook voor bij de filteropties 'Vandaag', 'Morgen', etc. op pagina https://www.visitamstelveen.nl/nl/uitagenda .
Op pagina https://www.visitamstelveen.nl/nl/uitagenda hebben de filteropties zoals 'Film', 'Uitgaan', etc. geen correcte rol. Ze zijn gecodeerd als link maar zonder href. Link is niet de juiste rol, het zijn eerder checkboxes.
Op pagina https://www.visitamstelveen.nl/nl/uitagenda kan een datum gekozen worden. Dit werkt door middel van een kalender die uitklapt. Er wordt geen informatie aan hulpsoftware doorgegeven dat er een kalender uitklapt, en wat de bedoeling is (kiezen van een begin en einddatum).
Op pagina https://www.visitamstelveen.nl/nl/uitagenda mist de combobox in de code een naam/label. Het select-element heeft een title-attribuut, maar niet alle hulpsoftware gaat goed met het title-attribuut om.
Op pagina https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min is de tekst 'Dit ga je zien' gecodeerd als een link met een role=button. Dit element lijkt niet interactief, en zou dus ook niet als een interactief element gecodeerd moeten worden.
Op pagina https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum kunnen de foto en video's worden uitvergroot door erop te klikken. Deze knoppen hebben geen duidelijke naam. De knoppen die verschijnen (pijltje links/rechts/kruisje) hebben geen naam. Ze hebben alleen een tekst in het title-attribuut, wat niet voldoende is. Overigens kan de naam het beste in het Nederlands worden weergegeven.
Op pagina https://www.visitamstelveen.nl/nl/map zijn meerdere problemen met naam/rol/waarde. Zo vormen de filteropties een accordeon, maar zijn de elementen gecodeerd als label. Daarnaast missen ze een waarde, zoals uitgeklapt/ingeklapt en geselecteerd/niet geselecteerd.
De overige interactieve elementen, zoals het kruisje om de filteropties af te sluiten, de knop 'Filters' en de locaties op de kaart gecodeerd als <div> elementen. Dit moeten <buttons> zijn.
De locaties op de kaart missen ook een naam. Dit geldt ook voor de locaties op andere url's.
4.1.3 Statusberichten (Niveau AA)
In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Voldoende
Onderbouwing van de evaluatie
Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.
Steekproef getoetste webpagina's
- https://www.visitamstelveen.nl
- https://www.visitamstelveen.nl/nl/eventaanmeldformulier
- https://www.visitamstelveen.nl/nl/privacy
- https://www.visitamstelveen.nl/nl/zoeken?query=winkel
- https://www.visitamstelveen.nl/nl/uitagenda
- https://www.visitamstelveen.nl/en/shopping/opening-times
- https://www.visitamstelveen.nl/nl/ontdek-amstelveen/historie
- https://www.visitamstelveen.nl/nl/plan-je-bezoek/bereikbaarheid
- https://www.visitamstelveen.nl/nl/bestaatniet
- https://www.visitamstelveen.nl/nl/richtlijnen
- https://www.visitamstelveen.nl/nl/map
- https://www.visitamstelveen.nl/uploads/media/5ef4a4816ecdc/greenmap-pdf.pdf
- https://www.visitamstelveen.nl/uploads/media/5ebbf46ce18ca/200429-def-instructies-gebruik-invoerformulier.pdf
- https://www.visitamstelveen.nl/nl/routes/2033380210/cobra-museum-de-groene-route-35-min
- https://www.visitamstelveen.nl/nl/locaties/2788221432/cobra-museum
Ondersteunende technieken
Webbrowsers (useragents) en andere software
Bij dit onderzoek is de volgende software gebruikt:- Chrome, versie 91
- Firefox, versie 98
- Edge, versie 91
- Acrobat PRO DC
Bronnen
-
Website Accessibility Conformance Evaluation Methodology (WCAG-EM) Overview
www.w3.org/WAI/eval/conformance (Engels) -
Web Content Accessibility Guidelines (WCAG) 2.1 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG21-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.