Toegankelijkheidsonderzoek

Issues:
Systeemaudit digitale toegankelijkheid Zoeterwoude denkt mee

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Zoeterwoude denkt mee - technisch rapport
Datum 7 juni 2022
Scope van de website Binnen de scope van het onderzoek vallen:
  • De techniek op alle pagina's op zoeterwoudedenktmee.nl
  • De techniek in de vragenlijst op zoeterwoudedenktmee.nl/rjxktd/open
Buiten de scope van het onderzoek vallen:
  • De content op alle pagina's op zoeterwoudedenktmee.nl en zoeterwoudedenktmee.nl/rjxktd/open
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via zoeterwoudedenktmee.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 50

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open krijgen bezoekers op een gegeven moment de vraag 'Ben je het eens met de onderstaande stellingen?' te zien. Bij deze vraag staat een foto met daarop de tekst 'Make the climate great again'. In de alternatieve tekst van de afbeelding staat 'De EU moet koploper zijn in de strijd tegen klimaatverandering.'. De alternatieve tekst van de afbeelding en wat er op de afbeelding is te zien komen niet overeen. Hierdoor krijgen ziende bezoekers en bezoekers die gebruik maken van een screenreader beide een andere stelling voorgelegd. Los dit op door bijvoorbeeld de afbeelding te verwijderen en de stelling als platte tekst op de pagina te plaatsten (zie ook SC 1.3.1).

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 2: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 3: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 4: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet aanwezig

Bevinding 5: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 6: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Op de pagina zoeterwoudedenktmee.nl/home wordt in het hoofdnavigatiemenu aangegeven op welke pagina de bezoeker zich bevindt doordat er een witte streep onder de huidige pagina staat. Deze informatie wordt visueel overgebracht maar is niet beschikbaar voor screenreadergebruikers die het scherm niet kunnen zien. Zorg er daarom voor dat deze informatie ook in de broncode wordt overgebracht, bijvoorbeeld door aria-current te plaatsen op de huidige pagina in het hoofdnavigatiemenu.

Bevinding 8: Het sub-navigatiemenu in de footer op onder andere pagina zoeterwoudedenktmee.nl/home is opgemaakt als een kop. In de broncode is te zien dat dit menu in een H6-element is geplaatst, daardoor ziet hulpsoftware dit menu als een kop. Daarnaast moet dit menu in een ul-element worden geplaatst zodat hulpsoftware aan gebruikers kan aangeven dat de links in dit menu bij elkaar horen. Verwijder het H6-element en maak dit navigatiemenu op als een lijst.

Bevinding 9: Wanneer bezoekers op pagina zoeterwoudedenktmee.nl/aanmelden het proces doorlopen om zich aan te melden staat er op een gegeven moment de vraag 'Wat is jouw geslacht?' in beeld. Deze keuzerondjes bij deze vraag zijn niet gegroepeerd waardoor de relatie tussen de vraag en de opties niet te bepalen is voor gebruikers van hulpsoftware. Maak gebruik van een fieldset/legend combinatie om de vraag en keuzerondjes aan elkaar te koppelen.
Dit probleem komt ook voor bij de andere vragen in het formulier waarbij keuzerondjes of selectievakjes staan.

Bevinding 10: De keuzerondjes in de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open hebben via CSS de eigenschap ‘display: none;’ gekregen. Door deze CSS-eigenschap worden de keuzerondjes genegeerd door hulpsoftware. De keuzerondjes die visueel zichtbaar zijn, zijn doormiddel van een div-element met daarop class="survey-radio" en CSS-stijlen op de pagina geplaatst. Het plaatsen van een visueel verbogen input-element en een decoratief keuzerondje kan voor verschillende toegankelijkheidsproblemen zorgen. Hier weten screenreadergebruikers niet dat selecteerbare elementen op de pagina staan, alleen de vraag en antwoorden worden voorgelezen. Ook kan deze manier van keuzerondjes op de pagina plaatsen problemen geven met de focus volgorde. Laat daarom de keuzerondjes die met het input-element op de pagina worden getoond staan en verander alleen het uiterlijk van deze elementen met CSS-stijlen. Met deze methode is er minder kans op toegankelijkheidsproblemen.
Dit probleem komt voor bij alle keuzerondjes en selectievakjes in deze vragenlijst.

