Advies- en onderzoeksbureau in digitale toegankelijkheid | properaccess.nl | 06-28742275 | contact@properaccess.nl

Onderzoek digitale toegankelijkheid van website www.raadvoorrechtsbijstand.org/

Onderzocht door
Aliona and Julia van Proper Access
In opdracht van
Raad voor Rechtsbijstand
Leverancier techniek
Iprox
Conformiteitsdoel
WCAG 2.2, Level AA
Methodologie
WCAG-EM
Datum
16 december 2024

Samenvatting

De website www.raadvoorrechtsbijstand.org/ is onderzocht in week 50 van 2024. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM.

Resultaat

In dit onderzoek zijn 55 succescriteria onderzocht.

Beoordeling SC
Voldoet of nvt 45
Voldoet niet 10
Totaal 55

In dit rapport zijn de beschrijvingen van de succescriteria verkort. Volledige beschrijvingen zijn te vinden in de WCAG-documentatie. We bieden bij elk succescriterium ook een algemene toelichting. Hoewel de WCAG-norm voldoende duidelijkheid biedt voor gedegen onderzoek, kan de beoordeling van succescriteria op detailniveau in de toekomst veranderen. Zo kan iets dat nu wordt afgekeurd, bij een volgend onderzoek worden goedgekeurd en andersom.

Dit rapport bevat slechts voorbeelden van geconstateerde problemen; het biedt geen volledig overzicht. Omdat het onderzoek op een steekproef is gebaseerd, kan het zijn dat bepaalde problemen niet worden gedetecteerd. Deze kunnen echter bij een volgend onderzoek aan het licht komen. Bij het doorvoeren van verbeteringen moet men er rekening mee houden dat er nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Toelichting bij dit rapport

Doel van dit rapport

Dit onderzoek geeft een overzicht van de mate waarin de website momenteel voldoet aan de WCAG 2.2, niveau A en AA. WCAG, oftewel Web Content Accessibility Guidelines, zijn internationale richtlijnen voor de toegankelijkheid van webinhoud. Deze richtlijnen zijn opgedeeld in vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust, elk met specifieke meetbare succescriteria.

Testproces

Dit onderzoek is uitgevoerd volgens de WCAG-EM methodologie. Het volgende proces is daarbij gebruikt:

  • vaststellen wat binnen en buiten scope valt
  • vaststellen gebruikte technologieën
  • samenstellen sample (steekproef)
  • onderzoek van de sample
  • beschrijven van gevonden issues

Het onderzoek omvat alle eisen uit de Europese toegankelijkheidsnorm EN 301 549 en WCAG 2.2.

Het grootste deel van het onderzoek is een handmatig proces. Voor een deel van de criteria wordt ter ondersteuning gebruik gemaakt van automatische tools, zoals axe-core en Chrome Developer Tools.

Kleine letters

Omdat het onderzoek gebaseerd is op een steekproef, kan het zijn dat bepaalde problemen onopgemerkt blijven en bij een volgend onderzoek anders worden geëvalueerd. De steekproef vertegenwoordigt alle content op het getoetste domein Het onderzoek biedt een momentopname; bij het doorvoeren van verbeteringen kunnen nieuwe toegankelijkheidsproblemen ontstaan.

De beoordeling per criterium is gebaseerd op falsificatie: "voldoet" betekent dat we geen redenen hebben gevonden om het als "voldoet niet" te beoordelen.

Voor elk probleem geven we maximaal drie voorbeelden. Het is mogelijk dat hetzelfde probleem op meerdere plaatsen voorkomt. Gebruik dit rapport als een blueprint om alle delen van de website te controleren.

Scope

Pagina's

Scope:

  • Alle pagina's op de website raadvoorrechtsbijstand.org

Ondersteuning

De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:

  • Mozilla Firefox, version 130
  • Google Chrome, version 130
  • Apple Safari, version 17
  • PAC software to test PDF
  • NVDA schermlezer in combination with Firefox
  • VoiceOver schermlezer in combination with Safari
  • Andere gangbare browsers en hulpapparatuur

