Onderzoek toegankelijkheid cjib.nl

Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

zakelijk

Uitkomst: Onvoldoende

feiten en cijfers 2022

Uitkomst: Onvoldoende

PDF Stand van de uitvoering (via nieuwsbericht)

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).

In het chatvenster staat een afbeelding (avatar) zonder alt-attribuut. (Tijdens het onderzoek kon deze afbeelding niet geladen worden, maar stond wel als img-element in de HTML).

contact

De afbeeldingen voor de contactopties telefoon, brief en digitaal loket hebben geen alt-attribuut. Bij telefoon en brief kan dit een lege alt-tekst zijn, omdat deze iconen als decoratief kunnen worden beschouwd. Het DigiD-logo geeft wel informatie en heeft als alt-tekst ‘DigiD’ nodig.

zakelijk

De afbeeldingen in de blokjes met onderwerpen hebben geen alt-attribuut. Geef een goede beschrijving van de afbeelding of laat de alt-tekst leeg wanneer deze afbeeldingen decoratief zijn.

feiten en cijfers 2022

De afbeelding bij ‘Stand van de uitvoering 2022’ heeft geen alt-attribuut. Geef een goede beschrijving van de afbeelding of laat de alt-tekst leeg wanneer deze afbeelding decoratief is. (Herhaal niet de titel van het bericht in een alt-tekst, dit is niet correct en voegt niks toe voor screenreader gebruikers).

PDF Stand van de uitvoering (via nieuwsbericht)

De afbeeldingen in het document missen een alternatieve tekst. Afbeeldingen van content zoals het logo op de eerste pagina hebben een goede omschrijving nodig. Decoratieve afbeeldingen zoals de gekleurde achtergrondblokken kunnen het best als artifact worden gemarkeerd, zodat screenreaders ze niet voorlezen.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

wizard betalen in delen

Uitkomst: Onvoldoende

betalen in delen aanvragen

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

Uitkomst: Onvoldoende

direct regelen -niet eens met boete

Uitkomst: Onvoldoende

nieuwsbericht persoonsgericht handelen

Uitkomst: Onvoldoende

PDF Stand van de uitvoering (via nieuwsbericht)

Uitkomst: Onvoldoende

PDF Overtredingen Wet administratiefrechtelijke handhaving verkeersvoorschriften (Wahv), ook Wet Mulder (via feiten en cijfers 2022)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het tekst-invoerveld om te zoeken bovenaan de site heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.

In het chatvenster staat het label niet gekoppeld aan het invoerveld. Dit kan gedaan worden via een id of door het invoerveld te nesten binnen het label.

Opmerking: De knop naar het mobiele menu is in Windows High Contrast mode niet zichtbaar. Dit komt doordat de knop geen tekst heeft en ook geen afbeelding, alleen CSS streepjes. Windows herkent dit niet als content. Dit kan worden opgelost door de afbeelding in svg te plaatsen en er een (transparante) outline omheen te zetten.

wizard betalen in delen

De vraag in de wizard staat in een h2-kop. Beperk het gebruik van koppen tot (bondige) teksten boven gerelateerde content. Hier kan beter een legend gebruikt worden.

betalen in delen aanvragen

In de tabel worden kopcellen niet als zodanig aangegeven in de code: dit zijn table data cellen (td) in plaats van table header cellen (th). Wanneer kopcellen goed zijn opgemaakt, kunnen screenreaders de tabel correct voorlezen met daarbij de relaties tussen de kop-en datacellen. Dit komt op meerdere pagina’s voor, bijvoorbeeld ook bij het overzicht van instanties voor slachtoffers.

aanvraag betalen in delen voor mezelf (formulier)

De foutmeldingen staan in een label. Hierdoor hebben deze invoervelden 2 geassocieerde labels. Dit kan problemen geven voor hulpsoftware. Bijvoorbeeld Voiceover in Safari leest deze labels nu helemaal niet meer voor. Maak hier een ander element van en koppel deze via bijvoorbeeld aria-describedby aan het invoerveld.

direct regelen -niet eens met boete

Bij de tekstblokjes met Verkeersboete en Strafbeschikkking staan een ‘M’ en een ‘O’ om het beter herkenbaar te maken. Deze letters zijn echter verborgen voor hulpsoftware via aria-hidden=”true”, en worden niet benoemd in de tekst. Dit attribuut kan beter weggehaald worden zodat de tekst wel beschikbaar is.

