Content-audit digitale toegankelijkheid van website amersfoortincijfers.nl

De tekst "Gemeente Amersfoort in cijfers" is niet als kop gemarkeerd

Hoewel deze tekst als koptekst fungeert, is deze in de HTML-code niet als zodanig gemarkeerd. Blinde bezoekers hebben niets aan een kop die er wel uitziet als kop, maar die 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. Maar dat kan alleen als de kop ook echt in de code staat. Zijn je koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships

Tekstalternatief van het logo niet correct

In de footer staat een logo met de zichtbare tekst "Amersfoort". Het huidige tekstalternatief is "footer afbeelding", wat niet correct is. Het tekstalternatief moet de volledige tekst van het logo bevatten, zodat bezoekers die het plaatje niet kunnen zien ook precies weten wat er staat.

Oplossing:

Vervang het huidige tekstalternatief door een alt-tekst die de volledige tekst van het logo weergeeft, bijvoorbeeld:

<img src="logo.png" alt="Amersfoort">

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-text Content.

Link naar Homepagina

Toegankelijke naam ontbreekt bij links

Onder het kopje "Veel gebruikt" staan links met teksten zoals "Stedenvergelijking" en "Monitor Inclusieve Stad". Deze links hebben geen toegankelijke naam, waardoor bezoekers die een schermlezer gebruiken niet begrijpen wat het doel van deze interactieve elementen is.

Oplossing:

Verwijder het figure-element binnen de link. Lees meer over dit onderwerp: https://adrianroselli.com/2025/01/dont-wrap-figure-in-a-link.html.

Voldoet niet aan WCAG Succescriterium 4.1.2 - Name, Role, Value.

Links zijn niet met stem te bedienen

Onder het kopje "Veel gebruikt" staan links met teksten zoals "Stedenvergelijking" en "Monitor Inclusieve Stad". De zichtbare tekst van deze links is echter niet aanwezig in de toegankelijke naam. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kunnen bezoekers met spraakbediening de link niet activeren door de tekst van de link uit te spreken. Dit probleem kan worden opgelost door de zichtbare tekst van de link toe te voegen aan de toegankelijke naam, bij voorkeur aan het begin.

Oplossing:

Verwijder het figure-element binnen de link.

Voldoet niet aan WCAG Succescriterium 2.5.3 - Label in Name

Link naar Contact pagina

Onvoldoende contrast van tekst

Op de pagina staat een formulier. Als een bezoeker dit formulier verstuurt met lege velden of verkeerde invoer, verschijnen er foutmeldingen. De kleur van deze teksten is rood. Echter, deze teksten hebben onvoldoende contrast ten opzichte van de witte achtergrond, namelijk een contrastverhouding van 4,0:1. Dit voldoet niet aan de minimale vereiste contrastverhouding van 4,5:1.

Oplossing:

Verhoog het contrast door de kleur van de foutmeldingen aan te passen. Bijvoorbeeld:

• Kies een donkerdere roodtint die voldoet aan de minimale contrastverhouding van 4,5:1.
• Gebruik contrast-checktools om de nieuwe kleur te valideren.

Voldoet niet aan WCAG Succescriterium 1.4.3 - Contrast (Minimum).

Link naar pagina Databank

Decoratieve afbeeldingen niet verborgen voor schermlezers

Als een knop met een "+"-pictogram ("Nieuwe presentatie (klik om te selecteren)") wordt geactiveerd, verschijnt er nieuwe inhoud. In deze inhoud zijn drie decoratieve afbeeldingen aanwezig. De tekstalternatieven van deze afbeeldingen zijn echter "illustratie1", "illustratie2" en "illustratie3".

Decoratieve afbeeldingen voegen geen extra informatie toe aan de inhoud en hoeven daarom niet door schermlezers te worden voorgelezen. Het onnodig toevoegen van tekstalternatieven voor decoratieve afbeeldingen kan verwarrend zijn voor gebruikers van schermlezers en belemmert de toegankelijkheid.

