Audit digitale toegankelijkheid van website mijnstembureau-meppel.nl

#1 - Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus na de link "Inloggen" op een onzichtbaar element terecht. Onzichtbare elementen horen niet in de focusvolgorde te staan. Bezoekers die met het toetsenbord navigeren kunnen daardoor per ongeluk iets activeren en raken het spoor bijster.

User story

Ik gebruik de website met een toetsenbord. Als ik met de Tab-toets door de pagina ga, komt mijn focus soms op elementen die ik niet zie. Ik verwacht dat de focus alleen op zichtbare elementen landt.

Hoe te testen

Ga met de Tab-toets door de pagina. De focusindicator hoort nooit te verdwijnen naar een onzichtbaar element of een element buiten het scherm. Verdwijnt de indicator terwijl je verder tabt, dan krijgt een element dat voor het oog verborgen is toch focus. Zoek in de DOM naar elementen die focusbaar zijn en verborgen.

Oplossing

Zorg dat alleen zichtbare elementen focus kunnen krijgen en dat de focusvolgorde een logische route door de pagina volgt.

#2 - Kop is niet als kop opgemaakt

Op deze pagina staat de tekst "Op deze website kunt u zich aanmelden om mee te helpen tijdens de verkiezingsdagen 2027." Die tekst ziet eruit als een kop boven de links eronder, maar in de code is het geen kop.

Koppen dragen de structuur van de pagina over. Zonder echte kopelementen komt de structuur in de code niet overeen met wat je op de pagina ziet, en missen bezoekers die hulpsoftware zoals een schermlezer gebruiken die structuur.

User story

Ik lees de website met een schermlezer. Ik laat de koppen voorlezen om de pagina te scannen, en ik spring van kop naar kop. Als koppen niet als kop zijn opgemaakt, sla ik die stukken over en kan ik minder makkelijk navigeren.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan.

1. Loop elke tekst op de pagina langs die er als kop uitziet, dus groter, vetter, in een andere kleur of nadrukkelijk geplaatst.
2. Krijgen ze allemaal een kopmarkering van de WCAG Radar? Zo niet, dan zijn ze niet opgemaakt met h2 tot en met h6.
3. Controleer het met een schermlezer: navigeer met H in NVDA en JAWS, of met de rotor in VoiceOver. Elke zichtbare kop hoort als kop te worden aangekondigd.

Oplossing

Gebruik voor koppen de elementen h2 tot en met h6, passend bij hun rol en hun plaats in de hiërarchie van de inhoud.

#3 - Lege alinea-elementen worden voorgelezen door schermlezers

Op deze pagina staat onder de kop "Provinciale Staten- en Waterschapsverkiezing 2027" een tekstblok van drie alinea's. Daartussen staan lege p-elementen, die een schermlezer voorleest als lege alinea.

Deze overbodige elementen onderbreken het lezen en verwarren bezoekers die een schermlezer gebruiken.

User story

Ik gebruik een schermlezer. Ik wil dat de inhoud is opgebouwd zonder overbodige lege elementen, zodat ik de tekst zonder onderbrekingen kan lezen en doorlopen.

Hoe te testen

Loop de tekst op de pagina door met een schermlezer. Controleer of de tekst in een logische volgorde wordt voorgelezen.

Oplossing

Haal de overbodige lege p-elementen uit de HTML. Worden ze gebruikt om ruimte tussen alinea's te maken, gebruik daar dan CSS voor, bijvoorbeeld margin of padding.

#4 - Rand van selectievakje heeft te weinig kleurcontrast

