Audit digitale toegankelijkheid van website geoservices.zuid-holland.nl

#1 - Herhalende content niet te omzeilen

Op alle pagina's van de website ontbreekt een manier om herhalende content over te slaan. Er is geen skiplink, geen semantische landmarks en geen koppenstructuur die als alternatief kan dienen.

Daardoor moeten bezoekers die met het toetsenbord of een schermlezer navigeren bij elke pagina dezelfde menu-onderdelen doorlopen voordat zij bij de hoofdinhoud komen.

User story

Als bezoeker die navigeert met het toetsenbord, een schermlezer, spraakbesturing of een switch, heb ik op elke pagina een manier nodig om de herhalende navigatie over te slaan, bijvoorbeeld een werkende skiplink. Nu moet ik op elke pagina door dezelfde menu-items tabben voordat ik bij de inhoud kom.

Hoe te testen

Tab vanuit de adresbalk een keer de pagina in. Een skiplink ("Ga naar hoofdinhoud") hoort het eerste focusbare element te zijn, zichtbaar te worden zodra hij focus krijgt en bij activeren de focus naar de hoofdinhoud te verplaatsen. Landmarks en een goede koppenstructuur zijn aanvullend.

Oplossing

Zorg ervoor dat bezoekers vaste onderdelen van de pagina kunnen overslaan en direct naar de hoofdinhoud kunnen gaan. Dit kan bijvoorbeeld door:

• een skiplink die bij gebruik de toetsenbordfocus naar de hoofdinhoud verplaatst;
• het duidelijk afbakenen van paginadelen, zoals navigatie en hoofdinhoud, met landmarks;
• een consistente en correcte koppenstructuur die op elke pagina wordt toegepast.

Een skiplink moet de eerste link op de pagina zijn. Deze mag standaard verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt.

#2 - Bij 400% inzoomen verschijnt een horizontale schuifbalk

Bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom verschijnt op de website een horizontale schuifbalk. Een deel van de links is dan niet meer zichtbaar, bijvoorbeeld "Login".

Horizontaal scrollen mag niet nodig zijn, ook niet wanneer de viewport is ingesteld op 320 CSS-pixels breed (voor verticale content) of 256 CSS-pixels hoog (voor horizontale content). De inhoud moet binnen de breedte van het scherm passen. Scrollen in twee richtingen mag alleen als dat echt nodig is voor de betekenis of het gebruik, zoals bij tabellen, betekenisvolle afbeeldingen en kaarten.

User story

Als bezoeker met een visuele beperking zoom ik in tot 400% om de tekst te kunnen lezen. Nu verschijnt er een horizontale schuifbalk en moet ik op elke regel heen en weer scrollen. Ik heb nodig dat de tekst automatisch binnen de breedte van mijn scherm past.

Hoe te testen

Zet de browser op 320 CSS-pixels breed (of 1280px bij 400% zoom) en scroll verticaal. Om de inhoud te lezen mag horizontaal scrollen niet nodig zijn, behalve bij echte tweedimensionale content zoals tabellen, kaarten en code. Let op banners, headers met een vaste breedte en lange URL's.

Oplossing

Controleer of horizontaal scrollen echt nodig is. Is dat niet zo, zorg er dan voor dat horizontaal scrollen niet mogelijk is wanneer er wordt ingezoomd, zodat de inhoud zich aanpast aan de schermbreedte.

#3 - Tekst die als kop fungeert is niet als kop opgemaakt

Op alle pagina's is de tekst "ArcGIS REST Services Directory" niet als kop opgemaakt. Wanneer tekst als kop fungeert maar de juiste opmaak in de code mist, verliest die zijn betekenis voor bezoekers die hulpsoftware zoals een schermlezer gebruiken. Koppen zijn belangrijk om de structuur van een pagina te begrijpen en er doorheen te navigeren.

User story

Als bezoeker die de website met een schermlezer leest, navigeer ik graag van kop naar kop om snel een overzicht te krijgen. Nu mis ik koppen die alleen visueel zijn opgemaakt. Ik heb nodig dat elke zichtbare kop ook in de code een kop is, zodat mijn schermlezer hem als kop aankondigt.

