Audit digitale toegankelijkheid van website Mijn Wrb
Samenvatting
Wij hebben de website Mijn Wrb onderzocht tussen 1 en 14 juli 2025. Op dit moment zijn 34 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 21 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Invoerveld heeft geen toegankelijke naam: Dit probleem wordt op meerdere pagina's genoemd (Mijn gegevens, Zoeken, Algemene inschrijving, Specialisatie).
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt): Dit probleem wordt op verschillende pagina's en secties genoemd (Aanvraag Toevoeging, Mijn gegevens, Muteren).
Problemen met koppen die niet als kop zijn gemarkeerd of met lijsten die niet de juiste HTML-elementen gebruiken (Inloggen, Aanvraag Toevoeging, Algemene inschrijving).
Invoervelden voor persoonlijke gegevens hebben geen of een onjuist autocomplete-attribuut (On all pages, Aanvraag Toevoeging, Zoeken, Muteren).
Instructie bij invoerveld is niet altijd zichtbaar (On all pages, Aanvraag Toevoeging, Zoeken).
Alle pagina's op de website rbv-portaal-accp.apps.eu-1c.mendixcloud.com/login_rvr.html
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 139
Google Chrome, versie 139
Apple Safari, versie 18
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Op alle pagina’s staat een knop “Feedback geven” die een dialoogvenster met feedback opent. De invoervelden voor persoonlijke informatie (zoals e-mailadres) missen het autocomplete-attribuut.
Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren, bijvoorbeeld door de velden automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Op alle pagina’s staat een knop “Feedback geven” die een dialoogvenster met feedback opent. In het formulier wordt bij fouten de melding “Dit veld is verplicht” of “E-mail is ongeldig” weergegeven.
Dit is een instructie, geen 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”.
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, zijn de volgende interactieve elementen in het menu “Mijn Verzoeken”, “Mijn Overzichten” niet zichtbaar en niet bedienbaar: “Mutatie”, “Declaratie” en andere. Ook verschijnt er een horizontale scrollbalk.
Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus
Op alle pagina’s komt de toetsenbordfocus na de link “Mijn Overzichten” terecht op een onzichtbaar interactief element.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Oplossing:
Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.
Op deze pagina ontbreekt het lang-attribuut op het html-element.
Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is.
Oplossing:
Zorg dat het lang-attribuut aanwezig is op het html-element, en dat dit attribuut de taalcode bevat van de taal van de pagina, bijvoorbeeld lang=”nl” voor Nederlands.
SC 1.3.1 Kop is niet gemarkeerd als koptekst
Op deze pagina is de volgende tekst niet als kop gemarkeerd: “Inloggen met lokaal account”.
Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
SC 4.1.3 Blinde bezoekers krijgen geen bericht van de foutmelding
Op deze pagina is een formulier aanwezig. Als er fouten worden gemaakt in het formulier, verschijnt de foutmelding “De opgegeven gebruikersnaam of het opgegeven wachtwoord is onjuist”. Deze melding krijgt echter geen toetsenbordfocus. De schermlezer leest deze melding daardoor niet voor.
Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer.
Oplossing:
Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
SC 1.4.10 Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de volgende tekst deels buiten beeld: “Soort aanvraag”, “Datum laatste wijziging” en andere.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina, in het tabblad “Persoonsgegevens”, staat de groene tekst “Actief” (#2E8300) op een lichtgroene achtergrond (#E3F0DD). De contrastratio is te laag: 4,1:1.
Hetzelfde probleem doet zich voor in het tabblad “Verzoeken” bij de tekst “Toegewezen”.
Ook staat een probleem met de rode tekst “Beëindigd” (#CD413F) op een lichtrode achtergrond (#FAEFED). De contrastratio is te laag: 4,2:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 Informatieve elementen zijn verborgen
Op deze pagina, in het tabblad “Persoonsgegevens”, staat een paginering die verborgen is met aria-hidden="true".
Het attribuut aria-hidden="true" zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen.
Hetzelfde probleem doet zich voor in het tabblad “Verzoeken” bij de paginering, op de pagina Concepten, en op de pagina Algemene inschrijving in de sectie “Persoonsgegevens”, bij de knop “Koppel talen”.
Oplossing:
Verwijder het attribuut aria-hidden=”true”.
SC 4.1.2 Invoerveld heeft geen toegankelijke naam
Op deze pagina, in het tabblad “Persoonsgegevens”, onder de kop “Rollen”, staat in de eerste rij van de tabel een knop met een icoon. Wanneer op deze knop wordt geklikt, opent een dialoogvenster. Dit dialoogvenster bevat schakelaars en invoervelden zonder toegankelijke naam.
Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Oplossing:
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
SC 4.1.2 Invoerveld heeft geen toegankelijke naam
Op deze pagina, in het tabblad “Persoonsgegevens”, onder de kop ‘Bankrekening’, staat een knop “Wijzigen gegevens” die extra inhoud opent. In deze inhoud bevinden zich invoervelden zonder toegankelijke naam.
Oplossing:
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
SC 1.4.11 Contrast tussen focusindicator en achtergrond is te laag
Op deze pagina, in het tabblad “Persoonsgegevens”, onder de kop “Rollen”, staat in de eerste rij van de tabel een knop met een icoon. Wanneer op deze knop wordt geklikt, opent een dialoogvenster. Dit dialoogvenster bevat schakelaars; wanneer deze de toetsenbordfocus krijgen, is dit zichtbaar door een grijze ( #ADBCCB) focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is 1,9:1.
Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
SC 2.4.6 Naam van de knop beschrijft niet wat de knop doet
Op deze pagina, in het tabblad “Persoonsgegevens”, onder de kop “Rollen”, staat in de eerste rij van de tabel een knop met een icoon. Wanneer op deze knop wordt geklikt, opent een dialoogvenster. In dit dialoogvenster staan knoppen met “i”-iconen. De toegankelijke naam “Ntb” beschrijft de functie van deze knoppen niet goed. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.
Let op: er zijn meerdere van zulke knoppen en ze hebben verschillende functies.
Oplossing:
Voeg tekst toe die deze knop goed beschrijft.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar
Op deze pagina, in het tabblad “Persoonsgegevens”, onder de kop “Rollen”, staat in de eerste rij van de tabel een knop met een icoon. Wanneer op deze knop wordt geklikt, opent een dialoogvenster. In dit dialoogvenster bevinden zich knoppen met “i”-iconen. De toetsenbordfocus is niet zichtbaar op deze knoppen.
De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.
Hetzelfde probleem doet zich voor op de pagina Algemene inschrijving, in de sectie “Persoonsgegevens”.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
SC 3.1.2 Toegankelijke namen zijn in het Engels geschreven
Op deze pagina, in het tabblad “Verzoeken”, staan in de paginering knoppen met aria-label-attributen in het Engels: “Go to next page”, “Go to last page”.
Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).
Oplossing:
Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina, in het tabblad “Verzoeken”, staat de oranje tekst “Aanvullen verzoek” (#F26D20) op een lichtgroene achtergrond ( #F9EEE8). De contrastratio is te laag: 2,6:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 2.4.2 Meerdere pagina’s hebben dezelfde title-tekst
De pagina’s Aanvullen, Zoeken, Concepten en Eindbesluiten hebben allemaal dezelfde tekst in het title-element van de pagina: “WRB - RBV portaal - Verzoeken”.
Dit is niet de bedoeling. 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 bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger.
Oplossing:
Verander de tekst in het title-element van, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.
Mijn gegevens → tab “Persoonsgegevens” → button “Inschrijven nieuwe rol”
SC 4.1.2 Keuzelijst heeft geen toegankelijke naam
Op deze pagina verschijnt het dialoogvenster “Inschrijven deelname stelsel” met een select-element vóór de registratie. Dit select-element heeft geen toegankelijke naam.
Hierdoor is de keuzelijst niet toegankelijk.
Oplossing:
Geef het select-element een toegankelijke naam.
SC 1.3.1 Opsomming is niet opgebouwd met het HTML-element ul of ol
Op deze pagina, in de sectie “Keuze algemene inschrijving”, onder de koppen “Voordat u begint:” en “Heeft u de volgende documentatie digitaal beschikbaar:”, staan lijsten van twee items zonder de juiste opmaak.
Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.
Oplossing:
Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.
SC 4.1.2 (2.4.3, 2.4.6) Knop heeft geen toegankelijke naam
Op deze pagina, in de sectie “Keuze algemene inschrijving”, bestaat de knop “Inschrijfvoorwaarden mediator” uit drie knoppen. Eén daarvan heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.
Dit probleem hangt ook samen met succescriterium 2.4.3: de focus komt op onzichtbare elementen te staan, en met succescriterium 2.4.6: twee knoppen hebben dezelfde naam “Inschrijfvoorwaarden mediator”.
Oplossing:
Dit kan worden opgelost door de drie knoppen samen te voegen tot één knop en die knop een toegankelijke naam te geven.
SC 4.1.2 Invoerveld heeft geen toegankelijke naam
Op deze pagina, in de sectie “Persoonsgegevens”, staat een knop “Koppel talen” die een dialoogvenster opent. In dit dialoogvenster bevindt zich een zoekveld zonder toegankelijke naam.
Hetzelfde probleem doet zich voor in de sectie “Mediator gegevens” bij het invoerveld “Mediatorcode”.
Oplossing:
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
SC 2.4.6 De naam van een selectievakje beschrijft de functie ervan niet voldoende
Op deze pagina, in de sectie “Persoonsgegevens”, staat een knop “Koppel talen” die een dialoogvenster opent. In dit dialoogvenster staan selectievakjes met talen. De toegankelijke namen van deze selectievakjes beschrijven ze niet goed, bijvoorbeeld “Select row 1”, “Select row 2” en anderen.
Een blinde bezoeker weet daardoor niet wat dit selectievakje precies doet.
Oplossing:
Dit kan worden opgelost door een label met de tekst naast de selectievakjes toe te voegen en dit label te koppelen aan het bijbehorende selectievakje.
SC 3.1.2 Toegankelijke namen zijn in het Engels geschreven
Op deze pagina, in de sectie “Persoonsgegevens”, staat een knop “Koppel talen” die een dialoogvenster opent. In dit dialoogvenster, bij de paginering, zijn er knoppen met aria-label-attributen in het Engels: “Go to next page”, “Go to last page”.
Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).
Oplossing:
Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.
SC 1.3.1 Het groepslabel is niet gekoppeld aan een groep
Op deze pagina, in de sectie “Mediator gegevens”, zijn er 2 radioknoppen. Het label “Bent u akkoord met bovenstaande voorwaarden?” is niet programmatisch gekoppeld aan de bijbehorende groep. Hierdoor weten bezoekers die een schermlezer gebruiken niet dat er een relatie is tussen het groepslabel en de bijbehorende groep.
Hetzelfde probleem doet zich hieronder voor bij andere groepen radioknoppen en op de pagina Specialisatie.
Oplossing:
Zorg dat de groepslabels in de code expliciet gekoppeld zijn aan de groepen. Dit kun je bijvoorbeeld doen met aria-labelledby of door het formulier op de juiste manier te structureren met fieldset- en legend-elementen.
Mijn gegevens → tab “Persoonsgegevens” → under the heading “Specialisaties” button “Inschrijven”
SC 4.1.2 Het “tree”-element heeft geen toegankelijke naam.
Op deze pagina staat een sectie met verborgen inhoud “Personen- en Familierecht” met de rol “tree”. Deze sectie heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken het doel of de functie van deze sectie niet.
Oplossing:
Voeg een aria-label toe met een passende beschrijving.
SC 4.1.2 De selectievakjes hebben geen beschikbare naam
Op deze pagina, in de sectie met verborgen inhoud “Personen- en Familierecht”, zijn er selectievakjes zonder toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Oplossing:
Dit probleem kan worden opgelost door de selectievakjes een toegankelijke naam te geven, bijvoorbeeld door een label met tekst naast de selectievakjes toe te voegen en dit label te koppelen aan het bijbehorende selectievakje.
Muteren
Link naar pagina: Muteren
Mijn Overzichten → Concepten → button with edit icon “Hervatten”
SC 1.4.11 De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op deze pagina, in de sectie “Contactgegevens rechtzoekende”, zijn de randen van de invoervelden grijs (#B0BDC9) op een witte achtergrond. De contrastratio is te laag: 1,9:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina, in de sectie “Overzicht”, staat grijze tekst ( #818181), bijvoorbeeld “Kenmerk”, op een witte achtergrond. De contrastratio is te laag: 3,9:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.3.1 De accordion heeft geen koppen of de rol van kop is overschreven
Op deze pagina, onder de kop “Aanvraag Toevoeging”, bevinden zich onderdelen met verborgen inhoud. De elementen waarmee je deze inhoud kunt in- en uitklappen, hebben niet de rol van een kop.
De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.
Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven.
Lees dit artikel over hoe je toegankelijke accordeons kunt bouwen: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.
SC 4.1.2 Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn
Op deze pagina zijn secties met verborgen inhoud aanwezig. Voor bezoekers die de pagina kunnen zien, is het visueel duidelijk of een sectie is in- of uitgeklapt. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken, is dat niet het geval, omdat de status niet programmatisch wordt meegedeeld.
Hetzelfde probleem doet zich voor op de pagina Muteren.
Oplossing:
Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina, in de sectie “Controleren gegevens”, staat grijze tekst (#818181), zoals “9829” en andere, op een lichtgrijze achtergrond (#F8F8F8). De contrastratio is te laag: 3,7:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina, in de sectie “Persoonsgegevens rechtzoekende”, verschijnt er een knop met witte tekst “Volgende” op een lichtblauwe achtergrond (#ADBCCB) wanneer niet alle verplichte velden zijn ingevuld. De contrastratio is te laag: 1,9:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina, in de sectie “Persoonsgegevens rechtzoekende”, staat naast “Achternaam” een knop met een “!”-icoon. Deze knop opent extra inhoud met blauwe tekst (#5B7998) “Graag de geboortenaam van rechtzoekende opgeven” op een lichtgrijze achtergrond (#F8F8F8). De contrastratio is te laag: 4,3:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
SC 2.4.7 Toetsenbordfocus is niet zichtbaar op de knop
Op deze pagina, in de sectie “Persoonsgegevens rechtzoekende”, ontbreekt bij de knop met de tekst "Volgende" een zichtbare toetsenbordfocus-indicator wanneer niet alle verplichte velden zijn ingevuld.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op knoppen, zodat bezoekers weten wanneer zij een knop kunnen indrukken.
SC 3.3.1 Foutmelding is een instructie in plaats van een uitleg over de fout
Op deze pagina, in de sectie “Persoonsgegevens rechtzoekende”, toont het formulier de melding “Dit veld is verplicht”, “BSN bestaat uit 9 cijfers”.
Dit is een instructie, geen 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".
Oplossing:
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
SC 3.3.2 Instructie bij invoerveld is niet altijd zichtbaar
Op deze pagina, in de sectie “Persoonsgegevens rechtzoekende”, heeft het invoerveld "Burgerservicenummer" een bijbehorende instructie “BSN bestaat uit 9 cijfers”. Deze instructie is echter niet permanent zichtbaar op de pagina; ze verschijnt alleen als onderdeel van een foutmelding.
Oplossing:
Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers, niet alleen in foutmeldingen. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.
SC 1.4.1 Alleen kleurverschil bij toetsenbordfocus, met te laag contrast
Op deze pagina, in de sectie “Persoonsgegevens rechtzoekende”, wordt wanneer alle verplichte velden zijn ingevuld een aangepaste toetsenbordfocus-indicator gebruikt op de knop “Volgende”, zichtbaar als donkerblauw (#1E344C) op een witte achtergrond.
Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende. 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 op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.
Oplossing:
Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
SC 4.1.2 Er is geen legend-element voor de fieldset
Op deze pagina bevat elke sectie met verborgen inhoud een groep velden die zich bevinden in het <fieldset>-element. Het legend-element ontbreekt.
Je hebt het legend-element nodig om een label of naam aan de groep te geven.
Hetzelfde probleem doet zich voor op de pagina Muteren.
Oplossing:
Voeg een legend-element toe binnen de fieldset en vul het met de tekst, om duidelijk het doel van de groep aan te geven.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut
Op deze pagina bevat elk formulier met verborgen inhoud, waarin persoonlijke informatie wordt verzameld (zoals achternaam, e-mailadres of telefoonnummer), invoervelden met onjuiste waarden, zoals "off".
Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
SC 1.1.1 Informatieve afbeelding, er is geen tekstalternatief
Op deze pagina verschijnen na het doorlopen van een aantal stappen pictogrammen naast elke sectie: een vinkje als de stap succesvol is afgerond en een “x”-icoon als er fouten zijn. Deze informatieve pictogrammen hebben geen tekstalternatieven.
Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Je kunt de afbeelding ook via het img-element plaatsen en de informatie in de alternatieve tekst zetten.
SC 4.1.2 Keuzelijst heeft geen toegankelijke naam
Op deze pagina, in de sectie “Zaakgegevens”, verschijnt na het klikken op de knop “Mediationovereenkomst toevoegen” het select-element “Categorie”. De toegankelijke naam ontbreekt. Hierdoor is de keuzelijst niet toegankelijk.
Oplossing:
Geef het select-element een toegankelijke naam.
SC 1.3.1 Tabel voor lay-out, maar th-element aanwezig
Op deze pagina, in de sectie “Zaakgegevens”, verschijnt na het klikken op de knop “Mediationovereenkomst toevoegen” een lay-outtabel. In de koprij worden th-elementen gebruikt, bijvoorbeeld “Categorie”.
Deze tabel is gebruikt om de inhoud op een bepaalde manier vorm te geven. Het gaat dus niet om een tabel met gegevens, maar om een tabel voor lay-out. Je mag een tabel op deze manier gebruiken, maar dan mogen er geen th-elementen in voorkomen. Op dit moment staan deze nog in de eerste rij.
Oplossing:
Haal alle th-elementen weg, en voeg role=presentation toe aan het table-element.
Op deze pagina hebben de select-elementen en invoervelden “Toevoegkenmerk”, “Burgerservicenummer” en andere geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Oplossing:
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
SC 2.5.3 Zichtbare tekst ontbreekt in toegankelijke naam knop
Op deze pagina heeft het invoerveld met de zichtbare tekst "Geboortedatum rechtzoekende" een toegankelijke naam “dd-mm-jjjj”.
Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.
Oplossing:
Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.
SC 3.3.2 Instructie bij invoerveld is niet altijd zichtbaar
Op deze pagina staat een invoerveld “Geboortedatum rechtzoekende” met bijbehorende instructies in de placeholdertekst. Deze instructies zijn echter niet permanent zichtbaar op de pagina; ze verdwijnen zodra er tekst wordt ingevoerd.
Oplossing:
Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers, niet alleen in plaatshoudertekst. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.
SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut
Op deze pagina bevat een formulier voor het verzamelen van persoonlijke informatie (zoals Burgerservicenummer, Achternaam) invoervelden met een onjuiste waarde zoals "on".
Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Hetzelfde probleem doet zich voor op de pagina Muteren in de sectie “Contactgegevens rechtzoekende”.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Voldoet of niet van toepassing: 34
Voldoet niet: 21