Gebruikte technologieën

De onderzochte maakt gebruik van de volgende technologieën:

  • HTML
  • CSS
  • JavaScript
  • WAI-ARIA
  • SVG
  • PDF

Steekproef

Bevindignen per pagina

De contact pagina

Link naar contactpagina

Foutmelding is een instructie

Als het formulier leeg of met ongeldige gegevens wordt verzonden, verschijnt er een melding zoals "Veld Naam is verplicht." Dit is geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zich bevindt. Vaak bevat een goede foutmelding een ontkennende formulering. Een voorbeeld hiervan is: "Het veld is niet (goed) ingevuld."

Voldoet niet SC 3.3.1 Error Identification

Koptekst mist de juiste markering

In de zijkolom, onder de kop "Raad voor Rechtsbijstand," staat de tekst "Bellen vanuit het buitenland / Calling us from abroad." Deze tekst lijkt visueel op een kop, maar is niet als zodanig gemarkeerd in de structuur van de pagina. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Voldoet niet SC 1.3.1 Info and Relationships

Engelstalige teksten hebben geen taalswitch

In de zijkolom, onder de kop "Raad voor Rechtsbijstand" staan teksten in het Engels: "For individuals" en "Calling us from abroad". Er is geen taalswitch toegepast op deze inhoud. Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Staan er op de pagina teksten in een andere taal? Dan moet de schermlezer op die taal overschakelen. Geef hiervoor deze anderstalige inhoud een lokaal lang-attribuut met de juiste waarde. Voeg lang="en" toe aan de container (een overkoepelend HTML-element) waarin deze content staat.

<p lang=”en”>Calling us from abroad</p>

Voldoet niet SC 3.1.2 Language of Parts

Toevoegingen

Link naar de pagina Toevoegingen

Extra inhoud geen staataanduiding

Onder de kop "Toevoegingen" staat een knop met een "i"-pictogram aan het einde van een zin. In de volgende alinea staat het woord "type." Beide elementen fungeren als knoppen en openen en sluiten extra inhoud. De open of gesloten toestand van deze extra content kan niet programmatisch worden bepaald.

Om toegankelijkheid te garanderen, moet de staat van interactieve elmenten beschikbaar worden gemaakt voor hulptechnologieën. Gebruik de juiste ARIA-attributen, zoals aria-expanded, om aan te geven of de extra content open of gesloten is.

Voldoet niet SC 4.1.2 Name, Role, Value

Jonge sociaal advocaten verlaten steeds vaker het vak

Link naar Jonge sociaal advocaten verlaten steeds vaker het vak

Logo geen alt-tekst

Onder de kop “Jonge sociale advocaten verlaten steeds vaker het beroep...” staat een logo. De volledige tekst van het logo is “kenniscentrum systeem gesubsidieerde rechtsbijstand.” Het tekstalternatief is “logo kenniscentrum_totaalnaam.”

In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel, zodat bezoekers die het plaatje niet kunnen zien, ook precies weten wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Voldoet niet SC 1.1.1 Non-text Content

Raad voor Rechtsbijstand in podcast ‘De uitvoering’ van ministerie van JenV

Link naar de pagina Raad voor Rechtsbijstand in podcast ‘De uitvoering’ van ministerie van JenV

De kwaliteit van de videotitel is onvoldoende

Er staat een iframe met een video op de pagina. De titel "rvr.bbvms" beschrijft de inhoud niet goed en geeft niet aan welk type inhoud in dit iframe aanwezig is.

Een iframe heeft een goede beschrijving nodig, meestal in het title-attribuut van het iframe. Dit title-attribuut moet het type inhoud in het iframe beschrijven en een unieke beschrijving van de inhoud geven. Deze tekst zal een blinde bezoeker helpen beslissen of de inhoud van het iframe de moeite waard is om te openen.

Pas het iframe aan: <iframe title="Promovideo podcastserie ‘De Uitvoering’">

