Content-audit digitale toegankelijkheid van website noord-holland.stateninformatie.nl

#1 - Onvoldoende kleurcontrast

Op alle pagina’s wordt blauwe kleur gebruikt in combinatie met wit. Het kleurcontrast is 3,4:1. Dit moet minimaal 4,5:1. #### Oplossing Gebruik deze kleurencombinatie niet in tekst of maak de blauwe kleur donkerder. Gebruik CCA tool om contrast te testen. De instructie om deze tool te gebruiken vind je op deze pagina. https://properaccess.nl/hoe-test-ik-kleurcontrast/

#2 - SC 1.3.1 De accordeon heeft geen koppen of de rol van kop is overschreven

Op deze pagina onder "J. Dessing", in een sectie met verborgen inhoud, zijn de elementen die verborgen inhoud openen en sluiten niet gemarkeerd als een koptekst. 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.

Oplossing:

Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven.

#3 - Titel is niet beschrijvend en wordt niet in titelbalk getoond

Dit PDF-document heeft in de bestandseigenschappen de titel “2025-06-30 Besluitenlijst PS -concept-.docx”, wat niet duidelijk genoeg is. Bovendien wordt de bestandsnaam in de titelbalk weergegeven in plaats van de documenttitel. Zelfs als er een titel op de eerste pagina staat, moet je in de pdf-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

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

#4 - Informatieve afbeelding is als achtergrondafbeelding geplaatst

In dit pdf-document is het logo van de provincie toegevoegd als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een `Figure`-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft. #### Oplossing: Voeg het logo toe met de `Figure`-tag en geef het een beschrijvende alternatieve tekst. ### Een deel van het document is niet voorzien van codes

This pdf-document is partially tagged. The following content is not tagged: text “Provinciale Staten”. Dit deel van het document kunnen wij hierdoor niet onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen. Bijvoorbeeld met de tekstlabels voor de formuliervelden, maar ook de relaties van de formuliervelden met de kolomkoppen erboven.

Oplossing:

Voorzie dit gedeelte van codes die de structuur van het document weergeven. Op deze pagina staat een instructie hoe je PDF zelf moet testen op toegankelijkheid: https://properaccess.nl/instructie-pdfs-testen-met-pac-2024/.

#5 - Niet alle listitems in de lijst zijn correct gemarkeerd

In this pdf-document there is a list of 21 items. However in the tags there are only two first list items present. From the third item “Actualiteiten” items are not in the list. #### Oplossing: Markeer de lijst met een `L`- en `Li`-tags, en zorg dat het aantal lijstitems overeenkomt met wat je ziet. ### Onjuiste tagging van decoratieve afbeeldingen

In dit pdf-document zijn decoratieve stippen op pagina 1 onjuist getagd als inhoud in de structuurboom van de PDF, waardoor schermlezers ze kunnen aankondigen als betekenisvolle informatie. #### Oplossing: Decorative elements should be marked as artifacts so assistive technology ignores them.

#6 - Titel is niet beschrijvend en wordt niet in titelbalk getoond

Dit PDF-document heeft in de bestandseigenschappen de titel “2025-06-30 Notulen PS -concept-.docx”, wat niet duidelijk genoeg is. Daarnaast wordt de bestandsnaam in de titelbalk weergegeven in plaats van de documenttitel. Zelfs als er een titel op de eerste pagina staat, moet je in de pdf-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

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

#7 - In een lay-out tabel zijn th-tags gebruikt

In dit pdf-document op pagina 1 wordt de code van een gegevenstabel gebruikt om bepaalde tekst een kolomlay-out te geven. Een gegevenstabel mag in deze situatie niet worden gebruikt. Er zijn tags gebruikt die alleen bedoeld zijn voor een datatabel, namelijk `th`-tags. Deze mogen niet aanwezig zijn in een lay-outtabel. Dit kan verwarrend zijn voor blinde bezoekers, omdat deze tags het idee geven dat er een relatie is tussen de informatie in de verschillende cellen van de tabel, terwijl dit niet zo is. #### Oplossing: Verwijder de `th`-tags. ### Informatieve afbeelding is als achtergrondafbeelding geplaatst

Dit pdf-document bevat een logo toegevoegd als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een `Figure`-tag worden geplaatst en een alternatieve tekst krijgen die de afbeelding duidelijk beschrijft. #### Oplossing: Voeg het logo toe met de `Figure`-tag en geef het een beschrijvende alternatieve tekst. ### Tabelinhoud niet gecodeerd als tabel

In dit PDF-document staat op pagina 1 onder “Agenda” een tabel, maar deze is in de code niet als tabel gemarkeerd. De relatie tussen tabelcellen wordt nu niet correct voorlezen. #### Oplossing: Gebruik tabelcodes (Tabel) om deze tabel correct te markeren. ### Inhoud die geen kop is, is gemarkeerd als koppen

In dit pdf-document wordt inhoud die geen koptekst is, gecodeerd als koptekst. Zie bijvoorbeeld pagina 5, tekst "De agenda is aldus vastgesteld.", "140", "150". #### Oplossing: Gebruik paragraaftags om deze inhoud te coderen. ### SC 1.3.1 Lijst is niet als lijst gemarkeerd

In dit pdf-document staat op pagina 5 een lijst met 10 items. Deze items zijn gecodeerd als kopjes in plaats van lijstitems. Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen. #### Oplossing: Markeer de lijst met een `L`- en `Li`-tags.

em-element is gebruikt voor opmaak

Op deze pagina wordt het em-element misbruikt voor stylingdoeleinden. Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.

#8 - Kleur wordt gebruikt om informatie te geven

Op deze pagina onder het kopje “19 a - 2-minutendebaat ..” staat een sectie met inhoud die kan worden in- en uitgeklapt. In deze sectie staan grafieken waarin kleur wordt gebruikt om informatie te geven. Een bezoeker met een kleurenblindheid weet niet waar de percentages voor staan. #### Oplossing: Voeg een tekstueel datalabel aan de grafiek of leg in tekst uit waar de percentages voor staan. Deze grafieken komen op meerdere plekken voor.

em-element is gebruikt voor opmaak

Op deze pagina wordt onder het kopje "Vergadering Expertmeeting & Commissie Landelijk gebied 13-01-2025" het `em`-element misbruikt voor stylingdoeleinden. Het `em`-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om *alleen* een visueel effect te bereiken (cursieve tekst). #### Oplossing: Verwijder de onnodige `em`-elementen en gebruik CSS om de tekst schuingedrukt te maken.

#9 - De accordeon heeft geen koppen of de rol van kop is overschreven

Op deze pagina onder "Agenda" staat een sectie met teksten die verborgen inhoud openen en sluiten. Deze teksten zijn niet gemarkeerd als kopteksten. 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.

Oplossing:

Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven. De instructie hoe je koppen op een webpagina kan opsporen staat op deze pagina: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.