Content-audit digitale toegankelijkheid van website kaart.amersfoort.nl

#1 - Logo heeft een onvolledig tekstalternatief

Het logo bovenaan toont de volledige tekst "Amersfoort", maar het tekstalternatief is alleen "logo". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Zo weten bezoekers die de afbeelding niet kunnen zien, ook precies wat er staat.

Daarnaast fungeert het logo als link, maar de toegankelijke naam van de link is "logo". Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt.

De zichtbare tekst in het logo staat niet in de toegankelijke naam van de link. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen.

Oplossing:

Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: "Amersfoort". Zorg ervoor dat de tekst die zichtbaar is in het logo voorkomt in de toegankelijke naam, bij voorkeur aan het begin. Idealiter is de toegankelijke naam gelijk aan de zichtbare tekst van het logo.

#2 - Belpictogram in de header heeft geen tekstalternatief

In de header staat een link met een belpictogram zonder tekstalternatief. Wanneer een link alleen uit een afbeelding bestaat, moet het tekstalternatief van de afbeelding de functie en bestemming van de link beschrijven. Zonder dit alternatief heeft de link geen toegankelijke naam en is het linkdoel niet te bepalen.

Oplossing:

Voeg een tekstalternatief aan het icoon of gebruik een aria-label op de link om de functie te beschrijven.

#3 - Notificatiestip heeft geen tekstalternatief

In de header staat een link met een belpictogram. Wanneer een bezoeker een melding heeft, verschijnt er een rode stip boven dit icoon. Er is geen tekstalternatief voor deze afbeelding. Wanneer een afbeelding informatie overbrengt, moet de alternatieve tekst die informatie volledig en betekenisvol beschrijven. In dit geval wordt de visueel aangeboden informatie niet overgebracht aan gebruikers van schermlezers.

Oplossing:

Voeg een tekstalternatief toe voor deze afbeelding, bijvoorbeeld "Nieuwe mededeling".

#4 - Kaartafbeelding-link heeft geen tekstalternatief

Boven de kop "KaartViewer Amersfoort" staat een kaartafbeelding die als link fungeert. Er is geen tekstalternatief voor de afbeelding. Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst.

Oplossing:

Voeg een tekstalternatief aan de afbeelding of gebruik een aria-label op de link om de functie te beschrijven.

#5 - Koppen in mededelingenpaneel zijn niet als kop gemarkeerd

In de header staat een link met een belpictogram die extra content opent. In deze extra content zijn de volgende teksten niet als koppen gemarkeerd: "1 Nieuwe mededeling" en "Viewer nog in ontwikkeling". Voor bezoekers die hulpsoftware gebruiken, is een tekst die er visueel uitziet als kop maar niet als kop is gemarkeerd niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te springen.

Oplossing:

Markeer koppen met het juiste HTML-element, op het correcte kopniveau (h1 t/m h6).

#6 - Kleurcontrast van tekst "INLOGGEN" is te laag

