Bevindingen voor je spreadsheet: Audit digitale toegankelijkheid website Gemeente Aalsmeer

Naam website	Gemeente Aalsmeer
Scope	Alle pagina's op aalsmeer.nl De aanmeldpagina op gemeentenieuwsbrief.email-provider.eu Niet de pagina's op subdomeinen van aalsmeer.nl zoals loket, data en edienstburgerzaken (apart onderzoek) Niet de overige belangrijke processen die op andere domeinen staan (apart onderzoek)

`nr`	`Bevinding`	`WCAG SC`	`Mogelijk verantwoordelijk`	`Status`
`1`	`Op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=rzxj5co3hr staat het logo van de gemeente Aalsmeer. Dit is een informatieve afbeelding, maar mist een tekstalternatief. Voeg een alternatieve tekst toe met de zichtbare tekst in de afbeelding, bijvoorbeeld “logo gemeente Aalsmeer” om dit probleem op te lossen.`	`1.1.1`	`techniek, content, visuele vormgeving`
`2`	In de PDF “Overzicht aanbod voor ouders en kinderen Aalsmeer.pdf” staat in alle blokjes een logo. Bijvoorbeeld het logo van “Verloskundigenpraktijk Aalsmeer e.o.” in het blokje met de kop “Centuring Pregnancy” en het logo van de gemeente Aalsmeer in het blokje met de kop “Sociaal loket” op pagina 5. Dit zijn informatieve afbeeldingen, maar ze zijn niet getagd als afbeelding. Maak deze afbeeldingen op met de Figure-tag en voorzie deze van een tekstalternatief, waarin de tekst op de afbeelding terugkomt.	`1.1.1`	`techniek, content, visuele vormgeving`
`3`	Op pagina https://www.aalsmeer.nl/ zijn de links van het toptakenmenu, waaronder “Rijbewijs, paspoort en identiteitskaart” en “Uittreksel en verklaring” 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`
`4`	Op pagina https://www.aalsmeer.nl/ staan onder de kop “Projecten, plannen en beleid” een meerdere blokken met onder andere de koppen “Meedoen in Aalsmeer” en “Masterplan Energie Aalsmeer: aan de slag met de energietransitie”. De koppen bevatten 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`
`5`	Op pagina https://www.aalsmeer.nl/rekenkamer-en-auditcommissie staat onder de kop “Leden van de rekenkamer” een tabel. De kolomkoppen zijn hier met het strong-element opgemaakt om ze vetgedrukt weer te geven. Het strong-element is alleen bedoeld om belangrijke woorden die extra nadruk behoeven te markeren. Het is niet bedoeld om koppen vetgedrukt weer te geven. Maak deze kopteksten op met het th-element in plaats van met het td-element en voorzie deze van het attribuut scope=”col”. En verwijder het strong-element. Dezelfde situatie doet zich voor met de tabel onder de kop “Leden van de auditcommissie”. Los dit op dezelfde manier op. Heronderzoek: attribuut scope="col" ontbreekt nog	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`6`	In de PDF “Folder Wet maatschappelijke ondersteuning Aalsmeer.pdf” staat op pagina 3 een inhoudsopgave. Alle items in de inhoudsopgave zijn gecodeerd als alinea met de P-tag. Dat is niet correct. Dit overzicht moet gecodeerd worden als een opsomming, bijvoorbeeld met de L-tag of de TOC-tag. Bovendien is het een opsomming met meerdere niveaus en deze niveauverschillen moeten terugkomen in de code. Bij voorkeur wordt hier gebruikgemaakt van de TOC-tag, die speciaal voor inhoudsopgaves beschikbaar is. Niet verplicht, maar wel beter is om ook de verwijzingen naar de pagina’s op te nemen in een link, zodat er direct naar de desbetreffende pagina kan worden genavigeerd.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`7`	`In de PDF “Folder Wet maatschappelijke ondersteuning Aalsmeer.pdf” zijn alle kopteksten in het document gecodeerd als alinea’s, met de P-tag. Dat is niet correct. Deze moeten gecodeerd worden als echte koppen (H1 tot en met H6). Het gaat om onder andere de koppen “1. Inleiding” en “Hoe krijgt u hulp?” op pagina 4. En op pagina 5 zijn dat onder andere “Hulp bij het huishouden” en “Zorgaanbieders”. Controleer dit voor het hele document.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`8`	`In de PDF “Folder Wet maatschappelijke ondersteuning Aalsmeer.pdf” staat onderaan de pagina de alinea startend met “Soms kunnen kleine aanpassingen al helpen.”. Deze loopt door op de volgende pagina, maar is opgesplitst in twee alinea’s. Dat is niet de bedoeling. Voeg deze samen tot één alinea.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`9`	In de PDF “Overzicht aanbod voor ouders en kinderen Aalsmeer.pdf” zijn alle kopteksten in het document gecodeerd als alinea, met de P-tag. Dat is niet correct. Deze moeten gecodeerd worden 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. Zorg er daarbij ook voor dat het juiste kopniveau wordt gebruikt, zodat de structuur van het document hierin duidelijk wordt weerspiegeld.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`10`	`In de PDF “Overzicht aanbod voor ouders en kinderen Aalsmeer.pdf” staat op pagina 2 een inhoudsopgave. Alle items in de inhoudsopgave zijn gecodeerd als alinea met de P-tag. Dat is niet correct. Dit overzicht moet gecodeerd worden als een opsomming, bijvoorbeeld met de L-tag of de TOC-tag. Bij voorkeur wordt hier gebruikgemaakt van de TOC-tag, die speciaal voor inhoudsopgaves beschikbaar is.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`11`	`ADVIES: Op pagina https://www.aalsmeer.nl/nieuwsbrieven staat onder de koppen “Nieuwsbrief Aalsmeer”, “Duurzaam Aalsmeer” en “Visit Aalsmeer” steeds de link “Aanmelden”. Deze link is opgenomen in een opsomming. Dit mag in principe alleen als een opsomming bestaat uit meerdere opsommingsitems of wanneer er bijvoorbeeld meerdere nieuwsbrieven toegevoegd kunnen worden. Deze hoeven er dan op dit moment nog niet bij te staan.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`12`	Op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=rzxj5co3hr 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.5`	`techniek, content`
`13`	In de PDF “Folder Wet maatschappelijke ondersteuning Aalsmeer.pdf” komen links voor in de lopende tekst die zich alleen door kleur onderscheiden van de omliggende tekst. Het gaat bijvoorbeeld om de links “www.aalsmeer.nl/wmo” op pagina 4 en de link “www.aalsmeer.nl/bezwaarschrift” op pagina 15. Dat mag alleen als de contrastverhouding tussen beiden minimaal 3,0:1 is. In dit geval is dit slechts 2,6:1 en dat is niet voldoende. Beter en duidelijker is overigens om links in lopende tekst te onderstrepen.	`1.4.1`	`interactieontwerp, visuele vormgeving`
`14`	Op pagina https://www.aalsmeer.nl/zoeken?searchtext=aalsmeer staat onderaan de paginering met links naar de verschillende pagina’s. Het donkergroene nummer 1 contrasteert onvoldoende met de lichtgroene achtergrond. Hetzelfde doet zich voor met de andere paginanummers en met de links “Eerste”, “Vorige”, “Volgende” en “Laatste” als deze focus of hover krijgen. De contrastverhouding tussen tekst en achtergrond is slechts 2,9:1, maar moet minimaal 4,5:1 zijn ook bij hover en focus. Dit probleem doet zich op meerdere pagina’s met paginering voor, waaronder https://www.aalsmeer.nl/nieuws en https://www.aalsmeer.nl/projecten-plannen-en-beleid. Controleer dit voor alle pagina’s.	`1.4.3`	`interactieontwerp`
`15`	Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan wordt het zoekveld bovenaan elke pagina 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.aalsmeer.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`
`16`	`Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan doet zich het volgende voor: Als op pagina https://www.aalsmeer.nl/zoeken?searchtext=aalsmeer het zoekveld 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`
`17`	Op pagina https://www.aalsmeer.nl/projecten-plannen-en-beleid staan onder de groepslabels “Kies thema”, “Kies wijk”, “Kies fase” en “Kies participatiestatus” een aantal checkboxen, waarbij de originele checkbox visueel is verborgen en de checkboxen worden weergegeven als vierkantjes met een lichtgrijze rand. Het contrast van deze randen met de witte achtergrond is te laag. De contrastverhouding is 1,2:1, maar moet minimaal 3,0:1 zijn. En als een checkbox geactiveerd is verschijnt er in het vierkantje een grijs blokje. Ook hiervan is het contrast te laag; een contrastverhouding van slechts 1,2:1. Ook hier moet het contrast minimaal 3,0:1 zijn. Ook de contrastverhouding van de randen van de keuzelijst “Sorteren op” is met 1,2:1 te laag.	`1.4.11`	`interactieontwerp`
`18`	`Op pagina https://www.aalsmeer.nl/zoeken?searchtext=aalsmeer staat in het contentgedeelte een zoekformulier. Op de zoeken-knop staat een lichtgroen icoontje van een vergrootglas. Het contrast van dit icoon met de witte achtergrond is te laag. De contrastverhouding is slechts 1,8:1. Deze knop bevat de tekst “Zoeken” met voldoende contrast, maar bij een lage resolutie verdwijnt dit woord en is alleen de afbeelding nog zichtbaar. Zorg voor een contrastverhouding van minimaal 3,0:1.`	`1.4.11`	`interactieontwerp`
`19`	ADVIES: Op pagina https://www.aalsmeer.nl/ staan onder het toptakenmenu een aantal lichtgroene linkblokken, waaronder het blok met de kop “Contact, melden, klacht of compliment”. Als deze blokken focus krijgen verschijnt er om het blok een groene focusrand, die onvoldoende contrasteert met de witte achtergrond van de blokken. Dit wordt hier niet afgekeurd, omdat ook het pijltje achter de kopteksten iets naar rechts verschuift. Dit kan wel duidelijker door een kleurencombinatie met voldoende contrast te gebruiken. Dit doet zich veelvuldig voor op deze website.	`1.4.11`	`interactieontwerp`
`20`	`Wanneer bezoekers de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium dan doet zich het volgende voor: Onderaan elke pagina staan vier social media iconen in een roodbruin vlak. Dit vlak valt nu deels 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`
`21`	`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.aalsmeer.nl/projecten-plannen-en-beleid zijn de eerste opties van de keuzelijst “Publicatiedatum Oplopend” en “Publicatiedatum Aflopend” niet volledig zichtbaar zichtbaar als deze geselecteerd zijn, Deze worden aan de rechterkant afgekapt.`	`1.4.12`	`interactieontwerp`
`22`	`In de PDF “Folder Wet maatschappelijke ondersteuning Aalsmeer.pdf” zijn alle links alleen te bedienen met de muis, maar niet met het toetsenbord. Het gaat bijvoorbeeld om de link “www.aalsmeer.nl/wmo” op pagina 4 en de link “www.aalsmeer.nl/bezwaarschrift” op pagina 15. Los dit op door deze dit te coderen als links met de Link-tag.`	`2.1.1`	`techniek, content`
`23`	`In de PDF “Overzicht aanbod voor ouders en kinderen Aalsmeer.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 link “https://verloskundigenaalsmeer.nl/home” op pagina 3 en de links “mamakits@prezens.nl” en “www.ggd.amsterdam.nl/ggd/contact/jeugdgezondheidszorg” op pagina 4. Los dit op door deze te coderen als link met de Link-tag. Deze links staan onderaan in elk blokje.`	`2.1.1`	`techniek, content`
`24`	De knop “Aanmelden” onderaan het formulier op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=rzxj5co3hr 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 Aalsmeer”. 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`
`25`	Als na de link “Mijn Aalsmeer” 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 terugkomen 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.aalsmeer.nl/	`2.4.6`	`techniek, visuele vormgeving`
`26`	Niet afgekeurd. Het volgende doet zich voor als op pagina https://www.aalsmeer.nl/ in de taalkeuzelijst voor “English” is gekozen. Bovenaan de pagina staat het logo van de gemeente Aalsmeer in een link. De toegankelijke naam van deze link "Municipality of Aalsmeer 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 Aalsmeer” aaneengesloten in de toegankelijke naam aanwezig is, liefst vooraan.	`2.5.3`	`techniek, interactieontwerp, content`
`27`	Het volgende doet zich voor als op pagina https://www.aalsmeer.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 opsomming met zoekresultaten. Dit overzicht 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`
`28`	Op pagina https://www.aalsmeer.nl/about-gaming-alcohol-and-more zijn de meeste teksten in het contentgedeelte Engelstalig. Deze taal wijkt af van de hoofdtaal (Nederlands) van de pagina. Hiervoor moet in de code een taalwisseling komen. Dit kan bijvoorbeeld worden gedaan door aan het main-element het attribuut lang=”en” toe te voegen. Let daarbij dan wel op dat de kop “Op deze pagina” in het aside-element wel weer gemarkeerd moet worden met lang=”nl”. Een andere optie is natuurlijk om deze koptekst te vertalen in het Nederlands. Ook staat er onderaan de pagina een afbeelding met het Nederlandstalige tekstalternatief “Jonge jongen met telefoon in handen met graphic. Moeder kijkt toe.”. Omdat de afbeelding decoratief is mag het tekstalternatief worden leeg gelaten (alt=””). Als het tekstalternatief niet wordt verwijderd dan moet dit worden vertaald naar de Engelse taal. Heronderzoek: de pagina is verwijderd, om de steekproef in het heronderzoek gelijk te houden gebruiken we nu deze: https://www.aalsmeer.nl/plenty-experience-young-people-aalsmeer-and-kudelstaart	`3.1.2`	`visuele vormgeving`
`29`	`Op pagina https://www.aalsmeer.nl/projecten-plannen-en-beleid zijn een aantal filterresultaten Engelstalig, bijvoorbeeld “About gaming, alcohol, and more Information and advice for parents and caregivers about gaming, alcohol, and more”. Dit wijkt af van de hoofdtaal van de pagina (Nederlands). Voorzie deze Engelstalige teksten daarom van de juiste taalcode.`	`3.1.2`	`visuele vormgeving`
`30`	Als op pagina https://www.aalsmeer.nl/ in de taalkeuzelijst voor “English” is gekozen zijn niet alle Nederlandstalige teksten vertaald naar de Engelse taal. De 5 paarse knoppen op de homepage zitten in een opsomming genaamd "Geaccentueerd onderwerpen" en op de opsomming startend met “driving licence, passport and identity card” 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`
`31`	`Op pagina https://gemeentenieuwsbrief.email-provider.eu/memberforms/subscribe/standalone/form/?a=re2jctksdg&l=rzxj5co3hr 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 voor, tijdens 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 Aalsmeer

Scope van de evaluatie

Uitgebreide toetsresultaten

Onderbouwing van de evaluatie

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bronnen