Hercontrole digitale toegankelijkheid van website biografienzkg.nl

#3 - Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Deze bevinding is voor de helft opgelost. Het mintgroen (#65BD7D) op wit met een ratio van 2,3:1 komt niet meer voor. Blauw (#198FD9) op wit staat er nog wel, met een contrastratio van 3,5:1. Dat is te weinig voor kleine tekst.

Enkele voorbeelden, en dit is geen volledige lijst:

• de link "privacybeleid" in de cookiemelding wanneer die in hovertoestand is;
• de knoppen "Alles accepteren", "Alles weigeren" en "Keuzes opslaan" in de cookiemelding wanneer die in hovertoestand zijn;
• de opmerkingen met het symbool * wanneer die in hovertoestand zijn op https://biografienzkg.nl/ en andere pagina's;
• de link "[email protected]" wanneer die in hovertoestand is op https://biografienzkg.nl/colofon/.

Dezelfde blauwe kleur staat ook op een grijze achtergrond (#E6E6E6). Die combinatie heeft een contrastratio van 2,8:1. Je ziet het in de cookiemelding: klik op de knop "Details bekijken" en daarna op "Noodzakelijk" of een van de andere knoppen in dat gedeelte. De tekst op de knop wordt dan blauw.

Oplossing:

Voor tekst tot 24 px, en voor vetgedrukte tekst tot 19 px, moet de contrastratio minimaal 4,5:1 zijn. Voor grotere tekst is 3,0:1 genoeg. Op https://properaccess.nl/hoe-test-ik-kleurcontrast/ staat een instructie die uitlegt hoe je kleurcontrast test.

#6 - Toetsenbordfocus is niet zichtbaar

Deze bevinding is grotendeels opgelost. In het menu en bij de knop met het pijltje omhoog is de toetsenbordfocus nu zichtbaar. Op de afbeeldingslinks nog niet, bijvoorbeeld op https://biografienzkg.nl/de-basis-het-natuurlijk-landschap/ en https://biografienzkg.nl/de-omgang-met-water/.

Bezoekers die met het toetsenbord navigeren moeten kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet wanneer ze op Enter moeten drukken om een link te volgen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de afbeeldingslinks.

#45 - Een onzichtbaar element krijgt toetsenbordfocusNieuw

Nieuwe bevinding die is ontstaan na het oplossen van een eerder gevonden bevinding.

Op alle pagina's komt de toetsenbordfocus na de link met het huisicoon op een interactief element dat niet te zien is. Het gaat om de link "Terug naar boven" in de werkbalk. Die link staat in de CSS op opacity: 0 en wordt pas zichtbaar als de bezoeker naar beneden scrolt, maar opacity haalt een element niet uit de tabvolgorde. Een bezoeker die met het toetsenbord navigeert komt dus op een link die er niet is, weet niet waar de focus staat, en kan per ongeluk iets activeren.

Hetzelfde gebeurt als de website op een klein scherm wordt bekeken. Dan komt de toetsenbordfocus na de link met het PDF-icoon op interactieve elementen die niet te zien zijn.

Oplossing:

Zorg dat alleen zichtbare interactieve elementen toetsenbordfocus kunnen krijgen. Je kunt de link met display: none of visibility: hidden verbergen in plaats van met opacity: 0, of het attribuut inert op het element zetten zolang het verborgen is.

#19 - Video heeft geen ondertiteling

Op deze pagina staat een video met gesproken tekst, maar ondertitels ontbreken.

Ondertitels zijn nodig voor bezoekers die doof of slechthorend zijn. Zonder ondertitels krijgen zij niet alle inhoud van de video mee.

Oplossing:

Voeg ondertiteling toe aan de video.

#23 - Tekstalternatief van het logo is niet voldoende

Deze bevinding is grotendeels opgelost. De drie logo's op deze pagina hebben nu een alt-tekst. Bij twee ervan staat de volledige zichtbare tekst in het alternatief. Bij het logo NZKG niet: daar staat alt="Logo NZKG", terwijl in het logo "NZKG noordzeekanaalgebied" te lezen is.

In de alt-tekst moet alle tekst staan die in het logo te zien is. Zo krijgen bezoekers die de afbeelding niet kunnen zien dezelfde informatie als bezoekers die hem wel zien.

Oplossing:

Vul de alt-tekst aan tot "Logo NZKG noordzeekanaalgebied".

#46 - De zichtbare linktekst staat niet in de toegankelijke naamNieuw

Nieuwe bevinding die is ontstaan na het oplossen van een eerder gevonden bevinding.

Op deze pagina staan voetnoten in de tekst. De links daarnaartoe hebben nu de toegankelijke naam "navigeer naar bronvermelding", terwijl de zichtbare linktekst alleen een cijfer is: "1", "2", "3" enzovoort. De zichtbare tekst komt dus niet voor in de toegankelijke naam.

Bezoekers die de website met spraakbediening bedienen, spreken uit wat ze zien staan. Zij zeggen "klik 1", maar de software zoekt naar een link die "navigeer naar bronvermelding" heet en vindt die niet. De link is voor hen dus niet te bedienen.

Oplossing:

Zorg dat de zichtbare tekst van de link voorkomt in de toegankelijke naam, bij voorkeur aan het begin. Pas het aria-label aan, bijvoorbeeld naar aria-label="1 navigeer naar bronvermelding".

#43 - Tekst is als afbeelding geplaatst

Op deze pagina staat boven de kop "Geschikt voor permanente bewoning" een afbeelding met tekst erin, bijvoorbeeld "Vroege historie 250 v.Chr. - 900 n.Chr." en "De kust is verzand. Het Oer-IJ watert af naar het oosten.".

Tekst in een afbeelding kunnen veel bezoekers niet gebruiken. Zij kunnen die tekst niet vergroten en de kleur of het lettertype niet aanpassen.

Oplossing:

Zet deze tekst als gewone tekst op de pagina. Dan kunnen bezoekers de grootte, de kleur en het lettertype aanpassen zodat het voor hen leesbaar wordt.

#27 - Overbodige Figure-tags

In dit PDF-document staan onnodige Figure-tags zonder beschrijving. Zie pagina 1, 4, 7 en andere. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig.

Oplossing:

Markeer deze afbeeldingen als artefacten, zodat ze worden verborgen voor schermlezers.

#28 - Koppen zijn niet als kop gemarkeerd

In dit PDF-document staan verschillende koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld "Het Noordzeekanaalgebied Landschap van contrasten 2023" op pagina 1, "Inhoud" op pagina 2, "Gezonde lucht" op pagina 52 en andere.

De visuele structuur van het document verschilt zo van de structuur in de tags. Bezoekers die het document laten voorlezen, kunnen niet van kop naar kop springen.

Oplossing:

Vervang de P-tag door de H-tag, zodat de structuur in de tags gelijk is aan de visuele structuur.

#29 - Lijst is niet als lijst gemarkeerd

In dit PDF-document staat op pagina 12 en 13 een lijst met vier items. De juiste markering ontbreekt.

Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde structuur door als ziende bezoekers. Schermlezers kondigen dan ook het aantal items aan voordat ze gaan voorlezen.

Hetzelfde probleem doet zich voor bij lijsten op pagina 13, 20, 21, 29 en andere.

Oplossing:

Markeer de lijst met een L-tag en Li-tags.

#30 - Informatieve afbeeldingen hebben automatisch gegenereerde beschrijvingen

In dit PDF-document staan informatieve afbeeldingen die met een Figure-tag zijn toegevoegd en een automatisch gegenereerde beschrijving hebben. Zie bijvoorbeeld de afbeelding op pagina 14 met de beschrijving "Afbeelding met kaart, tekst, atlas Automatisch gegenereerde beschrijving", de afbeeldingen op pagina 30, 41 en 57 met dezelfde beschrijving, en de logo's op pagina 68.

Zo'n tekst zegt niet wat er op de afbeelding staat. Bezoekers die het document laten voorlezen, missen daardoor informatie.

Oplossing:

Voeg beschrijvende alternatieve teksten toe aan deze informatieve afbeeldingen.

#31 - Informatieve afbeeldingen hebben geen alt-tekst

In dit PDF-document staan informatieve afbeeldingen zonder tekstalternatief. Dit komt voor op pagina 21 en 42.

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving hebben, want die tag is alleen bedoeld voor informatieve afbeeldingen. Nu lezen schermlezers alleen "afbeelding" voor, en dan weten blinde bezoekers niet wat ze missen.

Oplossing:

Voeg een tekstalternatief toe aan deze informatieve afbeeldingen.

#32 - Voetnoten missen de juiste tags

In dit PDF-document staan op veel pagina's opmerkingen en voetnoten zonder de vereiste Reference-tag en Note-tag.

Zonder die tags kan voorleessoftware niet doorgeven welke voetnoot bij welke verwijzing hoort. De voetnoten worden dan als losse tekst voorgelezen, zonder verband met de plek in de hoofdtekst.

Oplossing:

Voeg de juiste tags toe aan de voetnoten.

#33 - PDF-document heeft geen titel

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

Ook als er een titel op de eerste pagina staat, moet je in de eigenschappen van het document een titel invullen. Een PDF-lezer toont anders de bestandsnaam in de titelbalk, bijvoorbeeld document123.pdf. Met een documenttitel in de metadata staat die titel er in plaats van de bestandsnaam. Bezoekers zien dan sneller of het document is wat ze zoeken.

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 "Themakaart 4: Economie en nederzettingen".
5. Klik op OK en sla het bestand op.

#34 - Informatieve afbeelding toegevoegd via figure-tag mist tekstalternatief

In dit PDF-document staat een informatieve afbeelding, een kaart, zonder tekstalternatief. Afbeeldingen met een Figure-tag moeten altijd een beschrijving hebben, want die tag is bedoeld voor informatieve afbeeldingen. Nu kondigt een schermlezer alleen "afbeelding" aan, en dan denken bezoekers die de kaart niet kunnen zien ten onrechte dat ze iets belangrijks missen.

Oplossing:

Voeg een tekstalternatief toe aan deze informatieve afbeelding.

#35 - Kleurcontrast van kleine tekst is te laag

In dit PDF-document staan op pagina 2 de rode (#E83227) koppen "Karakteristieke plekken en structuren" en "Informatieve kaartlagen" op een witte achtergrond. De contrastratio is te laag: 4,3:1. De koppen staan in korps 16.

Oplossing:

Deze koppen zijn kleiner dan 18 pt, dus ze hebben een contrastratio van minimaal 4,5:1 nodig.