Audit digitale toegankelijkheid website lta.zuid-holland.nl

Uitkomst: Onvoldoende

Bevindingen:

Interactieve afbeeldingen hebben geen tekstalternatief

Impact: groot | Type: techniek

Wanneer de website https://lta.zuid-holland.nl/ op een klein scherm wordt bekeken (200% ingezoomd), verschijnen in het bovenste menu twee knoppen: inloggen en menu. De knoppen bestaan alleen uit iconen en hebben geen tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet het tekstalternatief van de afbeelding de functie van de knop beschrijven. Hetzelfde probleem komt voor bij de knop “x” wanneer het mobiele menu is geopend.

Oplossing: voeg een beschrijving toe via een title-attribuut bij een svg, een aria-label bij een button-element, of met tekst die visueel verborgen is maar toegankelijk voor schermlezers. Momenteel is een h4-element aanwezig met de juiste tekst, maar dit element is verborgen met display:none. Deze code verbergt elementen niet alleen van de pagina, maar ook voor hulpsoftware.

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Onvoldoende

Bevindingen:

Kop-element (h4) is niet betekenisvol gebruikt

Impact: medium | Type: techniek

Op alle pagina’s van de website https://lta.zuid-holland.nl/, bevatten de knop “Inloggen” in de header en de links “Provincie Zuid-Holland” en “Cookies & Privacy” in de footer h4-elementen die alleen gebruikt zijn voor opmaak. De kop-elementen zijn dus niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De teksten die als koppen zijn gemarkeerd, zijn geen echte koppen. Er staat namelijk geen inhoud onder. Maar door de h4-elementen krijgen de teksten wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, verwachten inhoud onder koppen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere tekst.

Oplossing: vervang het h4-element door een neutral element zoals een span. De gewenste stijl kun je met CSS toevoegen.

Relatie tussen foutmeldingen en invoervelden is niet in de code vastgelegd

Impact: medium | Type: techniek

Op pagina https://lta.zuid-holland.nl/login worden foutmeldingen weergegeven met de tekst “Dit veld is verplicht”. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet op tijd doorgeven aan de bezoeker.

Oplossing: dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Datatabel mist de juiste markering

Impact: medium | Type: content

Op pagina https://lta.zuid-holland.nl/categorie/cf690073-bab1-4c22-99c4-01e8e85d543a staat onder de kop “1. Verkenningen, onderzoeken en gebiedspraktijk” een datatabel waar de tabelmarkering ontbreekt. Daardoor kan een schermlezer de relatie tussen de verschillende cellen niet begrijpen. Hetzelfde probleem is met een vergelijkbare tabel op pagina https://lta.zuid-holland.nl/kwartaal/Q4%202025, https://lta.zuid-holland.nl/categorie/b5df02aa-d17b-4c19-b7cc-0beecd56b6a2 en andere soortgelijke pagina's. De schermlezer kan de relatie tussen kolomkoppen en datacellen niet goed aankondigen.

Oplossing: gebruik in deze tabel th-cellen in plaats van h4-koppen en td-cellen voor de gegevens. Je leest er meer over op https://www.w3.org/WAI/tutorials/tables/.

Niveau van koppen klopt niet

Impact: medium | Type: content

Op pagina https://lta.zuid-holland.nl/categorie/cf690073-bab1-4c22-99c4-01e8e85d543a staat onder de kop “1. Verkenningen, onderzoeken en gebiedspraktijk” een sectie die is opgebouwd uit uitklapelementen. De rijen van deze uitklapelementen zijn gemaakt met koppen (h3 en h4) waarin knoppen zijn geplaatst. Het gebruik van een h3-element waarin een knop staat is geschikt voor een uitklapkop, maar de extra h4-elementen binnen de knop zijn niet juist. Ze worden alleen gebruikt voor de visuele opmaak en geven geen echte structuur of hiërarchie aan. Daardoor wordt de kopstructuur verwarrend voor hulpsoftware en is de inhoud semantisch onjuist. Hetzelfde probleem is met een vergelijkbare tabel op pagina https://lta.zuid-holland.nl/kwartaal/Q4%202025, https://lta.zuid-holland.nl/categorie/b5df02aa-d17b-4c19-b7cc-0beecd56b6a2 en alle andere pagina's met zulke tabellen.

Oplossing: Omdat de inhoud tabulaire gegevens weergeeft, moet de juiste tabelmarkering worden gebruikt met tabelkoppen (th) en gegevenscellen (td). Verwijder de onnodige h4-elementen. Je kunt dit issue zien met een Chrome extentie Headingsmap. Maak de accordions open en zet de extentie aan. Lees meer over deze tool op https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Autocomplete-attribuut ontbreekt

