Audit digitale toegankelijkheid van website amersfoort.dataplatform.nl

#1 - Informatieve iconen in de header zijn verborgen voor schermlezers

In de header staan informatieve iconen van een huis en een wereldbol. Deze iconen zijn verborgen voor schermlezers met aria-hidden="true" en hebben geen tekstalternatief. Schermlezers negeren de inhoud met het attribuut aria-hidden="true". Daardoor is deze content niet beschikbaar voor bezoekers die een schermlezer gebruiken.

Oplossing:

Verwijder het attribuut aria-hidden="true" en voeg een tekstueel alternatief toe, zodat dezelfde content toegankelijk is voor alle bezoekers.

#2 - Actieve link in het hoofdmenu is niet in de code aangeduid

In het hoofdmenu in de header heeft de actieve link naar de huidige pagina een andere visuele weergave. Deze aanduiding staat niet in de code. Daardoor is deze aanduiding niet toegankelijk voor bezoekers die een schermlezer gebruiken.

Oplossing:

Zorg voor een andere manier om deze aanduiding over te brengen, zodat alle bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="true" toe aan de actieve link. Andere opties zijn een h1-kop met dezelfde tekst als het menu-item of het gebruik van de paginatitel (title).

#3 - Actieve link in het hoofdmenu is alleen door kleur te onderscheiden

In het hoofdmenu in de header heeft de actieve link naar de huidige pagina een andere achtergrondkleur. Dit kan een probleem zijn voor bezoekers met kleurenblindheid of een visuele beperking. Zij kunnen de kleuren mogelijk niet onderscheiden en zien daardoor niet welke link actief is.

Oplossing:

Zorg ervoor dat actieve links ook op een andere manier herkenbaar zijn, bijvoorbeeld door onderstreping of vetgedrukte tekst.

#4 - Witte tekst op oranje achtergrond in de header heeft onvoldoende contrast

