Het lang-attribuut is leeg

De pagina’s bevatten het attribuut lang op het html-element, maar dit attribuut is leeg (lang=""). Als dit attribuut is leeg, bestaat de kans dat voorleessoftware de pagina niet in de correcte taal kan voorlezen. De software weet dan niet wat de primaire taal van de pagina is.

Oplossing:

Zorg dat dit attribuut de taalcode bevat van de taal van de pagina, bijvoorbeeld lang=”nl” voor Nederlands.

Er is maar één manier om een webpagina te vinden

Er is geen tweede manier om de pagina’s van deze website te vinden. Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Oplossing:

Zorg dat de webpagina’s op meerdere manieren bereikbaar zijn.

Logo is een link, maar bestemming is onbekend

Het logo bovenaan de website toont de volledige tekst "Provincie Noord-Holland", maar de alt-tekst is alleen "logo". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Omdat dit logo ook een link is, is het lastig voor bezoekers die hulpsoftware gebruiken om te bepalen naar welke pagina of welke inhoud de link verwijst.

De toegankelijke naam van de link komt niet overeen met de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met spraakbediening wordt geactiveerd. Er wordt dan namelijk de tekst uitgesproken die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal hulpsoftware de link niet kunnen activeren.

Oplossing:

Pas de alt-tekst van het logo aan. Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Provincie Noord-Holland”. Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.

Kleurcontrast van tekst is te laag

