Onderzoek toegankelijkheid CJIB Digitaal loket versie 1.1

Hele sample

Uitkomst: Onvoldoende

Betaalafspraak (incl proces betalen via iDEAL)

Uitkomst: Onvoldoende

Actueel - detailinformatie verkeersboete met foto

Uitkomst: Onvoldoende

Betaling inplannen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Bovenaan de site staat een logo met de tekst ‘Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid’. Deze afbeelding heeft geen alternatieve tekst. Voor een svg afbeelding kan dit worden gedaan door middel van het toevoegen van een ‘role=”img” en een title element (alleen een title element wordt niet goed ondersteund in alle screenreaders, in combinatie met een expliciete rol gaat dit wel goed).

Hertoetsing: er is nu een image-element gebruikt met een lege alt-tekst. Dit is echter geen decoratieve afbeelding. Zet de volledige zichtbare tekst van het logo in het alt-attribuut. (Het title-attribuut wordt slecht ondersteund door hulpsoftware en is daarom geen goede oplossing. Het aria-description-attribuut is nog niet standaard ondersteund en is ook niet bedoeld voor deze situatie.)

Betaalafspraak (incl proces betalen via iDEAL)

Na betalen via iDEAL kom je in een pagina met betaalopties. Bovenaan staat een logo met de tekst ‘Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid’. Deze afbeelding heeft geen alternatieve tekst. De afbeelding is geplaatst als achtergrondafbeelding. Beter is het deze als img of svg in de HTML te zetten met een bijbehorend alt-attribuut of title-element.

Hertoetsing: het logo is nu in een image-element gezet, maar er zijn nog twee problemen: ten eerste wordt de afbeelding verborgen voor screenreaders via het attribuut ‘aria-hidden’, en ten tweede is de alt-tekst niet correct, want deze luidt ‘Logo van CJIB Regeling’, en dit is niet wat er te zien is op de afbeelding. Haal het 'aria-hidden'-attribuut weg en zet de volledige zichtbare tekst in het alt-attribuut.

Actueel - detailinformatie verkeersboete met foto

De grote foto bevat teksten met extra gegevens zoals de snelheid en locatie. Hiervan is geen alternatieve tekst beschikbaar. Zet deze gegevens bijvoorbeeld ook in een tabel onder de foto.

Hertoetsing: er staat nu role=”presentation” op de afbeelding, waardoor de afbeelding wordt verborgen voor hulpsoftware . Haal deze rol weg.

Betaling inplannen

Boven de keuze van de bank staat een iDEAL logo. Hiervoor is geen alternatieve tekst. De afbeelding is geplaatst met CSS. Beter is het deze als img of svg in de HTML te zetten met een bijbehorend alt-attribuut of title-element.

Hertoetsing: de afbeelding staat nu in een image-element met goede alt-tekst. De afbeelding wordt echter verborgen voor hulpsoftware via het attribuut role=”presentation”. Haal dit attribuut weg.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Overzicht/startpagina

Uitkomst: Onvoldoende

Onderzoek bestuurder (proces meerdere stappen, meerdere variaties)

Uitkomst: Onvoldoende

Betaling inplannen

Uitkomst: Onvoldoende

PDF Getuigschrift (via beschikking)

Uitkomst: Onvoldoende

Overzicht/startpagina

Wanneer er een betaling ingepland staat, staan er 2 kalendericoontjes op de pagina, welke niet worden doorgegeven aan hulpsoftware. Deze staan als content property in de CSS. Het gaat om de zin ‘​Bedragen met een  zijn betalingen die u hebt ingepland.’ en het icoon in de eerste kolom van de tabel onder Actueel. Zorg voor goede alternatieve teksten voor deze icoontjes. Dit kan door ze als img-element of svg-element te plaatsen in de pagina en daarbij een duidelijke alt-tekst of title tekst toe te voegen. Voeg bij een svg-element ook role=’img’ toe, omdat dit hierdoor beter wordt ondersteund door screenreaders.

Dit probleem doet zich ook voor bij het informatie (‘i’) icoontje in de tabel onder Actueel, die gebruikt wordt voor de popover. Deze is ook niet beschikbaar voor hulpsoftware.