Impact: medium | Type: techniek

Op pagina https://lta.zuid-holland.nl/login ontbreekt bij het formulier met invoervelden voor persoonlijke gegevens (e-mailadres, wachtwoord) het attribuut autocomplete. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres, wachtwoord of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing: gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Informatie verdwijnt bij inzoomen

Impact: groot | Type: techniek

Op pagina https://lta.zuid-holland.nl/categorie/cf690073-bab1-4c22-99c4-01e8e85d543a staat een tabel met drie kolommen. Op desktop worden alle kolommen correct weergegeven. Bij het inzoomen verdwijnen de laatste twee kolommen (“Status” en “Aanbieden PS”). De periode onder “Aanbieden PS” wordt in het uitklapgedeelte geplaatst. De status “Bestand” of “Nieuw” verdwijnt. Daardoor hebben bezoekers die sterk inzoomen geen toegang tot deze status.

Oplossing: voeg de status ook aan het uiklapgedeelte toe.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Skiplink ontbreekt

Impact: groot | Type: techniek

Op alle pagina’s van de website https://lta.zuid-holland.nl/ ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan.

Oplossing: een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Focusvolgorde van het mobiele menu klopt niet

Impact: groot | Type: techniek

Wanneer de website https://lta.zuid-holland.nl/ op een klein scherm wordt bekeken verschijnt bovenaan de pagina een menuknop. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verplaatst zich dan naar de onderliggende pagina terwijl het menu geopend blijft.

Oplossing: bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat. Zorg ervoor dat de focus in het menu blijft totdat de bezoeker dit sluit door op de sluitknop te klikken of de ESC-toets in te drukken. Je kunt het menu ook automatisch sluiten als de focus het menu verlaat.

Focus komt terecht op een onzichtbaar element

Impact: groot | Type: techniek

Wanneer de pagina https://lta.zuid-holland.nl/login op een klein scherm wordt bekeken, komt de toetsenbordfocus na de inlogknop in de header op een onzichtbaar interactief element terecht. 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Geen tweede manier om een pagina te vinden

Impact: groot | Type: techniek

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.

Oplossing: dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Stembediening niet mogelijk

Impact: groot | Type: techniek

Op alle pagina’s van de website https://lta.zuid-holland.nl/ staat in de header een select-element met het zichtbare label “Versie”, maar de toegankelijke naam ervan is leeg. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren.

Oplossing: zorg dus dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan. Dat kan via een aria-label.

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Foutmeldingen zijn niet specifiek genoeg

Impact: groot | Type: techniek

Op pagina https://lta.zuid-holland.nl/login, wordt in het formulier bij fouten de tekst “Dit veld is verplicht” weergegeven. Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in.

Oplossing: een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld". Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Interactief element heeft geen toegankelijke naam

Impact: groot | Type: techniek

Op alle pagina’s van de website https://lta.zuid-holland.nl/ staat in de header een select-element (keuzelijst) met het label “Versie”. De toegankelijke naam ontbreekt. Hierdoor is het element niet toegankelijk.

Oplossing: geef het select-element een toegankelijke naam. Dat kan via een aria-label.

Interactief element heeft geen toegankelijke naam

Impact: groot | Type: techniek

Wanneer de website https://lta.zuid-holland.nl/ op een klein scherm wordt bekeken, verschijnen in het bovenste menu twee knoppen in de vorm van iconen: inloggen en menu. De knoppen hebben geen toegankelijke namen. Als gevolg daarvan begrijpen bezoekers die een schermlezer gebruiken niet waarvoor deze knoppen bedoeld zijn en wat hun functies zijn. Hetzelfde probleem komt voor bij de knop “x” wanneer het mobiele menu is geopend.

Oplossing: voorzie deze knoppen van toegankelijke namen, bijvoorbeeld met een aria-label of een verborgen tekst. De verborgen tekst is nu aanwezig, maar is verborgen voor hulpsoftware met display:none. Dit is niet de juiste manier om elementen te verbergen. Gebruik liever CSS clip methode.

Toestand van het menu is onbekend voor hulpsoftware

Impact: groot | Type: techniek

Op een klein scherm verschijnt een menuknop waarmee het mobiele navigatiemenu wordt geopend. De knop geeft geen informatie over de toestand van het menu (geopend of gesloten) aan bezoekers die het niet kunnen zien, zoals gebruikers van schermlezers.

Oplossing: dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de menuknop. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is.

Uitkomst: Voldoende