nieuwsbericht persoonsgericht handelen

Tussenkopjes worden in de code opgemaakt met het strong-element in plaats van met kopelementen. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier een kopelementen van zoals h2 of h3.

PDF Stand van de uitvoering (via nieuwsbericht)

Koppen in het document zijn niet als kop opgemaakt, maar als paragraaf. Ook zijn er erg veel lege paragrafen.

Op pagina 7 staat visueel één genummerde lijst met 2 items, maar in de code zijn dit 2 lijsten. Maak hier 1 lijst van.

Op pagina 9 staat een titel met 2 paragrafen in een paars blok. Deze staan in de code opgemaakt als tabel waarbij alle tekst binnen de tabelkop staat. Dit is nogal verwarrend voor screenreaders. Maak hier koppen (bijvoorbeeld h2 en h3’s) en 2 paragrafen van in plaats van een tabel. Dit komt ook voor op pagina 10.

PDF Overtredingen Wet administratiefrechtelijke handhaving verkeersvoorschriften (Wahv), ook Wet Mulder (via feiten en cijfers 2022)

De PDF heeft geen tags (codelaag) en daardoor is er 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: Onvoldoende

nieuws

Uitkomst: Onvoldoende

PDF Stand van de uitvoering (via nieuwsbericht)

Uitkomst: Onvoldoende

nieuws

Bij de nieuwsberichten staat de datum in de broncode voor de kop waar die bij hoort. Hierdoor verandert de betekenis van de volgorde, en valt de zichtbare datum (in de layout) onder de vorige kop. Dit kan erg verwarrend zijn voor screenreadergebruikers. Zorg dat de datum in de code na de kop staat.

PDF Stand van de uitvoering (via nieuwsbericht)

De visuele volgorde en de bronvolgorde verschillen van elkaar, waardoor het voor gebruikers van hulpsoftware en toestenbord verwarrend kan zijn. Zo lopen voetteksten door de content heen. Bijvoorbeeld op pagina 5: ‘Albert Hazelhoff Stand van uitvoering | 5 Algemeen Directeur CJIB’.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

Uitkomst: Onvoldoende

doorgeven rekeningnummer schadevergoedingsmaatregel (formulier)

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.

doorgeven rekeningnummer schadevergoedingsmaatregel (formulier)

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

direct regelen - ik kan niet in een keer betalen

Uitkomst: Onvoldoende

wizard betalen in delen

Uitkomst: Onvoldoende

overzicht van instanties voor slachtoffers

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Een aantal elementen op de website zitten qua contrast onder deze waarden.

Opmerking: De focusstijl is een lichtgrijze rand. Dit heeft op veel plekken op de site een laag contrast met de achtergrond. Dit is geen eis onder WCAG 2.1 (wel onder WCAG 2.2 AAA), maar het is raadzaam om dit contrast te verhogen voor slechtziende bezoekers die met het toetsenbord navigeren. Zie screenshot 4.

direct regelen - ik kan niet in een keer betalen

De blauwe link om contact op te nemen op de paarse achtergrond (3.1:1).

wizard betalen in delen

De link naar de vorige stap (2.92:1).

overzicht van instanties voor slachtoffers

De blauwe link naar de mijnslachtofferzaak website op de grijze achtergrond (3.99:1).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

direct regelen - deurwaarder

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op een aantal plekken op de site is dit niet het geval.

Op 400% is de chatfunctie niet te gebruiken, doordat de verzendknop onbereikbaar is. Er kan ook niet heen gescrolld worden. Zie screenshot 6.

direct regelen - deurwaarder

Boven de 200% vallen de laatste 3 deelknoppen buiten beeld.

Hele sample

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Een aantal elementen op de website zitten qua contrast onder deze waarden.

Het pijltje en het plus-icoon (wanneer ingezoomd), waarmee wordt aangegeven dat een menu-item submenu-items bevat (2.1:1 voor paars/paars en 1.5:1 voor paars/wit).

aanvraag betalen in delen voor mezelf (formulier)

De randen van de invoervelden van het formulier (2.1:1).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De submenu’s kunnen alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. In dit geval wordt de rest van de site ook nog moeilijker leesbaar doordat er een donkere overlay overheen valt. Zorg dat de submenu’s ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

wizard betalen in delen

