Toegankelijkheidsonderzoek

Issues:
Deelonderzoek content digitale toegankelijkheid website Gemeente Hendrik-Ido-Ambacht

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Gemeente Hendrik-Ido-Ambacht
Datum 8 december 2023
Scope van de website
  • Alle pagina's op h-i-ambacht.nl.
  • Niet de pagina's op raad.h-i-ambacht.nl.
  • Niet de pagina's op loket.h-i-ambacht.nl.
  • Niet de widgets zoals Webchat, Readspeaker.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 34

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op https://www.h-i-ambacht.nl/ staat onder de kop "Actueel" bij elk bericht een afbeelding. De meeste afbeeldingen hebben een incomplete of onduidelijke alternatieve tekst. Enkele voorbeelden van oude berichten: "alleen bloem 100", "logo duurzaam Ambacht 2021 kleiner 100", "@gemeentehia 6 december 2023 vierkant". Deze alternatieve teksten bevatten naast de inhoud vaak ook de vorm of grootte van de afbeelding. Deze afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. Een beschrijving is overbodig voor screenreadergebruikers. De afbeelding moet wel een leeg alt-attribuut in het img-element hebben.
Dit geldt ook voor alle afbeeldingen onder de kop "Op de kalender", en vergelijkbare afbeeldingen op "https://www.h-i-ambacht.nl/Gewoon_Ambacht/Overzicht/Op_de_kalender".

Bevinding 2: Op https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Wijk/Noordkade staat een grote afbeelding met de tekst "Welkom op de Noordkade" en een foto van een plaatsing van een havenkraan. Deze afbeeldingen hebben geen volwaardige alternatieve tekst.

Bevinding 3: Op https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Wijk/Noordkade staat onder "2022 november - Historische Havenkraan weer op Ambachtse grond" een afbeelding (verborgen onder de uitvouwbare content). Mogelijk is dit een video die om technische redenen niet laadt. De alternatieve tekst "IFrame" is geen goed alternatief voor deze afbeelding.

Bevinding 4: In de PDF https://www.h-i-ambacht.nl/Gewoon_Ambacht/Omgevingswet/Omgevingsvisie/Verslag_ontmoeting_1.pdf bevinden zich afbeeldingen die decoratief zijn. Het gaat om de afbeelding van het huisje op pagina 1. Tag deze afbeelding als artefact zodat hulpsoftware deze afbeeldingen negeert. Ook op andere pagina's komen soortgelijke afbeeldingen die decoratief zijn.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op https://www.h-i-ambacht.nl/Contact staat een knop "HVC Milieustraat" die een sectie uit lijkt te klappen. De sectie klapt echter niet uit. Hierdoor komt de visuele constructie niet overeen met de code. De volgende knop "SOciaal Portaal Hendrik-Ido-Ambacht" toont de voorgaande sectie wel. Door het uitklappen te repareren is de relatie weer correct.

Bevinding 6: Advies: Op https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Wijk/Noordkade staat onder het bericht van "2022 november" de kop "Algemene gegevens" een opsomming van informatie, gescheiden door verticale streepje. Met komma's in plaats van streepjes wordt deze tekst leesbaarder.

Bevinding 7: Op pagina https://www.h-i-ambacht.nl/Contact zijn koppen opgemaakt met het strong-element, bijvoorbeeld "Heeft u een afspraak" onder "Online regelen". Het strong- en em-element zijn bedoeld om nadruk te geven aan een of enkele woorden. Deze elementen mogen niet worden gebruikt als visuele kop, omdat ze niet dezelfde betekenis hebben als een kop (bijvoorbeeld h2 of h3). Op andere plekken op deze pagina zijn deze koppen wel correct gemarkeerd.

Bevinding 8: Op https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Afval_en_hergebruik/Recycletarief staat onder "Tarieven en rekenvoorbeelden" onder "Wat worden de tarieven" dikgedrukte teksten die visueel koppen zijn maar niet gemarkeerd zijn als kop (bijvoorbeeld <h3>). Dit komt op meer plekken voor op deze pagina.

Bevinding 9: Op "https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Afval_en_hergebruik/Recycletarief" staan verschillende tabellen voor data die niet perse tabulair is. Breid de tabellen uit met headers om er volwaardige tabellen van te maken, of kies een ander format zoals een <dl>.
Dit geldt ook voor de tabel onder "Verwerkingsdoelen" op "https://www.h-i-ambacht.nl/Configuratie/Footer/Handige_links/Privacy".

Bevinding 10: Op de pagina https://www.h-i-ambacht.nl/Configuratie/Footer/Handige_links/Privacy wordt onder "Verwerkingsdoelen" een tabel gebruikt. De koppen in deze tabel zijn opgemaakt met het strong-element, in plaats van met het th-element. Daardoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element.

Bevinding 11: Op https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Wijk/Buurtbon is een tabel gebruikt onder "Buurtbon regels". De koppen van beide kolommen zijn in de code geen koppen, en de tabel mist daardoor de structuur die visueel zo van waarde is. Dit zou daarom ook onder SC 1.3.2 afgekeurd worden. De teksten worden van links naar rechts voorgelezen waardoor op een gegeven moment niet meer duidelijk is wat er "wel bedoeld voor" en wat er "niet bedoeld" wordt.