Hoe te testen

Snel controleren met onze tool: gebruik de koppenstructuur-checker. Plak de URL van de pagina en bekijk de lijst met koppen.

1. Loop alle teksten op de pagina langs die er visueel als kop uitzien (groter, vetter, een afwijkende kleur of een nadrukkelijke plek).
2. Staan ze allemaal in de lijst van de koppenstructuur-checker? Zo niet, dan zijn ze niet opgemaakt met h1-h6.
3. Controleer met een schermlezer: navigeer met H (NVDA, JAWS) of de rotor (VoiceOver). Elke visuele kop moet als kop worden aangekondigd.

Oplossing

Maak deze tekst op met het juiste kop-element (h1 tot en met h6), passend bij de rol en de plek in de hiërarchie van de inhoud.

#4 - Anderstalige content heeft geen taalcode

Op alle pagina's staat tekst in een andere taal (Nederlands) zonder taalcode (nl), bijvoorbeeld in de broodkruimels: "Gebiedsprofielen" en andere termen. Hierdoor leest een schermlezer deze tekst voor met de uitspraakregels van de hoofdtaal, waardoor de woorden verkeerd worden uitgesproken.

User story

Als bezoeker die de pagina laat voorlezen door een schermlezer, kom ik woorden tegen in een andere taal dan de hoofdtaal van de pagina. Nu worden die met de verkeerde klanken uitgesproken. Ik heb nodig dat elke taal met de juiste uitspraak wordt voorgelezen.

Hoe te testen

Zoek passages in een andere taal dan de hoofdtaal van de pagina: citaten, anderstalige namen, Nederlandse UI-labels op een Engelse pagina. Elke passage heeft een eigen lang-attribuut nodig. Luister mee met een schermlezer: de uitspraak moet correct meeschakelen.

Oplossing

Voeg een lang-attribuut met de juiste taalcode toe aan het element met de anderstalige tekst. Voeg bijvoorbeeld bij Nederlandse tekst lang="nl" toe aan het betreffende element.

#5 - Teksten die als kop fungeren zijn niet als kop opgemaakt

Op deze pagina zijn de volgende teksten niet als kop opgemaakt: "Folders:", "Services:", "Child Resources" en "Supported Interfaces:". Wanneer tekst als kop fungeert maar de juiste opmaak in de code mist, verliest die zijn betekenis voor bezoekers die hulpsoftware gebruiken.

Hetzelfde probleem komt voor op onder andere de pagina's https://geoservices.zuid-holland.nl/arcgis/rest/info, https://geoservices.zuid-holland.nl/arcgis/rest/services/Anders en https://geoservices.zuid-holland.nl/arcgis/rest/services/Anders/Europese_Projectie_EPSG3035/MapServer.

User story

Als bezoeker die de website met een schermlezer leest, navigeer ik van kop naar kop om de structuur van een pagina te begrijpen. Nu mis ik teksten die er als kop uitzien maar dat in de code niet zijn. Ik heb nodig dat alle zichtbare koppen ook als kop worden aangekondigd.

Hoe te testen

Snel controleren met onze tool: gebruik de koppenstructuur-checker. Plak de URL van de pagina en bekijk de lijst met koppen.

1. Loop alle teksten op de pagina langs die er visueel als kop uitzien (groter, vetter, een afwijkende kleur of een nadrukkelijke plek).
2. Staan ze allemaal in de lijst van de koppenstructuur-checker? Zo niet, dan zijn ze niet opgemaakt met h1-h6.
3. Controleer met een schermlezer: navigeer met H (NVDA, JAWS) of de rotor (VoiceOver). Elke visuele kop moet als kop worden aangekondigd.

Oplossing

Maak deze teksten op met het juiste kop-element (h1 tot en met h6), passend bij hun rol en de hiërarchie van de inhoud.

#6 - Lege lijst zonder lijstitems