Uitkomst: Onvoldoende

contact

Onderaan de content staat de vraag ‘Vindt u deze informatie duidelijk?’ Het beantwoorden van deze vraag met het toetsenbord is niet mogelijk. De invoervelden staan op visibility:”hidden”. Zie screenshot 2.

wizard betalen in delen

Het beantwoorden van de vraag is niet mogelijk met het toetsenbord. De invoervelden staan op visibility:”hidden”.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

PDF Stand van de uitvoering (via nieuwsbericht)

Uitkomst: Onvoldoende

PDF Stand van de uitvoering (via nieuwsbericht)

Het document heeft geen bladwijzers. Bij documenten met veel pagina’s geven bladwijzers de gebruiker de mogelijkheid om meteen naar bepaalde content te springen. Dat is hier niet mogelijk. Voeg bladwijzers toe aan de PDF via koppen. Dit kan automatisch of handmatig, afhankelijk van het gebruikte programma. Zie ook 1.3.1 voor de kopopmaak.

Hele sample

Uitkomst: Onvoldoende

zoekresultaten

Uitkomst: Niet getoetst

PDF Stand van de uitvoering (via nieuwsbericht)

Uitkomst: Onvoldoende

PDF Overtredingen Wet administratiefrechtelijke handhaving verkeersvoorschriften (Wahv), ook Wet Mulder (via feiten en cijfers 2022)

Uitkomst: Onvoldoende

zoekresultaten

Opmerking: De paginatitel luidt ‘ I am looking for’. Dit is mogelijk niet voor iedereen duidelijk. Maak hier een Nederlandse titel van.

PDF Stand van de uitvoering (via nieuwsbericht)

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.

PDF Overtredingen Wet administratiefrechtelijke handhaving verkeersvoorschriften (Wahv), ook Wet Mulder (via feiten en cijfers 2022)

Het PDF-bestand heeft geen titel.

Hele sample

Uitkomst: Onvoldoende

ik kan niet in een keer betalen (video)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je bent ingezoomd vanaf 175% (bij 1280px breed) komt het hoofdmenu onder elkaar te staan. De submenu-items staan standaard ingeklapt, maar de focus komt er wel op. Dit is verwarrend voor ziende toetsenbordgebruikers. Zorg dat de focus alleen kan komen op interactieve onderdelen die niet visueel verborgen zijn.

ik kan niet in een keer betalen (video)

Binnen de video zijn de knoppen te bedienen met het toetsenbord, zoals het kiezen van de letters of ja/nee, maar de focusvolgorde is niet logisch. Hierdoor lijken de knoppen vaak niet bereikbaar. De focus komt er op aan het begin van de video, en niet zoals verwacht na de opties bovenaan en voor de standaard controls zoals pauzeren. Zorg dat de focusvolgorde en de visuele volgorde zoveel mogelijk overeenkomen.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Engelse teksten komen op veel plekken voor in de (Nederlandse) site. Dit is mogelijk niet voor iedereen duidelijk. Zorg dat alle koppen en labels in de juiste taal staan. Een paar voorbeelden:

• Bovenaan de pagina staat een waarschuwing over valse berichten. Deze heeft een sluitknop met als label ‘Dismiss notification’.
• Op de homepage staat een h2-kop ‘secondary toptasks’.
• De knop om te zoeken in de header heeft als label ‘Toggle search bar’.
• Op de zoekresultaten pagina staat in het zoekvenster de knop ‘apply’.
• De foutmelding in de wizard ‘You must select at least 1 choice.’ Zie screenshot 3.
• De beschrijvingen bij het formulier hebben een knop met ‘Dimiss’.

Hele sample

Uitkomst: Onvoldoende

ik kan niet in een keer betalen (video)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je bent ingezoomd vanaf 175% (bij 1280px breed) komt het hoofdmenu onder elkaar te staan. Binnen dit menu is de focus op de submenu-items niet zichtbaar. Zie screenshot 5.

ik kan niet in een keer betalen (video)

Onderaan de content staat een knop om de pagina te delen. De focus op deze knoppen is niet zichtbaar.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

nieuws

Uitkomst: Niet getoetst

Hele sample

Bevindingen:

