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:
Decoratieve elementen zichtbaar voor de schermlezer
Op alle pagina's bevatten de header en footer links zoals "Nieuws", "Contact", "Engels" en andere, gescheiden door verticale balken. Deze balken zijn decoratieve elementen, maar ze zijn niet verborgen voor de schermlezer. Sommige schermlezers kondigen ze aan als "verticale lijn". Decoratieve inhoud moet door schermlezer worden genegeerd.
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.
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
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
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.
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
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.
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.
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.