Content-audit digitale toegankelijkheid van website pzh.notubiz.nl

#1 - Onjuist gebruik van em-element

Op alle pagina's met een breadcrumb (behalve de homepagina) wordt het em-element rond de tekst "U bevindt zich op:" gebruikt voor visuele opmaak.

Hetzelfde probleem komt voor op de pagina:

• https://pzh.notubiz.nl/vergadering/1253785 — bij teksten als "De mogelijkheid bestaat om aan … via [email protected]" wordt het em-element ook voor styling gebruikt.

User story

Als bezoeker die een schermlezer of andere hulpsoftware gebruikt, heb ik nodig dat schuingedrukte tekst alleen met <em> wordt gemarkeerd als die ook echt nadruk draagt — niet voor visuele opmaak — want wanneer <em> puur voor de uitstraling wordt ingezet, kondigt mijn schermlezer de tekst aan met nadruk die er niet bedoeld was, en dat kan misleidend zijn en mijn begrip van de tekst verstoren.

Oplossing

Verwijder de overbodige em-elementen en regel de cursivering met CSS. Wanneer het echt alleen om visuele opmaak gaat, kan ook het <i>-element worden gebruikt.

#2 - De kleur van de rand van het invoerveld heeft niet genoeg contrast

Op alle pagina's (behalve de homepagina) staat bovenaan het zoekelement. De contrastverhouding tussen de grijze (#CDCDCF) rand en de witte paginakleur is 1,6:1.

User story

Als bezoeker die slechtziend is, leeftijdsgerelateerd contrastverlies heeft, of een scherm in fel zonlicht gebruikt, heb ik nodig dat de rand van elk invoerveld minimaal 3:1 contrast heeft met de paginakleur — want de rand vertelt mij "dit is een veld waarin je kunt typen", en een rand die ik niet zie levert mij een onzichtbaar formulierveld op dat ik gewoon over het hoofd zie.

Oplossing

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

#3 - alt-attribuut herhaalt de linktekst gedeeltelijk

Op deze pagina staan links met een foto, waarbij de toegankelijke naam bestaat uit de alt-tekst van de afbeelding plus de tekst onder de afbeelding (bijvoorbeeld "Pasfoto van S. Özkaya S. Özkaya (fractievoorzitter)").

User story

Als bezoeker die links volgt met een schermlezer, heb ik nodig dat de toegankelijke naam van een link kort en duidelijk is — niet samengesteld uit de alt-tekst van een afbeelding plus de naastliggende linktekst die dezelfde woorden gedeeltelijk herhaalt — want een schermlezer leest de volledige linknaam in één keer voor, en overlappende beschrijvingen zorgen ervoor dat ik dezelfde informatie zonder nut twee keer achter elkaar hoor.

Oplossing

Bestaat een link uit een afbeelding met alt-tekst én een tekstlabel dat dezelfde woorden gedeeltelijk herhaalt? Zorg dan dat de alt-tekst en de zichtbare linktekst elkaar aanvullen in plaats van overlappen. Zo voorkom je dat de toegankelijke naam dubbele informatie bevat, en hoort een schermlezergebruiker elk onderdeel maar één keer.

#4 - Accordion heeft geen koppen of de rol van kop is overschreven

Op deze pagina, onder "P.J.H.D. Verkoelen", staat een sectie met verborgen content. De elementen die de verborgen content openen en sluiten zijn niet als kop gemarkeerd.

User story

Als bezoeker die accordions navigeert met een schermlezer, heb ik nodig dat elke accordion-trigger die een sectie introduceert is gemarkeerd als een echte kop — bijvoorbeeld door de trigger-knop in een h2 of h3 te zetten — want de trigger-labels functioneren als kopjes, mijn kop-shortcut hoort daarop te landen, en zonder die rol verdwijnt de hele accordion uit mijn overzicht van de pagina.

Oplossing

Markeer deze teksten als kop, of zorg dat de bestaande rol van kop niet wordt overschreven. Meer informatie: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

#5 - Links onvoldoende herkenbaar