Oplossing:

Gebruik een leeg alt-attribuut voor decoratieve afbeeldingen (alt=""). Dit voorkomt dat de afbeelding door een schermlezer wordt voorgelezen.

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-text Content.

Link naar de bron van pdf

Link naar PDF Stadspeiling

Geen titel

Er is voor dit PDF-document geen documenttitel ingesteld in de bestandseigenschappen. Een PDF-document moet altijd een duidelijke en beschrijvende titel bevatten die het onderwerp of doel van het document aangeeft. Deze titel moet bovendien in de titelbalk worden weergegeven in plaats van de bestandsnaam.

Een goed ingestelde titel is belangrijk voor bezoekers met verschillende beperkingen, zoals mensen die schermlezers gebruiken, omdat het hen helpt snel en gemakkelijk te bepalen of het document relevant is voor hun behoeften.

Oplossing:

Stel een beschrijvende documenttitel in via de bestandseigenschappen van het bronbestand (bijvoorbeeld in Word of InDesign) of via de eigenschappen van het PDF-document zelf.

Voorbeeld in Adobe Acrobat:

• Open het PDF-document in Adobe Acrobat.
• Ga naar Bestand > Eigenschappen.
• Ga naar het tabblad Beschrijving.
• Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Bevolkingscijfers Amersfoort 2023".
• Klik op OK en sla het bestand op.

Door een duidelijke en beschrijvende titel in te stellen, wordt het document toegankelijker voor alle bezoekers en voldoet het aan de WCAG-richtlijnen.

Voldoet niet aan WCAG Succescriterium 2.4.2 - Page Titled.

Taal niet ingesteld

In de metadata van het PDF-document is de taal niet ingesteld. Het instellen van de taal is essentieel, zodat hulpsoftware zoals schermlezers de inhoud correct kan voorlezen volgens de juiste uitspraakregels. Als de taal niet is ingesteld, kunnen bezoekers die afhankelijk zijn van deze technologie moeite hebben om de inhoud te begrijpen.

Oplossing:

Stel de taal van het PDF-document in via de bestandseigenschappen. Dit kan worden gedaan in software zoals Adobe Acrobat.

In Adobe Acrobat:

• Open het PDF-document in Adobe Acrobat.
• Ga naar Bestand > Eigenschappen.
• Ga naar het tabblad Geavanceerd.
• Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
• Klik op OK en sla het bestand op.

Door de taal in te stellen, wordt de inhoud van het document correct voorgelezen door hulpsoftware, wat de toegankelijkheid aanzienlijk verbetert.

Voldoet niet aan WCAG Succescriterium 3.1.1 - Language of Page.

Onvoldoende kleurcontrast van tekst

Pagina 1 (na de intropagina):

Witte tekst "Onderzoek en statistiek" (bovenaan) en "Stad met een hart" (onderaan) op een blauwe achtergrond heeft een contrastverhouding van slechts 1,8:1. Dit voldoet niet aan het minimale vereiste contrast van 4,5:1 voor kleine tekst.

Witte tekst "Aardgasvrij 2023" op een blauwe achtergrond heeft een contrastverhouding van 1,9:1. Voor grote tekst is het minimale vereiste contrast 3,0:1.

Witte tekst "Beeld: Simon Lamme" op een afbeelding heeft een gedeeltelijk contrast van 2,4:1. Voor kleine tekst is het minimale vereiste contrast 4,5:1.

Pagina's 4 - 6:

Blauwe tekst, zoals "Blij dat wij een ambitieuze en klimaatbewuste gemeente hebben." op een witte achtergrond, heeft een contrastverhouding van 3,6:1, terwijl het minimaal 4,5:1 moet zijn voor kleine tekst.

Op pagina 11 heeft de linktekst "deze" hetzelfde probleem.