Bevinding 11: Op pagina www.zoeterwoudedenktmee.nl/rjxktd/open staat de knop 'Terug'. Deze knop is niet actief, wat visueel wordt aangegeven door de lichte kleur van de knop. In de code is deze informatie niet beschikbaar. Hierdoor wordt de knop bijvoorbeeld door screenreaders voorgelezen als 'Knop terug' en lijkt het of de knop werkt. Echter, wanneer de knop wordt geactiveerd gebeurt er niets op de pagina. Zorg ervoor dat in de code wordt aangegeven dat de knop inactief is, bijvoorbeeld door gebruik te maken van aria-disabled.

Bevinding 12: Bij stap 2 van de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open moeten bezoekers de vraag 'Hoe vaak ga je met onderstaande vervoersmiddelen naar je werk?' beantwoorden. Op deze pagina staan meerdere keuzelijsten. In de HTML-code is te zien dat elke keuzelijst een leeg option-element heeft. Deze lege optie staat in de lijst die te zien is wanneer de keuzelijst wordt uitgeklapt en het is mogelijk om de toetsenbordfocus hierop te plaatsen. Deze lege optie kan verwarrend zijn voor bijvoorbeeld screenreadergebruikers, omdat aan hen wordt voorgelezen dat hier een optie staat in de keuzelijst. Verwijder daarom de lege option-elementen uit de code.

Bevinding 13: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open krijgen bezoekers op een gegeven moment de vraag 'Ben je het eens met de onderstaande stellingen?' te zien. Deze vraag is voor verschillende bezoekers ontoegankelijk. Ziende bezoekers krijgen alleen afbeeldingen te zien en geen stellingen, op maar één afbeelding staat tekst maar deze tekst komt niet overeen met de stelling die in de alternatieve tekst van de afbeelding is geplaatst (zie ook SC 1.1.1). Bezoekers die het scherm niet kunnen zien en een screenreader gebruiken krijgen de twee stellingen voorgelezen die in de tekstalternatieven van afbeeldingen staan. Maar wanneer zij de ja of nee knop activeren verschijnt een nieuwe afbeelding, die al is voorgelezen door de screenreader (omdat deze afbeelding niet verborgen is in de code en daardoor daardoor direct na de wel visueel zichtbare afbeelding wordt voorgelezen). De screenreader merkt het niet op als de afbeelding visueel op de pagina verschijnt (zie ook SC 4.1.3). Hierdoor lijkt het voor deze gebruikers alsof de vragenlijst vastloopt of dat zij twee keer op dezelfde vraag antwoord moeten geven. Pas deze vraag aan zodat deze door elke bezoeker te beantwoorden is. Bijvoorbeeld door de stellingen als gewone tekst op de pagina te plaatsen en de stellingen te splitsen in twee aparte vragen.

Bevinding 14: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open moeten bezoekers bij de vraag 'Met welk vervoermiddel reis je het liefst? Rank de onderstaande vervoermiddelen. Zet het vervoermiddel waarmee u het liefst reist bovenaan.' items ordenen. De items die bezoekers moeten ordenen zijn opgemaakt met een a-element en worden daardoor voorgelezen als links door screenreaders. Doordat deze elementen worden voorgelezen als links kan het voor gebruikers van screenreaders lastig zijn een geordende lijst aan te maken. Om deze vraag toegankelijk te maken kan er worden gekozen om hier een listbox van te maken en het voor bezoekers mogelijk te maken om de items in de listbox te sorteren, door gebruik te maken van 'draggable="true"' en Javascript. Plaatst hierbij duidelijke instructies op de pagina voor toetsenbordgebruikers zodat zij weten hoe ze de listbox kunnen bedienen.

