Issues:
Audit digitale toegankelijkheid formulier Melding Openbare Ruimte E-Loket Meppel

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Bij de verplichte velden in het formulier op de start pagina staat een sterretje. Hulpsoftware leest dit niet altijd voor. Bij de meeste invoerelementen is het required attribuut toegevoegd, dit is een goed tekstueel alternatief. Echter, bij het invoerveld 'Onderwerp' en de groep onder 'Hoe kunnen we u bereiken voor meer informatie?' mist een tekstueel alternatief. Voeg die toe om dit probleem op te lossen.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 2: De keuzerondjes onder 'Wilt u een terugkoppeling ontvangen over uw melding?' zijn niet programmatisch gekoppeld aan de tekst 'Wilt u een terugkoppeling ontvangen over uw melding?' maar aan de tekst 'Locatie'. Dit komt door het gebruikte aria-labelledby attribuut, dat naar hetzelfde id verwijst bij beide keuzerondjes. Beide teksten gebruiken hetzelfde 'radio-group-label' id. (zie ook succescriterium 2.5.3 en 4.1.1). Geef de teksten een uniek id, zodat de juiste tekst bij de juiste groep keuzerondjes wordt voorgelezen.

Bevinding 3: Advies: Op de startpagina kan onder stap 1 een onderwerp gekozen worden. De keuze "Afval" wordt door hulpsoftware gelezen als "Onderwerp: Afval Afval". Het is voor bezoekers die gebruik maken van voorleessoftware fijn als er zo weinig mogelijk wordt voorgelezen.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 4: Op de startpagina kan de bezoeker onder andere het eigen e-mailadres en naam 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. Er is een autocomplete-attribuut aanwezig, maar met een ongeldige waarde. Waarden bij autocomplete-attributen mogen niet verwijzen naar id’s maar moeten voldoen aan universele autocomplete-waarden. Lees er meer over 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 5: De pagina bevat over een manier om herhalende blokken content te omzeilen, maar het contrast tussen de zwarte tekst en de donkergrijze achtergrond van de skiplink (HEX #51504D) is slechts 2,6: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 6: Wanneer keuzevakjes en selectierondjes in het formulier toetsenbordfocus hebben, is dat zichtbaar door een grijze focusrand. De contrastratio tussen de grijze focusrand (HEX #E2E2E1) en de witte achtergrond is slechts 1,2:1 waar dat minimaal 3:1 moet zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 7: Bezoekers kunnen in dit formulier geen eigen tekstopmaak toepassen, zoals het wijzigen van de afstand tussen letters, woorden en regels. Zorg ervoor dat dit mogelijk is.

2. Bedienbaar

2.4 Navigeerbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 8: Als een veld niet goed is ingevuld op de start pagina verschijnt na klikken op "Volgende" boven aan de pagina de foutmelding "Niet alle velden zijn correct gevuld ...". Dit dialoogvenster krijgt pas toetsenbordfocus nadat alle andere interactieve elementen op de pagina toetsenbordfocus hebben gehad. Bezoekers kunnen hierdoor de melding niet direct sluiten. Zorg ervoor dat het dialoogvenster direct focus krijgt wanneer de melding wordt voorgelezen.
Opmerking: Omdat hierdoor de foutmelding niet zichtbaar blijft kan bij het oplossen van deze bevinding een fout ontstaan bij succescriterium 3.3.1. Plaats de algemene foutmelding daarom op de pagina zélf, in plaats van als dialoogvenster. Zo blijft de melding zichtbaar tot bezoekers de foutmeldingen hebben opgelost.

Bevinding 9: Op pagina 2 van het formulier kunnen bezoekers een document toevoegen aan hun melding. Na het toevoegen van het formulier, gaat de focusvolgorde verder bij de knop 'Upload'. Echter zijn er bóven de knop door het toevoegen van het document interactieve elementen toegevoegd, die nu geen toetsenbordfocus krijgen, zoals de combox 'Type' en het invoer-element Titel. Zorg ervoor dat deze elementen eerst focus krijgen, voor bezoekers nog een document kunnen uploaden.

Bevinding 10: Op pagina 3 van het formulier kunnen bezoekers hun gegevens controleren. De invoervelden kunnen nu niet meer worden aangepast op deze pagina (zijn dus niet meer interactief), maar krijgen nog wel toetsenbordfocus. Dit is verwarrend voor bezoekers die gebruik maken van het toetsenbord, zij verwachten in een invoerveld tekst te kunnen toevoegen of wijzigen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 11: De toegankelijke naam van formulierveld "Wilt u een terugkoppeling ontvangen over uw melding?" op de start pagina is "Locatie" en komt niet overeen met het zichtbare label. Dat komt omdat aria-labelledby="radio-group-label" is gebruikt terwijl de id "radio-group-label" twee keer in de pagina voor komt. (zie 4.1.1) Zorg ervoor dat de zichtbare naam onderdeel is van de toegankelijke naam, het liefst vooraan.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 12: De toegankelijke naam van de sluiknop van de foutmelding die boven in beeld verschijnt als op de start pagina een veld niet goed is ingevuld is "close". Biedt interactieve elementen aan in de hoofdtaal van de pagina, zodat voorleessoftware de namen van knoppen en links correct kunnen voorlezen.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 13: Wanneer bezoekers een veld niet of niet goed invullen en door willen gaan naar de volgende pagina, verschijnt de melding 'Niet alle velden zijn correct gevuld. Corrigeer de fouten en probeer opnieuw'. Bij de velden zelf verschijnt een melding als 'Dit veld is verplicht' of 'Vul een geldige postcode in'. Een foutidentificatie moet vermelden wélke fout gemaakt is en wáár de fout gemaakt is (bijvoorbeeld 'Het veld Postcode is niet correct ingevuld'). Pas de algemene foutmelding en meldingen bij de individuele velden aan om dit probleem op te lossen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 14: In het formulier wordt met een asterisk (*) aangegeven welke velden verplicht zijn. Niet alle bezoekers zullen weten wat de betekenis van de asterisk is. Geef daarom ergens in het formulier (bovenaan is het prettigst) aan met een melding wat de asterisk betekent, bijvoorbeeld 'Velden met een sterretje (*) zijn verplicht'.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 15: Wanneer een bezoeker niet of niet goed invult en door wil gaan naar de volgende pagina, verschijnt er een foutsuggestie bij het veld. De melding 'Vul een geldige postcode in' is onvoldoende. Benoem het gewenste format, bijvoorbeeld: 'Een geldige postcode bestaat uit 4 cijfers, een spatie en 2 letters' om dit probleem op te lossen.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 16: Op de start pagina komen dubbele id's voor, namelijk id="radio-group-label". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 17: In het formulier worden ‘i’ iconen gebruikt die bezoekers meer informatie geven over de in te voeren velden. Deze hebben de rol ‘knop’. De knoppen hebben geen toegankelijke naam. Er is een aria-describedby attribuut gebruikt, maar dat voegt enkel een beschrijving toe, geen naam. Gebruik bijvoorbeeld aria-labelledby of een aria-label om de knoppen een toegankelijke naam te geven.

Bevinding 18: In het formulier worden ‘i’ iconen gebruikt die bezoekers meer informatie geven over de in te voeren velden. Deze hebben de rol ‘knop’. Dit is semantisch niet het meest geschikte element. Dit element heeft de functie van een tooltip: wanneer een bezoeker er met de muis of het toetsenbord overheen gaat, wordt er extra informatie voorgelezen. Nu gebeurt dit pas wanneer een bezoeker er met de muis op klikt. Echter, de melding wordt wel voorgelezen wanneer een bezoeker focus heeft op de 'knop'. Echter, wanneer de bezoeker met het toetsenbord de knop activeert, gebeurt er niks. Een knop activeert iets of verzend iets. Dat is hier niet geval. Maak hier een normale tooltip van om dit probleem op te lossen.

Bevinding 19: Op pagina 3 van het formulier staat de knop 'Verzenden'. Deze knop heeft als type 'Button'. Dit moet 'submit' zijn, zodat het ook duidelijk is voor bezoekers die gebruik maken van hulpsoftware dat deze knop het formulier verzendt.

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

• Start:
  https://eloket.meppel.nl/nxt/f/420/w/anoniem
• 404:
  https://eloket.meppel.nl/nxt/f/420/login/w/anoniem/fout

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.