Histogrammen (pagina's 7 en 10):

Witte tekst met waarden zoals "7%", "14%", "11%" (pagina 7) en "18%", "27%", "49%", "42%", "53%" (pagina 10) op een blauwe achtergrond heeft onvoldoende contrast. Het minimale vereiste contrast voor kleine tekst is 4,5:1.

Pagina's 4, 7 - 10:

Lichtgrijze tekst die begint met "Figuur [x]: (...)" op een witte achtergrond heeft een contrastverhouding van 2,96:1, terwijl het minimaal 4,5:1 moet zijn voor kleine tekst. Dit probleem geldt ook voor de paginanummers.

Oplossingen

Verhoog het kleurcontrast:

Pas de tekstkleur of de achtergrondkleur aan om de vereiste contrastverhouding te bereiken. Gebruik een contrastchecker om te controleren of het contrast voldoet aan de WCAG-richtlijnen. Voorbeelden: Voor witte tekst op een blauwe achtergrond: maak de blauwe achtergrond donkerder of gebruik een donkerdere tint blauw, zoals #004080. Voor blauwe tekst op een witte achtergrond: kies een donkerder blauw, bijvoorbeeld #0056B3.

Voldoet niet aan WCAG Succescriterium 1.4.3 - Contrast (Minimum)

Informatie afhankelijk van kleur

In het PDF-document worden grafieken gebruikt om informatie te presenteren. Een voorbeeld hiervan is te zien op pagina 4 in "Figuur 1: Hoe kijken inwoners aan tegen de plannen voor een aardgasvrij Amersfoort in 2050?". In deze grafieken wordt informatie overgebracht met behulp van verschillende kleuren, zoals aangegeven in de legenda. Deze afhankelijkheid van kleur maakt de informatie ontoegankelijk voor bezoekers die kleuren niet goed kunnen onderscheiden, zoals mensen met kleurenblindheid.

Dit probleem komt ook voor op andere pagina's, zoals pagina 7 - 10, waar vergelijkbare grafieken staan. Als informatie uitsluitend door kleur wordt overgebracht, kunnen bepaalde bezoekers de inhoud niet begrijpen.

Voldoet niet aan WCAG Succescriterium 1.4.1 - Use of Color

Onvoldoende contrast van informatieve elementen

Op pagina 9, onder "Figuur 4: Mening over aardgasvrij Amersfoort in 2050 op wijkniveau", worden lichtgrijze gebieden gebruikt om de waarde "Gemiddeld" weer te geven. Deze gebieden zijn informatief en moeten daarom een minimaal contrast van 3,0:1 hebben ten opzichte van de achtergrond. Het huidige contrast is echter slechts 1,3:1, wat onvoldoende is volgens de toegankelijkheidsrichtlijnen.

Voldoet niet aan WCAG Succescriterium 1.4.11 - Contrast non-text

Decoratieve afbeelding met Figure-tag en automatisch gegenereerde beschrijving

Op pagina 1 is een decoratieve afbeelding toegevoegd via een Figure-tag met een automatisch gegenereerde beschrijving: "Image". Deze tekst voegt niets toe aan de inhoud van de pagina en kan verwarring veroorzaken voor gebruikers van schermlezers. Decoratieve afbeeldingen horen als artifact te worden gemarkeerd, zodat ze worden genegeerd door hulpsoftware.

Oplossing:

Markeer de afbeelding als een artifact in het PDF-document. Dit kan bijvoorbeeld in Adobe Acrobat:

• Open het PDF-document in Adobe Acrobat.
• Klik met de rechtermuisknop op de afbeelding en selecteer "Tag verwijderen".
• Open het Tags-paneel, klik met de rechtermuisknop op de afbeelding en selecteer "Markeren als artefact".

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-tekst content

Logo met verkeerd tekstalternatief

Onderaan pagina 1 staat het logo "Amersfoort". Het huidige tekstalternatief is "Image", wat geen betekenisvolle informatie toevoegt. Omdat het logo een informatieve afbeelding is, moet het tekstalternatief de volledige tekst van het logo bevatten, zodat het ook toegankelijk is voor gebruikers van schermlezers.

Oplossing:

Voeg een tekstalternatief toe dat de volledige tekst in het logo beschrijft. Bijvoorbeeld: Tekstalternatief: "Amersfoort" In Adobe Acrobat kun je dit aanpassen door:

• Het Tags-paneel te openen.
• De afbeelding van het logo te selecteren en de alt-tekst aan te passen naar "Amersfoort".

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-tekst content

Startpagina-pictogrammen zonder duidelijke alt-teksten

Vanaf pagina 3 staat bovenaan elke pagina een startpagina-pictogram dat fungeert als een link. De alt-teksten van deze interactieve afbeeldingen zijn momenteel "Image" (in het Engels), waardoor de links geen duidelijke beschrijving hebben. Dit maakt de links ontoegankelijk voor gebruikers van schermlezers.

Oplossing:

Geef de afbeeldingen een duidelijke en beschrijvende alt-tekst die het doel van de link verduidelijkt. Bijvoorbeeld: Alt-tekst: "Ga naar de startpagina" In Adobe Acrobat kun je dit als volgt oplossen:

• Open het Tags-paneel.
• Zoek de tags van de startpagina-pictogrammen.
• Pas de alt-tekst aan naar "Ga naar de startpagina".

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-tekst content

Complexe afbeelding zonder goed tekstalternatief

In dit PDF-document staan op pagina’s 4 en 7 - 10 complexe afbeeldingen, zoals infographics en schema’s, met het tekstalternatief "Chart" (in het Engels). Complexe afbeeldingen bevatten vaak veel informatie die niet volledig kan worden weergegeven binnen de 150 karakters van een alt-tekst. Hierdoor is de inhoud van deze afbeeldingen niet toegankelijk voor bezoekers die schermlezers gebruiken.

Om deze informatie toegankelijk te maken, moeten twee tekstalternatieven worden geboden:

• Een korte beschrijving (alt-tekst): Deze geeft een beknopte samenvatting en verwijst naar de locatie van de lange beschrijving.
• Een lange beschrijving: Deze geeft een uitgebreide uitleg van de inhoud van de afbeelding en kan op de pagina zelf, op een andere pagina of in een downloadbaar bestand staan.

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-tekst content

Koppen zijn niet als kopteksten gemarkeerd

In het PDF-document zijn verschillende koppen aanwezig die visueel als koppen worden weergegeven, maar niet correct zijn gemarkeerd als kopteksten in de tags. Voorbeelden hiervan zijn:

• "Dit O&S rapport is digitaal" op de intropagina.
• "De vragenlijst", "Steekproef", en "Significantietoetsen" op pagina 11.

In de huidige situatie zijn deze koppen opgemaakt met p-tags, waardoor ze door schermlezers worden behandeld als gewone tekst. Dit zorgt ervoor dat de visuele structuur van het document niet overeenkomt met de structuur in de tags, wat verwarrend is voor gebruikers van hulpsoftware zoals schermlezers.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships

Leesvolgorde klopt niet

De volgorde van de tags in dit document zorgt voor een onlogische leesvolgorde. Een schermlezer leest een PDF-document in de volgorde van de tags die in de codelaag van het document staan. Als deze tags niet in een logische en betekenisvolle volgorde zijn geplaatst, zal de schermlezer de inhoud in een onsamenhangende volgorde presenteren. Dit maakt het voor blinde en slechtziende bezoekers erg moeilijk om de inhoud te begrijpen of te navigeren door het document.

Voldoet niet aan WCAG Succescriterium 1.3.2 - Meaningsful Sequence

Link naar de bronpagina van pdf2

Link naar PDF Samenvatting dashboard duurzaamheid

Onvoldoende kleurcontrast van tekst

In het PDF-document is op pagina 1 sprake van onvoldoende kleurcontrast. De witte teksten zoals "Onderzoek en statistiek" (bovenaan) en "Stad met een hart" en "Maart 2024" (onderaan) hebben een kleurcontrastverhouding van slechts 1,8:1 tegen de blauwe achtergrond. Voldoet niet aan de minimale vereisten van 4,5:1 voor kleine teksten. Hetzelfde probleem doet zich voor op de laatste pagina, waar vergelijkbare teksten te weinig contrast bieden.

Daarnaast hebben alle koppen van niveau 1 in het document, zoals "1. Vooraf" en "2. CO2 en energie", een kleurcontrast van slechts 2,4:1 tegen een witte achtergrond. Dit is niet voldoende voor grote teksten, die minimaal een contrast van 3,0:1 vereisen. Hierdoor worden deze koppen minder goed leesbaar, vooral voor bezoekers met visuele beperkingen.

Op pagina 3 bevat een diagram ook witte teksten op een blauwe achtergrond, waaronder "CO2-emissie" en "Energiegebruik (TJ)". De kleurcontrastverhouding is hier 3,6:1, wat opnieuw onvoldoende is voor kleine tekst die minstens een contrast van 4,5:1 moet hebben.

Om deze toegankelijkheidsproblemen op te lossen, kan het contrast van de tekst en achtergrond worden verhoogd. Bijvoorbeeld, door een donkerdere tint blauw te gebruiken voor de achtergrond of een donkerdere tekstkleur in plaats van wit. Voor de grijze kopteksten kan een donkerdere grijstint worden toegepast, zoals #333333, zodat de leesbaarheid toeneemt. In diagrammen kan een donkerdere achtergrondkleur zoals #004080 in combinatie met een lichtere tekstkleur worden gebruikt om voldoende contrast te creëren. Door deze aanpassingen zal het document voldoen aan de WCAG-richtlijnen en toegankelijker worden voor bezoekers met visuele beperkingen.

Voldoet niet aan WCAG Succescriterium 1.4.3 - Contrast (Minimum)

Decoratieve afbeelding in een figure-tag

In het PDF-document bevindt zich op pagina 1 een decoratieve afbeelding die is toegevoegd via een Figure-tag, maar geen beschrijving heeft. De Figure-tag is specifiek bedoeld voor informatieve afbeeldingen en moet altijd voorzien zijn van een beschrijving die de inhoud van de afbeelding uitlegt. Omdat deze afbeelding decoratief is en geen informatieve waarde toevoegt, moet deze als artefact worden gemarkeerd om te voorkomen dat schermlezers deze aankondigen.

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-text content

Verkeerd gebruik van een L-tag

Op pagina 3 staat een lijsttag (L) waarin een reeks figure-tags zijn geplaatst. Verwijder dit element.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships

Complexe afbeelding zonder tekstalternatief

Op pagina 3 van het PDF-document bevat het diagram een complexe afbeelding zonder tekstalternatief. Complexe afbeeldingen, zoals diagrammen, infographics of schema’s, bevatten vaak veel informatie die niet binnen de 150 karakters van een alt-tekst past. Dit maakt de inhoud ontoegankelijk voor gebruikers van schermlezers.

Om deze informatie toegankelijk te maken, moeten er twee tekstalternatieven worden geboden:

• Een korte beschrijving (alt-tekst): Deze geeft een beknopte samenvatting en verwijst naar de locatie van de lange beschrijving.
• Een lange beschrijving: Deze biedt een uitgebreide uitleg van de inhoud van de afbeelding en kan als tekst op de pagina zelf worden geplaatst.

Voldoet niet aan WCAG Succescriterium 1.1.1 - Non-text content

Visuele structuur komt niet overeen met de codelaag

In het PDF-document op pagina 3, onder het kopje “Effect gemeentelijke inspanningen lastig te monitoren”, is er visueel één alinea tekst te zien. In de codelaag zijn deze echter ten onrechte opgesplitst in twee afzonderlijke alinea’s (p-tags). Dit zorgt ervoor dat de visuele structuur van de informatie niet overeenkomt met de structuur in de tags, wat verwarrend kan zijn voor gebruikers van schermlezers.

Hetzelfde probleem doet zich ook voor op pagina’s 4 - 5 en 5 - 6, waar een alinea wordt opgesplitst in twee delen bij een paginawisseling of tekstkolom. Dit maakt het moeilijk voor blinde of slechtziende bezoekers om de inhoud in de juiste samenhang te begrijpen.

Volgens de toegankelijkheidsrichtlijnen moet de visuele structuur van de informatie in een document consistent zijn met de structuur in de codelaag. Als tekst visueel als één alinea wordt gepresenteerd, moet deze ook in de tags als één p-tag worden gecodeerd. Als de tekst echter uit meerdere alinea’s bestaat, moeten er evenveel p-tags aanwezig zijn in de codelaag.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships

Koppen niet als kopteksten gemarkeerd

In het PDF-document zijn meerdere koppen aanwezig die visueel als koppen worden weergegeven, maar in de codelaag niet correct als kopteksten zijn gemarkeerd. Voorbeelden hiervan zijn "ONDERZOEK EN STATISTIEK" en "Samenvatting dashboard duurzaamheid" op pagina 1, evenals "Flinke afname gasgebruik in 2022" en "Opnieuw daling adressen afsluiting gas" op pagina 6. In deze gevallen worden de koppen onterecht als gewone tekst met een p-tag weergegeven, terwijl ze eigenlijk als kopteksten (h-tags) moeten worden gemarkeerd.

Als koppen niet correct zijn getagd, verschilt de visuele informatiestructuur van de onderliggende structuur in de codelaag. Dit maakt het voor gebruikers van schermlezers lastig om door het document te navigeren en de inhoud te begrijpen. Koppen spelen een cruciale rol bij het bieden van structuur en hiërarchie in een document.

Om dit probleem op te lossen, moeten de huidige p-tags van deze koppen worden vervangen door de juiste h-tags die overeenkomen met de hiërarchie van de informatie.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships

Link naar de Zoekresultaten

Zoekveld niet met stem te bedienen

Onder het kopje “Zoeken” staat een zoekveld. De placeholdertekst van dit invoerveld is "Waar bent u naar op zoek...". De toegankelijke naam van het invoerveld is echter "Typ hier uw zoekterm in".

Als de toegankelijke naam van een element niet overeenkomt met de zichtbare tekst (in dit geval de placeholdertekst), kunnen bezoekers die spraaksoftware gebruiken het zoekveld niet bedienen. Spraaksoftware gebruikt de zichtbare tekst om commando’s te activeren. Als deze tekst niet voorkomt in de toegankelijke naam, werkt het commando niet.

Oplossing:

Zorg ervoor dat de toegankelijke naam van het zoekveld de zichtbare tekst bevat. Zet deze tekst bij voorkeur vooraan in de toegankelijke naam. De toegankelijke naam mag ook exact hetzelfde zijn als de zichtbare tekst. Pas de waarde van het aria-label aan.

<input placeholder="Waar bent u naar op zoek..." aria-label="zoeken">

Voldoet niet aan WCAG Succescriterium 2.5.3 - Label in Name.

Link naar pagina Sociaal domein

Kop niet als koptekst opgemaakt

Bovenaan de pagina, tegenover het kruimelpad staat een knop om de inhoud te delen. De eerste link opent een dialoogvenster waarin de koptekst “Deel een link” niet als koptekst is opgemaakt.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships.

Link naar pagina Amersfoortpanel

Link alleen in kleur te onderscheiden van statische tekst

Onder de kopjes "Gegevens wijzigen?" en "Vragen?" staan alinea's tekst met links, zoals "AmersfoortPanel" en "contactpagina". Het verschil tussen de links en de statische tekst wordt alleen aangegeven door een verschil in tekstkleur, met een kleurcontrast van slechts 2,1:1.

Dit kan problematisch zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen het kleurverschil mogelijk niet waarnemen en daardoor niet herkennen dat er een link in de tekst staat.

Oplossing:

Verhoog het contrast: zorg ervoor dat het kleurcontrast van links ten opzichte van de omliggende tekst minimaal 3,0:1 is.

Voeg visuele herkenning toe: maak links ook op andere manieren herkenbaar, bijvoorbeeld door de tekst te onderstrepen.

Voldoet niet aan WCAG Succescriterium 1.4.1 - Use of Color.

Link naar pagina Bevolking

Onterecht gebruik van een h-element

Onderaan de pagina staat de tekst "Vind meer cijfers over bevolking in de databank van Amersfoort in cijfers". Deze tekst is onterecht gemarkeerd als een koptekst met een <h2>-element, uitsluitend om een groter lettertype te bereiken.

Het <h2>-element is in dit geval niet betekenisvol gebruikt. De tekst is geen echte kop omdat er geen gerelateerde inhoud onder staat. Het gebruik van een kop-element geeft de tekst echter een semantische betekenis, wat misleidend kan zijn voor mensen die schermlezers gebruiken. Schermlezers vertrouwen op kop-elementen om door de pagina te navigeren en de structuur van de informatie te begrijpen.

Oplossing:

Gebruik kop-elementen uitsluitend voor tekst die daadwerkelijk een kop of tussenkop is. Voor decoratieve of visuele doeleinden kun je beter een ander element, zoals een <p>-element, gebruiken en de gewenste stijl toepassen met CSS.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships.

Link niet met stem te bedienen

Onderaan de pagina staat de tekst "Vind meer cijfers over bevolking in de databank van Amersfoort in cijfers". Deze tekst is opgenomen in een link (<div role="link">). De link heeft echter een toegankelijke naam die niet overeenkomt met de zichtbare tekst. In plaats van "Vind meer cijfers over bevolking in de databank van Amersfoort in cijfers" bevat de toegankelijke naam een andere tekst: "zelf tabellen, grafieken en kaarten maken over 1 of meer indicatoren zelf tabellen, grafieken en kaarten maken over 1 of meer indicatoren".

Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kunnen gebruikers van spraaksoftware de link niet activeren door de zichtbare tekst uit te spreken. Dit maakt de link ontoegankelijk voor spraakbediening.

Oplossing:

Zorg ervoor dat de toegankelijke naam van de link de zichtbare tekst bevat, bij voorkeur aan het begin. Dit kan worden opgelost door de afbeelding binnen deze link decoratief te maken. Andere oplossingen zijn mogelijk.

Voldoet niet aan WCAG Succescriterium 2.5.3 - Label in Name.

Link naar pagina Cijfers per thema

Onvoldoende contrast van tekst

Als de pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt de knop "Selectie" boven het kruimelpad. Als op deze knop wordt gedrukt, verschijnt de knop "Resultaten". Daarnaast is de tekst van het huidige thema "Sociaal domein" zichtbaar.

De lichtblauwe teksten op deze knoppen en de tekst van het thema "Sociaal domein" hebben echter een kleurcontrast van slechts 1,9:1 tegen de witte achtergrond. Dit is onvoldoende, aangezien het minimaal vereiste contrast 4,5:1 is.

Oplossing:

Pas de tekstkleur aan: gebruik een donkerdere tint blauw die voldoende contrast biedt tegen de witte achtergrond.

• Voorbeeldkleur met voldoende contrast: #0056B3 (donkerblauw).
• Valideer het contrast: controleer de aangepaste kleur met een contrast checker om zeker te zijn dat de verhouding minimaal 4,5:1 is.

Voldoet niet aan SC 1.4.3 - Contrast (Minimum).

Onvoldoende contrast van iconen

Wanneer de pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt de knop "Selectie" boven het kruimelpad. Wanneer op deze knop wordt gedrukt, verschijnt de knop "Resultaten". De iconen van een kruis en pijl naar rechts hebben onvoldoende kleurcontrast (1,9:1) tegen de witte achtergrond. Deze pictogrammen zijn informatief en vereisen een minimumcontrast van 3,0:1.

Voldoet niet aan SC 1.4.11 - Non-text Contrast

Kop niet als koptekst opgemaakt

Onder het kopje "Wet Maatschappelijke Ondersteuning en jeugdzorg" staan grafieken. Als een bezoeker op de knop klikt om de grafiek schermvullend te bekijken, verschijnt een knop "Meer info". Deze knop opent een extra paneel met tekst. Niet alle koppen in deze inhoud zijn correct als kopteksten opgemaakt in de HTML-code. In sommige koppen wordt het em-element gebruikt. Dit element heeft een bepaalde semantische betekenis en mag niet worden gebruikt als alternatief voor h-elementen.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships.

Meerdere alinea’s in een element

Onder het kopje "Wet Maatschappelijke Ondersteuning en jeugdzorg" staan grafieken. Als een bezoeker op de knop klikt om de grafiek schermvullend te bekijken, verschijnt een knop "Meer info". Deze knop opent een extra paneel met tekst.

Visueel zijn er 13 alinea’s aanwezig. Echter, in de HTML is de gehele inhoud van dit paneel in één enkel <p>-element geplaatst. Dit zorgt ervoor dat de visuele structuur van meerdere alinea’s niet wordt weerspiegeld in de onderliggende code. Deze inconsistente structuur maakt het moeilijk voor bezoekers die afhankelijk zijn van assistieve technologie, zoals schermlezers, om de inhoud correct te begrijpen.

Oplossing:

Splits de tekst op in meerdere afzonderlijke <p>-elementen, zodat de HTML-code de visuele structuur correct weerspiegelt. Het aantal visuele alinea’s moet gelijk zijn aan het aantal <p>-elementen in de code.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships.

Link naar pagina Luchtkwaliteit en duurzame mobiliteit

Kop niet als koptekst gemarkeerd

De kop "Doelstellingen" is gemarkeerd met een <strong>-element. Dit is onjuist, omdat het <strong>-element niet bedoeld is om koppen te markeren. Kopteksten moeten altijd worden gemarkeerd met een geschikt kop-element, zoals <h2>, <h3>, enzovoort, afhankelijk van de structuur van de pagina.

Koppen spelen een essentiële rol bij het structureren van de inhoud van een pagina. Alleen wanneer ze als kop zijn gemarkeerd met een kop-element, kan hulpsoftware zoals schermlezers de betekenis van de kop begrijpen en bezoekers helpen bij het navigeren door de inhoud. Het <strong>-element is daarentegen bedoeld om nadruk te geven aan woorden of zinsdelen, maar voegt geen semantische structuur toe.

Oplossing:

Vervang het <strong>-element door een geschikt kop-element, bijvoorbeeld <h2>, en gebruik CSS om het gewenste uiterlijk te behouden.

Voldoet niet aan WCAG Succescriterium 1.3.1 - Info and Relationships.

Buttons met dezelfde tekst en andere acties

Op deze pagina staan verschillende knoppen met dezelfde zichtbare tekst: "Meer info". Deze knoppen voeren echter verschillende acties uit. Als knoppen dezelfde tekst hebben, maar verschillende functies uitvoeren, kan dit verwarrend zijn voor bezoekers, vooral voor mensen die afhankelijk zijn van een schermlezer. Schermlezers lezen de knoptekst voor, en zonder aanvullende context is het niet duidelijk welke actie elke knop uitvoert.

Oplossing:

Unieke en beschrijvende knoptekst: Zorg ervoor dat de tekst op elke knop beschrijft welke actie de knop uitvoert.

Voldoet niet aan WCAG Succescriterium 2.4.6 - Headings and Labels.