Toegankelijkheidsonderzoek

Rapport:
Systeemaudit digitale toegankelijkheid Zoeterwoude denkt mee


Onderzoeker
Kaylee, Swink; Yulia, Swink
Datum
7 juni 2022
Opdrachtgever
Moventem BV

Samenvatting onderzoeksresultaat

De website Zoeterwoude denkt mee - technisch rapport voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 21 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.

De techniek van de website zoeterwoudedenktmee.nl is onderzocht tussen 17 mei en 7 juni 2022. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. De website voldoet niet aan alle succescriteria. Voor dit systeemonderzoek zijn alle paginatypes en componenten gecontroleerd. Organisaties die gebruik maken van dit platform op een ander domein- of subdomeinnaam kunnen een deelonderzoek uit te laten voeren op de content en het kleurgebruik. De twee rapporten bepalen gezamenlijk in welke mate de website voldoet. Tevens kunnen de twee rapporten worden gebruikt in de toegankelijkheidsverklaring.

Uit het onderzoek is naar voren gekomen dat de toegankelijkheid van het systeem waar zoeterwoudedenktmee.nl op draait kan worden verbeterd. Er gaan veel dingen goed, alles is bijvoorbeeld toetsenbordtoegankelijk. Echter, wanneer bezoekers gebruik maken van hulpsoftware gaat dat ten koste van de toetsenbordtoegankelijkheid. Ook is met aria-attributen een toegankelijke naam gegeven aan veel input-elementen, maar worden deze genegeerd door browsers en hulpsoftware vanwege een CSS-eigenschap. Het is duidelijk te zien dat bij het creëren van dit systeem is nagedacht over toegankelijkheid en dit is toegepast, maar er zijn verschillende fouten die dit werk teniet doen.

Het onderzoek richt zich specifiek op de toegankelijkheid van de website voor mensen met een functiebeperking, zoals mensen die blind, doof, laaggeletterd zijn of andere functieproblemen hebben. Voor hen is het van belang dat de website technisch en inhoudelijk zo is ingericht dat de site voor hen goed bruikbaar is. Een website optimaliseren voor toegankelijkheid heeft meer voordelen; het maakt de website beter bruikbaar voor iedereen (bijvoorbeeld ook voor mensen die op hun mobieltje kijken in een zonnige omgeving) en het maakt de site beter vindbaar in zoekmachines.

Scope van de evaluatie

Naam website Zoeterwoude denkt mee - technisch rapport
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
Verdere evaluatievereisten Deze audit betreft een systeemonderzoek. Alle beschikbare functionaliteit van het platform is onderzocht. Deelnemers van het platform moeten een eigen deelonderzoek op de content laten uitvoeren. De twee rapporten bepalen samen de mate van conformiteit.
Basisniveau van toegankelijkheid ondersteund Gangbare browsers en hulpsoftware

Overzicht toetsresultaat

Principe Voldoende Onvoldoende Onbekend
1 Waarneembaar 13 7 0
2 Bedienbaar 10 7 0
3 Begrijpelijk 5 5 0
4 Robuust 1 2 0
Totaal 29 21 0

Leeswijzer

Dit onderzoek is een momentopname. De website kan inmiddels veranderd zijn. De gevonden problemen zijn slechts voorbeelden. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de sample om zo een goede indruk te krijgen van de toegankelijkheid. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website/app kunnen nieuwe problemen ontstaan. Succescriteria gemarkeerd met "Niet aanwezig" worden automatisch goedgekeurd. Succescriteria gemarkeerd met "Onbekend" worden niet goedgekeurd.

Uitgebreide toetsresultaten


1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: 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)

Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:

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

Uitkomst: Niet aanwezig

Bevindingen: 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)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

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

Uitkomst: Niet aanwezig

Bevindingen: 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)

Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

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

Uitkomst: Niet aanwezig

Bevindingen: 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)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.

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

Uitkomst: Niet aanwezig

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


1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevindingen: 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, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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)

Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevindingen: 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)

Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevindingen: 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.4 Weergavestand (Niveau AA)

De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Informatie over succescriterium 1.3.4 Weergavestand

Uitkomst: Voldoende


