Toegankelijke versie: https://www.toegankelijkheidscertificaat.nl/amstelveen.nl/issues/
Naam website | Gemeente Amstelveen |
---|---|
Scope |
|
Conformiteitsdoel | WCAG 2.1 niveau AA |
Basisniveau van toegankelijkheid ondersteund | Gangbare browsers en hulpsoftware. |
Een website bestaat vaak uit verschillende soorten pagina's, processen en content. De steekproef die wij maken is representatief voor de inhoud van de website. De onderzoeken voeren we handmatig uit waarbij we gebruik maken van hulpmiddelen. Dit doen wij zorgvuldig met mensen met ervaring. Omdat dit mensenwerk is kan het voorkomen dat een probleem niet is benoemd. Dit onderzoek is een momentopname. De website of app kan inmiddels veranderd zijn.
De gevonden problemen kunnen ook op pagina's buiten de steekproef voorkomen. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website of app kunnen nieuwe problemen ontstaan. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website of app kunnen nieuwe problemen ontstaan.
Het resultaat is voldoende als bij de uitkomst staat:
Het resultaat is onvoldoende als bij de uitkomst staat:
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 1: Op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=my1b3mj08f staat het logo van de gemeente Amstelveen. Dit is een informatieve afbeelding, maar mist een tekstalternatief. Voeg een alternatieve tekst toe met de zichtbare tekst in de afbeelding, bijvoorbeeld “logo gemeente Amstelveen” om dit probleem op te lossen.
Bevinding 2: Op alle pagina’s staat bovenin de footer een afbeelding van het logo van Amstelveen. Deze mist een tekstalternatief en is tevens verborgen voor hulpsoftware met het attribuut ‘aria-hidden’. Dit is een informatieve afbeelding en deze moet voor iedereen beschikbaar zijn en worden voorzien van een tekstalternatief, waarin de zichtbare tekst op de afbeelding terugkomt. Dit kan door binnen het svg-element een title-element te plaatsen. Haal het attribuut aria-hidden dan ook weg.
Bevinding 3: Als op pagina https://www.amstelveen.nl/ in de taalkeuzelijst voor “English” is gekozen is het tekstalternatief van de svg-afbeelding met het logo van de gemeente Amstelveen bovenaan de pagina "Municipality of Amstelveen Logo leading to the main page". Dat is heel netjes en correct vertaald naar het Engels, maar dat is hier niet voldoende. Dit tekstalternatief moet ook de visueel zichtbare tekst “gemeente Amstelveen” bevatten. Dit is met name belangrijk voor SC 2.5.3, omdat deze afbeelding ook als link fungeert.
Bevinding 4: In de PDF “Overzicht aanbod voor jeugd en gezin.pdf” staan in alle blokjes één en soms twee logo’s. Bijvoorbeeld het logo van “Verloskundige praktijk Amstelveen/Buitenveldert” in het blokje met de kop “Centering Pregnancy” en het logo van de gemeente Amstelveen in het blokje met de kop “Sociaal loket” op pagina 5. Dit zijn informatieve afbeeldingen, maar missen een tekstalternatief. Voorzie deze afbeeldingen van een tekstalternatief, waarin de tekst op de afbeelding terugkomt.
Bevinding 5: In de PDF “Overzicht aanbod voor jeugd en gezin.pdf” staat boven de koptekst “Kansrijke Start: De eerste 1.000 dagen” op pagina 3 een afbeelding van een zwangere vrouw. Deze afbeelding is hier als afbeelding opgemaakt met de Figure-tag, maar de alternatieve tekst ontbreekt. De afbeelding kan als decoratief worden beschouwd; codeer dan de afbeelding als een Artefact. Hier mag ook gekozen worden om de afbeelding en alternatieve tekst te geven. Laat dan de code Figure staan en vul de alternatieve tekst in. Dit is ook het geval bij de afbeeldingen op meer pagina's waaronder pagina 5 en pagina 10.
Bevinding 6: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” saat op pagina 3 een logo van "Logo Amstelveen 4 Global Goals". Deze heeft een alternatieve tekst "Logo Amstelveen 4 Global Goals" echter de tekst "Samen naar een duurzame wereld" ontbreekt. Vul deze afbeelding aan met deze alternatieve tekst.
Bevinding 7: ADVIES: Op alle pagina’s staat rechts bovenaan een afbeelding van de Nederlandse vlag. De afbeelding (img-element) bevat een alternatieve tekst “Nederlands flag”. De afbeelding bevat tevens het attribuut ‘role=”presentation”’, waardoor het img-element zijn rol als afbeelding verliest. Dit wordt niet afgekeurd, maar kan wel beter. Dit kan door het attribuut role=”presentation” te verwijderen en het alt-attribuut leeg te laten (alt=””). Op deze manier wordt de afbeelding ook genegeerd.
Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevinding 8: Op pagina https://www.amstelveen.nl/jongerenwerk staat een video waar tijdens de aftiteling het logo van “Jongerenwerk Amstelveen” en de URl “amstelveen.nl/jongerenwerk” in beeld komt. Omdat blinde en slechtziende mensen deze informatie niet kunnen zien moet er een alternatief beschikbaar zijn. Omdat er aan het eind van de video voldoende ruimte is in het audiospoor kan dit daaraan worden toegevoegd. In plaats hiervan mag ook een volledig uitgeschreven transcript worden ingezet. Voor succescriterium 1.2.5 voldoet een mediatranscript niet meer als voldoende ruimte is voor audiodescriptie.
Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevinding 9: Bij SC 1.2.3 is de video op pagina https://www.amstelveen.nl/jongerenwerk beschreven waar audiodescriptie of een media-alternatief ontbreekt. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie verplicht, als er daarvoor voldoende ruimte is in het audiospoor. Dat is hier het geval. Alleen een media-alternatief is hier niet meer voldoende als oplossing, maar mag uiteraard wel worden toegevoegd.
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 10: Op alle pagina’s zijn in de footer de h3-koppen “Raadhuis”, “Contact” en “Links” opgemaakt met het strong-element. Het strong-element is niet bedoeld voor visuele opmaak. Verwijder hier het strong-element en gebruik bij voorkeur CSS om koppen vetgedrukt weer te geven. https://www.amstelveen.nl/
Bevinding 11: Op pagina https://www.amstelveen.nl/nieuws is de koptekst “Kunt u niet vinden wat u zoekt?” opgemaakt als een alinea en tevens met het strong-element om deze vetgedrukt weer te geven. Maak deze tekst op als een echte kop, bij voorkeur met het h2-element. Haal tevens het strong-element hier weg.
Bevinding 12: Op pagina https://www.amstelveen.nl/ zijn de links van het toptakenmenu, waaronder “Verhuizen” en “Rijbewijs, paspoort en identiteitskaart” tevens als koppen opgemaakt. Deze koppen bevatten geen content omdat deze direct worden opgevolgd door koppen van hetzelfde niveau. Dit komt mede doordat de eronder staande alinea verborgen is met CSS display:none;. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Los dit op door de koppen (h3-elementen) te verwijderen. Het is voldoende dat deze links in een opsomming staan, zoals hier het geval is. Hetzelfde doet zich voor op de Engelstalige pagina.
Bevinding 13: Op pagina https://www.amstelveen.nl/ staan onder de kop “Projecten, plannen en beleid” een tweetal blokken met de koppen “Behoud metrolijn 51 belangrijk voor Amstelveen” en “Vergroenen van Amstelveen”. De kop “Weekend afsluitingen A9 in 2 richtingen” bevat geen content omdat deze direct wordt gevolgd door een kop van hetzelfde niveau. Ook is alle eronder staande content, zoals de datum, verborgen met CSS display:none;. Hetzelfde doet zich voor op de Engelstalige pagina met de blokken onder de kop “Projects, plans and policies”.
Bevinding 14: Op pagina https://www.amstelveen.nl/over-deze-website staat onder de kop “RSS-feeds” een opsomming van verschillende RSS-feeds. Deze links horen bij elkaar en moeten daarom opgenomen te worden in een opsomming (ul-element).
Bevinding 15: Op pagina https://www.amstelveen.nl/cursus-amstelveense-raad-iets-voor-mij staat onder de kop “Planning” een tabel met de kopteksten “Datum”, “Tijd” en “Onderwerp”. Deze zijn in de code niet opgemaakt als koppen en dat moet wel als er meer dan twee kolommen zijn. Los dit op door deze op te maken met het th-element in plaats van het td-element en voorzie deze van het attribuut scope=”col”.
Bevinding 16: Op pagina https://www.amstelveen.nl/cursus-amstelveense-raad-iets-voor-mij staat onder de kop “De cursus” een overzicht van de avonden waarop de cursus gegeven wordt. Visueel is het duidelijk dat dit een opsomming is door de opsommingstekens die ervoor staan. In de code is dat niet duidelijk. Los dit op door deze op te nemen in een opsomming. Een andere optie is om de teksten “Avond 1” tot en met “Avond 4” op te maken als koppen, bij voorkeur met het h3-element.
Bevinding 17: In de PDF “Overzicht aanbod voor jeugd en gezin.pdf” zijn alle kopteksten in het document opgemaakt als alinea’s, met de P-tag. Dat is niet correct. Maak deze op in de code als echte koppen (H1 tot en met H6). Het gaat om onder andere de koppen “Kansrijke Start: De eerste 1.000 dagen”, “Centering Pregnancy”, “Omschrijving” en “Organisatie en Contact” op pagina 3. Dit doet zich door het hele document voor.
Bevinding 18: In de PDF “Overzicht aanbod voor jeugd en gezin.pdf” staat op pagina 2 een inhoudsopgave. Alle items in de inhoudsopgave zijn opgemaakt als alinea met de P-tag. Dat is niet correct. Maak dit overzicht op als een opsomming, bijvoorbeeld met de L-tag of de TOC-tag. Bij voorkeur wordt hier gebruik gemaakt van de TOC-tag, die speciaal voor inhoudsopgaves beschikbaar is.
Bevinding 19: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” zijn de teksten “Warm hart voor Amstelveen” en “Met kansen voor de toekomst” opgemaakt als koppen met de H1-tag. Dit zijn geen koppen, Deze tekst moet samengevoegd worden en opgemaakt worden als een alinea met de P-tag.
Bevinding 20: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” zijn de alinea’s startend met “Deze overeenkomst tussen de VVD, D66, Partij …” en “Wij willen gezond stedelijk …” op pagina 2 volledig opgemaakt als een kop met de H1-tag. Dat is niet correct. Dit is een alinea en moet daarom ook als zodanig opgemaakt worden met de P-tag. Dit doet zich op meerdere plaatsen voor. Controleer dit voor het hele document.
Bevinding 21: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” zijn de kopteksten “Gezond en groen Amstelveen” en “Amstelveen heeft hart voor iedereen” opgemaakt als een alinea met de P-tag. Dit zijn echter koppen en deze moeten daarom in de code ook opgemaakt worden als koppen (H1 tot en met H6). Dit doet zich op meerdere plaatsen in het document voor, bijvoorbeeld met de kopteksten “Preventie, welzijn en zorg” op pagina 4 en met de kop “Jeugd” op pagina 5. Controleer dit voor het hele document.
Bevinding 22: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” staat op pagina 3 onder de kop “Leeswijzer” de volgende tekst “Ter illustratie daarvan hebben we per programma een opmerkelijk actiepunt in een wit kader en een voorbeeld van onze koers in een beige kader opgenomen.”. Deze informatie is nu niet voor gebruikers van voorleessoftware beschikbaar. Zie ook succescriterium 1.4.1.
Bevinding 23: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” is de koptekst “2 Onderwijs, sport en cultuur: talent komt tot bloei” opgesplitst over één H1-tag en twee H2-tags. Dit is één kop en moet daarom samengevoegd worden tot één kop. Dit doet zich bij al dit soort kopteksten voor, bijvoorbeeld bij de kop “7 Bestuur en Organisatie: realisme en uitvoeringskracht” op pagina 22.
Bevinding 24: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” staat onder de kop “1 Sociaal domein: kansen voor iedereen” een opsomming, startend met 1.1. Deze nummering staat nu binnen de alinea's (P-tag). Maak van de nummering kopjes (H3-tag) of maak er een opsomming van door dit de genummerde alinea's met een Li-tag te coderen. Deze moet in de code ook als een opsomming (L-tag) gecodeerd worden. Deze opsommingen komen per hoofdstuk opnieuw voor.
Informatie over succescriterium 1.3.2 Betekenisvolle volgorde
Uitkomst: Onvoldoende
Bevinding 25: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” staat op pagina 4 onder de kop “Preventie, welzijn en zorg” het actiepunt “We hebben in ons sociale beleid …”. Deze tekst staat in de code niet onder deze kop. Dat is niet correct. Zorg ervoor dat de visueel zichtbare informatie in dezelfde volgorde voorkomt in de code. Dit doet zich op meerdere plaatsen in het document voor.
Informatie over succescriterium 1.3.5 Identificeer het doel van de input
Uitkomst: Onvoldoende
Bevinding 26: Op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=my1b3mj08f staat een formulier waar de bezoeker het eigen e-mailadres, de voornaam en achternaam kan invullen. 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. Dit is alleen correct gedaan bij het e-mailadres. Voorzie ook de andere velden van een correcte autocomplete-waarde. Voor voornaam is dat autocomplete="given-name" en voor achternaam is dat autocomplete=”family-name”.
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 27: In de PDF “Warm_hart_voor_Amstelveen_Coalitieakkoord_2022-2026.pdf” staat op pagina 3 onder de kop “Leeswijzer” de volgende tekst “Ter illustratie daarvan hebben we per programma een opmerkelijk actiepunt in een wit kader en een voorbeeld van onze koers in een beige kader opgenomen.”. Deze informatie is nu alleen van kleur afhankelijk en dat is een probleem voor mensen die slechtziend of kleurenblind zijn. Zorg ervoor dat ook zonder kleurgebruik duidelijk is dat het om een 'opmerkelijk actiepunt' of 'een voorbeeld van onze koers' gaat. Tevens heeft de rand om het beige kader en de witte achtergrond op bijvoorbeeld pagina 4 met onvoldoende contrasteert met de witte achtergrond. De contrastverhouding is 1,8:1 maar moet minstens 3,0:1 zijn. Deze kleurcombinatie komt ook op andere plekken voor.
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 28: In de PDF “Overzicht aanbod voor jeugd en gezin.pdf” op pagina 1 is een lichtblauwe balk met daarin tekst waaronder een rode link. Deze link heeft een te laag contrast. De contrastverhouding is 4:1 waar dit 4,5:1 moet zijn.
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 29: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan doet zich het volgende voor: Het zoekveld bovenaan de pagina wordt niet getoond, alleen de zoeken-knop. Als hierop geklikt wordt verschijnt er heel kort in beeld het invoerveld, maar direct daarna wordt de pagina https://www.amstelveen.nl/zoeken?searchtext= geopend. Dat lijkt niet de bedoeling. Los dit op door ervoor te zorgen dat het invoerveld op de pagina getoond wordt en deze niet automatisch naar de zoekpagina gaat of maak van de knop een link als het de bedoeling is dat naar de zoekpagina wordt genavigeerd.
Bevinding 30: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan doet zich het volgende voor: Op pagina https://www.amstelveen.nl/zoeken?searchtext=amstelveen staat onderaan de zoekresultaten een paginering. Bij het enkele pijltje ontbreekt de omschrijving “Volgende” en bij het dubbele pijltje ontbreekt de omschrijving “Laatste”. Een vergelijkbare situatie doet zich onder andere voor op pagina https://www.amstelveen.nl/nieuws.
Bevinding 31: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan doet zich het volgende voor: Op onder andere pagina https://www.amstelveen.nl/toegankelijkheid-van-deze-website staat het pagina-menu “Op deze pagina”. Deze bedekt andere content wanneer deze is geopend. Er kan namelijk buiten dit menu worden getabd. Los dit bijvoorbeeld op door ervoor te zorgen dat dit met de Escape-toets kan worden gesloten, of dat dit automatisch sluit als er buiten het menu wordt getabd of door de content naar beneden te duwen als het menu verschijnt.
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevinding 32: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan doet zich het volgende voor: Als op pagina https://www.amstelveen.nl/zoeken?searchtext=amstelveen het zoekveld in het contentgedeelte wordt leeggemaakt dan is de placeholdertekst “Waar bent u naar op zoek?” niet meer volledig zichtbaar. Deze tekst wordt nu slechts gedeeltelijk weergegeven. Dit is verlies van informatie. Zorg dat de tekst volledig zichtbaar is. Maar nog beter is om geen placeholdertekst te gebruiken.
Bevinding 33: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan doet zich het volgende voor: Op pagina https://www.amstelveen.nl/projecten-plannen-en-beleid is aan de rechterkant van de pagina onder “Sorteren op” een dropdownmenu beschikbaar. Niet alle opties worden hier volledig in beeld gebracht. De eerste optie “Publicatiedatum Oplopend” wordt bijvoorbeeld weergegeven als “Publicatiedatum Oplop”. Dit is verlies van informatie. Zorg ervoor dat alle opties volledig getoond worden.
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 34: Op alle pagina’s staan rechts bovenaan de pagina de rode knop “Menu”. Als deze focus krijgt verschijnt er om de knop een lichtblauwe focusrand. Het contrast tussen de lichtblauwe rand en de witte achtergrond is 1,3:1, maar moet minimaal 3,0:1 zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
Bevinding 35: Op pagina https://www.amstelveen.nl/contact-en-openingstijden staat onder de kop “Contact en openingstijden” de link “Bel: 020 540 49 11”. Als deze link focus krijgt verschijnt er om de link een lichtblauwe focusrand. Het contrast van deze rand met de witte achtergrond is 1,3:1. Dit is onvoldoende en moet minimaal 3,0:1 zijn.
Bevinding 36: Op pagina https://www.amstelveen.nl/zoeken?searchtext=amstelveen staan onderaan in het contentgedeelte twee grijze blokjes met de links “429 resultaten lokale wet- en regelgeving” en “11239 resultaten officiële publicaties”. Als deze links focus krijgen verschijnt er om de links een lichtblauwe focusrand. Het contrast van deze rand met de grijze achtergrond is 1,1:1. Dit is onvoldoende en moet minimaal 3,0:1 zijn. Let op: Deze lichtblauwe focusrand wordt veelvuldig ingezet. Niet alle situaties waar dit voorkomt zijn hier benoemd. Controleer dit daarom voor alle pagina’s.
Bevinding 37: ADVIES: Op pagina https://www.amstelveen.nl/ staan onder het toptakenmenu een aantal witte linkblokken, waaronder het blok met de kop “Contact, melden, klacht of compliment”. Als deze blokken focus krijgen verschijnt er om het blok een lichtblauwe focusrand, die onvoldoende contrasteert met de nog lichtblauwere achtergrond van de blokken. Dit wordt hier niet afgekeurd, omdat ook het pijltje achter de kopteksten iets naar rechts verschuift. Dit kan echter wel duidelijker door een kleurencombinatie met voldoende contrast te gebruiken. Dit doet zich veelvuldig voor op deze website.
Informatie over succescriterium 1.4.12 Tekstafstand
Uitkomst: Onvoldoende
Bevinding 38: Wanneer bezoekers de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium dan doet zich het volgende voor bij een schermresolutie van 1280x1024 pixels. Onderaan elke pagina staan vier social-media-iconen in een rood vlak. Dit vlak valt nu grotendeels over de link “Webarchief” waardoor deze niet meer leesbaar is. Zorg ervoor dat informatie beschikbaar en leesbaar blijft, ook wanneer bezoekers een eigen tekstopmaak toepassen.
Bevinding 39: Wanneer bezoekers de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium dan doet zich het volgende voor. Op pagina https://www.amstelveen.nl/projecten-plannen-en-beleid zijn de eerste opties van de keuzelijst “Publicatiedatum Oplopend” en “Publicatiedatum Aflopend” niet volledig zichtbaar als deze geselecteerd zijn, Deze worden aan de rechterkant afgekapt. Zorg ervoor dat informatie beschikbaar en leesbaar blijft, ook wanneer bezoekers een eigen tekstopmaak toepassen.
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevinding 40: In de PDF “Overzicht aanbod voor jeugd en gezin.pdf” zijn alle links, behalve die in de inhoudsopgave, alleen te bedienen met de muis, maar niet met het toetsenbord. Het gaat bijvoorbeeld om de links “www.helendemeesters.nl” en “info@helendemeesters.nl” op pagina 3 en de link marnakits@prezens.nl en “www.ggzingeest.nl/activiteiten/mamakits-spreekuur” op pagina 4. Los dit op door deze in de code ook op te maken als links met de Link-tag. Deze links staan onderaan in elk blokje.
Informatie over succescriterium 2.4.1 Blokken omzeilen
Uitkomst: Voldoende
Bevinding 41: ADVIES: Als je op de skiplink klikt verplaats je naar de content. Op alle pagina’s, behalve pagina https://www.amstelveen.nl/zoeken?searchtext=amstelveen, wordt de “Lees voor” widget overgeslagen. Wees hier consequent in.
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 42: De paginatitel op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=my1b3mj08f ontbreekt. Zorg dat er door middel van het title-element een beknopte titel aanwezig is die de inhoud van de pagina beschrijft.
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevinding 43: Als op pagina https://www.amstelveen.nl/projecten-plannen-en-beleid één van de filteropties wordt geactiveerd, bijvoorbeeld de filteroptie “Ontwerp” onder het groepslabel “Kies fase” dan verplaatst de focus zich. Laat de focus op de gekozen checkbox staan om te voorkomen dat bezoekers die gebruikmaken van toetsenbord niet verdwalen op het scherm.
Bevinding 44: Op alle pagina’s staat rechts bovenaan de knop “Menu”. Als deze wordt geactiveerd blijft de focus op deze knop staan. Dat is niet correct, De focus moet dan worden verplaatst naar of binnen de lightbox. Zolang dit venster openstaat mag de focus ook niet op een element komen buiten dit venster. Als het venster gesloten wordt door buiten het venster te tabben gaat de focus naar de link “Mijn Amstelveen”. Als het venster gesloten wordt door de Escape-toets te activeren lijkt de focus naar het body-element te gaan. Dit is geen logische volgorde. Als het venster gesloten wordt, moet de focus terug keren op de knop “Menu” waarmee het geopend werd. Zie ook SC 4.1.2.
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Voldoende
Bevinding 45: ADVIES: Op pagina https://www.amstelveen.nl/nieuws worden bij de links “Volgende” en “Vorige” twee keer de ‘groter dan’ tekens getoond. Dit komt, omdat het hier als svg-afbeelding wordt getoond, maar daar bovenop ook nog een keer onderdeel is van de linkstekst “Volgende >” en “Laatste >>”. Het is beter om deze ‘groter-dan’ tekens uit de linktekst te verwijderen.
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevinding 46: De knop “Aanmelden” onderaan het formulier op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=my1b3mj08f beschrijft onvoldoende het doel van de knop. Het is niet duidelijk waarvoor men zich aanmeldt. Los dit bijvoorbeeld op door dit aan te vullen tot “Aanmelden voor nieuwsbrief Amstelveen”. Deze aanvulling moet hier ook visueel zichtbaar zijn, omdat het in het geheel niet duidelijk is waarvoor het formulier bedoeld is. Dit wordt mede veroorzaakt door de missende paginatitel.
Bevinding 47: Als na de link “Mijn Amstelveen” verder wordt getabd dan komt de focus op het div-element met role=”combobox”. Dit element heeft als toegankelijke naam “language”. Behalve dat dit Engelstalig is, beschrijft dit onvoldoende het doel van dit element. Het doel is namelijk om een taal te selecteren. Dit moet duidelijk terug komen in de toegankelijke naam. Om zowel het doel als de geselecteerde taal aan te geven, zou dit bijvoorbeeld kunnen worden gecombineerd tot “Selecteer een andere taal. De huidige taal is Nederlands”. https://www.amstelveen.nl/
Bevinding 48: Op pagina https://www.amstelveen.nl/jongerenwerk staat onder de kop “Coaching voor jongeren” een video. Deze bevindt zich binnen een genest iframe-element. Op het eerste iframe-element bevat het title-attribuut alleen een beschrijving van de inhoud van de video, namelijk “Jongerenwerk Amstelveen”. Dat is niet voldoende. Er moet ook aangegeven worden welk contenttype het betreft, namelijk “video”. Voeg dit alsnog toe aan het title-attribuut. Het geneste iframe-element mist een title-attribuut en daarmee een toegankelijke naam. De meest logische oplossing is hier om de twee iframe-elementen te combineren tot één. Let er dan wel op dat het resterende iframe-element een title-attribuut bevat met een waarde zoals hierboven beschreven.
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevinding 49: Op pagina https://www.amstelveen.nl/zoeken?searchtext=amstelveen kan je het menu openen. Het zoekveld blijft vooraan in beeld staan; hierdoor is de focus op een paar items in het menu niet zichtbaar als je er met de tabtoets doorheen navigeert.
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevinding 50: Het volgende doet zich voor als op pagina https://www.amstelveen.nl/ in de taalkeuzelijst voor “English” is gekozen. Bovenaan de pagina staat het logo van de gemeente Amstelveen in een link. De toegankelijke naam van deze link "Municipality of Amstelveen Logo leading to the main page" bevat niet de naam die visueel zichtbaar is. Hierdoor is de knop lastig met spraakbesturing te bedienen. Zorg ervoor dat de visuele naam “gemeente Amstelveen” aaneengesloten in de toegankelijke naam aanwezig is, liefst vooraan.
Informatie over succescriterium 3.1.2 Taal van onderdelen
Uitkomst: Onvoldoende
Bevinding 51: Het volgende doet zich voor als op pagina https://www.amstelveen.nl/ in de taalkeuzelijst voor “English” is gekozen. Als de focus in het zoekveld boven aan de pagina staat en er wordt bijvoorbeeld de zoekterm “gemeente” getypt, dan verschijnt eronder een lijst met zoekresultaten. Deze lijst bevat Nederlandstalige zoekresultaten en dit wijkt af van de hoofdtaal (Engels) van de pagina. Hierdoor kan voorleessoftware de Nederlandse teksten niet op de juiste manier presenteren. Los dit bijvoorbeeld op door de Nederlandstalige resultaten te markeren als Nederlands.
Bevinding 52: Als in het zoekformulier bovenaan elke pagina bijvoorbeeld de zoekterm “gemeente” wordt ingevoerd, dan verschijnt een lijst met zoekresultaten. Deze lijst met het attribuut ‘role=”listbox”’ heeft als toegankelijke naam de waarde van het div-element erboven met role=”status”. Deze bevat de tekst “Navigate up/down to select results or confirm directly to view all results.”. Dit is een andere taal dan de hoofdtaal van de pagina. Als aan het invoerveld role="combobox" wordt toegekend is het voor de bezoeker met hulpsoftware al duidelijk hoe dit veld werkt met het toetsenbord. Dat maakt de Engelse tekst overbodig.
Bevinding 53: Als op pagina https://www.amstelveen.nl/ in de taalkeuzelijst voor “English” is gekozen zijn niet alle Nederlandstalige teksten vertaald naar de Engelse taal. De 5 rode knoppen op de homepage zitten in een opsomming genaamd "Geaccentueerde onderwerpen" en op de opsomming startend met “Contact, report, complaint or compliment” staat het attribuut aria-label met de waarde “Andere onderwerpen”. Dit wordt voorgelezen als de focus op het eerste opsommingsitem komt. Deze taal wijkt af van de hoofdtaal van de pagina. De beste oplossing is hier om deze tekst om te zetten naar Engelstalige tekst; ook kan gekozen worden om de tekst hier weg te laten als duidelijk is wat de opsomming omvat.
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevinding 54: Op alle pagina’s staat bovenaan de pagina een zoekformulier. Als daar wat ingetikt wordt, bijvoorbeeld “gemeente” verschijnt er een lijst met zoekresultaten. Dit is niet helemaal correct opgemaakt. Om dit goed te laten werken moet het zoekveld opgemaakt worden als een combobox met role=”combobox”. Dat is nu niet het geval. Deze rol staat nu op een omliggend elemen; en dat werkt niet. Het invoerveld is wel al voorzien van de attributen ‘aria-autocomplete’ en ‘aria-owns’. Let op: het is beter om in plaats van het attribuut ‘aria-owns’ het attribuut ‘aria-controls’ te gebruiken, omdat dit beter wordt ondersteund door verschillende browsers. Dezelfde situatie doet zich voor met het zoekformulier onder de kop “Zoeken” op pagina https://www.amstelveen.nl/zoeken?searchtext=amstelveen.
Bevinding 55: Op pagina https://www.amstelveen.nl/jongerenwerk staat onder de kop “Coaching voor jongeren” een video. Deze bevindt zich binnen een genest iframe-element. Het geneste iframe-element mist een toegankelijke naam. Zie voor een oplossing hiervan SC 2.4.6.
Bevinding 56: Op alle pagina’s staat bovenin de knop “Menu”. Als deze knop wordt geactiveerd verschijnt er een lightbox (dialoogvenster) met daarin het menu. Dit venster mist onder andere een rol en een naam. Voorzie dit venster van de attributen role=”dialog” en aria-modal=”true” om aan te geven dat het een dialoogvenster is en tevens dat de achterliggende content niet beschikbaar is voor interactie. Voorzie dit interactieve element van een toegankelijke naam, bijvoorbeeld “Hoofdmenu”. Gebruik hiervoor bijvoorbeeld het attribuut aria-label.
Bevinding 57: Op alle pagina’s staat bovenin een keuzelijst voor het selecteren van een taal. Deze is opgemaakt met de rollen role=”combobox” en role=”listbox”. Een element kan maar een rol hebben. Het is hier voldoende om alleen role=”listbox” te gebruiken.
Bevinding 58: Op alle pagina’s staat bovenin de knop “Menu”. Deze is bedoeld om een lightbox te openen en te sluiten. Op deze knop is het attribuut aria-expanded geplaatst, om aan te geven of de lightbox geopend dan wel gesloten is. In combinatie met een modal lightbox is dit geen werkbare situatie. Dit komt omdat, zodra de lightbox geopend is, de focus in de lightbox moet staan en niet op de "Menu"-knop. De focus moet vervolgens binnen de lightbox blijven tot deze gesloten wordt. Hierdoor is deze knop dus niet meer beschikbaar om de lightbox te sluiten. Dit kan worden opgelost door binnen de lightbox een knop toe te voegen om de lightbox te sluiten.
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Onvoldoende
Bevinding 59: Als op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=my1b3mj08f de knop Aanmelden het formulier wordt verstuurd via de knop 'aanmelden' dan constateren we met schermvoorleessoftware dat niet altijd altijd de hele foutmeldingen bovenaan het formulier wordt voorgelezen. Wat hier precies misgaat is niet duidelijk; de focus wordt voortijdens of na het laden verplaatst waardoor soms stukken tekst overgeslagen wordt.
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.
Bij dit onderzoek is de volgende software gebruikt:
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.