Hertoetsing: de afbeeldingen van de kalender staan nu in een image-element met goede alt-tekst. De afbeelding wordt echter verborgen voor hulpsoftware via het attribuut role=”presentation”. Haal dit attribuut weg. Dit geldt ook voor de waarschuwing iconen. Deze hebben daarnaast ook een verschillende alt-teksten (boven en in de tabel), wat verwarrend kan zijn als verwijzing. Zorg dat deze alternatieve teksten consistent zijn.

Onderzoek bestuurder (proces meerdere stappen, meerdere variaties)

In de eerste stap staat een vraag ‘Hebt u hulp van een raadsman of advocaat?’. Daarachter (onder de opmerking) staan 2 radiobuttons. Deze zijn niet gegroepeerd en hebben geen groepslabel. Dit kan worden opgelost door gebruik te maken van een fieldset en legend waarbij de vraag in het legend element staat. Ook kan gebruik worden gemaakt van role="radiogroup" aria-labelledby waarbij de laatste verwijst naar de vraag/kop. Dit issue komt bij meerdere stappen voor.

Hertoetsing: in de eerste stap staat nu een fieldset, maar de legend is nog leeg. In de tweede stap zijn de radiobuttons nog niet gegroepeerd.

Hertoetsing: in stap 4 staat visueel een tabel met rijkoppen (Omschrijving, Wanneer, Waar). Deze kopjes zijn opgemaakt met het strong-element. Dit element is hier niet voor bedoeld. Beter is het om een tabel te gebruiken met th- en td-cellen, of een definition list met dt-en dd-elementen. Dit komt op meerdere plekken in de site voor.

Betaling inplannen

Het invoerveld voor de datum van de betaling heeft geen correct geassocieerd label. Het label dat ervoor staat verwijst naar het id ‘datum-selectie’, maar het invoerveld heeft als id ‘datumBetaling’. Wanneer labels niet goed gekoppeld zijn, is het voor gebruikers van hulpsoftware niet duidelijk welk veld waarvoor bedoeld is.

Deze bevinding komt ook voor op de pagina Boete zoeken bij het datumveld.

PDF Getuigschrift (via beschikking)

Het document heeft een codelaag, maar een paar onderdelen ontbreken, namelijk het logo van de rijksoverheid (dit moet een afbeelding zijn met een alternatieve tekst), en de titels ‘Getuigschrift Buitengewoon Opsporingsambtenaar’ en ‘BOA’. Maak hier kopelementen van of eventueel afbeeldingen met een alternatieve tekst.

Hertoetsing: het getuigschrift heeft nu geen codelaag meer en er is daardoor is voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Overzicht/startpagina

Uitkomst: Onvoldoende

Actueel - detailinformatie verkeersboete met foto

Uitkomst: Onvoldoende

Overzicht/startpagina

Hertoetsing: in de tabellen kun je met de muis op de rijen klikken om naar de detailinformatie te gaan. Met het toetsenbord werkt dit niet.

Actueel - detailinformatie verkeersboete met foto

Bij het bekijken van de foto verschijnt er een knop om in te zoomen. Deze werkt niet met het toetsenbord. Zie ook 4.1.2.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Er wordt automatisch uitgelogd zonder waarschuwing. Voor gebruikers die meer tijd nodig hebben, kan dit erg lastig zijn. Aan dit criterium kan op verschillende manieren worden voldaan, bijvoorbeeld als volgt: Geef de gebruiker de optie om de inlogtijd te verlengen. De gebruiker moet hier minimaal 20 seconden de tijd voor krijgen en dit moet op een simpele manier uit te voeren zijn, bijvoorbeeld met een ‘verleng’-knop (dat uiteraard ook werkt via het toetsenbord met de enter knop of de spatiebalk), en dit moet ten minste 10 keer verlengd kunnen worden. (NB: Dit is ook getest op productie, en daar was ook geen waarschuwing.)

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

PDF Getuigschrift (via beschikking)

Uitkomst: Onvoldoende

PDF Getuigschrift (via beschikking)

Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Overzicht/startpagina

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Hertoetsing: De knop voor het menu heeft als naam (via het aria-label) ‘Toggle navigation’. Dit is mogelijk niet voor alle gebruikers duidelijk. Geef de knop een Nederlandse naam.

