Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Afsprakenmodule Gemeente Kaag en Braassem

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Afsprakenmodule Gemeente Kaag en Braassem
Datum 27 juni 2024
Scope van de website Binnen de scope van onderzoek valt:
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 9

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Voldoende

Bevinding 1: Advies:
Voor de pictogrammen maakt de applicatie gebruik van SVG's (bijvoorbeeld het pictogram voor hoog contrast of om nog een activiteit toe te voegen of juist te verwijderen). Deze SVG's zijn niet correct opgemaakt. Decoratieve SVG's moeten namelijk naast het attribuut aria-hidden=true ook het attribuut focusable=false bevatten. Anders weet sommige hulpsoftware niet dat het decoratieve SVG's zijn. Voeg dit attribuut toe, en zet dit op het native SVG-element, niet op het React-element. Verhuis ook het aria-hidden attribuut naar het native SVG-element.

1.4 Onderscheidbaar

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Voldoende

Bevinding 2: Advies: bij het zoomen naar 400% en het instellen van de viewport op 1280x1024px valt er niks weg achter de zwevende balk met de knoppen voor vorige of volgende stap, maar bezoekers krijgen wellicht deze indruk wel omdat bijvoorbeeld bij stap 2 het logo en "Een afspraak maken" onafhankelijk van de rest van de inhoud scrollt. Ook de dubbele verticale scrollbar die ontstaat in bepaalde stappen kan verwarring veroorzaken bij bezoekers en moeilijkheden voor mensen met motorische problemen. Zorg bijvoorbeeld dat de knoppen voor de vorige en volgende stap niet meer in zwevende balk staan, maar dat de knoppen gewoon onderaan in de pagina staan.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 3: De paarse knoppen om naar de volgende stap te gaan, ontvangen een zwarte focusrand. Maar door het weinige contrast valt deze niet goed op. De zwarte rand geeft met de paarse kleur van de knop (HEX #71246C) een contrastverhouding van 2,2:1 waar het minimaal 3:1 moet zijn.

2. Bedienbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 4: In de code is er bovenin een div-element met id=”first-focus-element” aanwezig dat toetsenbordfocus krijgt met het attribuut tabindex="1". Het tabindex-attribuut dient niet gebruikt te worden op niet-interactieve elementen, omdat dit verwarrend is voor bezoekers met hulpsoftware. Verwijder het attribuut.

Bevinding 5: In stap 2 van de applicatie zijn er links zonder linktekst die onzichtbare tabstops veroorzaken. Het zijn echter duplicaten van links die wel linkteksten bevatten. Verwijder de duplicaten. De duplicaten zijn te vinden boven de links met linktekst, bijvoorbeeld https://kaagenbraassem.nl/nieuwsbrief.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 6: In stap 2 van de applicatie zijn er links zonder linktekst die onzichtbare tabstops veroorzaken. Bezoekers die met behulp van het toetsenbord navigeren weten niet wat het linkdoel van deze links is omdat deze geen linkteksten bevatten. Het zijn echter duplicaten van links die wel linkteksten bevatten. Verwijder de duplicaten. De duplicaten zijn in de code direct te vinden boven de links met linktekst, bijvoorbeeld https://kaagenbraassem.nl/nieuwsbrief.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 7: In stap 3 krijgen bezoekers met een screenreader niet de dag te horen, maar heeft elk keuzerondje voor de dag als label "dag". Hoewel elk keuzerondje correct is gelabeld (en dus inderdaad bijvoorbeeld vrijdag 1 juli als label heeft), overschrijft het aria-describedby attribuut op elk keuzerondje dit label met het label "dag". Verwijder dit attribuut.

Bevinding 8: In stap 3 wordt bij de tijdkeuze de melding dat het eerste vrije tijdslot al is ingesteld, niet gecommuniceerd naar screenreaders. Deze melding missen bezoekers dus. De eenvoudigste oplossing is om deze zin boven het blok met de beschikbare data en tijden te zetten.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Voldoende

Bevinding 9: Opmerking:
In het startscherm, als men een keuze voor het onderwerp van de afspraak kiest, is er een optie met het ongeldige attribuut aria-label.bind. Dit attribuut bestaat niet. Aangezien er al een correct aria-label attribuut aanwezig is, kan deze verwijderd worden. Dit speelt ook in de 4e stap, als men de persoonlijke gegevens moet invullen. Daar gaat het om het aria-describedby.bind attribuut.

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: 2025-07-14 00:43:15 v2.4-011