Op de hele website staat witte tekst op een blauwe achtergrond (#288FDF) of blauwe tekst op een witte achtergrond. De contrastratio is te laag: 3,5:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Bepaalde ARIA-rollen vereisen specifieke onderliggende elementen

In de header heeft het navigatiemenu het role="menubar" en de links in het menu hebben role="menuitem". De menu-items zijn echter geen directe kinderen van het menubar-element. Binnen het menubar-element bevinden zich ul- en nav-elementen, wat volgens de ARIA-specificatie niet is toegestaan. Deze structuur maakt de navigatie via schermlezers verwarrend, omdat de hiërarchie van het menu niet correct wordt geïnterpreteerd.

Niet alle ARIA-rollen zijn geschikt voor elk HTML-element; sommige rollen mogen alleen worden toegepast op specifieke elementen en niet in combinatie met andere.

Oplossing:

Gebruik de juiste rollen voor dit menu. Raadpleeg https://www.w3.org/WAI/ARIA/apg/patterns/menu/ voor een correcte implementatie van een toepassing met role="menubar". Op deze pagina staat uitgelegd wat er nodig is om een toegankelijke menubalk te bouwen en welke structuur, rollen en eigenschappen daarbij horen. Een betere oplossing is het verwijderen van deze ARIA-rollen.

Toetsenbordfocus gaat buiten het mobiele menu terwijl het menu open blijft staan

Als de pagina wordt ingezoomd, verschijnt er in de header een menuknop die het mobiele menu opent. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan.

Oplossing:

Bij dit soort menu’s moet je de toetsenbordfocus goed instellen. Als het menu actief is, moet de focus binnen het menu blijven, en mag deze niet op de onderliggende pagina terechtkomen.

Dit kun je op een van de volgende manieren oplossen:

1. Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.

Toetsenbordfocus is niet zichtbaar

Als de pagina wordt ingezoomd, verschijnt er in de header een menuknop. De toetsenbordfocus is niet zichtbaar op deze knop.

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

Link naar pagina: https://samenslimnaarzee.nl/

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op onzichtbare interactieve elementen na de link “ideeën gedeeld”.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Link is niet met het toetsenbord te bedienen

Op deze pagina is de link met de tekst "Meer informatie" niet toegankelijk met het toetsenbord. Wanneer een bezoeker met het toetsenbord navigeert, wordt deze link overgeslagen. Alle interactieve elementen, dus ook links, moeten met alleen het toetsenbord te bedienen zijn.

Oplossing:

Zorg dat alle links met de Enter-, Return- of spatietoetsen kunnen worden bediend.

De accordion heeft geen koppen of de rol van kop is overschreven

Op deze pagina staan onderdelen met verborgen inhoud die geopend kunnen worden via “Meer informatie” en “Hoe werkt het?”. De elementen die de verborgen inhoud openen en sluiten, zijn niet opgemaakt als kop. 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.

Meer informatie over dit element staat op deze pagina: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn

Op deze pagina staan onderdelen met verborgen inhoud die geopend kunnen worden via "Meer informatie" en "Hoe werkt het?". Het pijl-icoon dat aangeeft dat er verborgen inhoud aanwezig is, heeft geen tekstalternatief. Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo.

Oplossing:

Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Kop is niet gemarkeerd als koptekst

Op deze pagina, in het onderdeel dat geopend wordt via "Hoe werkt het?", zijn de volgende teksten niet opgemaakt als kop: "1. Je bedenkt een idee", "2. De provincie en de gemeenten bekijken de ideeën en reageren", "3. Reactie op de maatregelpakket(ten" en "4. De provincie en de gemeenten besluiten".

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina, in het onderdeel dat geopend wordt via "Hoe werkt het?", staan decoratieve afbeeldingen. Deze afbeeldingen zijn toegevoegd met een img-element, maar het attribuut alt ontbreekt. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Je kunt dit op verschillende manieren bereiken:

• Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.
• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

Linktekst is niet duidelijk genoeg

Op deze pagina, onder “Nieuws”, bevatten meerdere links de vage tekst "Lees verder". Deze tekst beschrijft niet duidelijk waar de link naartoe leidt, wat voor verwarring zorgt, vooral bij bezoekers met een cognitieve beperking of bij het gebruik van een schermlezer.

Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Bijvoorbeeld: ‘lees meer (over het project)’ of ‘lees meer (in onze blog)’.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina, onder “Contact”, staat blauwe tekst (#288FDF) op een blauwe achtergrond (#A9D3F4). De contrastratio is te laag: 2,2:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

strong-element in plaats van kop-element

Op deze pagina, onder “Contact”, zijn de volgende teksten onjuist opgemaakt met strong in plaats van met een juist koptag: "Martijn Ridder", "E-mailadres" en "Telefoonnummer".

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

Voortgang is niet vastgelegd in de code

Op deze pagina staat een tijdlijn onder “Tijdlijn”. Deze visuele weergave laat aan ziende bezoekers zien waar zij zich in het proces bevinden, maar deze informatie moet ook toegankelijk zijn voor bezoekers die een schermlezer gebruiken. Daarvoor moet de informatie over de voortgang in de code worden vastgelegd.

Oplossing:

Dat kun je bijvoorbeeld bereiken met een visueel verborgen tekst of een aria-label.

Link naar pagina: https://samenslimnaarzee.nl/idee/overzicht

Zoekknop heeft geen toegankelijke naam

Op deze pagina bevat de zoekbalk onder de kaart een knop met een vergrootglasicoon. Dit icoon heeft geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat deze knop doet.

Oplossing:

Geef een toegankelijke naam aan de knop. Dit kun je op verschillende manieren doen:

• alt-tekst: voeg dan een beschrijvende alt-tekst toe (bijvoorbeeld alt=”Zoeken”).
• Zichtbaar label: voeg een zichtbaar label naast de knop toe (bijv. "Zoeken”).
• aria-label: voeg met het aria-label-attribuut op het button-element een beschrijvend label toe.

Toetsenbordfocus is niet zichtbaar

Op deze pagina bevat de zoekbalk onder de kaart een knop met een vergrootglasicoon. De toetsenbordfocus is niet zichtbaar op deze knop.

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

Kop-element gebruikt voor tekst die geen kop is

Op deze pagina verschijnt de tekst "Nog geen resultaten" wanneer er geen zoekresultaten zijn. Deze tekst is geen kop, maar is onjuist opgemaakt met een h3-element om de lettergrootte te vergroten. Het kop-element (h3) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h2-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h2-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen. Op deze pagina staat een instructie hoe zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/ .

img-element heeft geen alt-attribuut

Op deze pagina staat een zoekbalk onder de kaart. Wanneer een bezoeker iets in de zoekbalk typt en een zoekopdracht uitvoert, verschijnt er een “X”-icoon. Dit icoon is toegevoegd met een img-element, maar het attribuut alt ontbreekt.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.

Onvoldoende linktekst in paginering

Op deze pagina missen de pagineringslinks voldoende context. Voor ziende bezoekers is het duidelijk dat "1", "2", "3" enzovoort paginanummers zijn, maar dit is niet duidelijk voor bezoekers met een visuele beperking of bij het gebruik van een schermlezer.

Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn.

Oplossing:

Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord "pagina”.

Huidige pagina in paginering is alleen visueel aangegeven, maar niet in de code

Op deze pagina geeft de paginering onder de zoekresultaten visueel aan welk paginanummer actief is, maar dit onderscheid is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker.

Oplossing:

Je maakt de informatie toegankelijk door:

• Verborgen tekst: voeg visueel verborgen tekst toe binnen de link van de huidige pagina die aangeeft dat dit de huidige pagina is. Bijvoorbeeld <span class=”sr-only”>Huidige pagina</span>.
• aria-current-attribuut: voeg aria-current=”page” toe aan het a-element van de link van de huidige pagina.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staan de pagineringslinks in grijs (#BEBEBE) op een witte achtergrond. De contrastratio is te laag: 1,9:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Link naar pagina: https://samenslimnaarzee.nl/achtergrondinformatie

Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt de tekst “Achtergrondinformatie” gedeeltelijk uit beeld.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://samenslimnaarzee.nl/maatregelen

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina, onder “Het voorgestelde maatregelenpakket bestaat uit:”, staan links met blauwe tekst (#288DDC) op een grijze achtergrond (#F1F1F1). De contrastratio is te laag: 3,1:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

strong-element in plaats van kop-element

Op deze pagina, in het onderdeel “Reacties op het maatregelenpakket”, zijn de volgende teksten onjuist opgemaakt met strong in plaats van met een juist koptag: "Provincie Noord-Holland", "Conny Vermeer", "Olga Landstra" en andere.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

Knoppen met dezelfde tekst hebben een andere functie

Op deze pagina staan meerdere knoppen met dezelfde zichtbare tekst: "Mee eens". Deze knoppen voeren echter verschillende functies uit.

Je kunt met deze knoppen een andere actie uitvoeren. Dit kan verwarrend zijn voor bezoekers met een schermlezer. Het is niet duidelijk welke actie elke knop uitvoert.

Oplossing:

Zorg dat de tekst past bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende knopteksten hebben.

Links met dezelfde tekst leiden naar verschillende bestemmingen.

Op deze pagina, onder “Reacties op het maatregelenpakket”, verschijnt de link met de tekst “Reageren” onder meerdere berichten in de discussiedraad. Elke link voert een andere actie uit, omdat bezoekers hiermee kunnen reageren op verschillende berichten, maar de linktekst is in alle gevallen hetzelfde.

Dit kan verwarrend zijn voor bezoekers, vooral voor wie hulpsoftware gebruikt, zoals een schermlezer, omdat niet duidelijk is op welk bericht wordt gereageerd. Voor ziende bezoekers is dit wel duidelijk door de visuele plaatsing van elke “Reageren”-link. Bezoekers die een schermlezer gebruiken, nemen deze visuele context niet waar en hebben daarom aanvullende programmatische informatie nodig om te begrijpen bij welk bericht de link hoort.

Oplossing:

Zorg dat links met dezelfde tekst naar dezelfde bestemming leiden. Als de bestemming of functie verschilt, moet de linktekst uniek en beschrijvend zijn om aan te geven op welk bericht de link betrekking heeft. Gebruik bijvoorbeeld beschrijvende linkteksten zoals "Reageer op bericht van Conny Vermeer | 12 november 2024 18:13", "Reageer op bericht van Gundolf Kollerics-Meyer | 15 november 2024 16:52" en vergelijkbare varianten, zodat bezoekers die een schermlezer gebruiken begrijpen op welk bericht de link van toepassing is.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina, onder “Reacties op het maatregelenpakket”, openen de knoppen "Mee eens" en "Reageren" een modaal dialoogvenster met de tekst "Login om verder te gaan". Dit dialoogvenster heeft geen juist ARIA-role en geen toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Link heeft geen toegankelijke naam

Op deze pagina, onder “Reacties op het maatregelenpakket”, openen de knoppen "Mee eens" en "Reageren" een modaal dialoogvenster met de tekst "Login om verder te gaan". In dit venster functioneert het “X”-icoon als een link, maar het tekstalternatief ontbreekt, waardoor de link niet toegankelijk is.

De afbeelding is dus interactief. Er is geen tekstalternatief. Daardoor heeft de link geen inhoud. De link heeft geen toegankelijke naam en het doel van deze link is niet duidelijk (dit zorgt ook voor afkeur op succescriterium 2.4.4 en 4.1.2).

Oplossing:

Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft.

Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je als volgt doen:

• aria-label gebruiken: voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming van de link.
• Verborgen tekst aan de link toevoegen: voeg beschrijvende tekst toe in het a-element, die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).

Link naar pagina: https://samenslimnaarzee.nl/thema

strong-element in plaats van kop-element

Op deze pagina zijn de teksten “Wat doen we niet:” onjuist opgemaakt met strong in plaats van met een juist kop-element.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

Link naar pagina: https://samenslimnaarzee.nl/nieuws/aangepaste-planning

strong-element is gebruikt voor opmaak

Op deze pagina, onder de kop "Aangepaste planning", is het strong-element onjuist gebruikt voor opmaakdoeleinden. Hele zinnen zijn in een strong-element geplaatst om ze vet te maken.

Het strong-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 (vetgedrukte tekst).

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Link naar pagina: https://samenslimnaarzee.nl/privacy

Geen nieuwe bevindingen.

Link naar pagina: https://samenslimnaarzee.nl/faq

Link is niet met het toetsenbord te bedienen

Op deze pagina, onder “Veelgestelde vragen”, zijn links die onderdelen met verborgen inhoud openen, zoals “Kan ik meerdere ideeën indienen?”, niet toegankelijk met het toetsenbord. Wanneer een bezoeker met het toetsenbord navigeert, wordt deze link overgeslagen. Alle interactieve elementen, dus ook links, moeten met alleen het toetsenbord te bedienen zijn.

Oplossing:

Zorg dat alle links met de Enter-, Return- of spatietoetsen kunnen worden bediend.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op interactieve elementen die zich bevinden in onderdelen met verborgen inhoud, terwijl deze onderdelen gesloten zijn. Hierdoor krijgen onzichtbare interactieve elementen de toetsenbordfocus.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

De accordion heeft geen koppen of de rol van kop is overschreven

Op deze pagina, onder “Veelgestelde vragen”, staan onderdelen met verborgen inhoud. De elementen die deze verborgen inhoud openen en sluiten, zijn niet opgemaakt als kop.

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.

Meer informatie over dit element staat op deze pagina: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn

Op deze pagina staan onderdelen met verborgen inhoud onder “Veelgestelde vragen”. De open of gesloten toestand is visueel duidelijk, maar wordt niet programmatisch doorgegeven aan schermlezers. Het pijl-icoon dat aangeeft dat er verborgen inhoud aanwezig is, heeft bovendien geen tekstalternatief.

Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo.

Oplossing:

Je lost dit op door een aria-expanded-attribuut toe te voegen aan de links waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

strong-element in plaats van kop-element

Op deze pagina, in het onderdeel met verborgen inhoud dat wordt geopend via “Ik weet niet zeker of mijn idee aan alle spelregels voldoet, wat moet ik doen?”, zijn de teksten "E-mailadres" en "Telefoonnummer" onjuist opgemaakt met strong in plaats van met een juist kop-element.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

Link naar pagina: https://samenslimnaarzee.nl/idee/262

De toegankelijkheidsproblemen die op deze pagina zijn vastgesteld, zijn hetzelfde als eerder beschreven voor dit type pagina's onder “elektrische deel-stepts die gebruikt kunnen worden vanaf het station langs de boulevard van Zandvoort en Bloemendaal”.

Link naar pagina: https://samenslimnaarzee.nl/idee/221

De toegankelijkheidsproblemen die op deze pagina zijn vastgesteld, zijn hetzelfde als eerder beschreven voor dit type pagina's onder “elektrische deel-stepts die gebruikt kunnen worden vanaf het station langs de boulevard van Zandvoort en Bloemendaal”.

Link naar pagina: https://samenslimnaarzee.nl/idee/220

De toegankelijkheidsproblemen die op deze pagina zijn vastgesteld, zijn hetzelfde als eerder beschreven voor dit type pagina's onder “elektrische deel-stepts die gebruikt kunnen worden vanaf het station langs de boulevard van Zandvoort en Bloemendaal”.

Link naar pagina: https://samenslimnaarzee.nl/idee/219

De toegankelijkheidsproblemen die op deze pagina zijn vastgesteld, zijn hetzelfde als eerder beschreven voor dit type pagina's onder “elektrische deel-stepts die gebruikt kunnen worden vanaf het station langs de boulevard van Zandvoort en Bloemendaal”.

Link naar pagina: https://samenslimnaarzee.nl/maatregelen

Link naar PDF: https://samenslimnaarzee.nl/uploads/attachments/cm3cz58p209ac0if6rordzi5v-eindrapportage-bereikbaarheid-kust-fase-3-definitief-241023.pdf

PDF-document heeft geen titel

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

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:

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.

Informatieve afbeelding is als achtergrondafbeelding geplaatst

In het PDF-document staat op pagina 1 een logo “Goudappel” dat is gemarkeerd 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.

Informatieve afbeeldingen hebben geen alt-tekst

In het PDF-document staan op pagina 1 de logo’s “Decisio” en “Democracy Agency” zonder tekstalternatief.

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alternatieve tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Ditzelfde probleem komt voor bij afbeeldingen op pagina’s 12, 15, 64 en andere.

Oplossing:

Voeg tekst alternatief toe aan deze informatieve afbeeldingen.

Informatieve afbeeldingen hebben automatisch gegenereerde beschrijvingen

In het PDF-document staan informatieve afbeeldingen die zijn toegevoegd met een Figure-tag en automatisch gegenereerde beschrijvingen hebben. Zie bijvoorbeeld de afbeelding op pagina 17 met de beschrijving “Afbeelding met tekst, kaart, Lettertype, schermopname Automatisch gegenereerde beschrijving”.

Deze tekst geeft geen duidelijke informatie over wat op de afbeelding staat. Hierdoor weten bezoekers die het document laten voorlezen niet wat op de afbeelding te zien is. Zij missen zo dus informatie.

Ditzelfde probleem komt voor bij afbeeldingen op pagina’s 21, 22, 38 en andere.

Oplossing:

Voeg beschrijvende alternatieve teksten toe aan deze informatieve afbeeldingen.

Er is een afbeelding die tekst bevat

In het PDF-document staan afbeeldingen met ingesloten tekst op pagina’s 15, 17 en 68.

Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Oplossing:

Zet de tekst die nu in de afbeelding staat als gewone tekst in het document.

Alleen kleur gebruikt in legenda bij grafiek en in tabel

In het PDF-document staat op pagina 12 een grafiek waarin kleur wordt gebruikt om informatie over te brengen. Zie de legenda en de balken in de grafiek. Ditzelfde geldt voor de grafieken op pagina’s 89 en 90.

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken. Ditzelfde probleem komt voor in de tabellen op pagina’s 54 en 74. In deze tabellen wordt kleur als enige middel gebruikt om informatie over te brengen, zoals of een effect positief, neutraal of negatief is, of of een kost laag of hoog is.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Kleurcontrast van kleine tekst is te laag

In het PDF-document staat op pagina 54 witte tekst zoals “Doelstellingen” op een grijze achtergrond (#BFBFBF). De contrastratio is te laag: 1,8:1.

Oplossing:

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

Kleurcontrast tussen lijnen of balken in grafiek is niet voldoende

In het PDF-document staan op pagina’s 89 en 90 grafieken. In deze grafieken heeft de grijze balk (#E7E6E7) op een witte achtergrond een contrastratio van 1,2:1.

Oplossing:

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

Inhoudsopgave is niet voorzien van de juiste tags

In het PDF-document is een inhoudsopgave aanwezig. De links naar de pagina’s maken echter geen gebruik van de Reference-tag. Deze tags zijn wel nodig: alleen dan kunnen schermlezers het document correct interpreteren. De juiste tags voor de inhoudsopgave zijn: TOC, TOCI, Reference, Link.

Oplossing:

Voeg de juiste tags toe voor de onderdelen van de inhoudsopgave.

Koppen zijn niet als kop gemarkeerd

In het PDF-document staan koppen die niet zijn opgemaakt als kop. Zie bijvoorbeeld “Aanleiding”, “Opbrengst participatie” en “Voorgestelde aanpak op hoofdlijnen” op pagina 5. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

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

Link naar pagina: https://samenslimnaarzee.nl/idee/217

Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina, onder de tekst "Trek de boulevard door tot aan de trappen van het station in de stijl van de nieuwe boulevard.", staat een lijst met 3 items, maar deze is niet correct opgemaakt als lijst.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/ .

Link naar pagina: https://samenslimnaarzee.nl/idee/218

Informatieve afbeelding is als achtergrond gebruikt, en er is geen tekstalternatief

Op deze pagina, onder “Status”, is een informatieve afbeelding toegevoegd als achtergrondafbeelding en er is geen tekstalternatief aanwezig.

Als je een afbeelding als achtergrond toevoegt aan een pagina, maak je de afbeelding ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door.

Hetzelfde probleem doet zich voor op andere pagina's in soortgelijke secties: https://samenslimnaarzee.nl/idee/262, https://samenslimnaarzee.nl/idee/221, https://samenslimnaarzee.nl/idee/220, en anderen.

Oplossing:

Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Je kunt de afbeelding ook via het img-element plaatsen en de informatie in de alternatieve tekst zetten.

Er staan twee koppen van hetzelfde niveau direct onder elkaar

Op deze pagina wordt een kop van niveau 4 direct gevolgd door een andere kop van hetzelfde niveau. Zie “Status” en “Deel dit voorstel”.

Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h3-element mag een h4-element komen of andere content, maar niet nog een keer een h3-element of een h2-element.

Ditzelfde probleem komt voor op andere pagina’s in vergelijkbare onderdelen: https://samenslimnaarzee.nl/idee/262, https://samenslimnaarzee.nl/idee/221, https://samenslimnaarzee.nl/idee/220, en anderen.

Oplossing:

Pas de tekst aan, zodat de kopniveaus de structuur van de tekst correct weergeven. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/ .

strong-element is gebruikt voor opmaak

Op deze pagina is het strong-element onjuist gebruikt voor opmaakdoeleinden bij de tekst “Door: Pieter See”. Het strong-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 (vetgedrukte tekst).

Ditzelfde probleem komt voor op andere pagina’s in vergelijkbare onderdelen: https://samenslimnaarzee.nl/idee/262, https://samenslimnaarzee.nl/idee/221, https://samenslimnaarzee.nl/idee/220, en anderen.

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Kop is niet gemarkeerd als koptekst

Op deze pagina is de tekst “Provincie Noord-Holland | 11 november 2024, 12:09” niet opgemaakt als kop. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

Ditzelfde probleem komt voor in vergelijkbare onderdelen op andere pagina’s, zoals https://samenslimnaarzee.nl/idee/262 met de tekst “Provincie Noord-Holland | 11 november 2024, 13:02”, https://samenslimnaarzee.nl/idee/221 met de tekst “Provincie Noord-Holland | 11 november 2024, 12:09”, https://samenslimnaarzee.nl/idee/220 met de tekst “Provincie Noord-Holland | 11 november 2024, 12:09” en andere pagina’s.

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/ .

strong-element in plaats van kop-element

Op deze pagina is de tekst "e-steps die te gebruiken zijn met de app van bijvoorbeeld Lime" onjuist opgemaakt met strong in plaats van met een juist kop-element.

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Ditzelfde probleem komt voor op andere pagina’s in vergelijkbare onderdelen, zoals https://samenslimnaarzee.nl/idee/262 met de tekst “Het creëren van eenrichtingsverkeer in een lus rond overveen zou het verkeer kunnen verspreiden en zo wordt het verkeer minder gekruisd”, https://samenslimnaarzee.nl/idee/221 met de tekst “Verwijder onnodige traptreden en egaliseer de verharding voor een betere bereikbaarheid minder validen”, https://samenslimnaarzee.nl/idee/219 met de tekst “Zet parkingstrams in waarmee mensen verder kunnen reizen vanaf het station en Parkeerterreinen” en andere pagina’s.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.

Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina, onder de tekst "e-steps die te gebruiken zijn met de app van bijvoorbeeld Lime", staat een lijst met 7 items, maar deze is niet correct opgemaakt als lijst.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/ .

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.