Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Open Epe

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Open Epe
Datum 10 april 2025
Scope van de website - Alle pagina's op open.epe.nl
Buiten de scope van het onderzoek valt:
  • De pagina's epe.nl. Dit vereist een apart onderzoek.
  • Niet de PDF-documenten op https://api.common-gateway.commonground.nu/.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 20

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 alle pagina’s staat bovenaan een logo. Dit logo is als achtergrondafbeelding geplaatst en daardoor niet zichtbaar voor schermlezers. Er is ook geen tekstalternatief. Hierdoor is het logo niet toegankelijk voor bezoekers die de afbeelding niet kunnen zien. Logo’s geven informatie. Daarom moeten ze altijd voorzien zijn van een tekstalternatief. Je mag ze niet als achtergrond plaatsen, tenzij er een tekstalternatief is. Dit kan bijvoorbeeld opgelost worden door het logo als img-element te plaatsen en een alt-tekst toe te voegen die alle tekst van het logo bevat. Zie pagina https://open.epe.nl.

Bevinding 2: Op de homepage, onder de kop "Woo-publicaties van Gemeente Epe", staan 2 select-elementen met placeholder-tekst "Jaar" en "Categorie". Wanneer de bezoeker een optie selecteert, verschijnt er een knop met een "x"-icoon. Deze svg-afbeelding heeft geen tekstalternatief . Zie pagina https://open.epe.nl.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: Op de homepage https://open.epe.nl, onder de kop “Woo-publicaties van Gemeente Epe”, staan twee knoppen: “Tegels” en “Tabel”. Wanneer een bezoeker op een van de knoppen klikt, verandert de visuele weergave van de actieve knop, maar deze informatie is in de code af te lezen. Als gevolg hiervan weten blinde bezoekers niet welke knop actief is. Zorg ervoor dat de visuele verandering ook wordt gecommuniceerd aan schermlezergebruikers. Dit probleem houdt tevens verband met succescriterium 4.1.2.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 4: Op de homepage https://open.epe.nl, onder de kop “Woo-publicaties van Gemeente Epe”, staan de publicaties. De leesvolgorde is niet logisch. Datums staan boven de koppen van de artikelen. Wanneer deze artikelen van boven naar beneden hardop worden gelezen, wordt het onduidelijk bij welk artikel de datums horen.
Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

1.4 Onderscheidbaar

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 5: Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd op 200%, treedt verlies van content op. Op pagina https://open.epe.nl/?_search=doc, in de kolom onder “Samenvatting” wordt een deel van de tekst afgesneden. Zorg ervoor dat alle tekst leesbaar blijft bij 200% zoom.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 6: Wanneer de website wordt bekeken met een schermresolutie van 320 CSS-pixels of 1280 bij 1024 en ingezoomd op 400%, verschijnt er een horizontale schuifbalk op de homepage.
Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel.
Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Zie pagina https://open.epe.nl.
Hetzelfde probleem doet zich voor op de pagina https://open.epe.nl/markdown/Toegankelijkheid/?link=https://github.com/ConductionNL/woo-website-epe/blob/main/Toegankelijkheid.md, op de pagina https://open.epe.nl/cecb3757-cb96-4495-953b-42d3bbaf4d97/, op de pagina https://open.epe.nl/60930a29-830f-40b8-a7a5-89b61bc2d072/ en andere.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 7: Op de homepage https://open.epe.nl, onder de kop “Woo-publicaties van Gemeente Epe”, staan 2 select-elementen met labels “Jaar” en “Categorie”. De pijliconen geven aan dat hier extra inhoud kan worden geopend. Het pijlicoon in grijs (HEX#CCCCCC) op een witte (HEX#FFFFFF) achtergrond heeft een te lage kleurcontrastverhouding van 1,6:1.
Het kleurcontrast van de informatieve iconen moet minimaal 3,0:1 zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 8: Op alle pagina's van https://open.epe.nl, in de header, bevinden zich knoppen om de taal te wijzigen. Op dit moment kunnen deze knoppen niet worden geactiveerd met de spatiebalk of de Enter-toets. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.