Bevinding 12: De PDF https://www.h-i-ambacht.nl/Mediatheek/Pdf_bestanden/Spoorfonds_criteria.pdf is niet getagd. Daardoor ontbreekt informatie over de structuur en de samenhang van het document. Iemand die het document niet kan zien en met hulpsoftware werkt kan daardoor bijvoorbeeld niet eenvoudig de koppenstructuur opvragen. Zorg ervoor dat het document correct getagd is.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 13: Op de pagina "https://www.h-i-ambacht.nl/Contact" staat de tekst "Ziet u op de webpagina een chatknop rechts onderaan de pagina?". Hier wordt geleund op de visuele locatie van een component wat niet voor iedereen bruikbaar is.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 14: Het zoekveld in de header heeft een placeholder: "Zoeken". Als de focus op het zoekveld staat, en er nog geen tekst ingevoerd is, dan wordt deze tekst lichter. De exacte kleur is afhankelijk van de browser maar is in meerdere gevallen (onder andere Safari op MacOS) minder dan de vereiste 4.5:1.

Bevinding 15: In de header is een "kruimelpad". De huidige pagina wordt regelmatig in grijs (#4f4f4f) aangegeven. Deze tekst heeft een contrast van 3.8:1 op de groene achtergrond. Dat is minder dan de vereiste 4.5:1.

Bevinding 16: Op https://www.h-i-ambacht.nl/ staan links in de vorm van grotere en kleinere blauwe blokken onder 2 koppen "Meest bezochte pagina's". Als je met de muis hierover gaat wordt het blauwe blok groen en blijft de tekst wit. Het contrast van de witte tekst op de groene achtergrond is 2.4:1. Dat is minder dan de vereiste 4.5:1.
De hele link wordt hiermee onherkenbaar, en daarmee is het ook een probleem voor SC 1.4.11.
Dit probleem komt ook terug op https://www.h-i-ambacht.nl/Contact.

Bevinding 17: Op https://www.h-i-ambacht.nl/Contact staat een link "Maak een afspraak" en "06 4085 9667". Deze hebben een blauwe achtergrond. Bij een "hover" wordt de blauwe achtergrond groen, en blijft de tekst wit. Het contrast van de witte tekst op de groene achtergrond is 2.4:1. Dat is minder dan de vereiste 4.5:1 voor tekst.

De hele link wordt hiermee onherkenbaar, en daarmee is het ook een probleem voor SC 1.4.11.

Dit probleem komt ook terug op:

Bevinding 18: Op https://www.h-i-ambacht.nl/Zoekresultaten?freetext=test staan verschillende links ("Zoek", "1" en "1") met een zwarte tekst op een blauwe achtergrond. Deze tekst heeft een contrast van 2.37:1. Bij een "hover" wordt de achtergrond donkerder en zakt het nog verder naar 1.87:1. Dat is beide minder dan de vereiste 4.5:1 voor tekst.
De hele link wordt hiermee onherkenbaar, en daarmee is het ook een probleem voor SC 1.4.11.
Dit gebeurt ook op https://www.h-i-ambacht.nl/Gewoon_Ambacht/Overzicht/Op_de_kalender/Op_de_kalender/Activiteit_of_evenement_op_de_kalender.

Bevinding 19: Op https://www.h-i-ambacht.nl/Gewoon_Ambacht/Overzicht/Op_de_kalender/Op_de_kalender/Activiteit_of_evenement_op_de_kalender staat de tekst "Laatst gekozen adres". Deze tekst heeft een contrast van 3.74:1 op de witte achtergrond. Dat is minder dan de vereiste 4.5:1 voor tekst.

Bevinding 20: Op https://www.h-i-ambacht.nl/Gewoon_Ambacht/Overzicht/Op_de_kalender/Op_de_kalender/Activiteit_of_evenement_op_de_kalender staan twee tekstvakken om data in te voeren. Deze hebben beide een grijze placeholder. De exacte kleur is afhankelijk van de browser maar is in meerdere gevallen (onder andere Firefox en Safari op MacOS) minder dan de vereiste 4.5:1.

Bevinding 21: In de PDF https://www.h-i-ambacht.nl/Mediatheek/Pdf_bestanden/Spoorfonds_criteria.pdf is het contrast van de lichtgroene tekst 'Familie Spoorfonds - criteria' op de witte achtergrond te laag. De contrastverhouding is hier 2,1:1, waar dit minimaal 4,5:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik een andere kleur voor de focus op die plekken waar het contrast te laag is.

Bevinding 22: In de PDF https://www.h-i-ambacht.nl/Gewoon_Ambacht/Omgevingswet/Omgevingsvisie/Verslag_ontmoeting_1.pdf is het contrast van de lichtgroene tekst "Ambacht en ondernemen" op de witte achtergrond op pagina 2 te laag. De contrastverhouding is hier 2,1:1, waar dit bij grotere letters minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik een andere kleur voor de focus op die plekken waar het contrast te laag is. Dit komt op meerdere pagina's voor in het document.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 23: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan verdwijnt op pagina https://www.h-i-ambacht.nl/Contact een deel van de tekst "Contact met de gemeenteraad" in de achtergrond die dezelfde kleur heeft. Zorg ervoor dat tekst altijd leesbaar blijft.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 24: Het mobiele menu is, wanneer geopend, groen en wit op een witte achtergrond. Dit geeft een contrast van 2.4:1 en is minder dan de vereiste 3.0:1.

Bevinding 25: Op https://www.h-i-ambacht.nl/ staan links in de vorm van grotere en kleinere blauwe blokken onder 2 koppen "Meest bezochte pagina's".
Bij een "hover" wordt het blauwe blok groen, en blijft de tekst wit. Het contrast van de witte tekst op de groene achtergrond is 2.4:1. Dat is minder dan de vereiste 4.5:1 voor tekst.
Dit probleem komt ook terug op https://www.h-i-ambacht.nl/Contact.

Bevinding 26: Op https://www.h-i-ambacht.nl/Contact staat een link "Maak een afspraak" en "06 4085 9667". Deze hebben een blauwe achtergrond. Bij een "hover" wordt de blauwe achtergrond groen, en blijft de tekst wit. Het contrast van de witte tekst op de groene achtergrond is 2.4:1. Dat is minder dan de vereiste 4.5:1 voor tekst.

Dit probleem komt ook terug op:

Bevinding 27: Op https://www.h-i-ambacht.nl/Zoekresultaten?freetext=test staan verschillende links ("Zoek", "1" en "1") met een zwarte tekst op een blauwe achtergrond. Deze tekst heeft een contrast van 2.37:1. Bij een "hover" word de achtergrond donkerder en zakt het nog verder naar 1.87:1. Dat is beide minder dan de vereiste 4.5:1 voor tekst.
Dit gebeurt ook op: https://www.h-i-ambacht.nl/Gewoon_Ambacht/Overzicht/Op_de_kalender/Op_de_kalender/Activiteit_of_evenement_op_de_kalender.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 28: De PDF https://www.h-i-ambacht.nl/Mediatheek/Pdf_bestanden/Spoorfonds_criteria.pdf heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

Bevinding 29: De PDF https://www.h-i-ambacht.nl/Gewoon_Ambacht/Omgevingswet/Omgevingsvisie/Verslag_ontmoeting_1.pdf heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 30: Op verschillende plekken in de website wordt een icoon gebruikt om aan te geven dat links in een andere venster openen en/of een pagina van een externe website openen. Dit wordt in de meeste gevallen gecommuniceerd met tekst in een aria-label op de bijbehorende link. Hierbij wordt de tekst ", opent externe website" toegevoegd aan de aanwezige naam. Dit werkt goed.
Op enkele plekken lijkt het echter mis te gaan. Hier wordt de hele naam vervangen door "opent externe website" waardoor de originele/visuele naam niet meer gebruikt wordt, en daarmee ook niet meer overeenkomst. Hierdoor is het doel van de link niet duidelijk.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 31: Op "https://www.h-i-ambacht.nl/" staat boven de link "x.com/gemeentehia" een lege <2>. Deze omschrijft niet de content die eronder staat. Haal deze lege kop weg.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 32: Op https://www.h-i-ambacht.nl/ staat een link met het label "x.com/gemeentehia". Deze link heeft een "aria-label" met de tekst ", opent in een nieuw venster, opent externe website". Hierdoor zit het visuele label niet in de naam van de link.

Dit probleem komt ook voor op andere pagina's, zoals:

Bevinding 33: Op pagina https://www.h-i-ambacht.nl/Inwoners/Alle_onderwerpen_Inwoners/Wijk/Meldpunt_openbare_ruimte staan 2 links, respectievelijk naar de App Store en de Google Play Store. De toegankelijke naam van deze links bevatten niet de naam visueel zichtbaar is. Bijvoorbeeld bij de link "App Store iOS" luidt de linktekst: "Ga naar apps.apple.com, opent in een nieuw venster, opent externe website". De tekst "App Store iOS" komt hier niet in voor. De woorden "Ga naar" zijn overbodig. Het is al duidelijk dat het een link is en van links is al bekend dat je ergens naartoe gestuurd wordt, hier naar de App Store. Zorg ervoor dat de visuele naam in de toegankelijke naam aanwezig is, liefst vooraan. Een goede linktekst zou in dit geval zijn: "App Store iOS, opent in een nieuw venster"; andere linkteksten kunnen ook goed zijn.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 34: Op "https://www.h-i-ambacht.nl/Gewoon_Ambacht/Overzicht/Op_de_kalender/Op_de_kalender/Activiteit_of_evenement_op_de_kalender" staat een foutmelding over een kaart/plattegrond die niet laadt. Op sommige apparaten en/of browsers wordt deze tekst in het Engels getoond. Er ontbreekt echter een correcte markering in de code (lang="en").

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-03-14 07:00:52 v2.4-011