In de header staat witte tekst "INLOGGEN" op een rode (#D9534F) achtergrond. De kleurcontrastverhouding is te laag: 4:1. Hetzelfde probleem doet zich voor bij de tekst "1 Nieuwe mededeling" die verschijnt na het klikken op de link met het belpictogram. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

#7 - Kleurcontrast van tekst "KaartViewer Amersfoort" is te laag

Witte tekst "KaartViewer Amersfoort" staat op een lichtrode (#E4726F) achtergrond. De kleurcontrastverhouding is te laag: 3:1. Zorg ervoor dat de contrastverhouding minimaal 4,5:1 is.

#8 - Kleurcontrast van placeholdertekst is te laag

In de header staat een zoekveld met lichtgrijze (#D1D2D3) placeholdertekst "Zoeken..." op een witte achtergrond. De kleurcontrastverhouding is te laag: 1,5:1. Deze placeholdertekst moet voldoende contrast hebben, omdat deze de grenzen van het zoekveld definieert. Een vergelijkbaar probleem doet zich voor op de pagina Inloggen.

Oplossing:

Zorg ervoor dat de placeholdertekst een contrast van minimaal 4,5:1 heeft ten opzichte van de achtergrond.

#9 - Kleurcontrast van mededelingentekst is te laag

In de header staat een link met een belpictogram die extra content opent. Deze extra content bevat lichtgrijze tekst op een witte achtergrond, bijvoorbeeld "De viewer is momenteel nog in ... rechten worden ontleend." De kleurcontrastverhouding is 1,9:1, wat minder is dan het vereiste minimum van 4,5:1.

#10 - Logo GeoNovation heeft geen alt-attribuut

Het logo met zichtbare tekst "GeoNovation" heeft geen alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die de afbeelding niet kunnen zien, ook wat er staat. Omdat het logo geen link is, voeg dan ook het woord "Logo" toe aan de alternatieve tekst.

Hetzelfde probleem doet zich voor op de pagina Kaartviewer Amersfoort met het logo "Amersfoort".

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat, bijvoorbeeld alt="Logo GeoNovation".

#11 - Kleurcontrast van knopteksten is te laag

Witte tekst "INLOGGEN" en "Wachtwoord vergeten?" staan op een rode (#D9534F) achtergrond met een te lage contrastverhouding van 4:1.

Witte tekst "Inloggen met Windows account" staat op een grijze achtergrond (#8897AA). De kleurcontrastverhouding is te laag: 3:1.

Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

#12 - Kleurcontrast van grijze tekst is te laag

Grijze tekst staat op een witte achtergrond, bijvoorbeeld "Inloggen in KaartViewer." De kleurcontrastverhouding is te laag: 3,3:1. Hetzelfde probleem doet zich voor bij de tekst "of" die grijs (#A3A4A6) is op een witte achtergrond. De kleurcontrastverhouding is 2,5:1.

De minimale waarde voor tekst van deze grootte is 4,5:1.

#13 - Alle knoppen met pictogrammen missen een tekstalternatief

Alle knoppen met pictogrammen missen een tekstalternatief, bijvoorbeeld de knoppen in de header, de knoppen onder de kaart, de knoppen naast de kaart, de sluitknoppen en andere. Wanneer een knop alleen uit een afbeelding bestaat, moet het tekstalternatief van de afbeelding de functie van de knop beschrijven.

Knoppen moeten altijd een toegankelijke naam hebben die hun functie beschrijft. Bovendien moet de naam mee veranderen als de functie van de knop verandert. Toegankelijke namen mogen nooit leeg zijn, want zonder deze naam weet een blinde bezoeker niet wat de knop doet.

Oplossing:

Voeg een tekstalternatief aan het icoon of gebruik een aria-label op de knop om de functie te beschrijven.

#14 - Kop "Catalogus" is dubbel gemarkeerd

De tekst "Catalogus" is als twee koppen tegelijk gemarkeerd: als een bovenliggend h3-element en als een h2-element dat daarin is genest. Hierdoor wordt de kopinhoud dubbel voorgelezen door schermlezers, is er een onjuiste kophierarchie (een kopelement genest in een ander kopelement) en kan dit verwarrend zijn voor gebruikers die op koppen navigeren.

Oplossing:

Gebruik slechts een kopelement voor "Catalogus" en vermijd het nesten van koppen.

#15 - Tabel is als twee aparte tabellen gemarkeerd

Naast de kaart staat een knop met een filterpictogram. Deze knop opent extra content met een tabel. In de code is dit echter gemarkeerd als twee tabellen. Dit verbreekt de semantische relatie tussen tabelkoppen en bijbehorende datacellen, doordat schermlezers elke tabel als zelfstandig beschouwen. Hierdoor kunnen gebruikers de context kwijtraken bij het navigeren door de tabel.

Oplossing:

Zorg ervoor dat de content als een tabel-element is opgebouwd met correcte semantische opmaak, zodat de relaties tussen koppen en datacellen behouden blijven voor hulpsoftware.

#16 - Link is alleen door kleur te onderscheiden van tekst

Onder de kaart staat tekst met een link https://www.openstreetmap.org/copyright. Kleur is het enige verschil tussen de link en de statische tekst. Deze link is alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat.

Oplossing:

Zorg ervoor dat links in de tekst op zijn minst op een andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken. Kleur mag worden gebruikt om links van statische tekst te onderscheiden mits het contrast tussen de linktekst en de omringende tekst minimaal 3:1 is en er een extra visuele indicator aanwezig is bij hover of focus.

#17 - Kleurcontrast van cataloguslinks bij hover is te laag

In de catalogus worden links bij hover blauw (#27B6F0) op een lichtgrijze (#F7F6F4) achtergrond, bijvoorbeeld "Basisregistraties". De kleurcontrastverhouding is te laag: 2,2:1. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbord focus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover).

Oplossing:

Zorg dat de tekst, ook als de muis eroverheen beweegt, minimaal een contrast van 4,5:1 heeft met de achtergrond.

#18 - Kleurcontrast van nummer bij "Catalogus" is te laag

Bij de kop "Catalogus" staat witte (#FEFCFA) tekst op een blauwe (#3085B5) achtergrond, bijvoorbeeld "82". De kleurcontrastverhouding is te laag: 4:1. Deze moet minimaal 4,5:1 zijn.

#19 - Kleurcontrast in dialoogvenster "Tekenen en meten" is te laag

In de verticale werkbalk staat een knop met een potlood en een liniaal die extra content opent. Wanneer het selectievakje "vlak" is aangevinkt, verschijnt het dialoogvenster "Tekenen en meten". In dit dialoogvenster hebben veel elementen contrastproblemen:

• De knop "Tekening afsluiten" heeft grijze (#858380) tekst op een witte achtergrond: 3,8:1.
• De knop "Verwijder alle tekeningen" heeft rode (#EE1C25) tekst op een witte achtergrond: 4,3:1.
• Blauwe (#3085B5) teksten zoals "Vulling" hebben een contrastverhouding van 4:1 tegen de witte achtergrond.

Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

#20 - Kleurcontrast van "Tekst plaatsen" is te laag

In de verticale werkbalk staat een knop met een potlood en liniaal die extra content opent. In deze content verschijnt, wanneer het selectievakje "tekst" is aangevinkt, een dialoogvenster met witte tekst "Tekst plaatsen" op een lichtblauwe (#27B6F0) achtergrond. De kleurcontrastverhouding is te laag: 2,3:1. Deze moet minimaal 4,5:1 zijn.

#21 - Kleurcontrast van GPS-gerelateerde tekst is te laag

Onder de kaart verschijnt, na het klikken op de knop met het locatiepictogram, grijze (#8C8E90) tekst op een witte (#FEFCFA) achtergrond, bijvoorbeeld "Ga naar huidige locatie". De kleurcontrastverhouding is te laag: 3,2:1.

Hetzelfde probleem doet zich voor bij de andere lichtgrijze (#A3A4A6) tekst "Hoe vaak moet de kaart zich centreren op de huidige locatie:" op een witte (#FEFCFA) achtergrond met een contrastverhouding van 2,4:1. Een vergelijkbare kleurcombinatie wordt gebruikt in de pop-up die verschijnt na het klikken op de knop met het formaatwijzigingspictogram onder de kaart.

Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

#22 - Kleurcontrast van knoptekst "Stop GPS" is te laag

Witte tekst "Stop GPS" verschijnt na het klikken op de knop met het locatiepictogram onder de kaart (nadat GPS-toestemming is gegeven) op een rode (#D9534F) achtergrond. De kleurcontrastverhouding is te laag: 4:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

#23 - Kleurcontrast van knoppen "Reset" en "Stop" is te laag

Onder de kaart verschijnen, na het klikken op een knop met het formaatwijzigingspictogram, twee knoppen "Reset" en "Stop". De tekst hierop is rood (#EE1C25) op een witte achtergrond met een contrastverhouding van 4,3:1. Zorg ervoor dat het contrast van knopteksten minimaal 4,5:1 is.