In de header staan witte links "Data" en "Thema's" op een oranje achtergrond (#F29400). De contrastverhouding is onvoldoende: 2,3:1. Deze tekst is kleiner dan 24px en niet vetgedrukt. Daarom moet het contrast minimaal 4,5:1 zijn. Dit probleem geldt ook voor de hover- en focus-toestanden van deze links.

Oplossing:

Pas de kleuren aan zodat de contrastverhouding minimaal 4,5:1 is voor kleine tekst.

#5 - Oranje links op een witte achtergrond hebben onvoldoende contrast

Op de website staan oranje links (#F29400) op een witte achtergrond (#FCFCFC). De contrastverhouding is te laag: 2,3:1. Voor een kleine tekst is een minimaal contrast van 4,5:1 vereist.

Oplossing:

Gebruik een donkerdere kleur voor de links, zodat de contrastverhouding minimaal 4,5:1 is.

#6 - Witte iconen op oranje achtergrond in de header hebben onvoldoende contrast

In de header staan witte iconen van een huis en een wereldbol op een oranje (#F29400) achtergrond. De contrastverhouding is 2,3:1. Voor interactieve elementen is minimaal 3,0:1 vereist. Dit probleem geldt ook voor het vergrootglas-icoon naast het zoekveld en het menu-icoon op kleine schermen.

Oplossing:

Pas de kleuren aan zodat de contrastverhouding minimaal 3,0:1 is.

#7 - Focusindicator in de header heeft onvoldoende contrast

In de header verandert bij toetsenbordfocus de achtergrond van menu-opties en verschijnt een grijze gestreepte focusrand. Zowel de achtergrondverandering als de focusrand hebben onvoldoende contrast. De donkere oranje achtergrond (#D58200) heeft een contrastverhouding van 1,3:1. De grijze focusrand (#D58200) heeft een contrastverhouding van 1,7:1 tegen de oranje (#F29400) achtergrond. Het vereiste minimum is 3,0:1.

Oplossing:

Gebruik een kleurcombinatie met voldoende contrast voor de focusindicator, minimaal 3,0:1.

#8 - Knop "Cookie beleid" is niet toegankelijk met het toetsenbord

Onderaan de pagina staat de knop "Cookie beleid". Deze knop is niet toegankelijk met het toetsenbord. Alle functionaliteit van de website moet ook toegankelijk zijn voor bezoekers die uitsluitend het toetsenbord gebruiken.

Oplossing:

Zorg ervoor dat de knop "Cookie beleid" bereikbaar en activeerbaar is met het toetsenbord.

#9 - Er is geen skiplink aanwezig

Op alle pagina's ontbreekt een skiplink. Er moet een mogelijkheid zijn om herhalende onderdelen van de pagina over te slaan, zoals het navigatiemenu. Een skiplink moet de eerste link op de pagina zijn. De link mag verborgen zijn, maar moet zichtbaar worden zodra deze focus krijgt.

Oplossing:

Voeg een skiplink toe waarmee herhalende onderdelen van de pagina kunnen worden overgeslagen.

#10 - Alle pagina's hebben dezelfde paginatitel

Op alle pagina's staat in het title-element dezelfde tekst: "Dataplatform Amersfoort". Elke pagina moet een unieke paginatitel hebben die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Wanneer meerdere pagina's dezelfde titel hebben, kan dit verwarrend zijn voor de bezoeker.

Oplossing:

Zorg ervoor dat elke pagina een unieke en beschrijvende titel in het title-element heeft.

#11 - Dubbele focusstops in het hoofdmenu

De toetsenbordfocus komt in het hoofdmenu twee keer op elk menu-item. Dit zorgt voor dubbele focusstops. Voor bezoekers die het toetsenbord gebruiken lijkt het daardoor alsof er meer interactieve elementen zijn dan daadwerkelijk aanwezig zijn. Dit probleem ontstaat doordat niet-interactieve div-elementen focusbaar zijn gemaakt met tabindex="0".

Oplossing:

Zorg ervoor dat de focusvolgorde logisch is en gebruik tabindex="0" niet op elementen die geen toetsenbordfocus mogen krijgen.

#12 - Huis-icoon in de header heeft geen duidelijk linkdoel

In de header staat een huis-icoon dat als link functioneert, maar zonder tekstalternatief. Daardoor is het doel van de link niet duidelijk. De link heeft ook geen toegankelijke naam.

Oplossing:

Voeg een beschrijvende toegankelijke naam toe aan de link, bijvoorbeeld via een aria-label of visueel verborgen tekst.

#13 - Toetsenbordfocus is verborgen achter de cookiebanner op kleine schermen

Wanneer de website op een klein scherm wordt bekeken, komt de toetsenbordfocus terecht op elementen die verborgen zijn achter de cookiebanner. Daardoor is niet zichtbaar waar de focus zich bevindt. Elementen die niet zichtbaar zijn, mogen geen focus krijgen.

Oplossing:

Zorg ervoor dat elementen die bedekt zijn door de cookiebanner geen toetsenbordfocus kunnen krijgen, of pas de positie van de cookiebanner aan zodat deze geen interactieve elementen bedekt.

#14 - Cookiebannerkoppen komen niet overeen met hun toegankelijke naam

Wanneer de website voor het eerst wordt bezocht, verschijnt een cookiebanner met twee knoppen. De zichtbare teksten zijn "Afwijzen" en "Sta cookies toe". De toegankelijke namen zijn afkomstig uit aria-labels en luiden "deny cookies" en "allow cookies". Omdat de zichtbare tekst afwijkt van de toegankelijke naam, kan de knop niet worden bediend met spraakcommando's.

In de cookiebanner staat ook een link met de zichtbare tekst "Meer informatie". De toegankelijke naam via een aria-label is echter "learn more about cookies".

Oplossing:

Zorg ervoor dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin. De toegankelijke naam mag ook gelijk zijn aan de zichtbare tekst.

#15 - Aria-labels in de cookiebanner zijn in het Engels

De cookiebanner bevat meerdere aria-label-attributen met Engelse tekst. De toegankelijke naam van de dialoog is "cookieconsent". De knoppen "Afwijzen" en "Sta cookies toe" hebben de namen "deny cookies" en "allow cookies". De link "Meer informatie" heeft de toegankelijke naam "learn more about cookies". Deze namen worden voorgelezen door schermlezers volgens de uitspraakregels van het Nederlands.

Oplossing:

Vertaal de teksten van de aria-labels naar het Nederlands.

#16 - Huis-icoon en wereldbol-knop in de header hebben geen toegankelijke naam

In de header staat een link met het huis-icoon zonder toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of functie van de link is. Dit probleem geldt ook voor de knop met het wereldbol-icoon in de header.

Oplossing:

Geef deze link en knop een toegankelijke naam die het doel beschrijft, bijvoorbeeld via een aria-label of visueel verborgen tekst.

#17 - Decoratieve afbeelding heeft een onjuist tekstalternatief

Onder het zoekveld staat een decoratieve afbeelding. Het tekstalternatief is "undefined". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen zijn voor schermlezers.

Oplossing:

Gebruik een leeg alt-attribuut (alt="") voor decoratieve afbeeldingen in een img-element.

#18 - Teksten zijn niet als kop gemarkeerd

De teksten "Amersfoort Open Data", "Open data is:", "Open data en privacy", "Proclaimer" zijn niet als kop gemarkeerd. Hulpsoftware gebruikt koppen om de content te scannen en om snel te navigeren. Dit werkt alleen als koppen in de code zijn gemarkeerd met het juiste HTML-element (h1 tot en met h6).

Oplossing:

Markeer deze teksten als kop met het juiste HTML-element op het juiste kopniveau.

#19 - Twee alinea's zijn gemarkeerd als één p-element

Onder de kop "Gebruiksvoorwaarden open data Gemeente Amersfoort" staat een tekstblok met twee alinea's dat is gemarkeerd als één p-element. Visueel zijn dit twee alinea's met witruimte ertussen. Deze structuur moet ook in de code staan.

Oplossing:

Zorg ervoor dat elke alinea in een eigen p-element is geplaatst.

#20 - Link "contact" is alleen door kleur te onderscheiden van gewone tekst

Onder de kop "Amersfoort Open Data" staat een alinea met een "contact"-link waarbij kleur het enige verschil is met de gewone tekst. Dit kan een probleem zijn voor bezoekers met kleurenblindheid of een visuele beperking.

Oplossing:

Zorg ervoor dat links in lopende tekst ook minimaal op een andere manier herkenbaar zijn, bijvoorbeeld door onderstreping of een kader.

#21 - Zoekresultaten in de dropdown hebben onvoldoende contrast

Bij het invoeren van gegevens in het zoekveld verschijnt een lijst met zoekresultaten. De teksten in de dropdown zijn grijs (#777777) op een witte achtergrond. De contrastverhouding is 4,48:1 en ligt onder de vereiste minimumwaarde van 4,5:1. In de hover- of focus-toestand is de contrastverhouding nog lager: 4,1:1.

Oplossing:

Zorg ervoor dat de contrastverhouding niet lager wordt dan 4,5:1, ook in de hover- en focus-toestanden.

#22 - Tekst "Geen resultaten gevonden" heeft onvoldoende contrast

Bij het invoeren van gegevens in het zoekveld, wanneer er geen resultaten zijn, verschijnt de tekst "Geen resultaten gevonden". Deze tekst is grijs (#9E9E9E) op een witte achtergrond. De contrastverhouding is 2,7:1. Deze tekst is kleiner dan 24px en niet vetgedrukt. Daarom moet het contrast minimaal 4,5:1 zijn.

Oplossing:

Pas de kleur van de tekst aan zodat de contrastverhouding minimaal 4,5:1 is.

#23 - Lange woorden lopen buiten het scherm bij 400% zoom

Bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom worden de woorden "persoonsgegevens" en "bedrijfsgevoelige" niet afgebroken. Daardoor lopen deze woorden voorbij de rechterrand van het scherm. Bezoekers moeten horizontaal scrollen om het volledige woord te lezen.

Oplossing:

Zorg ervoor dat lange woorden worden afgebroken als zij niet binnen beeld passen. Dit kan bijvoorbeeld worden opgelost met de CSS-eigenschap word-break. Bij een breedte van 320 pixels mag geen horizontale scrollbar ontstaan.

#24 - Focusrand van cookiebanner heeft onvoldoende contrast

Bij het eerste bezoek verschijnt een cookiebanner. Wanneer de link "Meer informatie" en de knop "Afwijzen" toetsenbordfocus krijgen, wordt dit zichtbaar met een grijze (#969696) gestreepte focusrand. De contrastverhouding tussen deze focusrand en de lichtgrijze (#EEEEEE) achtergrond is 2,5:1. Dit moet minimaal 3,0:1 zijn.

Oplossing:

Gebruik een kleurcombinatie met voldoende contrast voor de focusindicator.

#25 - Knop "Cookie beleid" heeft onvoldoende contrast

Onderaan de pagina staat een uitschuifknop "Cookie beleid". Deze knop is lichtgrijs (#EEEEEE) en heeft een contrastverhouding van 1,2:1 tegen de witte achtergrond. Voor interactieve elementen is minimaal 3,0:1 vereist.

Oplossing:

Pas de kleur van de knop aan zodat de contrastverhouding minimaal 3,0:1 is.

#26 - Taalinstelling is onjuist wanneer Engels wordt geselecteerd

Wanneer in de header "English" wordt gekozen, verandert de taal van de pagina in de HTML naar "en". De teksten in de header worden vertaald naar het Engels, maar de hoofdinhoud van de pagina blijft in het Nederlands. Door deze inconsistentie spreken schermlezers de Nederlandse tekst uit volgens Engelse uitspraakregels.

Oplossing:

Geef voor Nederlandse content op de pagina in de code aan dat de taal is gewijzigd door lang="nl" toe te voegen aan het omringende HTML-element.

#27 - Melding "Geen resultaten gevonden" wordt niet voorgelezen door schermlezers

Wanneer er data in het zoekveld wordt ingevoerd en er geen resultaten zijn, verschijnt de tekst "Geen resultaten gevonden" in de dropdown. Deze melding wordt niet aangekondigd aan bezoekers die een schermlezer gebruiken. Statusberichten moeten automatisch worden voorgelezen zodra ze verschijnen of veranderen.

Oplossing:

Voeg het aria-live-attribuut toe aan de melding, zodat schermlezers het statusbericht automatisch voorlezen.

#28 - Filterknoppen en pijltje zijn verborgen voor schermlezers

Bij de geselecteerde filters staan "x"-knoppen die verborgen zijn voor schermlezers. Daarnaast heeft de knop "Filters" een pijltje dat aangeeft dat er verborgen content aanwezig is. Dit pijltje is verborgen voor schermlezers met aria-hidden="true" en heeft geen tekstalternatief. Daardoor is voor bezoekers die een schermlezer gebruiken niet duidelijk dat er verborgen content is.

Oplossing:

Verwijder aria-hidden="true" op de "x"-knoppen en het pijltje, en voeg een beschrijvende toegankelijke naam toe. Gebruik bijvoorbeeld aria-expanded om aan te geven dat er verborgen content aanwezig is.

#29 - Accordeonteksten in de filtersectie zijn niet als kop gemarkeerd

Na het klikken op de knop "Filters" verschijnen secties met content die kan worden in- en uitgeklapt (accordions). De elementen waarmee deze content wordt getoond of verborgen, zijn niet als kop gemarkeerd. De teksten waarmee delen van een accordeon worden ingeklapt en uitgeklapt, functioneren als koppen van deze secties.

Oplossing:

Markeer deze teksten als kop met een passend h-element, zoals h2 of h3, of zorg ervoor dat een bestaande koprol niet wordt overschreven.

#30 - Focusindicator in de filtersectie is alleen een kleurverandering

Na het klikken op de knop "Filters" verschijnen secties met content die kan worden in- en uitgeklapt. De toetsenbordfocus is zichtbaar als een lichtgrijze kleur op een witte achtergrond. Het gebruik van alleen kleur om focus aan te geven is niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is deze subtiele kleurverandering vaak niet duidelijk genoeg.

Oplossing:

Zorg voor een duidelijk zichtbare focusindicator, bijvoorbeeld een dikkere rand, onderstreping of een verandering van achtergrond met voldoende contrast.

#31 - Knoppen zijn genest binnen links waardoor overbodige focuspunten ontstaan

De knoppen "Download", "Tabel" en "Kaart" zijn genest binnen links. Hierdoor ontstaan overbodige focuspunten bij navigatie met het toetsenbord.

Oplossing:

Verwijder een van de geneste links of knoppen, zodat er per interactief element slechts één focuspunt is.

#32 - Toetsenbordfocus verschuift niet naar nieuwe kaarten bij paginering

Onderaan de pagina staan kaarten met gegevens. Wanneer in de paginering op "volgende pagina" of "laatste pagina" wordt geklikt, verschijnt een nieuwe set kaarten zonder dat de pagina opnieuw laadt. De toetsenbordfocus verschuift daarbij niet naar de eerste nieuw weergegeven kaart, maar blijft op de pagineringsknop staan.

Oplossing:

Zorg ervoor dat bij het laden van nieuwe kaarten de toetsenbordfocus naar de eerste nieuwe kaart verschuift.

#33 - Knop "Verwijder" beschrijft de actie onvoldoende

Wanneer minimaal een filter is geselecteerd, verschijnt in de sectie "Actieve filters" een knop "Verwijder". Deze knop verwijdert alle actieve filters tegelijk, terwijl de "x"-knoppen naast individuele filternamen slechts een specifiek filter verwijderen. De tekst "Verwijder" maakt niet duidelijk dat hiermee alle filters in een keer worden verwijderd.

Oplossing:

Gebruik een duidelijkere tekst die de knop goed beschrijft, bijvoorbeeld "Verwijder alle filters".

#34 - Toetsenbordfocus is niet zichtbaar op de kaartblokken

De toetsenbordfocus is niet zichtbaar op de blokken die als links functioneren. Bezoekers die met het toetsenbord navigeren, moeten kunnen zien waar de focus zich bevindt.

Oplossing:

Voeg een duidelijke en toegankelijke focusindicator toe aan de kaartblokken.

#35 - Knop "Filters" geeft de open/dicht-toestand niet door aan schermlezers

De knop "Filters" opent verborgen content. De open- of dichtgeklapte toestand van de knop is visueel zichtbaar, maar wordt niet programmatisch doorgegeven aan schermlezers.

Oplossing:

Voeg een aria-expanded-attribuut toe aan de knop waarmee de sectie wordt geopend en gesloten, of voeg visueel verborgen tekst toe die de toestand aangeeft.

#36 - "x"-knop bij actieve filters heeft geen toegankelijke naam

In de sectie "Actieve filters" verschijnt een "x"-knop naast de naam van een filter wanneer minimaal een filteroptie is geselecteerd. Deze knop heeft geen toegankelijke naam.

Oplossing:

Voorzie de knop van een beschrijvende naam, zodat duidelijk is welke actie wordt uitgevoerd, bijvoorbeeld "Verwijder filter [filternaam]".

#37 - Pagineringsmelding wordt niet voorgelezen door schermlezers

Onderaan de pagina staat de tekst "1 - 15 van 44". Deze tekst verandert wanneer in de paginering naar de volgende pagina wordt gegaan en er een nieuwe set kaarten verschijnt zonder dat de pagina opnieuw laadt. Dit is een statusbericht en moet automatisch worden voorgelezen door schermlezers zodra het verandert.

Oplossing:

Gebruik het aria-live-attribuut in het bericht, zodat schermlezers de wijziging automatisch aankondigen.

#38 - Themakaarten zijn niet toegankelijk met het toetsenbord

Op deze pagina staan blokken met tekst en afbeeldingen die als link functioneren. Deze links zijn niet toegankelijk met het toetsenbord. De bezoeker kan op deze link klikken om naar een andere locatie op de pagina te gaan, maar dit werkt niet bij navigatie met alleen het toetsenbord.

Oplossing:

Zorg ervoor dat alle links kunnen worden bediend met de Enter- of Returntoetsen en bereikbaar zijn via de Tab-toets.

#39 - Themakaarten hebben geen correcte toegankelijke rol en naam

Op deze pagina staan kaarten met tekst en afbeeldingen die als link functioneren, maar geen correcte toegankelijke rol en naam hebben. Elk HTML-element heeft standaard een rol die bepaalt hoe hulpsoftware het element interpreteert.

Oplossing:

Zorg ervoor dat deze kaarten de juiste rol en een passende toegankelijke naam hebben, zodat ze correct worden herkend en gebruikt door hulpsoftware.

#40 - Oog-iconen in de tabel zijn verborgen voor schermlezers

Op het tabblad "Tabel" staan in de tabel "oog"-iconen die verborgen zijn voor schermlezers. Dit probleem komt ook voor op andere pagina's.

Oplossing:

Verwijder aria-hidden="true" en voeg een beschrijvend tekstalternatief toe aan de oog-iconen.

#41 - Koppen en accordeonteksten zijn niet als kop gemarkeerd

Op het tabblad "Informatie" zijn koppen zoals "Beschrijving", "Tags" en "Metadata" en op het tabblad "Download" de teksten "Bestanden" en "API" niet gemarkeerd als kop. Daarnaast staan op het tabblad "Informatie" de accordeons "Beschrijving" en "Metadata", op het tabblad "Tabel" de accordeons "Data woordenboek" en "Metadata" en op het tabblad "Download" de accordeons "Endpoints" en "Querying". Deze zijn niet als kop gemarkeerd.

Oplossing:

Markeer deze teksten met een passend h-element, zodat de structuur voor hulpsoftware klopt.

#42 - Select-element leest labeltekst dubbel voor

Op het tabblad "Tabel" staat een select-element met het label "Selecteer tabel". De tekst "Amersfoort grondwater" wordt twee keer voorgelezen. De tweede keer komt uit het attribuut aria-labelledby.

Oplossing:

Verwijder het aria-labelledby-attribuut om de herhaling te voorkomen.

#43 - Focusindicator bij accordeons heeft onvoldoende contrast

Op het tabblad "Informatie" bij de accordeons "Beschrijving" en "Metadata", op het tabblad "Tabel" bij de accordeons "Datawoordenboek" en "Metadata", op het tabblad "Download" bij de accordeons "Endpoints" en "Querying", en bij veel andere interactieve elementen is de toetsenbordfocus zichtbaar als een lichtgrijze kleur op een witte achtergrond. Het gebruik van alleen kleur om focus aan te geven is niet voldoende.

Oplossing:

Zorg voor een duidelijk zichtbare focusindicator met voldoende contrast.

#44 - Tekst is bij 400% zoom niet volledig zichtbaar op het tabblad "Download"

Bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom wordt tekst deels onleesbaar. Op het tabblad "Download" zijn de teksten in de kolommen "Databron" en "Selecteer formaat" niet volledig zichtbaar.

Oplossing:

Zorg ervoor dat alle content leesbaar en bruikbaar blijft bij 400% zoom op een scherm van 1280 bij 1024 pixels.

#45 - Oranje onderstreping van het huidige tabblad heeft onvoldoende contrast

Het huidige tabblad heeft een oranje onderstreping (#F29400) met een contrastverhouding van 2,3:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1 voor visuele aanduidingen.

Oplossing:

Zorg ervoor dat de onderstreping van het huidige tabblad voldoende kleurcontrast heeft, minimaal 3,0:1.

#46 - Pijltjes bij accordeons en comboboxen hebben onvoldoende contrast

De pijltjes bij de accordeons "Beschrijving" en "Metadata" op het tabblad "Informatie" hebben een contrastverhouding van 2,3:1. Dit geldt ook voor de accordeons "Data woordenboek" en "Metadata" op het tabblad "Tabel", en voor comboboxen zoals "Selecteer tabel" in de focus-toestand.

Oplossing:

Pas de kleuren aan zodat de contrastverhouding minimaal 3,0:1 is.

#47 - Sorteericonen in de tabel hebben onvoldoende contrast

Op het tabblad "Tabel" staan iconen om kolommen te sorteren. Deze pijltjes zijn grijs (#B4B4B4) op een witte achtergrond en hebben een contrastverhouding van 2,1:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1.

Oplossing:

Pas de kleur van de sorteerpijltjes aan zodat de contrastverhouding minimaal 3,0:1 is.

#48 - Oog-icoonknoppen in de tabel zijn niet toegankelijk met het toetsenbord

Op het tabblad "Tabel" zijn de knoppen met een oog-icoon ("Gegevens") in de tabel niet toegankelijk met het toetsenbord.

Oplossing:

Zorg ervoor dat alle interactieve elementen bereikbaar en activeerbaar zijn met het toetsenbord.

#49 - Meerdere "CSV"-links hebben dezelfde linktekst

Op het tabblad "Download" staan meerdere links met dezelfde tekst "CSV". Deze linktekst beschrijft de bestemming niet voldoende, omdat elke link een ander bestand downloadt. Dit kan verwarrend zijn voor bezoekers met cognitieve beperkingen en voor bezoekers die een schermlezer gebruiken.

Oplossing:

Zorg ervoor dat uit de linktekst duidelijk is waar de link naartoe leidt. Voeg bijvoorbeeld de naam van de gemeente toe aan de linktekst. Als visueel al duidelijk is bij welk onderdeel de link hoort, kan aanvullende tekst visueel verborgen worden toegevoegd.

#50 - Downloadknoppen hebben dezelfde toegankelijke naam

Op het tabblad "Download" hebben meerdere knoppen met een download-icoon dezelfde toegankelijke naam: "Download OGR format". De knoppen downloaden verschillende bestanden. Voor bezoekers die een schermlezer gebruiken is daardoor niet duidelijk welke actie bij welke knop hoort.

Oplossing:

Zorg ervoor dat knoppen met verschillende functies ook verschillende toegankelijke namen hebben.

#51 - Toetsenbordfocus is niet zichtbaar op het accordeon "Endpoints"

De toetsenbordfocus is niet zichtbaar op het accordeon "Endpoints" op het tabblad "Download". De toetsenbordfocus moet duidelijk zichtbaar zijn op interactieve elementen zoals knoppen, links en invoervelden.

Oplossing:

Verwijder outline:none of voeg een duidelijke en toegankelijke focusindicator toe.

#52 - Oog-icoonknoppen missen de toegankelijke rol en naam

Op het tabblad "Tabel" staan knoppen met een oog-icoon ("Gegevens") zonder toegankelijke rol en naam. Een knop zonder toegankelijke naam en rol kan niet goed worden herkend of begrepen door hulpsoftware. Daardoor is deze knop niet bruikbaar voor bezoekers die een schermlezer gebruiken.

Oplossing:

Geef alle interface-elementen een toegankelijke naam en rol. Gebruik bijvoorbeeld een button-element met een aria-label.

#53 - Statusberichten bij paginering worden niet voorgelezen

Op het tabblad "Tabel" veranderen de teksten "1 - 10 van 239855" en "1 - 5 van 9" (onder "Data woordenboek") bij paginering. Dit zijn statusberichten die automatisch moeten worden voorgelezen door schermlezers.

Oplossing:

Gebruik het aria-live-attribuut, zodat schermlezers de wijziging automatisch aankondigen.

#54 - Koppen op het tabblad "Informatie" zijn niet als kop gemarkeerd

Op het tabblad "Informatie" zijn koppen zoals "Beschrijving", "Tags" en "Metadata" en op het tabblad "Download" de teksten "Bestanden" en "API" niet gemarkeerd als kop. Dit probleem komt ook voor op andere pagina's.

Oplossing:

Markeer deze teksten met een passend h-element.

#55 - Het em-element is gebruikt voor visuele opmaak in plaats van nadruk

Op het tabblad "Informatie" staat onder de afbeelding de tekst "Teneo soil moisture sensors (branded as Smart City Trees by Hoefakker)". Daarbij is het em-element gebruikt voor opmaak. Het em-element heeft een semantische betekenis en geeft nadruk op tekst. Dit element mag niet worden gebruikt voor een visueel effect, zoals cursieve tekst.

Oplossing:

Gebruik CSS voor visuele opmaak in plaats van het em-element.

#56 - Select-element leest labeltekst dubbel voor

Op het tabblad "Tabel" staat een select-element met het label "Selecteer tabel". De labeltekst wordt twee keer voorgelezen door het attribuut aria-labelledby.

Oplossing:

Verwijder het aria-labelledby-attribuut om de herhaling te voorkomen.

#57 - Links in lopende tekst zijn alleen door kleur te onderscheiden

Op het tabblad "Informatie" staan links zoals "Hoefakker", "twelve locations" en "Smart Data Models" waarbij kleur het enige onderscheid is met de gewone tekst.

Oplossing:

Zorg ervoor dat links in lopende tekst ook minimaal op een andere manier herkenbaar zijn, bijvoorbeeld door onderstreping.

#58 - Tekst is bij 400% zoom niet volledig zichtbaar

Bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom wordt tekst deels onleesbaar op de tabbladen "Kaart" en "Download".

Oplossing:

Zorg ervoor dat alle content leesbaar en bruikbaar blijft bij 400% zoom op een scherm van 1280 bij 1024 pixels.

#59 - Oranje onderstreping van het huidige tabblad heeft onvoldoende contrast

Het huidige tabblad heeft een oranje onderstreping (#F29400) met een contrastverhouding van 2,3:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1.

Oplossing:

Zorg ervoor dat de onderstreping voldoende kleurcontrast heeft, minimaal 3,0:1.

#60 - Pijltjes bij accordeons hebben onvoldoende contrast

De pijltjes bij de accordeons hebben een contrastverhouding van 2,3:1. Dit geldt ook voor comboboxen in de focus-toestand. Dit probleem komt ook voor bij vergelijkbare elementen op andere pagina's.

Oplossing:

Pas de kleuren aan zodat de contrastverhouding minimaal 3,0:1 is.

#61 - Iconen in de kolommen "URL" en "Kaartlaag" zijn niet toegankelijk met het toetsenbord

Op het tabblad "Kaart" zijn de iconen in de kolommen "URL" en "Kaartlaag" in de accordeons onder de kaart niet toegankelijk met het toetsenbord.

Oplossing:

Zorg ervoor dat alle interactieve elementen bereikbaar en activeerbaar zijn met het toetsenbord.

#62 - Focusvolgorde van de navigatieknoppen op de kaart is niet logisch

Op het tabblad "Kaart" is de focusvolgorde van de navigatieknoppen in de kaart niet logisch. De toetsenbordfocus moet overeenkomen met de visuele volgorde van de interactieve elementen.

Oplossing:

Pas de focusvolgorde aan zodat deze overeenkomt met de visuele volgorde.

#63 - Download-iconen in de kolom "Downloaden" hebben geen duidelijk linkdoel

Op het tabblad "Download" staan drie "download"-iconen in de kolom "Downloaden (origineel formaat)" zonder duidelijke toegankelijke naam. Daardoor is het doel van de link niet duidelijk.

Oplossing:

Voeg een beschrijvende toegankelijke naam toe aan elk download-icoon, zodat duidelijk is welk bestand wordt gedownload.

#64 - Downloadknoppen in de accordeons hebben dezelfde toegankelijke naam

In de accordeons "WMS Services" en "WFS Services" op het tabblad "Kaart" en op het tabblad "Download" hebben meerdere knoppen met een download-icoon dezelfde toegankelijke naam. De knoppen downloaden verschillende bestanden.

Oplossing:

Zorg ervoor dat knoppen met verschillende functies ook verschillende toegankelijke namen hebben.

#65 - Kaartknoppen hebben geen beschrijvende toegankelijke naam

Op het tabblad "Kaart" staan knoppen die geen of een onvoldoende beschrijvende toegankelijke naam hebben. De knoppen "+", "-", "fullscreen" en "i" bevatten alleen het bijbehorende symbool. Hierdoor is niet duidelijk wat de knop doet.

Oplossing:

Geef deze knoppen een beschrijvende toegankelijke naam, bijvoorbeeld via een aria-label, zodat de functie duidelijk is.

#66 - Toetsenbordfocus is niet zichtbaar op het tabblad "Download"

Op het tabblad "Download" is de toetsenbordfocus niet zichtbaar op interactieve elementen.

Oplossing:

Verwijder outline:none of voeg een duidelijke en toegankelijke focusindicator toe.

#67 - Engelstalig artikel mist een taalattribuut

Op het tabblad "Informatie" staat een artikel volledig in het Engels zonder correct taalattribuut. Deze tekst wordt nu uitgesproken volgens de uitspraakregels van het Nederlands.

Oplossing:

Voeg lang="en" toe aan het omringende HTML-element van de Engelstalige tekst.

#68 - Knop "Toggle Drawing" heeft een Engelstalige toegankelijke naam

Op het tabblad "Kaart" heeft de knop met een potlood-icoon de toegankelijke naam "Toggle Drawing". Deze tekst is in het Engels terwijl de rest van de pagina in het Nederlands is.

Oplossing:

Vertaal de toegankelijke naam naar het Nederlands, of voeg lang="en" toe aan het element.

#69 - Kaartknoppen missen een beschrijvende toegankelijke naam

Op het tabblad "Kaart" staan knoppen "+", "-", "fullscreen" en "i" die alleen het symbool als toegankelijke naam bevatten. De functie van de knop is hierdoor niet duidelijk voor schermlezers.

Oplossing:

Geef deze knoppen een beschrijvende toegankelijke naam, bijvoorbeeld "Inzoomen", "Uitzoomen", "Volledig scherm" en "Informatie".

#70 - Ingedrukte/niet-ingedrukte toestand van kaartknoppen is niet programmatisch beschikbaar

Op het tabblad "Kaart" staan knoppen met een potlood-icoon en een icoon met rechte en gebogen lijnen. Deze knoppen hebben een ingedrukte en niet-ingedrukte toestand, maar die is niet programmatisch beschikbaar. Daardoor kan hulpsoftware deze informatie niet doorgeven.

Oplossing:

Zorg ervoor dat de toestand van de knop ook in de code wordt weergegeven, bijvoorbeeld met aria-pressed.

#71 - Meerdere "CSV"-links hebben dezelfde linktekst

Op het tabblad "Download" staan meerdere links met dezelfde tekst "CSV". Deze linktekst beschrijft de bestemming niet voldoende, omdat elke link een ander bestand downloadt.

Oplossing:

Zorg ervoor dat uit de linktekst duidelijk is waar de link naartoe leidt. Voeg bijvoorbeeld aanvullende context toe aan de linktekst.

#72 - Downloadknoppen hebben dezelfde toegankelijke naam

Op het tabblad "Download" hebben meerdere knoppen met een download-icoon dezelfde toegankelijke naam. De knoppen downloaden verschillende bestanden.

Oplossing:

Zorg ervoor dat knoppen met verschillende functies ook verschillende toegankelijke namen hebben.

#73 - Toetsenbordfocus is niet zichtbaar op het tabblad "Download"

Op het tabblad "Download" is de toetsenbordfocus niet zichtbaar op interactieve elementen.

Oplossing:

Verwijder outline:none of voeg een duidelijke en toegankelijke focusindicator toe.

#74 - Engelstalige kop en beschrijving missen een taalattribuut

De kop "Archived Teneo soil moisture, temperature and humidity sensors" en de tekst onder de kop "Beschrijving" zijn in het Engels, maar missen een taalattribuut. Schermlezers spreken deze tekst uit volgens de Nederlandse uitspraakregels.

Oplossing:

Voeg lang="en" toe aan het omringende HTML-element van de Engelstalige tekst.

#75 - Oranje onderstreping van het huidige tabblad heeft onvoldoende contrast

Het huidige tabblad heeft een oranje onderstreping (#F29400) met een contrastverhouding van 2,3:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1.

Oplossing:

Zorg ervoor dat de onderstreping voldoende kleurcontrast heeft, minimaal 3,0:1.

#76 - Statusberichten bij paginering worden niet voorgelezen

De pagineringstekst verandert wanneer naar de volgende pagina wordt genavigeerd. Dit is een statusbericht dat automatisch moet worden voorgelezen door schermlezers.

Oplossing:

Gebruik het aria-live-attribuut, zodat schermlezers de wijziging automatisch aankondigen.

#77 - Tekst is bij 400% zoom niet volledig zichtbaar

Bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom wordt tekst deels onleesbaar op de tabbladen "Kaart" en "Download".

Oplossing:

Zorg ervoor dat alle content leesbaar en bruikbaar blijft bij 400% zoom op een scherm van 1280 bij 1024 pixels.

#78 - Sorteericonen in de tabel hebben onvoldoende contrast

Op het tabblad "Tabel" staan iconen om kolommen te sorteren. Deze pijltjes zijn grijs (#B4B4B4) op een witte achtergrond en hebben een contrastverhouding van 2,1:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1.

Oplossing:

Pas de kleur van de sorteerpijltjes aan zodat de contrastverhouding minimaal 3,0:1 is.

#79 - Oog-icoonknoppen in de tabel zijn niet toegankelijk met het toetsenbord

Op het tabblad "Tabel" zijn de knoppen met een oog-icoon niet toegankelijk met het toetsenbord.

Oplossing:

Zorg ervoor dat alle interactieve elementen bereikbaar en activeerbaar zijn met het toetsenbord.

#80 - Oog-icoonknoppen missen de toegankelijke rol en naam

Op het tabblad "Tabel" staan knoppen met een oog-icoon zonder toegankelijke rol en naam. Daardoor is deze knop niet bruikbaar voor bezoekers die een schermlezer gebruiken.

Oplossing:

Geef alle interface-elementen een toegankelijke naam en rol.

#81 - Sorteericonen in de tabel hebben onvoldoende contrast

Op het tabblad "Tabel" staan iconen om kolommen te sorteren. Deze pijltjes zijn grijs (#B4B4B4) op een witte achtergrond en hebben een contrastverhouding van 2,1:1. Dit is lager dan de vereiste minimumwaarde van 3,0:1.

Oplossing:

Pas de kleur van de sorteerpijltjes aan zodat de contrastverhouding minimaal 3,0:1 is.

#82 - Oog-icoonknoppen missen de toegankelijke rol en naam

Op het tabblad "Tabel" staan knoppen met een oog-icoon zonder toegankelijke rol en naam. Daardoor is deze knop niet bruikbaar voor bezoekers die een schermlezer gebruiken.

Oplossing:

Geef alle interface-elementen een toegankelijke naam en rol.

#83 - Focusvolgorde van de navigatieknoppen op de kaart is niet logisch

Op het tabblad "Kaart" is de focusvolgorde van de navigatieknoppen in de kaart niet logisch. De toetsenbordfocus moet overeenkomen met de visuele volgorde van de interactieve elementen.

Oplossing:

Pas de focusvolgorde aan zodat deze overeenkomt met de visuele volgorde.

#84 - Kaartknoppen hebben geen beschrijvende toegankelijke naam

Op het tabblad "Kaart" staan knoppen "+", "-", "fullscreen" en "i" die alleen het bijbehorende symbool als toegankelijke naam bevatten. Hierdoor is niet duidelijk wat de knop doet.

Oplossing:

Geef deze knoppen een beschrijvende toegankelijke naam via een aria-label.

#85 - Kaartknoppen missen een beschrijvende toegankelijke naam

Op het tabblad "Kaart" staan knoppen "+", "-", "fullscreen" en "i" die alleen het symbool als toegankelijke naam bevatten. De functie van de knop is niet duidelijk voor schermlezers.

Oplossing:

Geef deze knoppen een beschrijvende toegankelijke naam.

#86 - Ingedrukte/niet-ingedrukte toestand van kaartknoppen is niet programmatisch beschikbaar

Op het tabblad "Kaart" staan knoppen met een potlood-icoon en een icoon met rechte en gebogen lijnen. Deze knoppen hebben een ingedrukte en niet-ingedrukte toestand, maar die is niet programmatisch beschikbaar.

Oplossing:

Zorg ervoor dat de toestand van de knop ook in de code wordt weergegeven, bijvoorbeeld met aria-pressed.

#87 - Knop "Toggle Drawing" heeft een Engelstalige toegankelijke naam

Op het tabblad "Kaart" heeft de knop met een potlood-icoon de toegankelijke naam "Toggle Drawing". Deze tekst is in het Engels terwijl de rest van de pagina in het Nederlands is.

Oplossing:

Vertaal de toegankelijke naam naar het Nederlands, of voeg lang="en" toe aan het element.

#88 - Focusvolgorde van de navigatieknoppen op de kaart is niet logisch

Op het tabblad "Kaart" is de focusvolgorde van de navigatieknoppen in de kaart niet logisch. De toetsenbordfocus moet overeenkomen met de visuele volgorde van de interactieve elementen.

Oplossing:

Pas de focusvolgorde aan zodat deze overeenkomt met de visuele volgorde.

#89 - Kaartknoppen hebben geen beschrijvende toegankelijke naam

Op het tabblad "Kaart" staan knoppen "+", "-", "fullscreen" en "i" die alleen het bijbehorende symbool als toegankelijke naam bevatten. Hierdoor is niet duidelijk wat de knop doet.

Oplossing:

Geef deze knoppen een beschrijvende toegankelijke naam via een aria-label.

#90 - Kaartknoppen missen een beschrijvende toegankelijke naam

Op het tabblad "Kaart" staan knoppen "+", "-", "fullscreen" en "i" die alleen het symbool als toegankelijke naam bevatten. De functie van de knop is niet duidelijk voor schermlezers.

Oplossing:

Geef deze knoppen een beschrijvende toegankelijke naam.

#91 - Ingedrukte/niet-ingedrukte toestand van kaartknoppen is niet programmatisch beschikbaar

Op het tabblad "Kaart" staan knoppen met een potlood-icoon en een icoon met rechte en gebogen lijnen. Deze knoppen hebben een ingedrukte en niet-ingedrukte toestand, maar die is niet programmatisch beschikbaar.

Oplossing:

Zorg ervoor dat de toestand van de knop ook in de code wordt weergegeven, bijvoorbeeld met aria-pressed.