Onder de tekst "Services:" staat een ul-element zonder lijstitems. Een lege lijst geeft geen betekenisvolle structuur en kan door hulpsoftware worden aangekondigd als een lijst zonder items, wat verwarrend is.

Hetzelfde probleem komt voor op onder andere de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Anders/Europese_Projectie_EPSG3035/MapServer onder de teksten "Initial Extent:", "Full Extent:" en "Document Info:".

User story

Als bezoeker die een schermlezer gebruikt, heb ik nodig dat lijsten ook echt lijstitems bevatten, zodat ik de structuur van de inhoud begrijp en niet in de war raak door een lege lijst.

Hoe te testen

Loop de pagina door met DevTools en een schermlezer. Visuele koppen, lijsten, tabellen, fieldsets en actieve toestanden moeten allemaal in de HTML staan, niet alleen als opgemaakte tekst. Gebruik Axe voor een snelle automatische scan en controleer daarna of de structuur klopt als een schermlezer de pagina lineair voorleest. Voor datatabellen inspecteert onze tabel-checker de opmaak (th, scope, headers/id) in een overzicht.

Oplossing

Verwijder het lege ul-element, of zorg ervoor dat het lijstitems (li) bevat als er een lijst is bedoeld.

#7 - Paginatitel beschrijft de inhoud niet

De titel van deze pagina, "Folder: /", beschrijft de inhoud van de pagina niet goed. Het title-element moet een duidelijke, korte samenvatting van het onderwerp van de pagina geven, bij voorkeur gevolgd door de naam van de organisatie. Zo begrijpen bezoekers waar de pagina over gaat en kunnen ze makkelijker schakelen tussen pagina's en browsertabbladen.

User story

Als bezoeker die de website met een schermlezer leest, schakel ik tussen tabbladen en hoor ik alleen een vage titel. Ik kan dan niet bepalen welke pagina open is. Ik heb nodig dat de titel duidelijk beschrijft waar de pagina over gaat.

Hoe te testen

Controleer de titel van elke pagina in het browsertabblad. De titel moet het onderwerp of doel van de pagina beschrijven en uniek zijn binnen de site.

Oplossing

Pas het title-element aan zodat het de inhoud van de pagina duidelijk en beschrijvend weergeeft.

#8 - Autocomplete-attribuut ontbreekt

Op deze pagina staat een formulier met invoervelden voor persoonlijke gegevens (bijvoorbeeld User Name en Password) zonder autocomplete-attribuut. Wanneer een formulier persoonlijke gegevens verzamelt, hoort bij deze velden het juiste autocomplete-attribuut te staan. Daarmee kunnen browsers en hulpsoftware bezoekers helpen, bijvoorbeeld door velden automatisch in te vullen.

User story

Als bezoeker met beperkte motoriek of met tremoren vul ik een formulier in met mijn naam en gegevens. Nu kan mijn browser de velden niet automatisch invullen. Ik heb nodig dat persoonlijke velden automatisch ingevuld kunnen worden door mijn browser of hulpsoftware.

Hoe te testen

Inspecteer bij elk invoerveld dat persoonlijke gegevens verzamelt (naam, adres, telefoon, e-mail, wachtwoord) het autocomplete-attribuut. De waarde moet overeenkomen met de WCAG-lijst. Laat de browser het formulier vervolgens automatisch invullen en controleer of de juiste waarde in het juiste veld terechtkomt.

Oplossing

Voeg aan deze invoervelden het juiste autocomplete-attribuut toe. Meer informatie over het gebruik en de juiste waarden vind je op https://www.w3.org/TR/WCAG21/#input-purposes.

#9 - Formulierfouten worden niet aangegeven

Wanneer het formulier met fouten of met lege verplichte velden wordt verzonden, wordt het niet verstuurd, maar er verschijnt geen foutmelding of andere aanwijzing over wat er mis is. Bezoekers begrijpen daardoor niet dat er een fout is opgetreden of welk veld ze moeten herstellen.

User story

Als bezoeker die een formulier verzendt, heb ik duidelijke foutmeldingen nodig die uitleggen wat er mis is en welke velden ik moet herstellen, zodat ik de fout kan oplossen en het formulier alsnog kan versturen.