De link achter het logo bovenaan de site heeft een andere toegankelijke naam (namelijk ‘home’) dan wat er zichtbaar is. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minimaal de zichtbare tekst bevat. Het is hier ook goed om ‘logo’ aan de toegankelijke naam toe te voegen, zodat een gebruiker dat in het commando kan gebruiken (‘klik logo …’). Zie ook 1.1.1.

De button om te zoeken in de header heeft visueel het label ‘zoeken’, maar de toegankelijke naam (aria-label) is ‘Toggle search bar’. Hierdoor kan de link niet met stem bediend worden. Zorg dat deze namen overeenkomen.

nieuws

Opmerking: visueel staan de links achter de ‘lees meer’-teksten bij alle items (blauw onderstreept), maar in de toegankelijke naam werkt dat alleen bij het eerste item (de witte button). Dit kan verwarrend zijn wanneer je de links met stem wilt bedienen. Duidelijker is het wanneer de linkstijl (blauw, onderstreping) op de link zelf staat, zoals achter ‘Persoonsgericht handelen met oog voor de menselijke maat’.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

PDF Overtredingen Wet administratiefrechtelijke handhaving verkeersvoorschriften (Wahv), ook Wet Mulder (via feiten en cijfers 2022)

Uitkomst: Onvoldoende

PDF Overtredingen Wet administratiefrechtelijke handhaving verkeersvoorschriften (Wahv), ook Wet Mulder (via feiten en cijfers 2022)

Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.

Hele sample

Uitkomst: Onvoldoende

niet eens met aanmaning (Deense pagina)

Uitkomst: Onvoldoende

niet eens met aanmaning (Deense pagina)

Bovenaan de pagina staat een melding ‘Mail, sms of appje ontvangen over niet betaalde bedragen bij het CJIB? Deze is vals!’. Hiervoor is geen taalwissel in de code aangegeven.

Bovenaan in de content staan 3 links in een andere taal, zoals ‘Ich bin nicht einverstanden mit der Mahnung’. Hiervoor is geen taalwissel in de code aangegeven.

Screenreaders kunnen hierdoor niet de juiste taal bepalen voor deze onderdelen en lezen het mogelijk verkeerd voor. Geef de betreffende taal aan met het ‘lang’ attribuut.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

Wanneer het formulier niet kan worden verzonden, wordt er niet aangegeven dat er fouten in het formulier zijn gevonden. Enkel het formulier opnieuw aanbieden met bij de betreffende velden een melding als ‘Veld X is verplicht’ is niet voor alle gebruikers duidelijk genoeg. Zo’n verplichting is namelijk een algemene instructie (die er ook al kon staan voor het verzenden). Een goede foutmelding is wanneer er bijvoorbeeld wordt aangegeven dat een veld niet is ingevuld, of niet correct is ingevuld. Een alternatief kan zijn om bovenaan het formulier een algemene melding te plaatsen dat er fouten zijn gevonden. Dan mag wel worden volstaan met de melding ‘Veld X is verplicht’.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

ik kan niet in een keer betalen (video)

Uitkomst: Onvoldoende

aanvraag betalen in delen voor mezelf (formulier)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De knop om te zoeken bovenaan de site opent een extra blok met een zoekvenster. De status van deze button blijft op gesloten staan (aria-expanded=”false” ) wanneer deze geopend is. Pas de status aan. Zie screenshot 1.

De knop waarmee het submenu kan worden uitgeklapt, zoals onder ‘Direct regelen’, geeft geen status aan of het geopend of gesloten is. Dit kan worden opgelost door het ‘aria-expanded’ attribuut toe te voegen.

De menuknop wanneer je bent ingezoomd vanaf 175% om het gehele hoofdmenu te openen, geeft geen status aan of het geopend of gesloten is. De naam van het menu is dan ‘Toggle mainmenu’. Dit is mogelijk niet voor iedereen duidelijk. Maak hier een Nederlandse tekst van (of enkel ‘Menu’ in combinatie met het ‘aria-expanded’ attribuut).

ik kan niet in een keer betalen (video)

De iframe heeft geen toegankelijke naam. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg bijvoorbeeld een title attribuut met beschrijving toe of een aria-label.

aanvraag betalen in delen voor mezelf (formulier)

Bij de invoervelden staan buttons met als label ‘Beschrijving’. De status hiervan wordt niet aangegeven. Dit kan worden opgelost door het ‘aria-expanded’ attribuut toe te voegen.

Hele sample

Uitkomst: Voldoende