Content-audit digitale toegankelijkheid van website amersfoortopdekaart.nl

#1 - Afbeelding naast logo mist alt-attribuut

Op elke pagina van de website staat een afbeelding van een pin naast het logo. Deze afbeelding is toegevoegd via 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, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.

Oplossing:

Voeg een alt-attribuut toe aan het img-element. Als de afbeelding puur decoratief is, gebruik dan alt="". Als de afbeelding informatie overbrengt, beschrijf dan wat de afbeelding voorstelt.

#2 - Kleurcontrast van tekst in header en zijpaneel is te laag

In de header van de website en in het zijpaneel wordt oranje (#D89C00) gebruikt als achtergrond voor witte tekst. Het kleurcontrast is onvoldoende, namelijk 2,4:1. Dit moet minimaal 4,5:1 zijn. Dezelfde kleurencombinatie wordt ook gebruikt voor het huidige tabblad in het "Colofon"-dialoogvenster dat wordt geopend via de knop "Info" in de header.

Oplossing:

Kies een donkerdere achtergrondkleur of een donkerdere tekstkleur zodat het contrast minimaal 4,5:1 is. Op https://properaccess.nl/hoe-test-ik-kleurcontrast/ staat een instructie die uitlegt hoe je kleurcontrast kan testen.

#3 - Kleurcontrast van gele tekst op oranje achtergrond is te laag

Op pagina https://www.amersfoortopdekaart.nl/ opent de knop "Info" in de header een menu met drie opties. Elke optie opent een bijbehorend dialoogvenster. De titel van elk dialoogvenster is gele (#FAF2D5) tekst, bijvoorbeeld "Colofon", op een oranje (#D89C00) achtergrond met een contrastverhouding van 2,2:1. Dit is niet voldoende.

Hetzelfde probleem geldt voor de tekst "Pagina niet gevonden" op pagina https://www.amersfoortopdekaart.nl/404, voor de teksten "Vorige", "Volgende", "Eemnesserweg 81-83", "Brink" op de pagina https://www.amersfoortopdekaart.nl/hoogtepunten/baarn/nieuwe-algemene-begraafplaats-wijkamplaan/pointofinterest/detail en op andere pagina's.

Oplossing:

Tekst die kleiner is dan 19px moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 24px of 19px vetgedrukt is dit minimaal 3,0:1.

#4 - Kleurcontrast van cookiebanner is te laag

Wanneer de website voor het eerst wordt geopend, verschijnt er onderaan de pagina een cookiebanner. De witte teksten "Deze website maakt gebruik van cookies..." en "Sluiten" op een rode (#E44429) achtergrond hebben een kleurcontrastverhouding van 4,1:1.

Oplossing:

Zorg ervoor dat de contrastverhouding minimaal 4,5:1 is. Dit kan door een donkerdere achtergrondkleur te kiezen of de tekst donkerder te maken.

#5 - Afbeeldingsknoppen zonder tekstalternatief

Op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/baarn/nieuwe-algemene-begraafplaats-wijkamplaan/pointofinterest/detail fungeert de afbeelding onder de kop "Nieuwe Algemene Begraafplaats Wijkamplaan" als knop. Deze afbeelding heeft geen tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven.

Dit probleem komt ook op andere pagina's voor: https://www.amersfoortopdekaart.nl/gemeentemonumenten/binnenstad/utrechtsestraat-37/pointofinterest/detail, https://www.amersfoortopdekaart.nl/kunstwerken/hoogland/social-sofa/pointofinterest/detail, https://www.amersfoortopdekaart.nl/kunstwerken/hoogland/de-overlegging/pointofinterest/detail en andere.

Oplossing:

Voeg de beschrijving toe via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is maar toegankelijk voor de schermlezer.

#6 - Icoonlinks zonder tekstalternatief en toegankelijke naam

Op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/binnenstad/onze-lieve-vrouwetoren/pointofinterest/detail functioneren de iconen van fietsen en voetsporen onder de kop "Onze-Lieve-Vrouwetoren" als links, maar het tekstalternatief ontbreekt, waardoor de links niet toegankelijk zijn voor gebruikers van hulpsoftware. Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. De links hebben ook geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie van de link is.

Hetzelfde probleem komt voor op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/isselt/bronswerk/pointofinterest/detail.

Oplossing:

Voeg een tekstalternatief toe aan de afbeelding dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt. Andere oplossingen zijn een aria-label op de link of een visueel verborgen tekst.

#7 - Kop niet als koptekst gemarkeerd

Op pagina https://www.amersfoortopdekaart.nl/gemeentemonumenten/binnenstad/utrechtsestraat-37/pointofinterest/detail is de kop "Motivering" niet als koptekst gemarkeerd. 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 navigeren.

Dit komt ook op andere pagina's voor, bijvoorbeeld: https://www.amersfoortopdekaart.nl/gemeentemonumenten/vermeerkwartier/f-v-blankenheymstr-10/pointofinterest/detail, https://www.amersfoortopdekaart.nl/gemeentemonumenten/binnenstad/krommestraat-4/pointofinterest/detail.

Oplossing:

Markeer koppen met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS.

#8 - Strong-element gebruikt als kop

Op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/binnenstad/lieve-vrouwekerkhof/pointofinterest/detail zijn de teksten "Laat het verleden tot leven komen" en "Layar" onjuist gemarkeerd met het strong-element in plaats van met de juiste kop-elementen. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.

Oplossing:

Vervang het strong-element door het juiste kop-element (bijvoorbeeld h2 of h3). Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel, maar niet als vervanging voor koppen.

#9 - Meerdere alinea's in een p-element

Op pagina https://www.amersfoortopdekaart.nl/gemeentemonumenten/binnenstad/utrechtsestraat-37/pointofinterest/detail is onder de kop "Utrechtsestraat 37" een tekstblok met meerdere alinea's onjuist gemarkeerd als een p-element. Visueel lijkt deze tekst uit meerdere alinea's te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.

Dit komt vaker voor, zie bijvoorbeeld https://www.amersfoortopdekaart.nl/hoogtepunten/baarn/nieuwe-algemene-begraafplaats-wijkamplaan/pointofinterest/detail, https://www.amersfoortopdekaart.nl/gemeentemonumenten/vermeerkwartier/f-v-blankenheymstr-10/pointofinterest/detail en andere pagina's.

Oplossing:

Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea's dat visueel te zien is, moet gelijk zijn aan het aantal p-elementen in de code.

#10 - Links alleen herkenbaar aan kleur

Op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/binnenstad/onze-lieve-vrouwetoren/pointofinterest/detail staat onder de kop "Onze-Lieve-Vrouwetoren" een alinea met de link "het Mirakel van Amersfoort". De link is alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers.

Hetzelfde probleem komt voor op pagina https://www.amersfoortopdekaart.nl/404 bij de link "startpagina", op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/binnenstad/lieve-vrouwekerkhof/pointofinterest/detail bij de links "Panorama" en "Layarapplicatie" en op andere pagina's.

Oplossing:

Zorg ervoor dat de link in de tekst op zijn minst op een andere manier te herkennen is, bijvoorbeeld door deze te onderstrepen of door een kader toe te voegen. Kleur mag worden gebruikt om een link van statische tekst te onderscheiden, mits aan de volgende twee voorwaarden wordt voldaan: het contrast tussen de linktekst en de omringende tekst is minimaal 3,0:1; er is een extra visuele indicator aanwezig, zoals een onderstreping of een ander of dikker lettertype bij hover of focus.

#11 - Kleurcontrast van tekst bij afbeelding is te laag

Op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/binnenstad/lieve-vrouwekerkhof/pointofinterest/detail wordt na het klikken op de knop "Afbeeldingen" een reeks afbeeldingsvoorbeelden weergegeven. Wanneer afbeelding nummer 14 wordt geselecteerd, wordt deze groter weergegeven met tekst die begint met "Aquarel van opmeting van de Onze-Lieve-Vrouwekapel...". De tekst is wit, maar het deel dat tegen de beige (#E0CFBD) achtergrond staat, heeft een contrastverhouding van 1,5:1, wat onvoldoende is.

Oplossing:

De minimaal vereiste contrastverhouding voor dergelijke tekst is 4,5:1. Voeg een semi-transparante donkere achtergrond toe achter de tekst, of gebruik een donkerdere tekstkleur.

#12 - Kleurcontrast van tekst in afbeeldingsweergave is te laag

Op pagina https://www.amersfoortopdekaart.nl/hoogtepunten/binnenstad/onze-lieve-vrouwetoren/pointofinterest/detail — klik op de knop "Afbeeldingen" — selecteer een willekeurige afbeelding — klik vervolgens op de knop met het i-icoon bovenaan. Dan wordt extra informatie over de betreffende afbeelding weergegeven. Deze tekst is wit op een grijze (#7E7D7C) achtergrond en heeft een kleurcontrastverhouding van 4,1:1, wat te laag is.

Hetzelfde probleem komt voor bij andere afbeeldingen op deze pagina en op andere pagina's, bijvoorbeeld: https://www.amersfoortopdekaart.nl/gemeentemonumenten/binnenstad/krommestraat-4/pointofinterest/detail en https://www.amersfoortopdekaart.nl/umbraco/Surface/IframeSurface/PrintableRoutes?routePath=/wandelingen/mijn-stad-amersfoort-aflevering-2/.

Oplossing:

Voor gewone tekst kleiner dan 24px moet de contrastverhouding minimaal 4,5:1 zijn. Maak de achtergrond donkerder of de tekst donkerder.

#13 - Afbeeldingen in Colofon-dialoogvenster missen alt-attribuut

Op pagina https://www.amersfoortopdekaart.nl/ opent de knop "Info" in de header een menu met drie opties. Wanneer de optie "Colofon" wordt geselecteerd, verschijnt er een dialoogvenster. In dit dialoogvenster staan op de tabbladen "Erfgoed op de kaart" en "Gerelateerde producten" afbeeldingen zonder een alt-attribuut. Een img-element moet altijd een alt-attribuut hebben.

Oplossing:

Voeg alt-attributen toe aan de img-elementen. Deze afbeeldingen zijn waarschijnlijk decoratief van aard, dus laat de waarde leeg (alt="").

#14 - Strong-element onjuist gebruikt voor opmaak in Colofon-dialoogvenster

Op pagina https://www.amersfoortopdekaart.nl/ opent de knop "Info" in de header een menu met drie opties. Wanneer de optie "Colofon" wordt geselecteerd, verschijnt er een dialoogvenster. In dit dialoogvenster wordt op het tabblad "Colofon" het element strong gebruikt voor opmaakdoeleinden, bijvoorbeeld bij teksten zoals "Opdrachtgever en projectcoordinatie:" of "3D producties:", om deze vet weer te geven. Het strong-element heeft een semantische betekenis en wordt gebruikt om extra nadruk aan tekst te geven. Wanneer dit element wordt ingezet voor een visueel effect, komt de semantische structuur van de inhoud niet overeen met de visuele presentatie.

Oplossing:

Verwijder de onjuiste strong-elementen en gebruik CSS om de tekst vet weer te geven. Als uitsluitend visuele nadruk nodig is, kan ook een b-element worden gebruikt.

#15 - Kleurcontrast van formulierlabels is te laag

Op pagina https://www.amersfoortopdekaart.nl/ opent de knop "Info" in de header een menu met drie opties. Wanneer de optie "Binnengekomen suggesties" wordt geselecteerd, verschijnt er een dialoogvenster met een formulier. De labels van de invoervelden zijn grijs (#9E9E9E) op een witte achtergrond, wat een contrastverhouding van 2,7:1 oplevert.

Oplossing:

Zorg ervoor dat de contrastverhouding van de labels minimaal 4,5:1 is.

#16 - Em-element onjuist gebruikt voor afstandsteksten

Op pagina https://www.amersfoortopdekaart.nl/umbraco/Surface/IframeSurface/PrintableRoutes?routePath=/wandelingen/mijn-stad-amersfoort-aflevering-2/ wordt het em-element verkeerd gebruikt voor opmaakdoeleinden bij alle teksten zoals "afstand 12 m (ca. 1 min)". Het em-element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Dit element mag niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

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

#17 - Em-element onjuist gebruikt voor opmaak

Op pagina https://www.amersfoortopdekaart.nl/404 wordt onder de kop "Pagina niet gevonden" het em-element verkeerd gebruikt voor opmaakdoeleinden. Het em-element heeft een semantische waarde: het 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 (cursieve tekst).

Oplossing:

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