Hoe te testen

Verzend het formulier met lege velden en met bewust onjuiste gegevens (een ongeldig e-mailadres, een te kort wachtwoord, een verkeerd datumformaat) en bekijk de reactie. De foutmelding moet in tekst staan (niet alleen een rode rand), het bijbehorende veld benoemen en in de code aan dat veld gekoppeld zijn, bijvoorbeeld via aria-describedby.

Oplossing

Toon een duidelijke foutmelding in tekst zodra er een fout wordt gevonden. De melding moet aangeven welk veld de fout veroorzaakt en wat er moet worden hersteld.

#10 - Koppenniveaus worden niet correct gebruikt

Op deze pagina wordt een kop van niveau 2 direct gevolgd door nog een kop van hetzelfde niveau. Zie "All Layers and Tables (Anders/ArcGIS_Server_Test)" en "Layers:". Dat wijst op een onjuiste koppenstructuur. Koppen horen een logische hiërarchie te volgen: een kop hoort niet direct gevolgd te worden door een kop van hetzelfde niveau zonder tussenliggende inhoud.

User story

Als bezoeker die de website met een schermlezer leest, navigeer ik door de koppen. Nu staan er twee koppen van hetzelfde niveau direct achter elkaar zonder inhoud ertussen, waardoor ik denk dat er content ontbreekt. Ik heb nodig dat elke kop zijn eigen stuk inhoud aankondigt.

Hoe te testen

1. Gebruik de koppenstructuur-checker en bekijk de hiërarchie van de koppen op de pagina. De lijst toont het niveau van elke kop (h1, h2, h3...).
2. Loop de lijst door: staan er twee koppen van hetzelfde niveau direct achter elkaar zonder inhoud ertussen? Dan wijst dat op een onjuiste koppenstructuur.
3. Controleer met een schermlezer: navigeer met H (NVDA, JAWS) of de rotor (VoiceOver). De volgorde van de aangekondigde niveaus moet logisch zijn, waarbij elke kop zijn eigen sectie inleidt.

Oplossing

Zorg ervoor dat koppen logisch genest zijn en de structuur van de inhoud weergeven. Laat een h2 bijvoorbeeld volgen door een h3 of door inhoud, niet door nog een h2.

#11 - Niet-lijstinhoud is als lijst opgemaakt

Onder de kop "Layers:" is alle inhoud als lijst opgemaakt, terwijl het geen echte lijst is. Lijstopmaak voor niet-lijstinhoud geeft een onjuiste structuur en kan ertoe leiden dat hulpsoftware misleidende lijstinformatie aankondigt.

Hetzelfde probleem komt voor op de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Water/Water_drinkwater/MapServer/12 bij de afbeeldingen onder de tekst "Drawing Info:".

User story

Als bezoeker die een schermlezer gebruikt, heb ik nodig dat inhoud de juiste structuur in de code heeft, zodat ik begrijp hoe de informatie is geordend en niet in de war raak door onterechte lijstmeldingen.

Hoe te testen

Loop de pagina door met DevTools en een schermlezer. Visuele koppen, lijsten en tabellen moeten allemaal in de HTML staan, niet alleen als opgemaakte tekst. Gebruik Axe voor een snelle automatische scan en controleer daarna of de structuur klopt als een schermlezer de pagina lineair voorleest.

Oplossing

Gebruik lijstopmaak (ul, ol, li) alleen voor echte lijsten van bij elkaar horende items. Vervang de huidige structuur door semantische elementen die passen bij de visuele en logische betekenis van de inhoud.

#12 - Invoerveld heeft geen toegankelijke naam

Op deze pagina heeft het invoerveld "Historic Moment:" geen toegankelijke naam. Bezoekers die blind of slechtziend zijn en een schermlezer gebruiken, kunnen daardoor niet vaststellen waar het veld voor dient. Elk invoerveld moet een toegankelijke naam hebben die de functie duidelijk beschrijft. Dit raakt ook succescriterium 2.5.3, omdat de zichtbare tekst niet in de toegankelijke naam is opgenomen.