Bevinding 15: Bij stap 3 van de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open moeten bezoekers de vraag 'In hoeverre heb je interesse om in de toekomst thuis te werken?' beantwoorden. Naast dat de input-elementen bij deze vraag niet zichtbaar zijn voor hulpsoftware door de CSS-eigenschap 'display:none;', zijn zij niet correct gekoppeld aan het visuele label en hebben daardoor geen toegankelijke naam wanneer deze elementen wel zichtbaar zouden zijn voor hulpsoftware. Aan de input-elementen is geprobeerd een waarde te hangen door hier een ingevuld value-attribuut op te plaatsen. Het value-attribuut is niet geschikt om een keuzerondjes een toegankelijke naam te geven. Gebruik een andere methode om de keuzerondjes een toegankelijke naam te geven, bijvoorbeeld door de visuele labels in een label-element te plaatsen en deze te koppelen aan de bijbehorende input-elementen met id- en for-attributen.

Bevinding 16: Advies:
De pagina www.zoeterwoudedenktmee.nl/rjxktd/open heeft geen H1-kop. Een H1-kop op een pagina helpt veel bezoekers te weten wat het hoofdonderwerp van de pagina is. Omdat dit een vragenlijst is met meerdere stappen die elk een eigen pagina hebben kan de H1-kop ook aangegeven bij welke stap in de vragenlijst de bezoeker is.

