Bevindingen voor je spreadsheet: Audit digitale toegankelijkheid website Gemeente Amstelveen

Naam website	Gemeente Amstelveen
Scope	Alle pagina's op amstelveen.nl Niet de pagina's op subdomeinen van amstelveen.nl zoals denkmee, data en werkenvoor (apart onderzoek) Niet de pagina's op loket.amstelveen.nl (apart onderzoek)

`nr`	`Bevinding`	`WCAG SC`	`Mogelijk verantwoordelijk`	`Status`
`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.`	`1.1.1`	`techniek, content, visuele vormgeving`
`2`	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. Er zijn meer logo's zonder alternatieve tekst.	`1.1.1`	`techniek, content, visuele vormgeving`
`3`	`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.`	`1.1.1`	`techniek, content, visuele vormgeving`
`4`	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.	`1.1.1`	`techniek, content, visuele vormgeving`
`5`	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.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`6`	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”.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`7`	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”. In het heronderzoek is geconstateerd dat de tabel nu koppen heeft. Maar het scope-attribuut ontbreekt nog.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`8`	`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.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`9`	`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.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`10`	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. De H1-code is weggehaald uit de alinea, maar de tekst "Amstelveen: groen, gezond en gelijke kansen voor iedereen" ziet eruit als een kop en moet dus ook als kop opgemaakt worden.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`11`	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.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`12`	`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.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`13`	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. In het heronderzoek zijn de 2 H2-tags zijn nu P-tags geworden. De hele set "7" en de tekst "Bestuur en Organisatie: realisme en uitvoeringskracht" moet één H1 worden.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`14`	`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.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`15`	`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.`	`1.3.2`	`content, visuele vormgeving`
`16`	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”.	`1.3.4`	`interactieontwerp`
`17`	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.	`1.4.1`	`interactieontwerp, visuele vormgeving`
`18`	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.	`1.4.4`	`interactieontwerp, content`
`19`	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. In het heronderzoek is gebleken dat dit deels goed is opgelost. Als je bijvoorbeeld in je browser op Ctrl+L drukt kun je het menu verlaten en alsnog onder het openstaande menu terecht komen.	`1.4.4`	`interactieontwerp, content`
`20`	`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.`	`1.4.10`	`interactieontwerp, content`
`21`	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.	`1.4.10`	`interactieontwerp, content`
`22`	`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.`	`1.4.12`	`interactieontwerp`
`23`	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.	`1.4.12`	`interactieontwerp`
`24`	`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.`	`2.1.1`	`techniek, content`
`25`	`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.`	`2.4.2`	`content, visuele vormgeving`
`26`	`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.`	`2.4.4`	`techniek, interactieontwerp, content, visuele vormgeving`
`27`	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.	`2.4.6`	`techniek, visuele vormgeving`
`28`	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/	`2.4.6`	`techniek, visuele vormgeving`
`29`	Niet afgekeurd: 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.	`2.5.3`	`techniek, interactieontwerp, content`
`30`	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.	`3.1.2`	`visuele vormgeving`
`31`	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.	`3.1.2`	`visuele vormgeving`
`32`	`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. Uit heronderzoek: listbox is weggehaald waar combobox weggehaald moet worden`	`4.1.2`	`techniek, content, visuele vormgeving`
`33`	`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.`	`4.1.3`	`techniek, content`

Bevindingen voor je spreadsheet:
Audit digitale toegankelijkheid website Gemeente Amstelveen

Scope van de evaluatie

Uitgebreide toetsresultaten

Onderbouwing van de evaluatie

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bronnen