Hetzelfde probleem komt voor op de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Wonen/Wonen/MapServer/2/queryAttachments bij de invoervelden "Historic Moment:" en "Keywords:".

User story

Als bezoeker die een schermlezer gebruikt, vul ik een formulier in en hoor ik alleen "bewerk tekst" zonder uitleg. Daarnaast gebruik ik soms spraakbesturing: als ik het zichtbare label uitspreek, reageert het veld niet. Ik heb nodig dat elk veld een duidelijke naam heeft die overeenkomt met het zichtbare label, zodat ik weet wat ik moet invullen en het veld met mijn stem kan bedienen.

Hoe te testen

Gebruik bij elk interactief element (link, knop, invoerveld, custom widget) het toegankelijkheidspaneel van DevTools en een schermlezer. Elk element moet duidelijk maken: wat het is (role), zijn naam, zijn huidige toestand (uitgeklapt, geselecteerd, aangevinkt) en waar relevant zijn waarde. Geef de voorkeur aan native HTML boven custom ARIA.

Oplossing

Koppel het invoerveld aan een label-element, zodat het veld een toegankelijke naam krijgt die overeenkomt met het zichtbare label.

#13 - Groepslabels zijn niet aan de groep gekoppeld

Er zijn groepen radioknoppen ("True" en "False"). Elke groep heeft een groepslabel ("Background Transparent:" en "Return Visible Only:"), maar deze labels zijn niet in de code aan de bijbehorende groep gekoppeld. Daardoor weten schermlezergebruikers niet bij welke groep de radioknoppen horen.

Hetzelfde probleem komt voor op de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Wonen/Wonen/MapServer/2/queryAttachments.

User story

Als bezoeker die een schermlezer gebruikt, vul ik een formulier in en hoor ik niet bij welke groep de radioknoppen horen. Ik heb nodig dat mijn schermlezer voor elke radioknop de naam van de groep aankondigt.

Hoe te testen

Navigeer met een schermlezer naar de radioknoppen en controleer of het groepslabel wordt aangekondigd zodra je de groep binnenkomt. Controleer met DevTools of de radioknoppen in de code aan hun zichtbare groepslabel gekoppeld zijn, bijvoorbeeld via een fieldset- en legend-element.

Oplossing

Koppel de groepslabels in de code aan de bijbehorende groep, bijvoorbeeld met een fieldset- en legend-element of met aria-labelledby.

#14 - Tekstcontrast is lager dan 4,5:1