Overzicht/startpagina

Binnen de paginatielinks onder ‘Onderzoek bestuurder’ en ‘Actueel’ hebben de actieve links een label (en zichtbare teksten) in het Engels, zoals ‘Page 2 of 2 Pages’. Dit is mogelijk niet voor alle gebruikers duidelijk. Aangezien de pagina in het Nederlands is, is het beter hier Nederlandstalige teksten van te maken.

Hertoetsing: De aria-labels zoals ‘Next’ overschrijven de Nederlandse teksten. Het is beter de aria-labels te verwijderen.

Hele sample

Uitkomst: Onvoldoende

Betaalafspraak (incl proces betalen via iDEAL)

Uitkomst: Onvoldoende

Betaalafspraak (incl proces betalen via iDEAL)

Hertoetsing: Na betalen via iDEAL kom je in een pagina met betaalopties. Bovenaan de pagina staat een knop met ‘Ga terug’. De focus op deze knop is niet zichtbaar, doordat de outline op 0 is gezet. Hierdoor zie je niet de (blauwe) focusrand zoals op de andere interactieve onderdelen.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

PDF Getuigschrift (via beschikking)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De pagina’s staan ingesteld op Engels (html lang=”en”), maar de content is Nederlands. Hierdoor lezen screenreaders de content mogelijk niet in de juiste taal voor. Stel de pagina’s in op Nederlands.

Hertoetsing: er staat nu helemaal geen taal ingesteld.

PDF Getuigschrift (via beschikking)

Het document heeft als taal Engels ingesteld, maar de inhoud is Nederlands. Zet het document in de juiste taal zodat het goed voorgelezen kan worden.

Hertoetsing: het document heeft nu geen taal ingesteld.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Onderzoek bestuurder (proces meerdere stappen, meerdere variaties)

Uitkomst: Onvoldoende

Onderzoek bestuurder (proces meerdere stappen, meerdere variaties)

Wanneer het telefoonnummer niet is ingevuld en je kunt niet verder in het proces, wordt er geen melding gegeven dat er een fout is opgetreden en welke fout dat is. Er staat enkel ‘verplicht’ onder het veld van telefoonnummer, maar bezoekers die deze verandering niet kunnen zien, weten nu mogelijk niet wat er aan de hand is (bovendien is dit een algemene instructie die er ook voor het verzenden al staat). Zet bovenaan de pagina een duidelijke foutmelding met verwijzing naar het veld dat gecorrigeerd moet worden.

Dit probleem komt ook voor bij het zoeken naar een boete. Hier komt alleen ‘verplicht’ bij te staan als er een veld niet is ingevuld.

Hertoetsing: er staat nu een icoon met een kruis bij wijze van foutmelding, maar er is geen tekstuele melding (het icoon heeft ook geen tekstalternatief). Bovendien is dit een statusbericht: de pagina wordt niet opnieuw geladen en de focus gaat er niet automatisch naar toe. Hierdoor weten screenreadergebruikers niet dat deze melding er is gekomen en is het onduidelijk waarom de ‘verder’ knop niet werkt. Zie ook 4.1.3.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Actueel - detailinformatie verkeersboete met foto

Uitkomst: Onvoldoende

Actueel - detailinformatie verkeersboete met foto

Bij het bekijken van de foto verschijnt er een knop om in te zoomen. Deze heeft geen correcte rol en naam. Dit is een div-element. Maak hier bij voorkeur een button element van met een goede beschrijving.

Hele sample

Uitkomst: Onvoldoende

Onderzoek bestuurder (proces meerdere stappen, meerdere variaties)

Uitkomst: Onvoldoende

Onderzoek bestuurder (proces meerdere stappen, meerdere variaties)

Wanneer in de eerste stap de knop ‘verder’ geactiveerd wordt zonder dat er een keuze is gemaakt, komt er een foutmelding in beeld. Deze melding wordt niet programmatisch doorgegeven aan hulpsoftware. Dit kan worden gedaan via een role=“status” of het gebruik van live regions. Dit issue komt bij meerdere stappen voor.