Op deze pagina staan binnen een alinea links (zoals "Lees verder"). Kleur is het enige verschil tussen de link en de omringende statische tekst.

Hetzelfde probleem komt voor op de pagina:

• https://pzh.notubiz.nl/modules/3/Toezeggingen/1151615.

User story

Als bezoeker die kleurenblind is, slechtziend is, de pagina op een monochroom scherm leest, een hoog-contrastthema of donker thema gebruikt, of de pagina snel scant, heb ik nodig dat elke inline-link in lopende tekst zich onderscheidt van de omringende tekst door meer dan alleen kleur — bijvoorbeeld een onderstreping, een vetgedrukt gewicht of een icoon — want nu is kleur het enige signaal dat een woord een link is, mijn ogen pikken dat verschil niet op, en de links versmelten ongezien met de alinea.

Oplossing

Kleur mag worden gebruikt om links van statische tekst te onderscheiden, mits aan twee voorwaarden wordt voldaan:

Het contrast tussen de linktekst en de omringende tekst is minimaal 3:1. Er is een extra visuele indicator aanwezig, zoals een onderstreping of een wijziging in achtergrondkleur bij hover of focus.

#6 - Video heeft geen ondertiteling

Op deze pagina staat een video met gesproken tekst, maar de ondertiteling ontbreekt.

User story

Als bezoeker die doof of slechthorend is, video's bekijkt zonder geluid op een openbare plek, geen moedertaalspreker is, of moet meelezen om de gesproken tekst te volgen, heb ik nodig dat elke video met gesproken inhoud nauwkeurige ondertiteling in de gesproken taal heeft — want zonder ondertiteling kan ik de dialoog niet horen, kan ik de dialoog niet lezen, en gaat het hele gesproken deel van de video — vaak het belangrijkste — volledig aan mij voorbij.

Oplossing

Voeg ondertiteling toe aan de video.

#7 - Onvoldoende contrast knoptekst

