Issues:
Audit digitale toegankelijkheid website Justis VOG-check

(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: Op pagina https://vogcheck.justis.nl/branches komen iconen voor die als img-element op de pagina zijn geplaatst. Bijvoorbeeld het img-element bij 'Zorg en welzijn'. Dit icoon van een pil en een opgestoken hand is decoratief en hoeft daarom geen alternatieve tekst te hebben. Zorg er dan echter wel voor dat hulpsoftware de afbeelding kan negeren door de afbeelding te verbergen, bijvoorbeeld met aria-hidden. Dit komt bij alle opties op deze pagina voor. Dit doet zich ook voor op pagina https://vogcheck.justis.nl/resultaat, als bezoekers niet gegarandeerd een VOG krijgen.

Bevinding 2: Op pagina https://vogcheck.justis.nl/resultaat, wanneer bezoekers wel een VOG krijgen, staat een afbeelding (met de bestandsnaam check-pink.svg). Deze afbeelding heeft geen alternatieve tekst. De afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. Zorg er dan echter wel voor dat hulpsoftware de afbeelding kan negeren door de afbeelding te verbergen, bijvoorbeeld met aria-hidden.

Bevinding 3: Op pagina https://vogcheck.justis.nl/resultaat, wanneer bezoekers niet gegarandeerd een VOG krijgen, wordt met een afbeelding van een ster (selected.svg) aangegeven dat deze branches door de bezoeker zijn gekozen. Deze afbeelding heeft geen alternatieve tekst. De alternatieve tekst komt nu voor binnen het header-element van het contentblok. Verberg daarom het img-element, bijvoorbeeld met aria-hidden. Let op: als het header element wijzigt (zie 1.3.1) bestaat de kans dat daarmee de alternatieve tekst ook verdwijnt. Zorg er in dat geval voor dat de alternatieve tekst nog wel beschikbaar is, bijvoorbeeld door een beschrijving (zoals 'Geselecteerde branche') toe te voegen binnen het alt-attribuut in het img-element.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 4: Op de homepage https://vogcheck.justis.nl/ kunnen bezoekers middels de knop 'Over deze site' een dialoogvenster openen. Dit dialoogvenster is opgemaakt met een div-element zonder rol, waardoor het dialoogvenster niet wordt opgemerkt door hulpsoftware. Zorg ervoor dat bezoekers die gebruik maken van hulpsoftware en het scherm niet kunnen zien weten dat er additionele informatie geopend is, bijvoorbeeld door gebruik te maken van role=dialog. Kijk voor een voorbeeld op https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/. Dit doet zich op iedere pagina met dit venster voor.

Bevinding 5: Op de homepage https://vogcheck.justis.nl/ kunnen bezoekers middels de knop 'Over deze site' een dialoogvenster openen. De tussenkopjes in dit venster, zoals 'Inhoud VOG-check', zijn opgemaakt met het strong-element. Het strong-element heeft niet dezelfde semantische waarde als een heading-element. Bezoekers die gebruik maken van voorleessoftware kunnen aan de hand van een koppenlijst of met een sneltoets door de koppen op een pagina navigeren. Koppen die echter alleen visueel herkenbaar zijn als kop (bijvoorbeeld door de tekst vetgedrukt te maken) maar dat in de code niet zijn, zijn niet op die manier bereikbaar. Zorg er daarom voor dat deze teksten opgemaakt zijn met een h-element. Vergeet daarbij ook niet het dialoogvenster een h1-kop te geven. Dit doet zich op alle pagina's waar dit venster voorkomt voor.

Bevinding 6: Op pagina https://vogcheck.justis.nl/leeftijd staat visueel de koptekst 'Ik ben'. Met een aria-label is hieraan de toegankelijke naam 'Hoe oud bent u?' gegeven. Alle informatie die visueel op een pagina staat, moet kloppen met wat er tekstueel en semantisch (in betekenisvolle code) in de code staat, zodat bezoekers die gebruik maken van hulpsoftware dezelfde informatie tot hun beschikking hebben. Zorg er daarom voor dat de visuele tekst overeenkomt met wat er in de accessibility tree wordt getoond, door het aria-label te verwijderen en eventueel 'Ik ben' aan te passen naar 'Hoe oud bent u?'.

Bevinding 7: Op onder andere pagina https://vogcheck.justis.nl/delicten en pagina https://vogcheck.justis.nl/straffen komen radiobuttons (keuzerondjes) voor. Deze elementen zijn niet gegroepeerd, waardoor bezoekers die gebruik maken van voorleessoftware niet weten waar zij antwoord op geven. Gebruik bijvoorbeeld een fieldset en legend combinatie om de elementen te groeperen en te beschrijven.

Bevinding 8: Op pagina https://vogcheck.justis.nl/resultaat, wanneer bezoekers niet gegarandeerd een VOG krijgen, staan visuele koppen (zoals 'Schoonmaak' of 'Juridische dienstverlening) opgemaakt binnen een header-element. Het header-element heeft binnen het body-element, en wanneer het header-element niet genest is binnen bijvoorbeeld een article-element, hetzelfde doel als een banner-element. Het is daarom niet geschikt voor de opmaak van koppen. Gebruik voor een kop een heading element, zoals het h2-element. Het h2-element en aanvullende content mag wel geplaatst worden binnen een geschikt container element om aan te geven dat content bij elkaar hoort. Lees meer over het header-element op https://html.spec.whatwg.org/multipage/sections.html#the-header-element.

Bevinding 9: Advies: Meerdere pagina's missen een h1-kop. Een logische aflopende koppenstructuur is een belangrijk hulpmiddel voor meerdere doelgroepen. Overweeg daarom h1-koppen toe te voegen, bijvoorbeeld 'Leeftijd' op pagina https://vogcheck.justis.nl/leeftijd.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 10: Op de resultaatpagina https://vogcheck.justis.nl/resultaat (wanneer de bezoeker voor 'Geen strafblad' heeft gekozen en daarom automatisch een VOG krijgt) komt witte tekst voor op een afbeelding. Op meerdere punten is de contrastratio tussen de witte tekst en de achtergrond te laag, bijvoorbeeld op de pagina waar staat 'U krijgt een VOG!' met de foto van de vrouw in de groene blouse in een klaslokaal. Op de lichte achtergrond achter de tekst 'Als u geen' is de contrastratio slechts 3,5:1 waar dat minimaal 4,5:1 moet zijn. Pas in het algemeen op met tekst over een afbeelding plaatsen, voeg bijvoorbeeld een niet-doorschijnend vlak toe achter de tekst om contrastproblemen te voorkomen.

Bevinding 11: Advies: Op de homepage komt witte tekst op een steeds veranderende achtergrond voor. De contrastratio tussen de tekst en de achtergronden is hoog genoeg, maar de verschillende wisselende achtergrondkleuren maken de tekst voor sommige bezoekers toch mogelijk minder goed leesbaar. Overweeg een achtergrond toe te voegen die niet verandert.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 12: Advies: Op enkele plekken, bijvoorbeeld op de resultaatpagina wanneer bezoekers niet gegarandeerd een VOG krijgen, zijn enkele teksten wanneer de tekstafstand wordt vergroot én de bezoeker inzoomt niet meer 100% leesbaar. Echter, omdat de tekst minimaal wordt afgesneden wordt dit niet afgekeurd. Overweeg wel om de teksten meer marge te geven om binnen de CSS blokken te blijven vallen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 13: Advies: Op onder andere pagina https://vogcheck.justis.nl/delicten en pagina https://vogcheck.justis.nl/straffen komen radiobuttons voor. Deze elementen zijn onderling bereikbaar met de tab-toets. Dit is een a-typische toetsenbordbediening voor deze elementen. Bezoekers die gebruik maken van het toetsenbord verwachten met de tabtoets focus te krijgen op het eerste radio-element, om vervolgens met de pijltoetsen een andere te selecteren en daarna met de tabtoets verder te navigeren. Overweeg daarom om de structuur en bediening van deze elementen aan te passen naar standaard HTML bediening.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 14: Let op: Er is een mechanisme aanwezig maar deze is nog niet volledig toegankelijk.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 15: Advies: Iedere pagina heeft een beschrijvende titel, maar de afzender van de website komt niet voor in de titel van de pagina's. Overweeg deze (Justis) toe te voegen aan de paginatitels, bijvoorbeeld 'VOG-check - Leeftijd | Justis' op pagina https://vogcheck.justis.nl/leeftijd.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 16: Op onder andere pagina https://vogcheck.justis.nl/leeftijd kunnen bezoekers de focus plaatsen op niet-interactieve elementen, zoals 'Ik ben'. Dit is verwarrend, omdat de bezoeker nu niet weet of dit element interactief hoort te zijn, of dat de focus onnodig op een niet-interactief element geplaatst is. Vermijd het plaatsen van de toetsenbordfocus op niet interactieve elementen, tenzij het de toegankelijkheid vergroot, bijvoorbeeld in het geval van een modal. Dit doet zich ook voor op onder andere pagina https://vogcheck.justis.nl/resultaat.
Een vergelijkbare situatie doet zich voor in de dialoogvensters met aanvullende informatie, waar bezoekers naast de sluitknop, de knoppen en de links in de tekst ook focus kunnen plaatsen op het volledige tekstblok.

Bevinding 17: Advies: Wanneer bezoekers op pagina https://vogcheck.justis.nl/leeftijd komen nadat zij op de homepage op start hebben gedrukt, staat de focus meteen op het logo van Justis bovenaan de pagina. Zorg ervoor dat de focusvolgorde op een nieuwe pagina niet onnodig voor de bezoeker bepaald wordt. Dit doet zich op meerdere pagina's voor, waaronder op pagina https://vogcheck.justis.nl/strafblad.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 18: Op pagina iedere pagina na de eerste, bijvoorbeeld op pagina https://vogcheck.justis.nl/branches staan knoppen met de naam 'Vorige' en bijvoorbeeld '1/3 Volgende'. Het is niet volledig duidelijk waar de knop heen leidt. Het lijkt door 1/3 nu ook alsof er 3 stappen zijn binnen het proces en dat de bezoeker bij de eerste stap is. Pas de naam aan, bijvoorbeeld naar 'Vorige stap' en '1/3 geselecteerd. Volgende stap'.

Bevinding 19: Advies: Op pagina https://vogcheck.justis.nl/branches komen selectievakjes voor. Deze elementen hebben een toegankelijke naam maar omdat op sommige plekken spaties missen, is de toegankelijke naam mogelijk moeilijker te begrijpen voor bezoekers die gebruik maken van voorleessoftware. Bijvoorbeeld de toegankelijke naam:"Zorg en welzijnZoals: (ambulant) begeleider, sporttrainer, verpleegkundige, pedagogisch medewerker" en "OnderwijsZoals: docent, conciërge, onderwijsassistent."

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 20: Advies: In Firefox wordt een andere focusstijl gebruikt dan in Chrome. In Firefox wordt nu gebruik gemaakt van een blauwe focusrand, met een lagere contrastratio dan de focusrand in Chrome. Overweeg in Firefox ook een donkere focusrand te gebruiken.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 21: De ISO code die gebruikt is om de taal van de pagina aan te geven is nl_NL. Omdat in plaats van een - een _ is gebruikt, wordt de taalcode mogelijk niet goed herkent door hulpsoftware. Gebruik de correcte taalcode, namelijk nl-NL (of alleen nl).

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 22: Op pagina https://vogcheck.justis.nl/wanneer-bestraft kunnen bezoekers zelf een datum invullen. De invoervelden hebben echter geen visueel label, alleen een placeholder die verdwijnt wanneer de bezoeker begint met typen. Zorg ervoor dat ieder veld een zichtbaar label heeft, dat ook zichtbaar blijft na invoer, bijvoorbeeld door het boven het veld te plaatsen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 23: Op iedere pagina staat het logo van Justis, waar bezoekers op kunnen klikken. Door te klikken gaat de bezoeker terug naar de homepage van vogcheck.justis.nl. Dit interactieve elementen heeft wel een toegankelijke naam, maar geen toegankelijke rol. Zorg ervoor dat ieder interactief element een toegankelijke rol heeft, in dit geval gaat het om een link. Gebruik bij voorkeur ook het a-element met een href attribuut om de link op te maken.

Bevinding 24: Op de homepage https://vogcheck.justis.nl/ staan direct na het logo twee knoppen om de bewegende content op de pagina te pauzeren/starten en opnieuw af te spelen. Deze knoppen hebben geen toegankelijke naam. Zorg ervoor dat deze knoppen een toegankelijke naam hebben en dat die overeenkomt met de functie van de knoppen (bijvoorbeeld 'Pauzeer slideshow' 'Start slideshow' 'Slideshow opnieuw afspelen').

Bevinding 25: Advies: Op iedere pagina in het proces staan knoppen, waarmee bezoekers naar de volgende/vorige of een externe pagina kunnen gaan. Een knop is niet het juiste element om bezoekers mee naar een andere pagina of plek op de pagina te verwijzen. Zeker bij de laatste pagina, https://vogcheck.justis.nl/resultaat, is het verwarrend dat de knop 'Meer over de aanvraag' verwijst naar een externe pagina van Justis. Gebruik een link-element om bezoekers naar een andere pagina of plek op de pagina te verwijzen en gebruik een knop-element om een actie uit te voeren, bijvoorbeeld het openen van een dialoogvenster. Ditzelfde geldt voor de knop 'Check opnieuw'.

Bevinding 26: Advies: Meerdere knoppen op de site zijn opgemaakt met een button-element en zijn correct opgemaakt met tekst tussen de begin en eindtag, maar hebben alsnog een aria-label gekregen met exact dezelfde tekst. Dit is overbodig en zorgt in de toekomst mogelijk voor toegankelijkheidsproblemen wanneer de zichtbare teksten van de knoppen worden aangepast en de aria-labels niet worden aangepast. Vermijd daarom overbodig gebruik van aria.

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

• Proces VOGcheck:
  https://vogcheck.justis.nl/
• Leeftijd:
  https://vogcheck.justis.nl/leeftijd
• Branches:
  https://vogcheck.justis.nl/branches
• Strafblad:
  https://vogcheck.justis.nl/strafblad
• Delicten:
  https://vogcheck.justis.nl/delicten
• Straffen:
  https://vogcheck.justis.nl/straffen
• Datum straf:
  https://vogcheck.justis.nl/wanneer-bestraft
• Lengte van de straf:
  https://vogcheck.justis.nl/hoe-lang
• Resultaat:
  https://vogcheck.justis.nl/resultaat

Ondersteunende technieken

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

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.