Audit digitale toegankelijkheid van website gezondzuidholland.nl

#1 - Groep interactieve elementen heeft geen toegankelijke naam

In de cookiemelding is een groep selectievakjes aanwezig, voorafgegaan door de tekst “Cookievoorkeuren beheren”. Deze groep is netjes geplaatst in een fieldset, maar een legend-element ontbreekt.

Je hebt het legend-element nodig om een label of naam te geven aan de groep keuzerondjes of selectievakjes.

Oplossing:

Voeg een legend-element toe binnen de fieldset en vul het met de tekst “Cookievoorkeuren beheren” (of een meer beschrijvend en toepasselijk label) om duidelijk het doel van de groep aan te geven.

#2 - Toetsenbord focus gaat buiten het dialoogvenster

Toetsenbordfocus in de cookiemelding is niet logisch. Na het doorlopen van alle items in dit dialoogvenster, kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen en naar de onderliggende pagina gaan.
Bij dit soort dialoogvensters moet je de toetsenbordfocus goed instellen. Als het venster in beeld is, moet de toetsenbordfocus binnen het venster blijven, en mag deze niet op de onderliggende pagina terechtkomen.

Oplossing:

Je lost dit op met Javascript door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.

#3 - Alternatieve tekst bevat onleesbare karakters

Bovenaan de website bevat het logo “GEZOND ZUID-HOLLAND” overbodige tekens in de alternatieve tekst “logo-gezondzuid-holland-2” (streepjes en het cijfer 2). Omdat het logo tevens een link is, wordt de toegankelijke naam van de link afgeleid van deze alternatieve tekst. De huidige alternatieve tekst maakt het doel van de link niet duidelijk.

Oplossing:

Vervang de alternatieve tekst bijvoorbeeld door: “Gezond Zuid-Holland, ga naar de startpagina”.

#4 - Logo heeft geen tekstalternatief

Onder de kop “Ontstaansgeschiedenis Gezond Zuid-Holland” staan drie logo’s zonder alternatieve tekst, bijvoorbeeld het logo “Provincie Zuid-Holland”. Het alt-attribuut is leeg. Informatieve afbeeldingen, zoals een logo, moeten altijd een alt-tekst hebben waarin de volledige tekst is opgenomen die in het logo zichtbaar is. Zonder dit alternatief is de informatie in het logo niet beschikbaar voor bezoekers die de afbeelding niet kunnen waarnemen.

Oplossing:

Zorg ervoor dat het logo is voorzien van een tekstalternatief (alt-tekst) waarin de volledige tekst van het logo is opgenomen.

#5 - Relatie tussen gegroepeerde links ontbreekt in HTML

Onder de kop “Gezonde voedselomgeving” staat een groep links voor snelle navigatie op de pagina. Deze links worden visueel als een groep gepresenteerd, maar deze groepering is niet vastgelegd in de HTML-structuur.
Wanneer voor ziende bezoekers duidelijk is dat links bij elkaar horen, moet die structuur ook in de HTML-code zijn opgenomen.

Dit probleem komt ook voor op de pagina https://gezondzuidholland.nl/thema/vitale-veerkrachtige-inwoners/.

Oplossing:

Plaats de elementen in een nav- of ul element.

#6 - Linktekst is niet duidelijk genoeg

Onder de kop “Landelijke situatie” staat een link met de vage tekst “[1]”. Deze tekst beschrijft het doel van de link niet voldoende. Dit zorgt voor onduidelijkheid, vooral voor bezoekers met een cognitieve beperking of bezoekers die een schermlezer gebruiken.

Een linktekst die nietszeggend zijn (zoals ‘[1]’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg ervoor dat duidelijk is waar de link naartoe verwijst, bijvoorbeeld door visueel verborgen tekst toe te voegen, zoals “voetnoot naar bron”: <a href="">[1]<span class="sr-only"> voetnoot naar bron</span></a>.

#7 - Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staan artikelen met afbeeldingen. Alle afbeeldingen hebben een leeg alt-attribuut, behalve de afbeelding naast de kop “Zuid-Hollandse bestuurders tevreden over Gezond Ontwerpen”. De alternatieve tekst is “Mensen om tafel met een kaart”.

Oplossing:

Als deze afbeeldingen informatief zijn, voeg dan bij alle afbeeldingen een alternatieve tekst toe. Als ze decoratief zijn, laat het alt-attribuut leeg (alt="").

#8 - Informatieve afbeelding heeft geen tekstalterantief

Pagina 1 van dit PDF-document bevat het logo “GEZOND ZUID-HOLLAND” 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.
Dit probleem komt ook voor op pagina 19, met het logo “Den Haag”.

Oplossing:

Voeg de logo’s toe met Figure-tags en geef ze beschrijvende alternatieve teksten.

#9 - Alleen kleur gebruikt in legenda bij kaart

In dit PDF-document staat op pagina 6, 8, 9 en 10 een kaart met een legenda. In de legenda en op de kaart wordt kleur gebruikt om informatie over te brengen. Zie de legenda en de kaart.
Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke regio bij welke categorie in de legenda hoort.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

#10 - Onvoldoende kleurcontrast tussen zones op de kaart en de kleurvakjes in de legenda

In dit PDF-document staat op pagina 6, 8, 9 en 10 een kaart met een legenda. Sommige kleurcombinaties hebben een onvoldoende contrastratio. Bijvoorbeeld lichtblauw (#C9DAED) op een witte achtergrond. De contrastratio is 1,4:1.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een legenda minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de legenda voldoende contrast hebben.

#11 - Een deel van het document is niet voorzien van codes

Dit PDF-document is gedeeltelijk getagd. Op pagina 6, 8, 9, 10 en andere pagina’s zijn bijschriften onder afbeeldingen niet getagd, bijvoorbeeld “Afbeelding 1: Bevolkingsdichtheid Nederland 2024.” Dit deel van het document kunnen wij hierdoor niet onderzoeken.

Oplossing:

Voorzie dit gedeelte van codes die de structuur van het document 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. Op deze manier 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, dat gebruikmaakt van Microsoft online service. Op Mac worden bladwijzers automatisch op basis van de koppen gegenereerd, zonder dat hiervoor instellingen hoeven te worden aangepast.

#12 - Informatieve afbeelding is als achtergrondafbeelding geplaatst

Op pagina 6, 8, 9 en 10 staan informatieve afbeeldingen van kaarten die als artefact zijn toegevoegd.
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.

#13 - De logo’s zijn onjuist geplaatst in een kop-element

Op pagina 19 staat onder de kop “Partijen die geïnterviewd zijn en meegewerkt hebben:” alle inhoud in een H2-tag, terwijl dit geen koppen zijn. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Gebruik H1-H6-tags alleen voor koppen.

Oplossing:

Gebruik de Sect-tag voor de sectiecontainer, de H-tag voor de koptekst en de Figure-tags voor de logo’s.