Op deze pagina staat een formulier met een selectievakje. Dat vakje heeft een lichtgrijze rand (#CBD5E1) op een witte achtergrond.

De contrastverhouding is 1,5:1. De minimale verhouding voor visuele informatie waarmee je een bedieningselement herkent, is 3,0:1.

User story

Ik heb een visuele beperking. Als ik een formulierveld wil invullen of een selectievakje wil aanvinken, zie ik de rand niet goed omdat die nauwelijks van de achtergrond verschilt. Ik verwacht dat de rand van elk bedieningselement duidelijk zichtbaar is, zodat ik het kan herkennen.

Hoe te testen

Meet het contrast tussen het element en de achtergrond ernaast met de Colour Contrast Analyzer. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken, optie Contrast.

Oplossing

Pas de kleur van de rand aan, zodat de contrastverhouding met de achtergrond ernaast minstens 3,0:1 is. Dit geldt voor invoervelden, selectievakjes en keuzerondjes. Controleer de nieuwe kleur met een contrastchecker.

#5 - Rand van het e-mailveld heeft te weinig contrast

Op deze pagina staat een formulier. Verstuur je dat formulier zonder iets in te vullen, dan worden de randen van de invoervelden lichtrood (#F87171) op een witte achtergrond.

De contrastverhouding is ongeveer 2,8:1. De minimale verhouding voor visuele informatie waarmee je een bedieningselement herkent, is 3,0:1.

User story

Ik heb een visuele beperking. Als ik een formulierveld wil invullen of een selectievakje wil aanvinken, zie ik de rand niet goed omdat die nauwelijks van de achtergrond verschilt. Ik verwacht dat de rand van elk bedieningselement duidelijk zichtbaar is, zodat ik het kan herkennen.

Hoe te testen

Meet het contrast tussen het element en de achtergrond ernaast met de Colour Contrast Analyzer. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken, optie Contrast.

Oplossing

Pas de kleur van de rand aan, zodat de contrastverhouding met de achtergrond ernaast minstens 3,0:1 is. Dit geldt voor invoervelden, selectievakjes en keuzerondjes. Controleer de nieuwe kleur met een contrastchecker.

#6 - Tekst heeft te weinig contrast

Verstuur je op deze pagina het formulier met onjuiste gegevens, dan verschijnt de foutmelding "E-mailadres of wachtwoord is onjuist of het is te vaak geprobeerd waardoor het account is geblokkeerd." Die melding staat in rode tekst (#DC2626) op een lichtroze achtergrond (#FEF3F3). De contrastverhouding is 4,4:1 en daarmee te laag. Niet alle bezoekers kunnen deze tekst lezen.

User story

Ik heb een visuele beperking. Als tekst te weinig contrast heeft met de achtergrond waarop die staat, wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een egale achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop gebruik je de twee pipetten om de kleur van de tekst en van de achtergrond te meten. Het minimum is 4,5:1 voor gewone tekst en 3,0:1 voor grote tekst, dus 24px of groter, of 18,7px en vet. Vergeet de plaatshouders, tekst op afbeeldingen en elementen die uitgeschakeld lijken niet.

Oplossing

Deze tekst is kleiner dan 19px. Het contrast moet daarom minstens 4,5:1 zijn.

#7 - Pictogram op knop heeft te weinig contrast

Op deze pagina staat in het wachtwoordveld een knop met een oogpictogram, waarmee je het wachtwoord kunt tonen of verbergen. Het pictogram is grijs (#94A3B8) op een witte achtergrond. De contrastverhouding van 2,6:1 is te laag. Daardoor is het pictogram voor sommige bezoekers moeilijk of niet te zien, vooral bij slechtziendheid en kleurenblindheid.

User story

Ik heb een visuele beperking. Ik verwacht dat pictogrammen op knoppen duidelijk zichtbaar zijn tegen de achtergrond.

Hoe te testen

Meet het contrast tussen het element en de achtergrond ernaast met de Colour Contrast Analyzer. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken, optie Contrast.

Oplossing

Geef het pictogram een contrastverhouding van minstens 3,0:1 met de achtergrond.

#8 - Eigen focusindicator heeft te weinig kleurcontrast

Op deze pagina staan twee knoppen, "Ik ben een burger" en "Ik werk bij gemeente Meppel". Die openen een formulier met het selectievakje "Hiermee geeft u aan dat u de algemene voorwaarden heeft gelezen en met deze voorwaarden akkoord gaat." Krijgt dat selectievakje toetsenbordfocus, dan verschijnt een groene focusrand (#10B981) op een witte achtergrond. De contrastverhouding tussen die kleuren is 2,5:1 en blijft onder het minimum van 3,0:1.

Een eigen focusindicator moet aan de contrasteis voldoen, de standaardindicator van de browser niet. Bezoekers kunnen een eigen focusindicator niet zelf aanpassen, dus die heeft minstens 3,0:1 contrast met de achtergrond nodig.

User story

Ik gebruik de website met een toetsenbord en ik heb een visuele beperking. Als ik door de pagina navigeer, zie ik niet goed welk element focus heeft. Ik verwacht dat de focusindicator duidelijk opvalt tegen de achtergrond.

Hoe te testen

Ga met de Tab-toets naar het element, zodat de eigen focusindicator verschijnt. Meet het contrast van die indicator met de achtergrond ernaast met de Colour Contrast Analyzer of met de WCAG Radar, optie Contrast. De verhouding moet minstens 3,0:1 zijn.

Oplossing

Verhoog het contrast van de eigen focusindicator tot minstens 3,0:1.

#9 - Foutmeldingen zijn niet goed gekoppeld aan de invoervelden

Op deze pagina staan twee knoppen, "Ik ben een burger" en "Ik werk bij gemeente Meppel", die een formulier openen. Verstuur je dat formulier met onjuiste gegevens, dan verschijnen er foutmeldingen. Die meldingen zijn in de code niet goed aan de bijbehorende invoervelden gekoppeld.

Het attribuut aria-errormessage verwijst wel naar de foutmeldingen, maar de betrokken invoervelden hebben geen aria-invalid="true". aria-errormessage is bedoeld om de foutmelding aan te wijzen bij een veld dat als onjuist is gemarkeerd. Zoals het nu is gebouwd, komt die relatie niet goed bij hulpsoftware aan.

Bezoekers die een schermlezer gebruiken horen de bijbehorende foutmelding daardoor mogelijk niet als ze bij een onjuist veld komen.

User story

Ik lees de website met een schermlezer. Als ik een formulierveld invul en een fout maak, wordt de foutmelding niet bij dat veld voorgelezen. Ik verwacht dat de schermlezer de foutmelding aankondigt zodra ik bij het veld kom.

Hoe te testen

Open de WCAG Radar en zet de optie "Formulieren" aan. Je ziet dan per veld welke omschrijving eraan gekoppeld is. Roep de fout op en controleer of de foutmelding aan het veld gekoppeld is. Luister daarna met een schermlezer: als je bij het veld komt, hoor je de foutmelding.

Oplossing

Koppel elke foutmelding in de code aan het bijbehorende invoerveld.

Gebruik je aria-errormessage, zet dan aria-invalid="true" op het betrokken invoerveld zodra er een fout is. Laat aria-errormessage verwijzen naar de id van de bijbehorende foutmelding.

Is de fout hersteld, zet het veld dan op aria-invalid="false" en verberg of verwijder de foutmelding die niet meer klopt.

Je kunt de foutmelding ook met aria-describedby aan het invoerveld koppelen. Zorg er dan voor dat er na het herstellen van de fout niet meer naar een verouderde foutmelding wordt verwezen.

#10 - Toetsenbordfocus is weggehaald met outline:none

Op deze pagina staan boven de kop "Algemene informatie" knoppen zonder zichtbare focusindicator. Bezoekers die het toetsenbord gebruiken zien niet welk element focus heeft, en weten dus niet wanneer ze op Enter moeten drukken.

Hetzelfde geldt voor deze en andere knoppen op de volgende pagina's:

• https://mijnstembureau-meppel.nl/stembureau-functies
• https://mijnstembureau-meppel.nl/tellocatie-functies
• https://mijnstembureau-meppel.nl/veelgesteldevragen

User story

Ik gebruik de website met een toetsenbord. Als ik door de pagina navigeer, zie ik niet welk element focus heeft, dus weet ik niet wanneer ik op Enter moet drukken. Ik verwacht dat een zichtbare markering altijd laat zien waar ik ben.

Hoe te testen

Ga met de Tab-toets door de hele pagina en controleer of je steeds ziet waar de focus staat. Zoek in de CSS naar outline: none zonder vervanging. Je kunt ook de WCAG Radar openen en de optie "Focus zichtbaar maken" aanzetten.

Oplossing

Haal outline: none of outline: 0 weg, of vervang het door een duidelijk zichtbare focusstijl. Gebruik :focus-visible om de focusindicator alleen te tonen bij navigatie met het toetsenbord:

a:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Past de standaardoutline van de browser niet bij het ontwerp, vervang die dan door een eigen focusstijl in plaats van hem weg te halen. Test een eigen focusstijl op elke kleurcombinatie die op de website voorkomt, zodat de indicator overal genoeg contrast houdt.

#11 - Vette tekst gebruikt in plaats van een kop

Op deze pagina staan onder de koppen "Voorzitter", "Stembureaulid", "Teller" en "Gastheer/gastvrouw" teksten die als kop bedoeld zijn, maar waar het kopelement ontbreekt. Ze zijn met een strong-element op een kop laten lijken. Zie bijvoorbeeld "Taken van de voorzitter", "Functie-eisen" en "Werktijden".

Het strong-element is bedoeld om iets nadruk te geven, niet om een kop te maken. Gebruik je het in plaats van een kopelement h1 tot en met h6, dan geeft de code de structuur van de inhoud verkeerd weer en komt die structuur niet bij hulpsoftware aan.

Hetzelfde geldt voor de pagina https://mijnstembureau-meppel.nl/tellocatie-functies.

User story

Ik lees de website met een schermlezer. Als ik op koppen navigeer, mis ik de koppen die niet als kop zijn opgemaakt. Ik verwacht dat alle koppen echte koppen zijn, zodat ik de structuur van de pagina kan volgen.

Hoe te testen

Open de WCAG Radar. Zet de optie "Koppen en structuur" aan en loop elke kop op de pagina langs. Krijgt een kop geen markering h1 tot en met h6, dan is die kop niet goed opgemaakt.

Oplossing

Haal de strong-elementen weg en gebruik voor deze teksten het passende kopelement.

#12 - Koprol wordt overschreven door de knop

Op deze pagina staan onder de kop "FAQ" secties met verborgen inhoud. De elementen die die inhoud open- en dichtklappen hebben geen koprol. Er staat wel een kopelement, maar dat staat binnen een button-element.

Gebruik je een knop om een sectie open en dicht te klappen, dan hoort die knop binnen het kopelement te staan.

User story

Ik lees de website met een schermlezer. Als ik op koppen navigeer, ontbreken de titels van de uitklapbare secties in mijn overzicht. Ik verwacht dat elke titel van zo'n sectie als kop wordt aangekondigd.

Hoe te testen

Controleer de pagina met de ontwikkelaarsgereedschappen van de browser en met een schermlezer: alles wat er visueel uitziet als een kop, lijst, tabel of formulierrelatie, hoort ook in de HTML te staan. Controleer daarna of de structuur klopt als een schermlezer de pagina voorleest. De WCAG Radar heeft per structuurtype een optie, dus Koppen, Lijsten, Tabellen, Formulieren en ARIA, die de opmaak in één overzicht laat zien.

Oplossing

De aanbevolen structuur is <h2><button>Titel van de sectie</button></h2>. Zo wordt de tekst herkend als kop. Zet geen role="button" op het kopelement zelf, want dat overschrijft de koprol.