Voldoet niet SC 2.4.6 Headings and Labels

Sneltoetsen met een teken actief

Binnen deze videospeler is het mogelijk om sneltoetsen met één teken te gebruiken.

Zo zijn sneltoetsen met één letter zoals 'm' voor dempen, 'k' voor pauzeren en 'f' voor volledig scherm actief.

Ook andere sneltoetsen kunnen actief zijn. Deze sneltoetsen zitten de werking van een voorleessoftware in de weg. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken.

Voldoet niet SC 2.1.4 Character Key Shortcuts

Informatieve afbeelding zonder alt-tekst

Er staat een informatieve afbeelding met tekst en een QR-code op de pagina. Het alt-attribuut voor deze afbeelding is leeg.

Voldoet niet SC 1.1.1 Non-text Content

PDF Jaarverslag 2020

Link naar PDF Jaarverslag 2020

Dit document staat op pagina Jaarverslagen.

Geen titel

Het PDF-document heeft geen titel. Elk PDF-document moet een titel bevatten die een korte beschrijving geeft van de inhoud van het bestand. Dit is vooral belangrijk voor gebruikers van schermlezers om hen te helpen beter te navigeren tussen verschillende documenten. De titel kan worden ingesteld via de bestandseigenschappen van het PDF-bestand en moet ook zo worden geconfigureerd dat deze in de titelbalk wordt weergegeven in plaats van de bestandsnaam, wat nu het geval is.

Voldoet niet aan SC 2.4.2 - Page Titled

Geen codes

Het PDF-document heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Voldoet niet aan SC 1.3.1 - Info and Relationships

Onvoldoende kleurcontrast van tekst

Op pagina 8 staat een blauwe tekst "Thomas Derksen" op een lichtblauwe achtergrond. De kleurcontrastverhouding is te laag: 4,2:1. Het contrast moet minstens 4,5:1 zijn. Hetzelfde probleem is gevonden op pagina 9.

Voldoet niet aan 1.4.3 Color contrast (Minimum)

PDF Betere (of goede of iets anders) toegang tot het recht

Link naar de PDF Betere (of goede of iets anders) toegang tot het recht

Link naar de pagina Jaarverslagen

Decoratieve afbeeldingen in figure tags (met of zonder een tekstalternatief)

In het PDF-document komen veel decoratieve afbeeldingen voor die zijn toegevoegd via figure-tags. Zo staat op pagina 1 een decoratieve achtergrondafbeelding met de beschrijving “aerial photography of people on open area.” Deze tekst voegt niets toe aan de inhoud van het document. De keuze voor een figure-tag is niet correct.

Verder in dit document komen decoratieve afbeeldingen voor met automatisch gegenereerde beschrijvingen, bijvoorbeeld “Afbeelding met kleding, tekenfilm, persoon, illustratie. Automatisch gegenereerde beschrijving” op pagina 2. Op andere pagina's, zoals 5, 8, 9, 10 en 11, zijn er ook decoratieve afbeeldingen toegevoegd via figure-tags. De figure-tag is bedoeld voor informatieve afbeeldingen en mag niet worden gebruikt voor decoratieve afbeeldingen. Markeer deze afbeeldingen als een artefact om ze te verbergen voor schermlezers.

Voldoet niet SC 1.1.1 Non-text Content

Afbeeldingen met tekst zonder een tekstalternatief

In dit PDF-document komen afbeeldingen voor die tekst bevatten. De informatie uit de afbeelding heeft geen tekstalternatief. Op pagina 2 staat een afbeelding met tekst waar het tekstalternatief “Afbeelding met tekst, ontwerp Automatisch gegenereerde beschrijving”. Deze beschrijving voldoet niet. Een tekst die onderdeel is van een afbeelding kan ontoegankelijk zijn voor vele groepen bezoekers. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Voldoet niet SC 1.1.1 Non-text Content

De koptekst en het logo van elke pagina is een afbeelding zonder een tekstalternatief