Op deze pagina opent de "Export"-knop een keuze met daarin een knop met de tekst "PDF". Deze knop heeft onvoldoende kleurcontrast: de witte tekst op een grijze (#A2A2A2) achtergrond heeft een contrastverhouding van 2,6:1, onder de minimum-eis van 4,5:1 voor standaardtekst.

Hetzelfde probleem komt voor op de pagina's:

• https://pzh.notubiz.nl/vergadering/1460330
• https://pzh.notubiz.nl/vergadering/1253785

User story

Als bezoeker die slechtziend is, leeftijdsgerelateerd contrastverlies heeft, of een scherm in fel zonlicht gebruikt, heb ik nodig dat de tekst op elke knop minimaal 4,5:1 contrast heeft met de achtergrond van de knop — want nu zakt het contrast onder die drempel, het label is moeilijk of niet te lezen, en ik kan niet vaststellen wat de knop doet zonder te gokken.

Oplossing

Zorg dat het contrast van de knoptekst minimaal 4,5:1 is.

#8 - Onvoldoende contrast bij hover

Op deze pagina heeft de tekst "Export" op de knop onvoldoende contrast bij hover en bij toetsenbordfocus. De contrastverhouding is 4,1:1, onder de eis van 4,5:1 voor normale tekst.

Hetzelfde probleem komt voor op de pagina's:

• https://pzh.notubiz.nl/vergadering/1460330
• https://pzh.notubiz.nl/vergadering/1253785

User story

Als bezoeker die slechtziend is, leeftijdsgerelateerd contrastverlies heeft, of een scherm in fel zonlicht gebruikt, heb ik nodig dat de tekst op elke knop in elke staat minimaal 4,5:1 contrast houdt — ook bij hover — want nu wordt de tekst juist moeilijker leesbaar zodra ik mijn muis erover beweeg, de interactie die de knop zou moeten benadrukken laat hem juist verdwijnen, en ik kan niet meer zien wat ik op het punt sta aan te klikken.

Oplossing

Zorg dat het contrast van de knoptekst ook bij hover minimaal 4,5:1 is.

#9 - Voortgangsindicator heeft geen naam of waarde

Op deze pagina, onder de kop "Agendapunten", heeft de voortgangsbalk geen toegankelijke naam. Gebruikers van een schermlezer horen niets wanneer het laden start of eindigt, en kunnen niet horen wat er geladen wordt.

Hetzelfde probleem komt voor op de pagina:

• https://pzh.notubiz.nl/vergadering/1253785.

User story

Als bezoeker die een schermlezer gebruikt, heb ik nodig dat ik weet wat er wordt geladen en hoe ver het is — want wanneer een spinner of voortgangsbalk in stilte verschijnt, weet ik niet of de pagina werkt, vastloopt of klaar is, ik blijf controleren, en ik mis het moment waarop ik weer iets moet doen.

Oplossing

Geef elke voortgangsindicator een beschrijvende toegankelijke naam ("Resultaten laden", "Bestand uploaden") en de rol van progressbar (role="progressbar"). Geef bij een bekende voortgang ook een huidige waarde mee via aria-valuenow, aria-valuemin en aria-valuemax. Voor een onbepaalde voortgangsindicator volstaat de rol plus de toegankelijke naam, en kan een live region (aria-live="polite") statusberichten aankondigen wanneer het laden start of eindigt.

#10 - Onvoldoende kleurcontrast bij link

Op deze pagina, na het klikken op de pijl-knop bij "Agendapunten", staat een grijze (#444444) link met de tekst "Toevoegen aan Outlook" op een zwarte (#0d0d0d) achtergrond. Het kleurcontrast is onvoldoende: 2,0:1.

User story

Als bezoeker die met het toetsenbord navigeert, slechtziend is, of een scherm in fel zonlicht gebruikt, heb ik nodig dat de tekst van elke link minimaal 4,5:1 contrast houdt met de achtergrond — ook wanneer de link toetsenbordfocus heeft — want nu zakt de gefocuste linktekst onder die drempel, mijn ogen verliezen juist het element dat ik moet lezen, en de focus-staat werkt zichzelf tegen.

Oplossing

Zorg dat de link bij toetsenbordfocus minimaal 4,5:1 contrast heeft ten opzichte van de achtergrond.

#11 - Video bevat tekst of logo's waarvoor geen alternatief is

Op deze pagina staat een video. Op verschillende momenten (bijvoorbeeld rond 16:00, 23:25, 33:24) wordt tekst getoond. Bij deze video ontbreekt een media-alternatief én een audiobeschrijving. De video bevat dus visuele informatie (tekst) die niet beschikbaar is voor blinde bezoekers.

User story

Als bezoeker die blind of slechtziend is, de pagina met een schermlezer leest, of visuele informatie nodig heeft in tekst of in audio, heb ik nodig dat elke video met tekst, namen, logo's of andere alleen-visuele informatie wordt aangeboden met een media-alternatief — een geschreven transcript of beschrijvend document op de pagina — dat alles vastlegt wat in beeld komt maar niet wordt uitgesproken — want nu zitten de namen, ondertitels en logo's die in beeld verschijnen nergens in de audio en nergens in de paginatekst, ze bereiken ziende kijkers wel maar mij niet.

Oplossing

Voor succescriterium 1.2.3 kan dit worden opgelost met een geschreven tekst (media-alternatief). Voor 1.2.5 is dat niet voldoende. Daarvoor moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo's en teksten. Voeg audiobeschrijving alleen toe op plekken waar er ruimte voor is. De meeste video's hebben die ruimte aan het begin en aan het eind.

#12 - Koppen zijn niet als kop gemarkeerd

Op deze pagina zijn een aantal teksten visueel kop, maar de kop-elementen ontbreken. In plaats daarvan wordt het strong-element gebruikt om de teksten op koppen te laten lijken. Zie "Inspreekrecht", "Toelichting" en "Toelichting".

User story

Als bezoeker die de pagina scant door door koppen te springen met een schermlezer, heb ik nodig dat elke tekst die een sectie introduceert in een echt kop-element (h1-h6) staat — niet in strong of em, die alleen "benadrukt" betekenen — want strong en em zijn onzichtbaar voor mijn kop-shortcut, de sectie die ze inleiden komt nooit terug in mijn mentale overzicht van de pagina, en ik moet de hele pagina van boven tot onder lezen om te vinden wat een ziende bezoeker in één oogopslag ziet.

Oplossing

Verwijder het strong- of em-element en markeer de tekst met een passend kop-element, zoals h2 of h3. De visuele opmaak kan eventueel met CSS worden toegepast. Dit type element wordt vaak per ongeluk toegevoegd via de knop "B" (vet) in een tekstbewerker.

#13 - Kleurcontrast bij tekst kleiner dan 19px is onvoldoende

Onder de kop "aangenomen - stemming motie 1780" staat rode (#FF0000) tekst zoals "tegen", "BBB", "FvD" op een witte achtergrond. De contrastverhouding is te laag: 4,0:1. Hetzelfde geldt voor andere tekst in deze kleurcombinatie.

User story

Als bezoeker die slechtziend is, leeftijdsgerelateerd contrastverlies heeft, of een scherm in fel zonlicht gebruikt, heb ik nodig dat tekst kleiner dan 19px minimaal 4,5:1 contrast houdt met de achtergrond — want de tekst is klein genoeg om de hogere drempel nodig te hebben, de huidige kleuren zakken eronder, en juist de kleinere tekst die de meeste informatie draagt is het deel dat ik niet kan lezen.

Oplossing

Omdat deze tekst kleiner is dan 19px, hoort het contrast minimaal 4,5:1 te zijn.

#14 - Grafisch object heeft onvoldoende contrast

Op deze pagina, onder de kop "aangenomen - stemming motie 1780", heeft het cirkeldiagram onvoldoende contrast (minimaal 3:1) met aangrenzende kleuren. De contrastverhouding tussen het groen (#268000) en het rood (#F3121B) is 1,2:1.

User story

Als bezoeker die slechtziend is, heb ik nodig dat informatieve grafische elementen — zoals grafieken, iconen en infographic-onderdelen — voldoende contrast hebben met de omringende kleuren (minimaal 3:1) — want bij te laag contrast kan ik de informatie die deze elementen overbrengen niet duidelijk waarnemen.

Oplossing

Zorg dat de informatieve onderdelen van dit grafische element minimaal 3:1 contrast hebben met de aangrenzende kleuren.

#15 - Functie van knop ontbreekt

Onder de kop "Agenda" staan knoppen met klikbare iconen die geen tekstalternatief hebben. Wanneer een knop alleen uit een afbeelding bestaat, hoort het tekstalternatief van de afbeelding de functie van de knop te beschrijven.

User story

Als bezoeker die knoppen activeert met een schermlezer, de pagina via spraakbesturing bedient, of pagina's leest met afbeeldingen uit, heb ik nodig dat elke icoon-only knop een toegankelijke naam heeft die de functie beschrijft (via alt, aria-label of visueel verborgen tekst) — want zonder die naam kondigt mijn schermlezer alleen "knop" aan, mijn spraakcommando heeft niets om op te richten, de plaatsvervanger bij images-off blijft leeg, en ik weet niet wat er gebeurt als ik de knop activeer.

Oplossing

Voeg een tekstalternatief toe dat de functie van de knop beschrijft. Dit kan via een tekstalternatief bij het icoon, of via een aria-label op de knop.

#16 - Foutmeldingen hebben te weinig contrast

Op deze pagina is de foutmelding in het formulier rode (#ff0000) tekst op een witte achtergrond. De contrastverhouding is 4,0:1.

Hetzelfde probleem komt voor op de pagina:

• https://pzh.notubiz.nl/registreren.

User story

Als bezoeker die slechtziend is, leeftijdsgerelateerd contrastverlies heeft, of een scherm in fel zonlicht gebruikt, heb ik nodig dat elke foutmelding in een formulier minimaal 4,5:1 contrast houdt met de achtergrond — want de foutmelding is op dat moment de belangrijkste tekst op de pagina (die vertelt mij wat er fout ging en hoe ik het kan oplossen), en juist een gekleurde foutmelding die onder de contrastdrempel zakt is het slechtst denkbare stukje pagina om kwijt te raken.

Oplossing

Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

#17 - Foutmelding niet gekoppeld aan invoerveld

Op deze pagina toont het formulier de foutmelding "Het veld Voornaam is verplicht." Hetzelfde geldt voor andere foutmeldingen op deze pagina: ze zijn niet programmatisch gekoppeld aan het bijbehorende invoerveld.

User story

Als bezoeker die formulieren invult met een schermlezer, heb ik nodig dat elke foutmelding programmatisch gekoppeld is aan het bijbehorende invoerveld — bijvoorbeeld via aria-describedby op het invoerveld dat verwijst naar het id van de melding — want nu kondigt mijn schermlezer alleen de naam van het veld aan en niet de fout, ik land op het foute veld zonder te weten wat eraan mankeert, en ik moet de pagina afzoeken om de bijbehorende melding te vinden.

Oplossing

Gebruik bij het input-element een aria-describedby-attribuut dat verwijst naar het id van de foutmelding.

#18 - PDF-document heeft geen titel

Voor dit PDF-document is geen titel ingesteld in de bestandseigenschappen.

User story

Als bezoeker die PDF's leest met een schermlezer, meerdere PDF-vensters open heeft, of door recente bestanden bladert, heb ik nodig dat elk PDF-document een echte documenttitel heeft in de bestandseigenschappen — niet alleen een kop op pagina 1 — want PDF-lezers (Adobe, browser-viewers) tonen die titel in de titelbalk en lezen die voor, en zonder titel toont de titelbalk de bestandsnaam (bijvoorbeeld document123.pdf), kondigt mijn schermlezer een betekenisloze bestandsnaam aan, en kan ik niet zien welk document ik net heb geopend.

Oplossing

Los het op in Adobe Acrobat:

1. Open het PDF-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld "Rapport: Bevolkingscijfers 2023".
5. Klik op OK en sla het bestand op.

#19 - Koppen zijn niet als kop gemarkeerd

In dit PDF-document zijn meerdere teksten een kop, maar ze zijn niet als kop gemarkeerd. Zie bijvoorbeeld "Privacyverklaring Griffie Provinciale Staten Zuid-Holland", "Verzameling van uw persoonsgegevens" en "Rechtsgrond voor Verwerking".

User story

Als bezoeker die PDF's navigeert door door koppen te springen met een schermlezer, heb ik nodig dat elke tekst die op een kop lijkt is gemarkeerd als echte kop (H1-H6) en niet als alinea (P) met grotere opmaak — want de kop-shortcut van mijn schermlezer vindt alleen echte kop-tags, en een tekst die er als kop uitziet zonder de juiste tag is voor mij onzichtbaar wanneer ik het document scan.

Oplossing

Vervang de P-tag door een H1- t/m H6-tag, zodat de tag-structuur overeenkomt met de visuele structuur.

#20 - De structuur van een lijst klopt niet

In dit PDF-document staat op pagina 2 een opsomming van 6 items. In de tags zitten echter 6 aparte lijsten. Op pagina 3 staat een opsomming van 5 items, maar in de tags zitten daar twee aparte lijsten.

User story

Als bezoeker die PDF's leest met een schermlezer, heb ik nodig dat elke lijst die over meerdere pagina's loopt is gemarkeerd als één doorlopende lijst — of, als hij gesplitst moet blijven, dat het tweede deel wordt ingeleid met een duidelijke aantekening dat het verdergaat van de vorige pagina — want nu kondigt mijn schermlezer twee aparte lijsten aan, het aantal klopt twee keer niet, en ik krijg geen signaal dat ik dezelfde lijst lees waaraan ik op de vorige pagina begon.

Oplossing

Voeg de afzonderlijke L-tags samen tot één lijst, zodat schermlezers de items als een doorlopende lijst voorlezen. Je kunt de twee lijsten ook ongewijzigd laten en bij de tweede lijst een toelichting plaatsen die aangeeft dat deze lijst een vervolg is op de lijst van de vorige pagina.

#21 - De taal is niet ingesteld in de metadata

In de metadata van deze PDF is de taal niet ingesteld.

User story

Als bezoeker die PDF's leest met een schermlezer, heb ik nodig dat elke PDF de taal vastlegt in de bestandseigenschappen — want zonder die instelling moet mijn schermlezer gokken, valt terug op de verkeerde standaardstem, en leest het hele document met de verkeerde uitspraakregels voor vanaf het allereerste woord.

Oplossing

Los het op in Adobe Acrobat:

1. Open het PDF-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Geavanceerd.
4. Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
5. Klik op OK en sla het bestand op.

#22 - Structuur van PDF-document is niet in codes vastgelegd

Dit PDF-document mist codes. Daardoor is de inhoud niet toegankelijk voor schermlezers.

User story

Als bezoeker die PDF's leest met een schermlezer, heb ik nodig dat elk PDF-document een complete tag-structuur draagt — koppen, alinea's, lijsten, tabellen, alt-teksten, de hele structuur — want zonder tags is de PDF voor mijn schermlezer alleen maar een platte afbeelding van letters, geen enkel element heeft betekenis, geen enkele navigatie-shortcut werkt, en het hele document zit verstopt achter een laag die ik niet kan lezen.

Oplossing

Voeg codes toe aan het document die de structuur weergeven.

Opslaan als getagde PDF in Word (Windows): ga naar Bestand. Kies Opslaan als Adobe PDF (als je Acrobat hebt) of ga naar Meer → Exporteren → PDF/XPS-document maken. In het venster dat opent, klik je op Opties. Zet een vinkje bij Documentstructuurtags voor toegankelijkheid en bij Bladwijzers maken met koppen. Daarmee kunnen gebruikers met het toetsenbord snel van sectie naar sectie springen. Dit werkt alleen wanneer echte kopstijlen zijn gebruikt.

Opslaan als getagde PDF in Word (Mac): ga naar Bestand → Opslaan als, kies PDF in het keuzemenu en selecteer Best voor elektronische distributie en toegankelijkheid (gebruikt Microsoft online service). Op Mac worden bladwijzers automatisch op basis van de koppen gegenereerd.

#23 - Titel van het PDF-document beschrijft de content niet

Voor dit PDF-document is in de bestandseigenschappen de titel "G" ingesteld. Die titel beschrijft de inhoud van het document niet.

User story

Als bezoeker die PDF's leest met een schermlezer, meerdere PDF-vensters open heeft, of door recente bestanden bladert, heb ik nodig dat de documenttitel in de bestandseigenschappen beschrijft waar het document over gaat — niet een tijdelijke aanduiding, niet de naam van een sjabloon, niet "Untitled" — want de PDF-lezer toont die titel in de titelbalk en leest die voor, en een titel die de inhoud niet beschrijft maakt het onmogelijk om te zien in welk document ik zit.

Oplossing

Pas de titel aan in de bestandseigenschappen van het bronbestand of van het PDF-document.

#24 - Kleurcontrast van kleine tekst is te laag

In dit PDF-document staat grijze (#808080) tekst "PZH-2026-888973504 dd. 14-04-2026" op een witte achtergrond. De contrastverhouding is te laag: 3,9:1.

User story

Als bezoeker die PDF's leest met een visuele beperking, leeftijdsgerelateerd contrastverlies, of op een scherm in fel zonlicht, heb ik nodig dat tekst van standaardgrootte in het document minimaal 4,5:1 contrast houdt met de achtergrond — want nu zakt de tekst onder die drempel, ik kan hem niet lezen zonder mijn ogen te forceren, en een document dat ik niet kan lezen is een document dat ik niet kan gebruiken.

Oplossing

Zorg dat het contrast minimaal 4,5:1 is.