Bij het verzenden van een leeg formulier verschijnt de foutmelding "Invalid 'size'" in rood (#FF6666) op een witte achtergrond. Het contrast is 2,9:1. Normale tekst (kleiner dan 18pt, of kleiner dan 14pt vet) heeft een contrast van minimaal 4,5:1 nodig om leesbaar te zijn. Onvoldoende contrast maakt tekst lastig of onmogelijk leesbaar voor bezoekers met een visuele beperking of kleurzwakte.

Hetzelfde probleem komt voor op de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Wonen/Wonen/MapServer/2/queryAttachments bij de tekst "This layer/table is NOT attachments enabled".

User story

Als bezoeker met een visuele beperking lees ik een pagina en kan ik tekst met te weinig contrast niet onderscheiden van de achtergrond. Ik heb nodig dat tekst altijd duidelijk afsteekt tegen zijn achtergrond.

Hoe te testen

Gebruik een contrastchecker zoals axe DevTools, de Colour Contrast Analyser of Stark om het contrast tussen de tekst en de achtergrond te meten. Test de tekst op de normale weergavegrootte en het normale gewicht. Uitgeschakelde elementen vallen buiten deze eis.

Oplossing

Pas de tekstkleur of de achtergrondkleur aan zodat het contrast minimaal 4,5:1 is. Controleer dit met een contrastchecker zoals de Colour Contrast Analyser.

#15 - Foutmelding geeft geen suggestie om de fout te herstellen

Deze pagina bevat een formulier. Bij het verzenden van een leeg formulier verschijnt de foutmelding "Invalid 'size'". Een foutmelding hoort niet alleen de fout te benoemen, maar ook uit te leggen hoe je die oplost. In plaats van alleen "Invalid 'size'" hoort de melding aan te geven welk veld de fout veroorzaakt en wat er wordt verwacht.

Hetzelfde probleem komt voor op de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Wonen/Wonen/MapServer/2/queryAttachments bij de foutmelding "This layer/table is NOT attachments enabled".

User story

Als bezoeker die langzamer leest door een cognitieve beperking, slechtziendheid of dyslexie, maak ik een fout in een formulier en zie ik een foutmelding. Nu weet ik niet wat ik moet herstellen. Ik heb nodig dat de melding uitlegt wat het veld verwacht, bijvoorbeeld "Vul je volledige naam in".

Hoe te testen

Verzend het formulier met lege velden of met bewust onjuiste gegevens en lees de foutmeldingen. Ze moeten duidelijk maken hoe je de fout herstelt: geef een verwacht formaat, een voorbeeldwaarde of een lijst met geldige opties. Een algemene tekst als "dit veld is verplicht" is niet genoeg. Wachtwoordregels moeten zichtbaar zijn voordat je verzendt.

Oplossing

Geef in de foutmeldingen concrete aanwijzingen waarmee bezoekers hun invoer kunnen herstellen, bijvoorbeeld een verwacht formaat, een voorbeeldwaarde of een lijst met geldige opties.

#16 - Label is aan het verkeerde invoerveld gekoppeld

Deze pagina bevat een formulier. Het label-element met "Keywords:" is niet aan het bijbehorende invoerveld gekoppeld. De for-waarde op het label verwijst naar de id van een ander invoerveld, "Size:" (<label for="size">Keywords:</label>).

Als een label-element wordt gebruikt, moet het in de code aan het bijbehorende invoerveld gekoppeld zijn. Dat doe je met het for-attribuut op het label, dat verwijst naar het id van het invoerveld. Zo horen schermlezergebruikers meteen waar het veld voor dient als ze ernaartoe navigeren.

User story

Als bezoeker die een schermlezer gebruikt, ga ik naar een formulierveld en hoor ik soms het label van een ander veld, of helemaal geen label. Ik heb nodig dat mijn schermlezer bij elk veld het juiste label aankondigt.

Hoe te testen

Inspecteer de formuliervelden met DevTools en controleer of elk zichtbaar label aan het bijbehorende invoerveld gekoppeld is via overeenkomende for- en id-attributen. Controleer met een schermlezer of het juiste label wordt aangekondigd zodra een formulierveld focus krijgt.

Oplossing

Zorg ervoor dat het for-attribuut van elk label verwijst naar het id van het bijbehorende invoerveld.

#17 - Informatieve afbeelding mist een betekenisvol tekstalternatief

Op deze pagina staan onder "Drawing Info:" informatieve afbeeldingen met steeds hetzelfde tekstalternatief: "Picture Symbol". Dat beschrijft de afbeelding niet en is niet uniek. Informatieve afbeeldingen hebben een betekenisvol tekstalternatief nodig dat de kerninformatie van de afbeelding kort en duidelijk weergeeft.

User story

Als bezoeker die een schermlezer gebruikt, kom ik een afbeelding tegen en hoor ik geen betekenisvolle beschrijving van wat erop staat. Ik heb nodig dat de schermlezer mij vertelt welke informatie de afbeelding overbrengt.

Hoe te testen

Inspecteer de afbeelding in de broncode. Controleer of er een alt-attribuut aanwezig is en of de tekst de inhoud of functie van de afbeelding overbrengt. Let op: een ontbrekend alt-attribuut is altijd een fout. Luister met een schermlezer of de afbeelding betekenisvol wordt aangekondigd, niet als een bestandsnaam of alleen als "afbeelding".

Oplossing

Zorg ervoor dat het tekstalternatief beschrijft wat er op de afbeelding staat en dat het uniek is. Dat is belangrijk, want elk label heeft een eigen symbool dat ernaar verwijst.