Elke pagina in het document heeft een kop die als een afbeelding is toegevoegd. Deze informatie heeft geen tekstalternatief. Plaats de kop als tekst in het document.

Voldoet niet SC 1.1.1 Non-text Content

Logo’s zonder tekstalternatief

Op pagina 1 heeft het logo van de Raad voor Rechtsbijstand en op pagina 3 de logos van Bureau Wsnp geen tekstalternatief en het logo van Bureau Wbtv een tekstalternatief “Afbeelding met tekst, Lettertype, Graphics, typografie Automatisch gegenereerde beschrijving”.

Geef deze logo’s beschrijvingen waarin de zichtbare tekst op het logo in voorkomt.

Voldoet niet SC 1.1.1 Non-text Content

Kop niet als koptekst gemarkeerd

In het pdf-document zijn verschillende kopjes aanwezig die niet als kopjes zijn gemarkeerd. Zie bijvoorbeeld "Onze maatschappelijke opgave", "Missie", "Visie" op pagina 2. Dit geldt ook voor andere pagina's.

Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tag door de h-tag om de structuur van het document in de tags te laten overeenkomen met wat te zien is in het document.

Voldoet niet SC 1.3.1 Info and Relationships

Leesvolgorde van tags klopt niet

De schermlezer leest een PDF-document in de volgorde van de tags die in de codelaag staan. Wanneer deze tags niet in een logische volgorde staan, wordt de leesvolgorde niet logisch en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen.

De volgorde is niet logisch op bijna alle pagina's.

Voldoet niet SC 1.3.2 Meaningful Sequence

Onvoldoende kleurcontrast in tekst

Op pagina 3 staat а grijze tekst "91%" en "2022" op een lichtgrijze achtergrond. De kleurcontrastverhouding is te laag: 2,5:1. Het contrast moet minstens 4,5:1 zijn. Hetzelfde contrastprobleem is gevonden op andere pagina's.

Op pagina 3 staat а oranje tekst "Wsnp beëindigd met een schone lei" op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,8:1. Het contrast moet minstens 4,5:1 zijn.

Voldoet niet SC 1.4.3 Contrast (Minimum)

Kennisbank Rechtsbijstand

Link naar de Kennisbank Rechtsbijstand

Knopcontext bij filters

In de zijkolom staan filters. De secties onder "Actuele onderwerpen" en "Publicatie van" bevatten knoppen met de tekst "Toon alles" om verborgen inhoud weer te geven. De naam van de knop geeft echter niet aan welke sectie deze opent. Pas de knoppen aan om meer context toe te voegen. Bijvoorbeeld:

  • "Toon alles Actuele onderwerpen" in plaats van alleen "Toon alles."
  • "Toon alles Publicatie van" in plaats van alleen "Toon alles." Als "Toon alles" is geactiveerd, pas dan ook de bijbehorende "Toon minder"-knoppen aan, zodat deze dezelfde context bevatten.

Daarnaast bevat elke knop een extra span-element met de tekst “Uitklappen”/ “Inklappen” die alleen bedoeld is voor de schermlezer. Deze tekst is overbodig en zorgt voor ruis. De schermlezer leest nu voor: “Toon meer Uitklappen” en “Toon minder Inklappen”. Er is al een aria-expanded attribuut op het a-element aanwezig om aan te geven wat de staat is van de verborgen sectie.

Verwijder dit element:

<span class="tekstbrowser screenReaderExplanation"> Inklappen</span>

Voldoet niet 2.4.6 Headings and Labels

Een afbeelding met ingesloten tekst

Onder het kopje "De gebroken belofte van de rechtsstaat" staat een afbeelding met ingesloten tekst "Onderzoeksrapport." Deze tekst geeft het type content aan. Er zijn meerdere opties. Een tekst die onderdeel is van een afbeelding kan ontoegankelijk zijn voor vele groepen bezoekers. Het is beter om deze tekst als gewone tekst op de pagina te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Voldoet niet SC 1.4.5 Images of Text