Bevinding 17: Advies:
Op pagina zoeterwoudedenktmee.nl/home is het details/summary-element gebruikt op een uitvouwbare knop mee op te maken (deze is alleen zichtbaar bij een ingezoomde weergave van de pagina). Het wordt afgeraden om dit element te gebruiken bij het opmaken van een uitvouwbare knop. Het element wordt bijvoorbeeld niet goed ondersteund wanneer bezoekers gebruik maken van de hulpsoftware VoiceOver. Ook ondersteunen niet alle browsers dit element en worden nog steeds bugs gevonden in de ondersteuning. Wanneer het button-element, Javascript en aria-expanded wordt gebruikt om een uitvouwbare knop op te maken wordt dit wel goed ondersteund door alle browsers en hulpsoftware.
Het details/summary-element is ook gebruikt voor de opmaak van uitvouwbare knoppen op de pagina zoeterwoudedenktmee.nl/faq.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 18: Bij stap 3 van de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open moeten bezoekers de vraag 'In hoeverre heb je interesse om in de toekomst thuis te werken?' beantwoorden. De volgorde waarin de content in de code is geplaatst komt niet overeen met de visuele weergave van de pagina. Wanneer screenreadergebruikers de pagina laten voorlezen krijgen zij eerst de vraag te horen, dan de getalen 1 tot en met 5 en daarna de teksten 'Niet geïnteresseerd' en 'Zeer geïnteresseerd'. De keuzerondjes worden helemaal niet voorgelezen vanwege de CSS-eigenschap 'display:none;' (zie SC 1.3.1). Hierdoor kan het voor deze bezoekers lastig zijn te weten dat 1 staat voor niet geïnteresseerd en 5 voor zeer geïnteresseerd. Zorg ervoor dat de content op de pagina zo wordt voorgelezen dat screenreadergebruikers dezelfde informatie krijgen als bezoekers die het scherm kunnen zien.
Dit probleem komt ook voor bij slider met dezelfde vraag in deze vragenlijst. Hier zijn de teksten 'Niet geïnteresseerd' en 'Zeer geïnteresseerd' na de slider in de code geplaatst.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 19: Deze bevinding gaat mogelijk over de content op de pagina:
In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open krijgen bezoekers op een gegeven moment de vraag 'Welke afbeelding heeft jouw voorkeur?' voor zich. Bezoekers kunnen de vraag alleen beantwoorden wanneer zij de afbeeldingen (goed) kunnen zien. Pas deze vraag aan zodat deze te beantwoorden is wanneer een bezoeker het scherm niet kan zien, bijvoorbeeld door in de toegankelijke naam de links 'a' en 'b' aan te vullen met een goede beschrijving van de afbeeldingen. Of verwijder deze vraag uit de vragenlijst.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 20: Op pagina zoeterwoudedenktmee.nl/contact is een formulier waar de bezoeker onder andere het eigen e-mailadres en naam 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. 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: www.w3.org/tr/wcag21/.
Dit probleem komt ook voor op pagina zoeterwoudedenktmee.nl/inloggen en op zoeterwoudedenktmee.nl/aanmelden.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 21: Wanneer de pagina zoeterwoudedenktmee.nl/home wordt weergegeven bij een schermbreedte van 1280px en wordt ingezoomd tot 240%, verdwijnt het hoofdnavigatiemenu achter een knop. De grijze menu-items (HEC#777) achter deze knop hebben een te laag contrast op de witte achtergrond. De contrastverhouding is hier 4,4:1, waar dat minimaal 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Niet aanwezig

Bevinding 22: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 23: Wanneer toetsenbordgebruikers de focus plaatsen op links in het hoofdnavigatiemenu, bijvoorbeeld op 'Home', heeft de focusrand (HEX#323641) op de achtergrond (HEX#2b4587) een te laag contrast. De contrastverhouding is hier 1,3:1, waar dit minimaal 3:1 moet zijn.

Bevinding 24: Het contrast van de randen van de invoervelden (HEX#bbbbbb) op pagina zoeterwoudedenktmee.nl/contact is te laag op de witte achtergrond. De contrastverhouding is hier 1,9:1, waar dat minimaal 3:1 moet zijn.
Dit probleem komt ook voor op andere pagina's met invoervelden, zoals de pagina zoeterwoudedenktmee.nl/aanmelden.

Bevinding 25: Het contrast van de keuzerondjes (HEX#ccd3e0) in de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open is te laag op de witte achtergrond. De contrastverhouding is hier 1,5:1, waar dat minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 26: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open is het attribuut tabindex='0' geplaatst op div-elementen waar een input-element in staat (dit komt voor bij elke vraag). Wanneer toetsenbordgebruikers de vragen invullen gaat er niets mis, maar als deze bezoekers ook gebruikmaken van een screenreader wordt het voor hen lastiger om de vragen met het toetsenbord in te vullen. Dit gebeurt bijvoorbeeld wanneer bezoekers de vraag 'In hoeverre heb je interesse om in de toekomst thuis te werken?' moeten beantwoorden door een slider te verplaatsen. Het verplaatsen van de slider werkt niet met de pijltjestoetsen wanneer bezoekers een screenreader gebruiken. Ook is het bij sommige vragen niet mogelijk om de keuzevakjes te selecteren, bijvoorbeeld bij de vraag 'In hoeverre heb je interesse om in de toekomst thuis te werken?' wanneer bezoekers deze moeten beantwoorden door een keuzevakje te selecteren.
Het is beter om gebruik te maken van 'native' HTML bij het opmaken van elementen zoals selectievakjes en keuzerondjes. Bij het gebruik van native HTML wordt de toetsenbordfocus correct geplaatst op de elementen en zijn deze goed te bedienen wanneer de bezoeker hulpsoftware gebruikt.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevinding 27: Wanneer bezoekers het hele formulier op pagina zoeterwoudedenktmee.nl/home/aanmelden hebben ingevuld en deze verzenden, staat kort een melding onderaan het formulier dat het succesvol is verzonden, daarna wordt de bezoeker automatisch doorgestuurd naar de homepage. Deze melding staat maar enkele seconden in beeld. Voor bezoekers die moeite hebben met lezen kan het lastig zijn om de volledige melding te lezen voor deze verdwijnt. Zorg ervoor dat de melding in beeld blijft staan tot de bezoeker zelf de pagina verlaat, de melding afsluit, of dat de tijdslimiet aanpasbaar is.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 28: Op de website is geen mechanisme aanwezig waarmee bezoekers herhalende content, zoals het hoofdnavigatiemenu, kunnen overslaan. Zo een mechanisme is prettig voor toetsenbordgebruikers zodat zij minder fysieke handelingen moeten uitvoeren voordat zij bij de hoofdcontent van de pagina zijn. Plaats daarom een mechanisme, bijvoorbeeld skiplinks, op de website waarmee bezoekers herhalende content kunnen overslaan.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 29: De pagina www.zoeterwoudedenktmee.nl/rjxktd/open heeft 'Survey' als paginatitel. Naast dat dit een Engelse titel is en daardoor niet geschikt is voor een Nederlandse website, geeft de titel geen beschrijving van de vragenlijst die de bezoeker invult. Zorg ervoor dat de paginatitel omschrijft welke vragenlijst de bezoeker invult op deze pagina.
In deze vragenlijst worden nieuwe vragen geladen op dezelfde pagina. Wanneer bezoekers klaar zijn met het invullen van de vragenlijst en deze kunnen versturen krijgt de pagina de paginatitel 'Completed'. Zorg ervoor dat deze paginatitel ook wordt aangepast naar een Nederlandse naam en benoemd welke vragenlijst de bezoeker heeft ingevuld.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 30: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open wordt op dezelfde pagina een nieuwe vraag geladen wanneer bezoekers de knop 'volgende' activeren. Wanneer de nieuwe vraag is geladen staat de toetsenbordfocus op met eerste focusbare element in deze vraag. Screenreadergebruikers die de vragenlijst invullen krijgen de content boven het eerste focusbare element niet voorgelezen. Hierdoor kan het voor deze gebruikers lastig zijn om de vragenlijst in te vullen, vooral doordat niet alle interactieve elementen in de vragenlijst een toegankelijke naam hebben (zie SC 4.1.2). Doordat de focus midden op de pagina wordt geplaatst wordt ook de melding 'Bedankt voor het invullen van de vragenlijst. Klik hieronder op 'Volgende' om uw antwoorden te versturen.' aan het eind van de vragenlijst niet voorgelezen aan screenreadergebruikers. Zorg ervoor dat de toetsenbordfocus boven aan de pagina staat wanneer een nieuwe vraag wordt geladen zodat screenreadergebruikers content niet missen.

Bevinding 31: Wanneer toetsenbordgebruikers de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open weergeven bij een schermbreedte van 1280px en inzoomen tot 400%, blijven de foutmeldingen in pop-up maar enkele seconden in beeld staan. Deze pop-up geeft aan dat de bezoeker een fout heeft gemaakt in een invoerveld en verschijnt als hij op de volgende knop drukt of naar het volgende invoerveld gaat. De foutmelding verdwijnt zo snel doordat de focus op de 'OK' in de melding staat zodra deze verschijnt, hierdoor verdwijnt de melding weer wanneer toetsenbordgebruikers hun vinger van de entertoets halen van wanneer zij de 'Volgende' knop activeerde. Los dit probleem op door ervoor te zorgen dat de focus niet is geplaatst in de 'OK' knop wanneer de pop-up verschijnt.

Dit probleem komt voor bij de volgende vragen in de vragenlijst:

Bevinding 32: Advies:
Wanneer bezoekers de pagina zoeterwoudedenktmee.nl/inloggen laden staat de toetsenbordfocus direct op het invoerveld 'e-mailadres'. Dit kan vervelend zijn voor screenreadergebruikers. Zij navigeren (meestal) met het toetsenbord over een pagina en wanneer de toetsenbordfocus midden op de pagina is geplaatst wordt alle content die daarboven staat niet automatisch voorgelezen. Zorg ervoor dat wanneer een nieuwe pagina wordt geladen die geen onderdeel is van een proces, de focus bovenaan de pagina staat.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 33: Wanneer de pagina zoeterwoudedenktmee.nl/home wordt weergegeven bij een schermbreedte van 1280px en hier wordt ingezoomd tot 240%, verdwijnt het hoofdnavigatiemenu achter een knop. Deze knop heeft het visuele label 'Home' maar toont het navigatiemenu. Voor bijvoorbeeld bezoekers met een cognitieve beperking kan het lastig zijn om te achterhalen dat deze knop het navigatiemenu toont. Zorg er daarom voor dat deze knop correct wordt gelabeld, bijvoorbeeld door 'Menu' als visueel label te gebruiken.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Voldoende

Bevinding 34: Advies:
Op zoeterwoudedenktmee.nl/ en de andere pagina's op de website hebben alleen de links in het hoofdnavigatiemenu een aangepaste stijl voor de focusrand, de andere links op de pagina hebben de focusrand-stijl van de browser waarin de pagina wordt getoond. De focusrand-stijl van een browser voldoet niet altijd aan de WCAG-eisen, bijvoorbeeld door een laag contrast. Ook worden de eisen voor de focusrand in de WCAG 2.2 strenger dan de huidige eisen, de minimale dikte van de focusrand moet bijvoorbeeld 2px zijn volgens de eisen van WCAG 2.2 (kijk hier voor meer informatie: w3c.github.io/wcag/understanding/focus-visible-enhanced.html). Maak daarom een eigen focusrandstijl aan en zorg dat deze wordt toegepast op alle focusbare elementen op de website.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 35: Wanneer bezoekers een invoerveld op pagina zoeterwoudedenktmee.nl/contact niet invullen en proberen de klikken/de focus te plaatsen op een volgend invoerveld, verschijnt een pop-up in beeld met de melding 'Vul een antwoord in' en de knop 'OK'. De toegankelijke naam van deze knop in 'Vul een antwoord in' terwijl het visuele label 'OK' is. Doordat het visuele label en de toegankelijke naam niet overeenkomen kan het voor mensen die gebruikmaken van spraakbediening lastig zijn deze knop te activeren. Zorg er daarom voor dat het visuele label van de knop in de toegankelijke naam voorkomt, het liefst vooraan.
Deze melding met de knop 'OK' verschijnt ook wanneer bezoekers fouten maken in de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 36: De pagina zoeterwoudedenktmee.nl/bestaatniet heeft geen lang-attribuut op het html-element. Hierdoor kan hulpsoftware de taal van de pagina niet bepalen. Zorg ervoor dat de pagina een taalaanduiding krijgt die hetzelfde is als de hoofdtaal op de pagina.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 37: De vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open heeft als paginatitel 'Survey'. Omdat de hoofdtaal van de pagina in het Nederlands is moet de paginatitel ook in die taal zijn. Zorg ervoor dat de paginatitel in het Nederlands is en de vragenlijst omschrijft (zie ook SC 2.4.2).

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 38: Wanneer bezoekers op de pagina zoeterwoudedenktmee.nl/inloggen verkeerde gegevens bij het inloggen invoeren worden zij na het drukken op de knop 'Inloggen' doorverwezen naar een andere pagina waar de foutmelding op staat. Doordat de foutmelding op een andere pagina staat is alle input in de inlogvelden verwijderd wanneer bezoekers teruggaan naar de inlogpagina. Een foutmelding mag er niet voor zorgen dat de input in invoervelden wordt verwijderd. Daarnaast kan het voor verschillende gebruiker lastig zijn als de foutmelding op een andere pagina staat dan het formulier. Bijvoorbeeld doordat bezoekers vanwege fysieke beperkingen moeilijker handelingen kunnen uitvoeren, doordat zij naar een andere pagina zijn verwezen moeten zij weer terug moeten navigeren naar de inlogpagina.
Het advies is om ervoor te zorgen dat de foutmelding op de inlogpagina staat, dit mag ook een pop-up zijn zoals is gebruikt in het formulier op pagina zoeterwoudedenktmee.nl/contact. Let hierbij wel op dat de pop-up goed wordt opgemerkt/voorgelezen door hulpsoftware.

Bevinding 39: Wanneer bezoekers op pagina zoeterwoudedenktmee.nl/home/aanmelden een invoerveld niet invullen, verschijnt een pop-up in beeld met de melding 'Vul een antwoord in'. Deze melding verschijnt ook bij het invoerveld 'Postcode' wanneer een fout is gemaakt bij het invoeren van de vier cijfers, bijvoorbeeld wanneer maar drie cijfers zijn ingevuld. Deze foutmelding geeft niet aan welke fout is gemaakt waardoor het voor sommige bezoeker lastig kan zijn om de fout op te lossen, bijvoorbeeld wanneer zij het scherm niet kunnen zien of een cognitieve beperking hebben. Zorg er daarom voor dat de foutmelding aangeeft welke fout is gemaakt.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 40: Wanneer bezoekers op pagina zoeterwoudedenktmee.nl/aanmelden het proces doorlopen om zich aan te melden staan er na het invoeren van de code (die zij hebben ontvangen via een e-mail) twee invoervelden met daarboven het label 'Jouw wachtwoord'. Bij het eerste invoerveld is het duidelijk dat daar een wachtwoord moet worden ingevuld maar het twee invoerveld heeft geen label of instructie. Het kan voor verschillende gebruikers lastig zijn om te begrijpen wat zij daar moeten invoeren, bijvoorbeeld als zij het scherm niet kunnen zien of een cognitieve beperking hebben. Zorg ervoor dat hier in tekst wordt aangeven welke invoer vereist is bij het tweede invoerveld.

Bevinding 41: Wanneer bezoekers op pagina zoeterwoudedenktmee.nl/aanmelden het proces doorlopen om zich aan te melden staat er op een gegeven moment de vraag 'Wat is je binding met de gemeente Zoeterwoude?' in beeld. Onder deze vraag staan meerdere selectievakjes en wanneer de bezoeker het selectievakje 'Anders namelijk' selecteert verschijnt een invoerveld op de pagina. Dit invoerveld heeft alleen een placeholdertekst als visueel label. Een placeholdertekst is niet geschikt voor een label omdat deze verdwijnt wanneer bezoekers iets typen in het veld. Dit is vervelend voor bezoekers met bepaalde cognitieve beperkingen. Zorg er daarom voor dat het invoerveld een visueel label krijgt dat niet verdwijnt bij invoer.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 42: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open krijgen bezoekers na een aantal stappen de vraag 'Wat is de postcode van jouw woonplaats?' te zien. Wanneer bezoekers een fout maken bij het invoeren van de postcode, bijvoorbeeld de letters niet invullen, krijgen zij de foutmelding 'Ongeldige postcode' te zien. In deze foutmelding wordt niet aangegeven welk format bezoekers moeten gebruiken bij het invoeren van hun postcode. Zorg ervoor dat de juiste manier van invoeren wordt aangegeven in de foutmelding of dit als instructie bij het invoerveld staat.

Bevinding 43: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open moeten bezoekers de vraag 'Met welk vervoermiddel reis je het liefst? Verdeel 100 punten over de volgende onderwerpen.' beantwoorden. Het is hier duidelijk wat bezoekers moeten invullen, maar wanneer bijvoorbeeld bij twee invoervelden '50' wordt ingevoerd en de 'volgende' knop wordt geactiveerd verschijnt een pop-up met de melding 'Vul een antwoord in'. Deze melding geeft niet aan wat bezoekers moeten doen om de vraag correct te kunnen beantwoorden, wat bij elk invoerveld waar zij geen punten aan willen geven een '0' invoeren is. Zorg ervoor dat de foutmelding aangeeft wat de bezoeker moet invoeren om naar de volgende vraag te gaan.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 44: Wanneer bezoekers op pagina zoeterwoudedenktmee.nl/aanmelden het proces doorlopen om zich aan te melden staan er na het invoeren van de code (die zij hebben ontvangen via een e-mail) twee invoervelden met daarboven het label 'Jouw wachtwoord'. Het tweede invoerveld heeft geen toegankelijke naam. Hierdoor kan het lastig zijn voor gebruikers van screenreaders of spraakbediening om het veld correct in te vullen. Zorg er daarom voor dat dit invoerveld een goede toegankelijke naam krijgt.

Bevinding 45: In de vragenlijst op www.zoeterwoudedenktmee.nl/rjxktd/open staan bij de vraag 'Hoeveel dagen per week werk je?' keuzerondjes die geen toegankelijke naam hebben. Dit komt doordat de input-element die de toegankelijke naam hebben gekregen via aria-attributen zijn verborgen met een CSS-eigenschap (zie ook SC 1.3.1). Hierdoor zijn deze keuzerondjes lastig te bedienen voor bezoekers die gebruikmaken van spraakbediening of een screenreader. Zorg ervoor dat de keuzerondjes een goede toegankelijke naam krijgen. Alle keuzerondjes en selectievakjes die voorkomen in deze vragenlijst hebben geen toegankelijke naam doordat deze onder andere verborgen zijn met de CSS-eigenschap 'display:none;' en hierdoor niet worden opgemerkt door browsers en hulpsoftware.

Bevinding 46: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open moeten bezoekers de vraag 'Hoe vaak ga je met onderstaande vervoersmiddelen naar je werk?' beantwoorden. Bij deze vraag staat meerdere keuzelijsten die geen toegankelijke naam hebben. Hierdoor kan het voor gebruikers van screenreaders of spraakbediening lastig zijn deze elementen te bedienen. Zorg ervoor dat de keuzelijsten een toegankelijke naam krijgen die overeenkomen met het bijbehorende visuele label. Dit kan bijvoorbeeld door het visuele label in een label-element te plaatsten en deze aan het bijbehorende select-element te koppelen door gebruik te maken van for- en id-attributen.

Bevinding 47: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open komen bezoekers op een gegevens moment bij de vraag 'Aan welke onderwerpen denkt u bij de term 'vervoermiddelen'?'. Het invoerveld dat hierbij staat heeft de toegankelijke naam '1'. De toegankelijke naam van het invoerveld moet de vraag die bij het veld staat zijn. Als de vraag niet in de toegankelijke naam staat kan het voor verschillende gebruikers lastig zijn om het veld in te vullen. Gebruik hiervoor aria-label of een soortgelijke techniek.

Bevinding 48: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open krijgen bezoekers op een gegeven moment de vraag 'Welke afbeelding heeft jouw voorkeur?' voor zich. Hier kunnen bezoekers kiezen tussen de opties 'a' en 'b'. In de code zijn deze elementen opgemaakt als een link en worden daarom door screenreaders voorgelezen als 'link a' en 'link b'. Deze elementen werken niet als links omdat deze niet verwijzen naar een andere pagina of een andere plek op de pagina. De links lijken eerder te werken als keuzerondjes. Via het role-attribuut kunnen deze links worden opgemaakt als keuzerondjes, maar een betere optie is om 'native' HTML te gebruiken en de links opnieuw op te maken met het input-element in plaats van het a-element.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 49: Wanneer bezoekers het hele formulier op pagina zoeterwoudedenktmee.nl/home/aanmelden hebben ingevuld en het verzenden, staat kort een melding onderaan het formulier dat het succesvol is verzonden, daarna wordt de bezoeker automatisch doorgestuurd naar de homepage. Deze melding wordt niet opgemerkt door screenreaders. Zorg ervoor dat screenreaders en andere hulpsoftware deze melding opmerken door bijvoorbeeld gebruik te maken van aria-alert.

Bevinding 50: In de vragenlijst op pagina www.zoeterwoudedenktmee.nl/rjxktd/open krijgen bezoekers op een gegeven moment de vraag 'Ben je het eens met de onderstaande stellingen?' te zien. Bij deze vraag staat een foto met daarop de tekst 'Make the climate great again'. Wanneer een bezoeker de ja of nee knop activeert verschijnt een nieuwe foto op de pagina. Deze verandering wordt niet opgemerkt door hulpsoftware zoals screenreaders. Wanneer iets op het scherm verandert moet deze verandering worden doorgegeven aan hulpsoftware. Omdat deze vraag op meerdere manieren ontoegankelijk is, is een andere oplossing nodig dan alleen het aangeven van de verandering op het scherm (zie SC 1.3.1).

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

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2022-09-26 14:14:48 v2.4-011