Bevinding 9: Op de homepage https://open.epe.nl, onder de kop “Woo-publicaties van Gemeente Epe”, bevindt zich een select-element met het label “Jaar”. Als de opties zijn geopend, kan de toetsenbordfocus niet vrij bewegen tussen de opties en keert automatisch terug naar de eerste optie. Bezoekers die de website zonder een computermuis met alleen het toetsenbord navigeren moeten alle interactieve elementen kunnen bedienen. Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 10: Alle pagina's in de sample behalve de homepage hebben dezelfde tekst in het title-element: “Woo | Gemeente Epe | Detailpagina”. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de gebruiker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat elke pagina een unieke title-tekst heeft. Zie bijvoorbeeld https://open.epe.nl/test.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://open.epe.nl/markdown/Over_deze_website/?link=https://github.com/ConductionNL/woo-website-template/blob/main/assets/Over%20deze%20website.md, onder de koppen "Over deze website" en "OpenWoo-app", staan onzichtbare links. De toetsenbordfocus komt op deze onzichtbare links terecht. Als bezoekers met het toetsenbord door de website navigeren, moeten de interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Als de volgorde niet logisch en voorspelbaar is, kunnen bezoekers die alleen een toetsenbord gebruiken minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Alleen elementen die zichtbaar zijn mogen dus toetsenbordfocus krijgen.
Hetzelfde probleem doet zich voor op de pagina https://open.epe.nl/markdown/Toegankelijkheid/?link=https://github.com/ConductionNL/woo-website-epe/blob/main/Toegankelijkheid.md.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 12: Op alle pagina's, in de footer, onder de kop “Algemeen”, staan de knoppen “Toegankelijkheid” en “Over deze website”. De toegankelijke namen van deze knoppen zijn: “Toegankelijkheid, //github.com/ConductionNL/woo-website-epe/blob/main/Toegankelijkheid.md” en “Over deze website, //github.com/ConductionNL/woo-website-template/blob/main/assets/Over%20deze%20website.md”. De toegankelijke naam komt van een aria-label. Het gebruik van het aria-label-attribuut overschrijft alle andere methoden voor het benoemen van elementen. Schermlezers en spraakherkenningssoftware gebruikt de naam die in het aria-label staat.
Dit kan worden opgelost door de aria-label attribuut te verwijderen, bijvoorbeeld.
Zie bijvoorbeeld pagina https://open.epe.nl.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 13: Op alle pagina's staat in de footer, onder het kopje "Algemeen", de link met de zichtbare tekst "http://www.epe.nl". De toegankelijke naam van de link is echter "Website, Opent een nieuw venster". De toegankelijke naam komt van een aria-label. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan. Zie pagina https://open.epe.nl.

Bevinding 14: Op de homepage, onder de kop “Woo-publicaties van Gemeente Epe”, staat een zoekveld. De zichtbare tekst van het veld is “Zoeken...”. De toegankelijke naam is “Voer zoekopdracht in”. De toegankelijke naam komt van een aria-label. Als de zichtbare tekst van een invoerveld niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. Hetzelfde probleem doet zich in het select-element “Resultaten per pagina”. De toegankelijke naam is “Selecteer resultaten limiet”.
Zie pagina https://open.epe.nl.

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 15: Op alle pagina's, in de header, staan knoppen om de taal te wijzigen. De knop “EN” heeft een toegankelijke naam in het Engels: “Translate page to English”. Deze tekst staat in een aria-label. Deze aria-labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Dit geldt ook voor de Engelstalige versie van de pagina. Vertaal de teksten van de aria-labels naar het Nederlands. Zie pagina https://open.epe.nl.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://open.epe.nl/?_search=doc staat een select-element naast het label “Resultaten per pagina”. Wanneer een andere waarde in dit element wordt gekozen, herlaadt de pagina en begint de focus bovenaan bij de skiplink. De functionaliteit van de pagina is onvoorspelbaar en kan daardoor de bezoekers verstoren.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 17: Op de homepage https://open.epe.nl, onder de kop “Woo-publicaties van Gemeente Epe”, staat een invoerveld en 2 select-elementen met de placeholder-teksten “Zoeken..”, “Jaar” en “Categorie”. Deze elementen hebben geen permanent zichtbare label.
Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen. Voeg een label toe in de vorm van een tekst of een icoon.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 18: Op de homepage https://open.epe.nl, onder de kop “Woo-publicaties van Gemeente Epe”, staan 2 knoppen “Tegels” en “Tabel”. Wanneer een bezoeker op een van de knoppen klikt, verandert de visuele weergave van de actieve knop, maar de status (‘state’) of toegankelijke naam van de knop wordt niet aangepast in de code. Blind bezoekers weten daardoor niet welke knop actief is. Zorg ervoor dat de status van de knop ook programmatisch te bepalen is.

Bevinding 19: Op de homepage https://open.epe.nl, onder de zoekresultaten, staat een paginering. In de paginering staan links met pijltjes. Deze links hebben geneste knoppen zonder toegankelijke naam.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 20: Op pagina https://open.epe.nl/?_search=doc worden de zoekresultaten getoond wanneer een bezoeker een waarde in het zoekveld invoert. Deze resultaten zijn een statusbericht.
Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Dit kan opgelost worden door role="status" aan de melding toe te voegen.

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-08-21 01:51:57 v2.4-011