De indeling van dit rapport verschilt van de klassieke WCAG-rapporten, waarin de issues per succescriterium worden gerangschikt. Voor de lezer, en vooral voor degene die de issues gaat oplossen, is het veel werk om alle bevindingen die met een specifiek element te maken hebben, eerst bij elkaar te zoeken. Daarom hebben we gekozen voor een indeling per pagina. Onder het kopje “Pagina’s met bevindingen” vind je de issues per pagina. Sommige issues komen op veel pagina’s voor. Om herhaling te voorkomen, worden deze niet telkens opnieuw vermeld. Gebruik de bevindingen als een blauwdruk om vergelijkbare issues op andere pagina’s toegankelijk te maken. De kans is groot dat elementen die binnen de website hergebruikt worden, dezelfde problemen ook op andere pagina’s bevatten.
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 (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 www.ouders-uit-elkaar.nl
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 screen reader in combination with Firefox
VoiceOver screen reader in combination with Safari
Common browsers and assistive technologies
Gebruikte technologieën
De onderzochte maakt gebruik van de volgende technologieën:
Op elke pagina staat bovenaan een logo met de tekst "Rechtwijzer", bijvoorbeeld op de homepage.
Het alt-attribuut van het logo is op dit moment alt='rechtwijzer_1'. Het gedeelte "_1" is overbodig: het maakt de beschrijving niet duidelijker.
Overbodige tekens in een alt-tekst kunnen verwarrend zijn voor gebruikers van schermlezers, die de afbeelding niet kunnen zien. Je voegt er extra informatie mee toe, maar die helpt niet om het plaatje of het doel ervan beter te begrijpen.
Oplossing
Haal "_1" weg, zodat de alt-tekst precies beschrijft wat er op de afbeelding te zien is, zonder overbodige informatie.
Relatie tussen links in een groep niet in HTML vastgelegd
Op de homepage staan onder het kopje "Informatie voor kinderen" links die visueel bij elkaar horen, beginnend met de link "0-5 jaar". In de HTML-code is niet vastgelegd dat deze links een groep zijn.
Als het voor een ziende bezoeker duidelijk is dat een groep links of paginering bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op de pagina 6-8 jaar. Het gaat op deze pagina om de links die beginnen met de link "Vragen?".
Op de pagina Jouw mening is belangrijk staan de koppen "Kinder- en jongerenrechtswinkel", "Villa Pinedo" en "Centrum voor Jeugd en Gezin". Bij deze koppen wordt het kop-element én het strong-element gebruikt.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je het element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt). Gebruik hiervoor CSS.
Voldoet niet aan: 1.3.1 - Info en relaties
Kop-element is leeg
Op de pagina Jouw mening is belangrijk staat een leeg kop-element onder de alinea met de tekst "Het Centrum voor Jeugd en Gezin is dé plek waar je terecht kunt met vragen over de scheiding". Dit kop-element is niet zichtbaar op de pagina, maar wel toegankelijk voor schermlezers.
Kop-elementen (h1 - h6) mogen niet leeg zijn. Er moet altijd tekst in staan. Staat alleen het kop-element in de code, maar geen koptekst, dan kunnen blinde bezoekers de indruk krijgen dat er inhoud ontbreekt. Verwijder deze elementen of voeg er inhoud aan toe.
Voldoet niet aan: 1.3.1 - Info en relaties
Strong-element is gebruikt voor opmaak
Op de pagina Jouw mening is belangrijk wordt het strong-element gebruikt om teksten vetgedrukt te maken. Dit gebeurt onder andere bij de volgende links: "Jouw mening telt! Het kinderverhoor", "(een buddy van Villa Pinedo)", "nuttige links”. Gebruik CSS om deze links vetgedrukt te maken.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je het element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt). Gebruik hiervoor CSS.
Dit probleem komt ook voor op de pagina Hoorrecht. Bijvoorbeeld bij de links “downloaden”, “je naam erbij schrijven”, en “uitprinten”.
Op de pagina Hoorrecht staat een formulier. Als je op de knop "volgende vraag" klikt zonder een keuzerondje te hebben geselecteerd, verschijnt de melding "Kies één van de antwoorden of vul iets in." Deze tekst is onjuist gemarkeerd als een koptekst (h2). Hierdoor klopt de structuur van de pagina en de relatie tussen verschillende stukken informatie niet meer.
Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina, en niet alleen om visuele effecten te bereiken. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Je moet kop-elementen daarom niet alleen gebruiken voor een visueel effect, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Wil je alleen een andere vormgeving? Gebruik dan CSS.
Verwijder het h2-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.
Voldoet niet aan: 1.3.1 Info en relaties
Onvoldoende kleurverschil bij focus
Op de pagina Hoorrecht verandert de kleur van de rand van de knop "Ga naar de vragen" van donkerblauw naar zwart als het element met het toetsenbord focus heeft gekregen. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende, omdat de contrastverhouding tussen de gefocuste en niet-gefocuste staat van de randkleur minder dan 3.0:1 is.
Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
Voldoet niet aan: 1.4.1 Gebruik van kleur
Focus onzichtbaar op het formulier
Als iemand op de pagina Hoorrecht met het toetsenbord navigeert, verplaatst de focus zich van de adresbalk van de browser naar de knop "Ga naar de vragen" en blijft daarna landen op de interactieve elementen van het formulier dat niet zichtbaar is. Hierdoor lijkt de focus vast te zitten en kunnen gebruikers niet meer navigeren naar andere interactieve elementen op de pagina.
Zorg ervoor dat geen onzichtbare elementen focus kunnen krijgen.
Voldoet niet aan: 2.4.7 Focus zichtbaar
Foutmelding is een instructie in plaats van een uitleg over de fout
Op de pagina Hoorrecht staat een formulier. Als je op de knop "volgende vraag" klikt zonder een keuzerondje te hebben geselecteerd, verschijnt de melding "Kies één van de antwoorden of vul iets in." Dit is meer een instructie dan een foutmelding.
Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."
Voldoet niet aan: 3.3.1 Foutidentificatie
Advies: voortgangsbalk toevoegen aan lang formulier
Het volgende is niet fout, maar een advies om de site nog toegankelijker te maken. Op de pagina Hoorrecht staat een formulier met veel vragen. Om de gebruikerservaring te verbeteren, is het een goed idee om een voortgangsbalk toe te voegen.
Een voortgangsbalk of -indicator maakt een lang formulier toegankelijker en gebruiksvriendelijker. Bezoekers kunnen dan namelijk beter inschatten hoe lang het formulier is, hoe ver ze al zijn, en hoeveel vragen er nog komen. Dat helpt bij het managen van de eigen tijd en verwachtingen. Vooral voor mensen met cognitieve beperkingen of een beperkte aandachtsspanne is dit prettig. Het zorgt voor minder spanning, omdat duidelijk is hoeveel er nog komt. Bovendien geeft het een goed gevoel om te zien dat je telkens verder komt in het formulier. Voor bezoekers met schermlezers moeten tekstalternatieven toegevoegd worden aan de stappen in de voortgangsbalk. Daardoor is het proces ook voor deze bezoekers voorspelbaar.
Er zijn twee pagina's met de titel “Vragen - Ouders uit elkaar” aanwezig in de sample, namelijk <https://www.ouders-uit-elkaar.nl/vragen/> en <https://www.ouders-uit-elkaar.nl/9-12-jaar/vragen/>.
In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de gebruiker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element (<title>) bij een van de pagina’s, zodat elke pagina een unieke title-tekst heeft.
Dit probleem geldt waarschijnlijk ook voor vergelijkbare pagina's die niet in deze steekproef zitten. Door overal unieke titels toe te voegen help je gebruikers om de informatie te vinden die voor hen relevant is. Dit zou de toegankelijkheid van de hele site verbeteren. Je kunt bijvoorbeeld de leeftijdsgroepen in de titel opnemen (bijv. "Vragen 9-12 jaar - Ouders uit elkaar").
Voldoet niet aan: 2.4.2 - Pagina titel
Advies: title-attribuut van de link
Het volgende is geen fout, maar een advies om de site nog toegankelijker te maken. Op de pagina Vragen staan links met de linkteksten “kindertelefoon” en “Raad voor Rechtsbijstand”. Deze links hebben toegankelijke namen die zijn gebaseerd op de linktekst. Dit is de tekst die tussen de a-elementen staat. Elke link heeft echter ook een title-attribuut, waarin dezelfde tekst nog een keer staat. Bij de link “kindertelefoon” is dat bijvoorbeeld title=“De Kindertelefoon”. Deze herhaling zorgt ervoor dat gebruikers van schermlezers dezelfde tekst twee keer achter elkaar te horen krijgen.
Voegt een title-attribuut geen nieuwe informatie toe aan de linktekst? Dan kun je dit beter weglaten. Hierdoor verminder je het aantal herhalingen voor bezoekers met een schermlezer.
