Advies- en auditbureau in digitale toegankelijkheid | WEB: properaccess.nl | TEL: 06-28742275 | MAIL: contact@properaccess.nl
Content audit digitale toegankelijkheid van website https://www.harderwijk.nl/
Samenvatting
Wij hebben de content van de website https://www.harderwijk.nl/ onderzocht tussen 1 en 6 maart 2025. Op dit moment zijn 23 van de 33 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 10 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we 33 van de 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. Dit is een contentonderzoek. Daarom zijn de eisen die over de techniek gaan niet meegenomen. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Beoordeling
SC
Voldoet of nvt
23
Voldoet niet
10
Totaal
33
Deze succescritеria zijn afgekeurd: 1.1.1, 1.2.3, 1.2.5, 1.3.1, 1.4.3, 1.4.5, 2.4.2, 2.4.4, 2.4.6, 2.5.3.
Alle pagina's op de website https://www.harderwijk.nl/
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 131
Google Chrome, versie 131
Apple Safari, versie 17
PAC software to test PDF
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
Op de website staan kopjes met de nietszeggende teksten “Zie ook” en “Meer informatie”.
Dit soort teksten zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet je ook al zonder dat er bijvoorbeeld “Zie ook” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is.
Dezelfde kop staat onder andere ook op de pagina's
Gebruik een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.
Voldoet niet aan SC 2.4.6
Logo heeft meer tekst dan het tekstalternatief
Het logo bovenaan de website bevat de volledige tekst "gemeente harderwijk". De alt-tekst is echter alleen "Logo Home".
In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.
Oplossing:
Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “gemeente harderwijk”.
Voldoet niet aan SC 1.1.1
Logo is een link, maar bestemming is onbekend
Het logo bovenaan de pagina is een link, maar er ontbreekt een beschrijvende tekst voor de bestemming van de link.
Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt.
Oplossing:
Pas een van deze opties toe om de link meer context te geven:
Alt-tekst: als het logo een afbeelding is, kun je een beschrijvende alt-tekst toevoegen die de bestemming van de link beschrijft.s
aria-label: Voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming.
Visueel verborgen tekst: voeg beschrijvende tekst toe binnen het a-element en verberg deze visueel met CSS, terwijl je de tekst toegankelijk houdt voor schermlezers.
Voldoet niet aan SC 2.4.4
Tekst van het logo staat niet in toegankelijke naam
Het logo bovenaan de pagina bevat de tekst: “gemeente harderwijk”. De toegankelijke naam van deze link is “Logo Home”.
Zoals je ziet is de toegankelijke naam van de link niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als je hem met je stem wilt activeren. Je noemt dan namelijk de tekst die je in het logo ziet. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen.
Oplossing:
Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.
Voldoet niet aan SC 2.5.3
Koptekst is onduidelijk
In de footer staat een kop met nietszeggende tekst. Deze kop is “Meer informatie”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Koptekst is onduidelijk
Op deze pagina staat een kop met onduidelijke tekst: “Zie ook”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Opsomming is niet opgebouwd met het HTML-element ul of ol
Op deze pagina staat een lijst onder de kop "Wat staat er op de aanslag gemeentelijke belastingen?". Het tweede lijstitem, met de tekst “Belastingen, zoals:” bevat een sublijst met 6 items die geen correcte markering heeft.
Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS.
Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.
Oplossing:
Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.
Voldoet niet aan SC 1.3.1
Er zijn links met dezelfde tekst maar verschillende bestemmingen
Op deze pagina leiden de links met de tekst "Meerinzicht" onder de kopjes "WOZ-waarde" en "Kwijtschelding" naar de pagina https://www.meerinzicht.nl/belastingen. Onder het kopje "Hoe ontvangt u de aanslag?" staat een link met dezelfde tekst, maar de bestemming van deze tweede link is anders.
Er zijn dus meerdere links aanwezig in de steekproef met dezelfde tekst, maar een ander linkdoel. Dit kan verwarrend zijn voor bezoekers.
Oplossing:
Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Koptekst is onduidelijk
Op deze pagina openen de knoppen "Evenement organiseren", "Wat is er te zien en te doen in Harderwijk?" en "Hoe kom ik er?" secties die beginnen met de kop "Meer informatie". Deze kop "Meer informatie" is onduidelijk.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Koptekst is onduidelijk
Op deze pagina staat een kop met de nietszeggende tekst “Zie ook”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Strong-element is gebruikt voor opmaak
Op deze pagina wordt onder de kop "Samenstelling gemeenteraad", het strong-element gebruikt om tekst vet te maken. Volledige zinnen zijn gemarkeerd met een strong-element.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element 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 (vetgedrukte tekst).
Oplossing:
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.
Voldoet niet aan SC 1.3.1
Koptekst is onduidelijk
De kop “Zie ook” op deze pagina is niet duidelijk genoeg.
Voldoet niet aan SC 2.4.6
(Tip) Deze pagina bevat foto's van gemeenteraadsleden. Bij sommige foto's is het alt-attribuut niet leeg, bijvoorbeeld onder “Burak Ozdemir”. Andere foto's hebben wel een leeg alt-attribuut, bijvoorbeeld onder “Tim Smit-Brouwer”.
Je kunt beter kiezen voor één consistente aanpak. Voeg óf overal tekstalternatieven toe, of laat het alt-attribuut bij alle foto’s leeg.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Logo heeft geen alt-tekst
Op deze pagina ontbreekt de alt-tekst bij het logo onder “Verantwoording in jaarverslag”.
Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Door de alt-tekst niet in te vullen, zeg je eigenlijk: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven.
Oplossing:
Voeg een alt-tekst toe die de volledige tekst van het logo bevat.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
strong-element is gebruikt voor opmaak
Onder het kopje "Na uw aanvraag", wordt het strong-element gebruikt om tekst vet te maken. Hele zinnen die beginnen met "Let op!..." zijn gemarkeerd met een strong-element.
Voldoet niet aan SC 1.3.1
Koptekst is onduidelijk
Op deze pagina staat een kop met nietszeggende tekst. Het gaat om de kop “Zie ook”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Er zijn links met dezelfde tekst maar een andere bestemming
Op deze pagina staan links met dezelfde tekst die naar vershillende doelen verwijzen.
Onder het kopje "Rijbewijs" staat de link met de tekst "de website van de RDW". Het doel van deze link is een pagina over de medische keuring. Onder het kopje “Uw rijbewijs online verlengen” staat een link met dezelfde tekst, maar deze tweede link heeft een andere bestemming. Deze besteming is een pagina over het verlengen van een rijbewijs.
Meerdere links met dezelfde naam hebben dus verschillende bestemmingen. Links met deze linktekst komen ook voor onder “Begeleiderspas rijbewijs onder 18 jaar” en “Rijbewijs kwijt of gestolen”. Het gaat hier om de links met de tekst "een afspraak". Deze links openen twee verschillende producten.
Voldoet niet aan SC 2.4.4
Koptekst is onduidelijk
Op deze pagina staat een kop met nietszeggende tekst: “Zie ook”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Koptekst is onduidelijk
Op deze pagina staat een kop met nietszeggende tekst. Het gaat om “Zie ook”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Koptekst is onduidelijk
Op deze pagina staat een kop met nietszeggende tekst. Het gaat om “Zie ook”.
Hieronder beschrijven we alleen de problemen die uniek zijn voor deze pagina. Als de uitleg van een probleem al eerder in dit rapport is gegeven, herhalen we die hier niet.
Het type content in het iframe is niet beschreven in het title-attribuut
Op deze pagina staat een iframe. Het title-attribuut bevat de tekst “Organisatievisie gemeente Harderwijk”.
Iframes moeten een goede beschrijving hebben. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
Voldoet niet aan SC 2.4.6
Video bevat tekst of logo’s waarvoor geen alternatief is
Op deze pagina staat een video waarin op bepaalde momenten een logo en tekst verschijnen. Deze informatie is niet toegankelijk voor bezoekers die de video niet kunnen zien. Dit is bijvoorbeeld te zien op de tijdstippen 0:01, 0:52 en 1:23.
Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.
Oplossing:
Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.
Voldoet niet aan SC 1.2.3
De video heeft geen audiobeschrijving, terwijl daar wel ruimte voor is
Op deze pagina staan video’s met visuele informatie (teksten en logo’s) die niet toegankelijk is voor bezoekers die de video niet kunnen zien. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie namelijk verplicht (niveau AA), waar ruimte is in het standaard audiospoor om deze informatie te geven.
Oplossing:
Er is in deze video voldoende ruimte aanwezig, en dus moet audiodescriptie toegevoegd worden. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.
Voldoet niet aan SC 1.2.5
Koptekst is onduidelijk
De kop op deze pagina heeft een onduidelijke tekst: “Zie ook”.
Voldoet niet aan SC 2.4.6
PDF Japanse Duizendknoop informatie
Link naar pagina: https://www.harderwijk.nl/meldingen-klachten-en-bezwaar/iets-melden-bij-de-gemeente-snel-herstel
Dit PDF-document heeft geen titel. Een PDF-document moet een titel hebben die duidelijk het onderwerp of het doel van het document beschrijft. Daarnaast moet deze titel in de titelbalk worden getoond in plaats van de bestandsnaam. Dit is belangrijk voor bezoekers met verschillende beperkingen. Zij kunnen zo snel en gemakkelijk vaststellen of de informatie in het document relevant is voor hen.
Oplossing:
Pas de titel aan in de bestandseigenschappen van het bronbestand of van het PDF-document.
In Adobe Acrobat doe je dit als volgt:
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:
"Japanse duizendknoop informatie".
Klik op OK en sla het bestand op.
Voldoet niet aan SC 2.4.2
Informatieve afbeelding is geplaatst met figuur-tag, maar er is geen alt-tekst
Dit PDF-document bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Het gaat bijvoorbeeld om het logo “Gemeente Harderwijk” onderaan pagina 1, en ook de afbeeldingen op alle andere pagina's.
Als afbeeldingen aan een PDF-document worden toegevoegd met figuur-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is alleen bedoeld voor informatieve afbeeldingen. Zonder alternatieve tekst kan een schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.
Oplossing:
Alle afbeeldingen bevatten tekst: ze dragen dus informatie over. Daarom moet de alt-tekst de volledige tekst van de afbeelding bevatten.
Voldoet niet aan SC 1.1.1
De afbeelding bevat ingesloten tekst
In dit PDF-document staan op alle pagina's afbeeldingen met tekst.
Een tekst die onderdeel is van een afbeelding kan ontoegankelijk zijn voor vele groepen bezoekers.
Oplossing:
Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.
Voldoet niet aan SC 1.4.5
Koppen zijn niet in kopteksten geplaatst
In dit PDF-document zijn verschillende koppen aanwezig die niet als koppen zijn gemarkeerd. Het gaat bijvoorbeeld om de koppen “Wilt u dit monster in de tuin?”, “Zo ziet de plant eruit” en “Uitgraven”.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Plaats tekst in p-tags en koppen in h-tags om de structuur van het document in de tags te laten overeenkomen met wat te zien is in het document.
Voldoet niet aan SC 1.3.1
Kleurcontrast van tekst is te laag
In dit PDF-document staat witte tekst (#FFFFFF) op een groene achtergrond (#84C440). De contrastverhouding is te laag: 2,1:1. Dit komt voor op pagina 1 bij de tekst "Wilt u dit monster in de tuin?" en op pagina 2 bij de tekst "Zo ziet de plant eruit".
Oplossing:
Deze tekst is groter dan 19px en vetgedrukt, daarom moet het contrast minimaal 3,0:1 zijn.
Voldoet niet aan SC 1.4.3
Kleurcontrast van tekst is te laag
In dit PDF-document staat witte tekst (#FFFFFF) op een blauwe achtergrond (#0099DA). De contrastverhouding is te laag: 3,2:1. Dit komt voor op pagina 1 bij de tekst "Wilt u een plant…" en op pagina 2 bij de tekst “Meer tips en informatie…”.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Voldoet niet aan SC 1.4.3
PDF Instructie verkeersregelaars evenementen
Link naar pagina: https://www.harderwijk.nl/evenementen-horeca-en-subsidies/evenementen/evenement-organiseren
In dit PDF-document staat een koptekst die niet als koptekst is gemarkeerd: “Evenementenverkeersregelaars”.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.
Oplossing:
Vervang de p-tag door de h-tag, zodat de structuur van het document in de tags overeenkomt met wat te zien is in het document.
Voldoet niet aan SC 1.3.1
Lijst loopt over twee pagina's
In dit PDF-document staat op pagina 1-2 een lijst van 8 items. In de tags zijn echter twee afzonderlijke lijsten aanwezig. Zorg dat de lijst als één lijst is gecodeerd. Hetzelfde probleem is te zien op pagina 2-3 bij een lijst van 8 items.
Oplossing:
Combineer de lijsten: voeg de afzonderlijke L-tags in de code samen tot één enkele lijst, zodat de schermlezer de items als een doorlopende lijst voorleest. Je kunt de twee lijsten ook ongewijzigd laten en bij de tweede lijst een toelichting plaatsen waarin staat dat deze lijst een vervolg is op de lijst van de vorige pagina.
