Issues:
Audit digitale toegankelijkheid website Pleio formulieromgeving

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 1: Het formulier bevat keuzerondjes. Deze zijn niet correct gegroepeerd. Het label van het keuzerondje wordt wel correct voorgelezen, maar de vraag waarop de keuzerondjes antwoord geven niet. Gebruik een legend en fieldset combinatie om dit probleem op te lossen. Dit geldt ook voor de selectievakjes.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 2: Het formulierveld 'e-mail om bevestiging te krijgen' vraagt persoonlijke informatie van de bezoeker. HMTL5 invoervelden die informatie over de gebruiker vragen, zoals naam/achternaam, adres en geboortedatum, moeten een juist autocomplete attribuut hebben. Lees meer over autocomplete-attributen op: https://www.w3.org/TR/WCAG21/#input-purposes.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 3: Sommige formuliervelden bevatten placeholder teksten die extra instructies bieden, zoals het formulierveld 'getal tussen 5 en 25'. De contrastratio tussen de grijze placeholdertekst (HEX #9FA6B2) en de witte achtergrond is 2,4:1 waar dat minimaal 4,5:1 moet zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 4: Wanneer de invoervelden focus hebben, kleurt de rand van invoerveld blauw (HEX #A4CAFE). De contrastratio met de witte achtergrond is slechts 1,6:1 waar dat minimaal 3:1 moet zijn. Daarnaast verschijnt er ook een blauwe focusrand (HEX #D6E7FF) om de invoervelden. De contrastratio hiervan op de witte achtergrond is slechts 1,2:1 waar dat minimaal 3:1 moet zijn. Dit laatste geldt ook voor de knop 'verzenden' en de knoppen op de bedanktpagina.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 5: Het formulier bevat alleen HTML5-foutmeldingen. HTML5-foutmeldingen zijn onvolledig en blijven daarnaast maar korte tijd in beeld. De bezoeker moet een foutmelding krijgen wanneer een invoerveld niet goed is ingevuld of het formulier niet goed verzonden kan worden. De foutmelding moet beschrijven welke fout is gemaakt en wáár die is gemaakt. Bijvoorbeeld 'Het veld 'datum' is niet ingevuld'. Dat een veld verplicht ingevuld moet worden is een foutsuggestie. Voeg daarom eigen foutmeldingen toe die voldoen aan dit succescriterium.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 6: Sommige formuliervelden bevatten placeholder teksten die extra instructies bieden, zoals het formulierveld 'getalgrootte tussen 5 en 25'. Wanneer een bezoeker begint met typen verdwijnt deze tekst. Bezoekers met een cognitieve functiebeperking kunnen hierdoor moeite hebben met het invullen van het formulierveld. Zorg ervoor dat labels en instructies permanent zichtbaar blijven.

Bevinding 7: De invoervelden bij vraag 9 hebben geen label en daardoor geen toegankelijke naam. Zorg ervoor dat de toegankelijke naam overeenkomt met het zichtbare label, zodat bezoekers weten wat zij moeten invullen.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 8: Het formulier bevat alleen HTML5-foutmeldingen. HTML5-foutmeldingen zijn onvolledig en blijven daarnaast maar korte tijd in beeld staan. Zorg er daarom voor dat waar nodig eigen foutsuggesties worden toegevoegd.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 9: De pagina bevat twee niet unieke id's, namelijk 'array[0][undefined]' en 'array[1][undefined]'. Zorg ervoor dat id's uniek zijn om toegankelijkheidsproblemen te voorkomen.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 10: De invoervelden bij vraag 9 hebben geen toegankelijke naam. Zorg ervoor dat er altijd een naam, rol en eventueel een waarde en een staat wanneer van toepassing beschikbaar is voor bezoekers die gebruik maken van hulpsoftware.

Bevinding 11: Bij sommige invoervelden staan knoppen die meer informatie tonen, bijvoorbeeld bij 'getal tussen 5 en 25 (zorg ervoor dat dit 10 is)'. Visueel is duidelijk wanneer de knop in- of uitgeklapt- is, maar deze informatie is niet beschikbaar voor gebruikers van hulpsoftware. Zorg ervoor dat in de code wordt aangegeven wanneer de knop in- of uitgeklapt is, bijvoorbeeld door gebruik te maken van aria-expanded.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 12: Sommige formuliervelden bevatten een datumkiezer, zoals het veld 'datum'. Wanneer een bezoeker een wijziging doet in de datumkiezer, zoals met de knop 'volgende maand bekijken', wijzigt de inhoud van het dialoogvenster, maar bezoekers die gebruik maken van hulpsoftware krijgen hier geen melding van. Zorg ervoor dat het voor hen ook duidelijk is dat nieuwe informatie beschikbaar is.

Bevinding 13: Bij vraag 9 kunnen bezoekers zelf rijen invoervelden aan de tabel toevoegen met de knop 'voeg toe'. Het is zichtbaar dat er een rij toegevoegd wordt, maar bezoekers die gebruik maken van hulpsoftware krijgen hier geen melding van. Zorg ervoor dat het voor hen ook duidelijk is dat nieuwe informatie beschikbaar is.

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

• Formuliervelden:
  https://formulieren.pleio.nl/forms/42/fill

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

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