1.3.5 Identificeer het doel van de input (Niveau AA)

Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevindingen: 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.1 Gebruik van kleur (Niveau A)

Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Voldoende


1.4.2 Geluidsbediening (Niveau A)

Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.

Informatie over succescriterium 1.4.2 Geluidsbediening

Uitkomst: Niet aanwezig


1.4.3 Contrast (minimum) (Niveau AA)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevindingen: 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.4 Herschalen van tekst (Niveau AA)

Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Voldoende


1.4.5 Afbeeldingen van tekst (Niveau AA)

Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Niet aanwezig

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


1.4.10 Reflow (Niveau AA)

Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:

Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Voldoende


1.4.11 Contrast van niet-tekstuele content (Niveau AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.


1.4.12 Tekstafstand (Niveau AA)

Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:

Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze stijleigenschappen voor tekst in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Voldoende


1.4.13 Content bij hover of focus (Niveau AA)

Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:

Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Niet aanwezig


2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevindingen: 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.1.2 Geen toetsenbordval (Niveau A)

Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Voldoende


2.1.4 Enkel teken sneltoets (Niveau A)

Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Niet aanwezig


2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevindingen: 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.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Voldoende


2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Uitkomst: Voldoende


2.4.1 Blokken omzeilen (Niveau A)

Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevindingen: 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)

Webpagina's hebben titels die het onderwerp of doel beschrijven.

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevindingen: 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)

Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevindingen: 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.

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:

  • Hoeveel dagen per week werk je?
  • Wat is de postcode van jouw woonplaats?
  • Met welk vervoermiddel reis je het liefst? Verdeel 100 punten
  • Wat is jouw geboortejaar?
  • Met welk vervoermiddel reis je het liefst? Rank de onderstaande vervoermiddelen.
  • Aan welke onderwerpen denkt u bij de term 'vervoermiddelen'?
  • Welke afbeelding heeft jouw voorkeur?

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.


Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende


2.4.5 Meerdere manieren (Niveau AA)

Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Voldoende


2.4.6 Koppen en labels (Niveau AA)

Koppen en labels beschrijven het onderwerp of doel.

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevindingen: 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)

Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Voldoende

Bevindingen: 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.1 Aanwijzergebaren (Niveau A)

Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Uitkomst: Niet aanwezig


2.5.2 Aanwijzerannulering (Niveau A)

Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Uitkomst: Voldoende


2.5.3 Label in naam (Niveau A)

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevindingen: 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.


2.5.4 Bewegingsactivering (Niveau A)

Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:

Informatie over succescriterium 2.5.4 Bewegingsactivering

Uitkomst: Niet aanwezig


3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

De standaard menselijke taal van elke webpagina kan door software bepaald worden.

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevindingen: 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)

De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevindingen: 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.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.

Informatie over succescriterium 3.2.1 Bij focus

Uitkomst: Voldoende


3.2.2 Bij input (Niveau A)

Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende


3.2.3 Consistente navigatie (Niveau AA)

Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.

Informatie over succescriterium 3.2.3 Consistente navigatie

Uitkomst: Voldoende


3.2.4 Consistente identificatie (Niveau AA)

Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.

Informatie over succescriterium 3.2.4 Consistente identificatie

Uitkomst: Voldoende


3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevindingen: 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.

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)

Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevindingen: 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.

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)

Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevindingen: 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.

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.


Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door de gebruiker te beheren gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt minstens één van de volgende zaken:

  1. Omkeerbaar: Verzendingen kunnen ongedaan gemaakt worden.
  2. Gecontroleerd: Door de gebruiker ingevoerde gegevens worden gecontroleerd op invoerfouten en de gebruiker wordt de mogelijkheid gegeven om ze te verbeteren.
  3. Bevestigd: Er is een mechanisme beschikbaar voor het beoordelen, bevestigen en verbeteren van informatie voordat de verzending wordt voltooid.

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Uitkomst: Niet aanwezig


4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Voldoende


4.1.2 Naam, rol, waarde (Niveau A)

Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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)

In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevindingen: 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.

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

Webbrowsers (useragents) en andere software

Bij dit onderzoek is de volgende software gebruikt:

Bronnen

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

Bron: toegankelijkheidsrapport.swink.nl/zoeterwoude-denkt-mee-techniek/audit/
Geprint: 2022-08-11 04:11:44 v2.4-011