Advies- en onderzoeksbureau in digitale toegankelijkheid | properaccess.nl | 06-28742275 | contact@properaccess.nl
Deelonderzoek content digitale toegankelijkheid van website https://s-hertogenbosch.raadsinformatie.nl/
Onderzocht door
Julia en Julia van Proper Access
In opdracht van
Gemeente 's-Hertogenbosch
Leverancier techniek
Notubiz
Conformiteitsdoel
WCAG 2.1, Level AA
Methodologie
WCAG-EM
Datum
25 oktober 2024
Samenvatting
De website 's-Hertogenbosch raadsinformatie is onderzocht tussen 20 en 26 oktober 2024. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Voor dit deelonderzoek is alleen de content gecontroleerd. De content voldoet nog niet aan alle onderzochte succescriteria.
Resultaat
In dit onderzoek van content zijn 24 uit 50 succescriteria onderzocht.
Beoordeling
SC
Voldoet:
7
Voldoet: niet
17
Dit onderzoek dient gebruikt te worden in combinatie met het techniekonderzoek van Notubiz. Mocht deze link niet werken, dan is dit techniekonderzoek op te vragen bij de leverancier van het platform.
In dit rapport zijn de beschrijvingen van de succescriteria verkort. Volledige beschrijvingen zijn te vinden in de WCAG-documentatie. We bieden bij elk succescriterium ook een algemene toelichting. Hoewel de WCAG-norm voldoende duidelijkheid biedt voor gedegen onderzoek, kan de beoordeling van succescriteria op detailniveau in de toekomst veranderen. Zo kan iets dat nu wordt afgekeurd, bij een volgend onderzoek worden goedgekeurd en andersom.
Dit rapport bevat slechts voorbeelden van geconstateerde problemen; het biedt geen volledig overzicht. Omdat het onderzoek op een steekproef is gebaseerd, kan het zijn dat bepaalde problemen niet worden gedetecteerd. Deze kunnen echter bij een volgend onderzoek aan het licht komen. Bij het doorvoeren van verbeteringen moet men er rekening mee houden dat er nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Toelichting bij dit rapport
Doel van dit rapport
Dit onderzoek geeft een overzicht van de mate waarin de website momenteel voldoet aan de WCAG 2.1, niveau A en AA. WCAG, oftewel Web Content Accessibility Guidelines, zijn internationale richtlijnen voor de toegankelijkheid van webinhoud. Deze richtlijnen zijn opgedeeld in vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust, elk met specifieke meetbare succescriteria.
Testproces
Dit onderzoek is uitgevoerd volgens de WCAG-EM methodologie.
Het volgende proces is daarbij gebruikt:
vaststellen wat binnen en buiten scope valt
vaststellen gebruikte technologieën
samenstellen sample (steekproef)
onderzoek van de sample
beschrijven van gevonden issues
Het onderzoek omvat alle eisen uit de Europese toegankelijkheidsnorm EN 301 549 (WCAG 2.2).
Het grootste deel van het onderzoek is een handmatig proces. Voor een deel van de criteria wordt ter ondersteuning gebruik gemaakt van automatische tools, zoals axe-core en Chrome Developer Tools.
Kleine letters
Omdat het onderzoek gebaseerd is op een steekproef, kan het zijn dat bepaalde problemen onopgemerkt blijven en bij een volgend onderzoek anders worden geëvalueerd. De steekproef vertegenwoordigt alle content op het getoetste domein Het onderzoek biedt een momentopname; bij het doorvoeren van verbeteringen kunnen nieuwe toegankelijkheidsproblemen ontstaan.
De beoordeling per criterium is gebaseerd op falsificatie: "voldoet" betekent dat we geen redenen hebben gevonden om het als "voldoet niet" te beoordelen.
Voor elk probleem geven we maximaal drie voorbeelden. Het is mogelijk dat hetzelfde probleem op meerdere plaatsen voorkomt. Gebruik dit rapport als een blueprint om alle delen van de website te controleren.
Scope
Pagina's
Scope:
Alle content op https://s-hertogenbosch.raadsinformatie.nl/
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
De online kaarten en karteringsdiensten, tenzij ze bedoeld zijn voor navigatie (wettelijke uitzondering voor de overheid)
De kantoorbestanden van vóór 23 september 2018, tenzij ze deel uitmaken van een administratief proces (wettelijke uitzondering voor de overheid)
De audio- en videobestanden die vóór 23 september 2020 op het digitale kanaal zijn geplaatst (wettelijke uitzondering voor de overheid)
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Succescriteria die alleen te maken hebben met techniek 1.3.4, 1.4.4, 1.4.12, 1.4.13, 2.1.1, 2.2.1, 2.4.1, 2.4.3, 2.4.5, 2.4.7, 2.4.11, 2.5.1, 2.5.2, 2.5.4, 2.5.7, 3.2.1, 3.2.2, 3.2.3, 3.2.6, 3.3.4, 3.3.8, 4.1.3
Ondersteuning
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
Mozilla Firefox, versie 130
Google Chrome, versie 127
Apple Safari, versie 17
PAC software om PDF te testen
NVDA screen reader in combinatie met Firefox
VoiceOver screen reader in combinatie met Safari
gangbare browsers en hulpapparatuur
Gebruikte technologieën
De onderzochte maakt gebruik van de volgende technologieën:
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve in situaties vermeld op https://www.w3.org/Translations/WCAG22-nl/#niet-tekstuele-content.
Een afbeelding op de menuknop heeft geen tekstalternatief
Wanneer de website op een klein scherm wordt weergegeven, verschijnt er bovenaan een menuknop met een pictogram van drie horizontale lijnen. Bij activering van deze knop verandert het pictogram in een kruisje. Voor beide pictogrammen ontbreekt echter een alternatieve tekst die beschrijft wat de knop doet. Dit maakt de functie van de knop onduidelijk voor gebruikers die afhankelijk zijn van schermlezers of andere ondersteunende technologieën.
Oplossing
Voeg alternatieve teksten toe aan beide pictogrammen. Gebruik bijvoorbeeld de teksten "Menu openen" en "Menu sluiten" om duidelijk te maken wat de knop doet.
Decoratieve afbeeldingen hebben onnodige alternatieve teksten
Op de Zoekresultaten pagina staan pictogrammen met de alternatieve tekst "Agendapunt", bijvoorbeeld bij het zoekresultaat met de tekst "5. Werk en inkomen". Deze alternatieve tekst herhaalt de aangrenzende tekst en voegt geen extra informatie toe.
Oplossing
Verwijder de alternatieve teksten (het aria-label) van deze decoratieve afbeeldingen zodat ze niet worden opgelezen door schermlezers. Hierdoor worden dubbele en overbodige informatie vermeden en blijft de inhoud overzichtelijk voor gebruikers van ondersteunende technologieën.
Informatieve achtergrondafbeeldingen missen een tekstalternatief
Op de pagina Collegeberichten staat een tabel waarin elke rij extra inhoud opent wanneer ergens binnen de rij op de niet-actieve onderdelen wordt geklikt. In deze uitvouwbare inhoud zijn pictogrammen van pdf-bestanden toegevoegd als achtergrondafbeeldingen, maar er ontbreekt een tekstalternatief. Hierdoor wordt de informatie die door deze afbeeldingen wordt overgebracht ontoegankelijk voor schermlezers.
Vergadering College van B&W -openbare besluitenlijst 9 januari 2024 09-01-2024
staan in deze uitvouwbare blokken diverse informatieve pictogrammen, zoals een paperclip, een pijl-icoon naast een pdf-document, een pdf-icoon en een link-icoon. Deze pictogrammen zijn als achtergrondafbeelding toegevoegd, maar missen een tekstalternatief. Hierdoor wordt de informatie die door deze afbeeldingen wordt overgebracht ontoegankelijk voor gebruikers van schermlezers.
Oplossing
Zorg ervoor dat de informatie beschikbaar is via een tekstalternatief. Dit kan bijvoorbeeld door de tekst “PDF-document” toe te voegen aan de linktekst of aan het title-attribuut op de link. Op deze manier krijgen gebruikers van schermlezers toegang tot dezelfde informatie.
Informatieve afbeeldingen in een PDF-document missen een tekstalternatief
In het PDF-document PDF Notitie Onderzoek zorgaanbieder Smart Coach staan op pagina 4 informatieve afbeeldingen zonder tekstalternatief. Deze afbeeldingen zijn gemarkeerd met de Figure-tag, maar missen een beschrijving. Hierdoor geeft de schermlezer alleen "afbeelding" weer, zonder context over wat de afbeelding inhoudt. Blinde bezoekers weten dan wel dat er een afbeelding is, maar niet welke informatie deze bevat.
Daarnaast is het logo van 's-Hertogenbosch niet gemarkeerd met de Figure-tag. Hierdoor blijft de informatie in het logo ontoegankelijk voor blinde bezoekers en gebruikers van voorleessoftware. Het logo staat bovenaan elke pagina, maar het is voldoende om het de eerste keer te markeren met de Figure-tag.
Oplossing
Voorzie informatieve afbeeldingen die met de Figure-tag zijn gemarkeerd van een beschrijving (alt-tekst) om de inhoud ervan duidelijk te maken voor schermlezers. Het logo hoeft alleen de eerste keer dat het voorkomt te worden getagd als informatieve afbeelding met de Figure-tag, om te voorkomen dat de leesvolgorde wordt onderbroken.
Decoratieve afbeeldingen zijn onjuist gemarkeerd en informatieve afbeeldingen missen een tekstalternatief
In het PDF-document PDF GEBIEDSPASPOORT TRAMKADE staan meerdere decoratieve afbeeldingen die onjuist zijn gemarkeerd met Figure-tags. Op de eerste pagina bevindt zich een afbeelding met daaroverheen geplaatste tekst "GEBIEDSPASPOORT TRAMKADE onderdeel van de Bossche Stadsdelta". Deze decoratieve afbeelding is gemarkeerd met de Figure-tag, maar omdat de tekst uit de afbeelding al als echte tekst in het document beschikbaar is, moet deze afbeelding als ‘artefact’ worden gemarkeerd.
Daarnaast staan op onder andere pagina’s 3, 7 en 8 decoratieve foto's die ook gemarkeerd zijn met de Figure-tag. Dit moet worden opgelost door deze afbeeldingen eveneens te markeren als ‘artefact’.
Ook zijn er in dit PDF-document informatieve afbeeldingen zonder tekstalternatief. Op de pagina met de inhoudsopgave is het logo "'s-Hertogenbosch" aanwezig zonder tekstalternatief. Bovendien ontbreekt er een tekstalternatief voor een informatieve afbeelding op pagina 3. Wanneer informatieve afbeeldingen met de Figure-tag worden gemarkeerd, moeten ze altijd een beschrijving (alt-tekst) bevatten, anders weten gebruikers van voorleessoftware niet wat de afbeelding inhoudt.
Oplossing
Markeer decoratieve afbeeldingen correct als ‘artefact’, zodat ze worden genegeerd door schermlezers. Zorg daarnaast voor een beschrijving (alt-tekst) voor alle informatieve afbeeldingen die met de Figure-tag zijn gemarkeerd, zoals het logo en de afbeelding op pagina 3, om de inhoud ervan toegankelijk te maken voor gebruikers van ondersteunende technologieën.
Controleer andere pagina's op het voorkomen van deze issues.
1.2.1 - Louter-geluid en louter-videobeeld (vooraf opgenomen)
Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld. Er wordt een alternatief geleverd voor op tijd gebaseerde media dat equivalente informatie geeft voor vooraf opgenomen louter-geluid content. Er wordt een alternatief geleverd voor op tijd gebaseerde media of een geluidsspoor dat equivalente informatie geeft voor vooraf opgenomen louter-videobeeld content.
Op de pagina Vergadering 19-11-2018 staat een audiobestand zonder transcript. Het gaat om een 'louter-geluid'-fragment, aangezien er geen beeld wordt gebruikt. Mensen die doof of slechthorend zijn kunnen dit geluidsfragment niet horen, waardoor de informatie voor hen ontoegankelijk is.
Oplossing
Bied een alternatief in de vorm van een volledig uitgeschreven tekst van de audio. Deze tekst kan direct bij het audiobestand geplaatst worden (eventueel verborgen en zichtbaar gemaakt met een link), of op een aparte pagina met een directe link naar het transcript. De tekst mag ook worden aangeboden in een toegankelijke PDF die direct bij het audiobestand beschikbaar is. Dit biedt meerdere opties om de informatie toegankelijk te maken.
Kopteksten in geplande evenementen zijn niet gemarkeerd als koppen
Op de homepage, onder het kopje "Vergaderschema", staat een kolom met geplande evenementen. De kopteksten in deze evenementen zijn alleen visueel opgemaakt als koppen, maar niet gemarkeerd als kopjes. Dit geldt bijvoorbeeld voor evenementen in oktober zoals "Commissie BESTUUR" en "Commissie BEDRIJVIGHEID", en in november zoals "Gemeenteraad" en "Raadsbijeenkomst Informeren & Ontmoeten".
Oplossing
Gebruik de juiste HTML-elementen, hier h3, om deze kopteksten als koppen te markeren. Dit zorgt ervoor dat de structuur en hiërarchie van de informatie in de HTML overeenkomen met de visuele structuur, wat essentieel is voor blinde bezoekers. Koppen stellen hen in staat om de inhoud van de pagina efficiënt te scannen en eenvoudig naar verschillende secties te navigeren.
Kopteksten in pop-ups zijn niet gemarkeerd als koppen
Op de pagina met de Zoekresultaten staat een knop "Hulp bij zoeken" met een "i"-pictogram. Wanneer deze knop wordt geactiveerd, opent een pop-up. In deze pop-up is het kopje "Verfijn uw zoekopdracht" alleen visueel opgemaakt als een kop, maar is het niet gemarkeerd als een koptekst in de HTML.
Een vergelijkbaar probleem doet zich voor op de pagina Bijeenkomst/1180011/Raadsbijeenkomst_Informeren_Ontmoeten_08-01-2024 , waar een knop "Export" naast het kopje staat. Deze knop opent een pop-up met daarin de tekst "U kunt een export met of zonder documenten afdrukken." Ook deze tekst is alleen visueel opgemaakt als een kop, maar niet als zodanig in de HTML.
Oplossing
Markeer de kopteksten "Verfijn uw zoekopdracht" en "U kunt een export met of zonder documenten afdrukken" in de HTML met de juiste heading-elementen (h1 - h6). Dit zorgt ervoor dat deze koppen functioneel worden voor gebruikers van schermlezers en de structuur van de pagina consistent blijft voor alle bezoekers.
Kolomkoppen in de kalender zijn niet gemarkeerd met th-elementen
Op de homepage, onder het kopje "Vergaderschema", staat een kalender die is opgebouwd als een relationele tabel. In de header-rij zijn de kolomkoppen echter niet gemarkeerd met th-elementen. Dit zorgt ervoor dat hulpsoftware de relatie tussen deze kolomkoppen en de onderliggende datacellen niet correct kan interpreteren en voorlezen.
Oplossing
Gebruik th-elementen om de kolomkoppen in de header-rij te markeren. Hierdoor wordt de structuur van de tabel duidelijk voor hulpsoftware, zodat de relatie tussen kolomkoppen en datacellen op de juiste manier kan worden overgedragen en voorgelezen aan gebruikers van schermlezers. Het vet weergeven van teksten of het gebruik van een achtergrondkleur is namelijk niet voldoende om een tabel toegankelijk te maken.
Strong-element is gebruikt voor opmaak
Op de Bijeenkomst/1180011/Raadsbijeenkomst_Informeren_Ontmoeten_08-01-2024 zijn in de tabellen meerdere interactieve elementen aanwezig met pictogrammen, zoals het paperclip-icoon en het "i"-pictogram, die pop-ups openen. Wanneer je bijvoorbeeld op het paperclip-icoontje klikt in de cel "Dhr. Harrie Crielaars (Farent)" onder het kopje "Inspreken Raadzaal 200:30", wordt er een pop-up geopend. In deze pop-up worden teksten, zoals nummer "2" en "Alle bijlagen downloaden", visueel opgemaakt met het strong-element.
Oplossing
Gebruik het strong-element alleen wanneer de tekst semantisch benadrukt moet worden, en niet puur voor visuele opmaak. Voor visuele presentatie kan een aangepaste stijl via CSS worden toegepast. Dit zorgt ervoor dat de semantische betekenis van de tekst behouden blijft, wat essentieel is voor gebruikers van schermlezers en andere ondersteunende technologieën.
Let op! In de meeste tekstbewerkers wordt dit element toegevoegd wanneer je tekst selecteert en de knop “B” gebruikt om de tekst vet te drukken. Deze knop mag niet worden gebruikt voor opmaak. Lees meer over de toegankelijke tekstopmaak in dit artikel.
Em-element is gebruikt voor opmaak
Op de homepage, onder het kopje "Vergaderschema", staat een blok met geplande evenementen. Bij een aantal van deze evenementen, zoals “Commissie Bedrijvigheid” en “Commissie OMGEVING” in de maand november, opent een dialoogvenster met aanvullende informatie wanneer erop wordt geklikt. In deze dialoogvensters worden tekstparagrafen gemarkeerd met em-elementen. Een voorbeeld hiervan is de tekst "U kunt inspreken over voor de ..." in het dialoogvenster voor het evenement "Commissie OMGEVING".
Oplossing
Gebruik het em-element alleen wanneer er semantische nadruk moet worden gelegd op de inhoud van een tekst. Voor visuele presentatie, zoals het cursief maken van tekst, moet CSS worden gebruikt. Dit zorgt ervoor dat de semantische betekenis van het em-element behouden blijft, wat belangrijk is voor gebruikers van schermlezers en andere ondersteunende technologieën.
Let op! In de meeste tekstbewerkers wordt dit element toegevoegd wanneer je tekst selecteert en de knop “I” gebruikt om de tekst schuin te maken. Deze knop mag niet worden gebruikt voor opmaak.
Hetzelfde probleem wordt waargenomen op de pagina's:
Op de Zoekresultaten pagina staan rechts van de zoekresultaten filters. Wanneer een bezoeker op de knop "Object" klikt, opent er een pop-up met een lijst van 6 items. Deze lijst is echter niet correct gemarkeerd als lijst, waardoor de inhoud niet op dezelfde manier wordt gestructureerd voor blinde bezoekers.
Een soortgelijk probleem doet zich voor op de pagina Vaststelling gebiedspaspoort Tramkade . Wanneer op de link "Lees verder" wordt geklikt, opent er een pop-up met een lijst van 2 items onder het kopje "Besluit". Ook hier ontbreekt de correcte lijstopmaak.
Oplossing
Markeer de inhoud die als lijst wordt weergegeven in de HTML met de juiste lijst-elementen (ul, ol, li). Dit zorgt ervoor dat blinde bezoekers dezelfde informatiestructuur krijgen als visueel weergegeven op de pagina. Bovendien kan de schermlezer dan het aantal items in de lijst aankondigen, wat helpt om de gebruiker een idee te geven van de hoeveelheid informatie die volgt.
Definitielijst is niet correct gemarkeerd
Op de pagina Vergadering Commissie BESTUUR 28-10-2024 , onder het kopje "Vergadering Commissie BESTUUR 28-10-2024", staat een definitielijst. De inhoud van deze lijst is echter niet gemarkeerd met de juiste HTML-elementen. Dit zorgt ervoor dat blinde bezoekers niet dezelfde informatiestructuur krijgen als visueel weergegeven op de pagina.
Oplossing
Markeer de inhoud die als definitielijst wordt weergegeven met het dl-element, en gebruik de dt- en dd-elementen om respectievelijk de termen en hun definities aan te geven. Dit zorgt ervoor dat de informatie voor gebruikers van schermlezers duidelijk gestructureerd en toegankelijk is.
Op de pagina Bijeenkomst/1180011/Raadsbijeenkomst_Informeren_Ontmoeten_08-01-2024 staan twee gegevenstabellen onder de video. In de rij met tabelkoppen zijn de eerste en laatste cel gemarkeerd als th-cellen, maar deze bevatten geen inhoud. Lege th-cellen kunnen ertoe leiden dat blinde bezoekers de indruk krijgen dat er informatie ontbreekt.
Oplossing
Vul de th-cellen met betekenisvolle tekst om de context duidelijk te maken, of zet de lege th-cellen om in td-cellen indien er geen koptekstfunctie nodig is. Dit zorgt ervoor dat de tabellen correct worden geïnterpreteerd door schermlezers en de structuur van de gegevens duidelijk blijft. Zie ook Bijeenkomst/1180023/Raadsbijeenkomst_Informeren_Ontmoeten_18-11-2024 .
Alinea mist de juiste opmaak
Op de pagina Vaststelling gebiedspaspoort Tramkade ontbreekt in de alinea die begint met "1. de Gebiedspaspoort Tramkade vast te stellen..." de correcte opmaak. De visuele structuur van de informatie op de pagina komt niet overeen met de structuur in de HTML.
Oplossing
Gebruik het p-element voor alinea's tekst om ervoor te zorgen dat de visuele structuur van de informatie ook wordt weerspiegeld in de HTML. Dit verbetert de leesbaarheid en toegankelijkheid voor gebruikers van ondersteunende technologieën.
Kalender: relatie tussen cellen onduidelijk voor schermlezer
Op de pagina Overzicht agenda wordt een kalender met geplande gebeurtenissen weergegeven wanneer de weergave "Kalender" is geselecteerd. De kalenderinformatie is in tabelvorm gepresenteerd, met logische relaties tussen tekst, getallen en andere gegevens die zowel verticaal als horizontaal bestaan.
Momenteel wordt deze informatie echter weergegeven in een lijstelement (ul), waardoor de visueel geïmpliceerde logische relaties verloren gaan voor gebruikers die de tabel niet kunnen zien. Zonder de juiste structuur kunnen de kolommen en rijen niet correct worden herkend, wat de toegankelijkheid beperkt.
Oplossing
Gebruik het tabelelement (table) met de juiste kindelementen (tr, th en td) om de kalender weer te geven. Dit zorgt ervoor dat de relaties tussen de kolommen en rijen correct worden geïdentificeerd, zodat de informatie ook voor schermlezers logisch en toegankelijk is.
Koppen en lijsten zijn niet correct gemarkeerd in het PDF-document
In het PDF-document PDF Notitie Onderzoek zorgaanbieder Smart Coach zijn verschillende koppen en lijsten niet correct gemarkeerd, waardoor de structuur van de informatie in de tags verschilt van de visuele structuur in het document.
Problemen met koppen:
Op pagina 1 is de kop "Notitie Onderzoek zorgaanbieder Smart Coach" niet als kop gemarkeerd.
Op pagina 2 is de kop "Onderzoek zorg" niet als kop gemarkeerd.
Op pagina 2 is de heading "3. Controle locatie De Engstoep en Fort Prins Willem" gemarkeerd met behulp van L-tags in plaats van een heading-tag. Hetzelfde probleem is gevonden voor de kop "4. Overig onderzoek" op pagina 3.
Op pagina 1 staat een lege h1-tag boven de kop "2. Controle locatie Graafsebaan". Deze lege h1-tag veroorzaakt een afwijking in de structuur van de informatie.
Op pagina 2 zijn de koppen "Onderzoek Basisregistratie Personen" en "Onderzoek VTH Omgevingswet" gemarkeerd met h1-tags, maar visueel lijken ze geen eerstelijns koppen.
Probleem met lijsten:
Op pagina's 3 en 4 staat een lijst met 7 items, maar in de tags zijn deze gecodeerd als twee aparte lijsten.
Oplossing
Markeer de koppen op de juiste manier met de juiste heading-tags (h1 - h6) om de structuur van het document consistent te houden met de visuele informatie. Vervang de L-tags door de juiste heading-tags, zoals h1 of h2, afhankelijk van de visuele hiërarchie.
Vervang de lege h1-tag door een p-tag om overbodige kopstructuren te vermijden.
Vervang de h1-tags door h2-tags voor koppen die visueel als subkoppen worden gepresenteerd.
Zorg ervoor dat de lijst op pagina's 3 en 4 als één volledige lijst wordt gecodeerd, zodat de structuur correct wordt overgedragen aan gebruikers van schermlezers.
Koppen en inhoudsopgave zijn niet correct gemarkeerd in het PDF-document
In het PDF-document PDF GEBIEDSPASPOORT TRAMKADE zijn verschillende koppen en de inhoudsopgave niet correct gemarkeerd, waardoor de structuur van de informatie in de tags verschilt van de visuele structuur in het document.
Problemen met koppen:
Op pagina 2 is de kop "INHOUDSOPGAVE" opgemaakt met "NormalParagraphStyle"-tags, die de rol van P-tags hebben, in plaats van als koptekst.
Op pagina 3 is de kop "DE EINDGEBRUIKER OP NUMMER ÉÉN" gemarkeerd met "Main_Heading"-tags, die de rol van P-tags hebben, en niet als koptekst.
De kop "Doe het zelf" op pagina 3 is ook niet gemarkeerd als kop.
Probleem met de inhoudsopgave:
Op pagina 2, onder de kop "INHOUDSOPGAVE", is de inhoudsopgave gemarkeerd met "NormalParagraphStyle"-tags (P-tags). Dit resulteert in een incorrecte semantische structuur, waarbij de inhoudsopgave niet correct wordt gepresenteerd.
Oplossing
Markeer alle koppen met de juiste heading-tags (h1 - h6) om de hiërarchie en structuur van de koppen consistent te maken met de visuele opmaak.
Gebruik de juiste TOC- en TOCI-tags voor de inhoudsopgave, zodat de structuur en semantiek van de inhoudsopgave correct worden overgedragen aan schermlezers en andere ondersteunende technologieën.
Controleer andere pagina's op het voorkomen van deze issues.
Onjuiste volgorde van HTML-elementen in de carrousel met dia's
Op de homepage staat een carrousel met dia's die informatie bevatten over geplande evenementen. De volgorde van de HTML-elementen in elke dia is momenteel: datum, kop, tijd en aanvullende informatie. Deze volgorde in de HTML kan verwarring veroorzaken over de relatie tussen de koppen en de bijbehorende informatie.
Oplossing
Plaats de koppen eerst in de HTML-code, gevolgd door de bijbehorende informatie zoals de datum, tijd en aanvullende details. Dit zorgt ervoor dat de relatie tussen de kop en de bijbehorende informatie duidelijk is, ook voor gebruikers van schermlezers en andere ondersteunende technologieën. Houd er rekening mee dat de visuele lay-out anders kan worden gepresenteerd via CSS zonder de HTML-structuur te wijzigen.
Tags in het PDF-document zijn niet in een logische volgorde geplaatst
In het PDF-document PDF GEBIEDSPASPOORT TRAMKADE zijn tags op meerdere pagina's niet in een logische volgorde geplaatst. Op pagina 4 en 5 zijn de tags bijvoorbeeld in de volgende volgorde gestructureerd: eerst is er een overgang naar het nummer 4, dan naar de verklarende tekst op de pagina, vervolgens naar de beschrijving naast het nummer 4, daarna een overgang naar het nummer 5, dan naar het nummer 1, en tenslotte naar de beschrijving naast het nummer 5, enzovoort. Dit patroon zet zich ook voort op pagina 6 en andere pagina's in dit document.
Oplossing
Zorg ervoor dat de tags in de codelaag van het PDF-document de inhoud in een logische volgorde weergeven. Dit betekent dat de tags moeten worden gestructureerd volgens de visuele volgorde van de inhoud op de pagina, zodat schermlezers de tekst in een logische en begrijpelijke volgorde voorlezen. Dit verbetert de toegankelijkheid voor blinde bezoekers en gebruikers van ondersteunende technologieën.
Controleer andere pagina's op het voorkomen van deze issues.
Autocomplete-attribuut ontbreekt in formulier voor persoonlijke gegevens
Screen 1.3.5
Op de pagina Registratieformulier staat een formulier met invoervelden voor het verzamelen van persoonlijke gegevens, zoals achternaam, voornaam, e-mailadres, gebruikersnaam en wachtwoord. Bij deze invoervelden ontbreekt het attribuut autocomplete.
Oplossing
Zorg ervoor dat bij invoervelden voor persoonlijke gegevens het autocomplete-attribuut aanwezig is. Dit stelt browsers en hulpsoftware in staat om ondersteuning te bieden bij het invullen van de velden, bijvoorbeeld door deze automatisch in te vullen. Gebruik voor het invoerveld voor een e-mailadres bijvoorbeeld autocomplete="email". Meer informatie over het gebruik van dit attribuut en verplichte waarden is te vinden op de volgende pagina: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Onvoldoende kleurcontrast tussen lichtbruine en grijze kleuren op de website
Op alle pagina's van de website wordt een lichtbruine kleur gebruikt in combinatie met een grijze kleur. Het kleurcontrast tussen deze twee kleuren is te laag, variërend tussen 2,7:1 en 2,4:1, terwijl het minimaal 3,0:1 moet zijn voor visuele indicatoren en andere interface-elementen.
Voorbeelden:
Startpagina - Kalender: De lichtbruine rand die verschijnt wanneer dagen worden geselecteerd of gemarkeerd, heeft onvoldoende contrast ten opzichte van de grijze achtergrond.
Acties in tabel: Op de pagina Collegeberichten zijn de pictogrammen in de kolom "Acties" slecht zichtbaar wanneer een optie in de tabel is geselecteerd.
Uitgebreide Kalender: Op de pagina Overzicht agenda zijn de driehoekjes die aangeven dat een evenement is gepland voor een specifieke dag, slecht zichtbaar door het lage contrast.
Oplossing
Zorg ervoor dat het kleurcontrast tussen de lichtbruine en grijze kleuren minstens 3,0:1 is om de zichtbaarheid van visuele indicatoren en interface-elementen te verbeteren. Pas de kleuren van deze elementen aan om de toegankelijkheid te waarborgen voor alle gebruikers, vooral degenen met visuele beperkingen of kleurenblindheid.
Onvoldoende kleurcontrast in knoppen met grijze achtergrond
Op sommige pagina's in het sample wordt een grijze kleur gebruikt, maar de kleurcontrastverhouding is onvoldoende. Op de Zoekresultaten is er een knop "Hulp bij zoeken" met een "i"-pictogram. De kleur van de "i" op het pictogram is wit (#FFFFFF) tegen een grijze achtergrond (#B2B2B2) met een contrastverhouding van 2,1:1, wat onvoldoende is. Bovendien heeft de grijze achtergrond van het pictogram een laag contrast ten opzichte van de witte achtergrond van de pagina, wat ook onvoldoende is.
Oplossing
Verhoog het kleurcontrast door de kleur van de "i" op het pictogram of de achtergrondkleur van het pictogram aan te passen, zodat het contrast voldoet aan de minimale vereisten. Voor pictogrammen moet het contrast ten minste 3,0:1 zijn om goed zichtbaar te zijn voor gebruikers met een visuele beperking of kleurenblindheid.
Onvoldoende kleurcontrast van pictogrammen in filtermenu en tabel
Op de pagina Collegeberichten zijn verschillende pictogrammen geïdentificeerd met een te laag kleurcontrast ten opzichte van de achtergrond:
Filtermenu: In het filtermenu, dat wordt geopend wanneer op het filterpictogram wordt geklikt, zijn kalenderpictogrammen grijs (#D6D6D6) tegen een witte achtergrond (#FFFFFF). Het kleurcontrast is 1,5:1, wat onvoldoende is voor een goede zichtbaarheid.
Kolom "Acties": In de tabel in de kolom "Acties" zijn de pictogrammen ook grijs (#D4D4D4) op een witte achtergrond, met een contrastverhouding van 1,5:1, wat niet voldoet aan de contrastvereisten.
Oplossing
Verhoog het kleurcontrast van de pictogrammen door de kleur van de pictogrammen of de achtergrond aan te passen, zodat het contrast voldoet aan de minimale vereiste van 3,0:1. Dit zorgt ervoor dat de pictogrammen beter zichtbaar en toegankelijk zijn voor gebruikers met visuele beperkingen of kleurenblindheid.
Controleer andere pagina's op het voorkomen van deze issues.
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Onvoldoende kleurcontrast in de voortgangsbalk van de videospeler
Op de pagina Vergadering Gemeenteraad 08-10-2024 staan onder het kopje "Agendapunten" knoppen waarmee bezoekers naar specifieke punten in de video kunnen springen. Wanneer een agendapunt wordt geselecteerd, verschijnt er een voortgangsbalk die de huidige voortgang aangeeft. Het deel van de video dat al is afgespeeld, wordt weergegeven in groen (#34BD14), terwijl het resterende deel wordt weergegeven in wit.
Het kleurcontrast tussen deze twee kleuren is echter te laag, waardoor het moeilijk is om de voortgang duidelijk waar te nemen, vooral voor mensen met een visuele beperking of kleurenblindheid.
Oplossing
Zorg voor voldoende contrast tussen de kleuren van de voortgangsbalk, zodat de voortgang duidelijk zichtbaar is voor alle gebruikers. Streef naar een contrastverhouding van minimaal 4,5:1 om ervoor te zorgen dat de informatie goed waarneembaar is, ook voor mensen met een visuele beperking.
Zie ook pagina Vergadering 19-11-2018 .
Kleur wordt gebruikt om informatie over te brengen in foto's en grafieken
In het PDF-document GEBIEDSPASPOORT TRAMKADE wordt op pagina's 15, 22 en 23 kleur gebruikt om informatie over te brengen in foto's met kaarten en grafieken. De kleur wordt bijvoorbeeld gebruikt om gebieden aan te duiden in de kaarten, en balken in de grafieken te onderscheiden. Dit is ook zichtbaar in de legenda's.
Wanneer kleur als enige middel wordt gebruikt om gebieden of categorieën te onderscheiden, kan dit problematisch zijn voor mensen met kleurenblindheid of andere visuele beperkingen. Hierdoor kan de informatie onduidelijk zijn en moeilijk te interpreteren.
Oplossing
Gebruik naast kleur ook andere visuele indicatoren om de informatie over te brengen. Dit kunnen bijvoorbeeld datalabels zijn of patronen en vormen die overeenkomen met de legenda en de balken of gebieden in de grafieken. Zo wordt de informatie niet alleen door kleur overgedragen, maar ook door andere herkenbare elementen.
Controleer andere pagina's op het voorkomen van deze issues.
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in specifieke gevallen. Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1. Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis. Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.
Onvoldoende kleurcontrast tussen lichtbruine en witte/grijze kleuren
Op alle pagina's van de website wordt een lichtbruine kleur gebruikt voor bepaalde elementen. Het kleurcontrast ten opzichte van de witte of grijze achtergrond is echter te laag, met waarden van 3,0:1 en 2,8:1. Volgens de richtlijnen moet het contrast voor tekst die kleiner is dan 24px en niet vet is, minstens 4,5:1 zijn om goed leesbaar te zijn voor alle gebruikers.
Voorbeelden van onvoldoende contrast:
De link "Overzicht" op de homepage.
De knop "Uitgebreide kalender" op de homepage.
De aanduiding van de huidige dag in de kalender op de homepage.
Oplossing
Verhoog het kleurcontrast door de kleuren van de tekst of de achtergrond aan te passen, zodat ze voldoen aan de minimale contrastverhouding van 4,5:1 voor gewone tekst. Dit verbetert de leesbaarheid en toegankelijkheid voor gebruikers met een visuele beperking of kleurenblindheid.
Meer voorbeelden zijn:
Zoekresultaten zie de knop "Zoeken", labelteksten in de filters: "Sorteren op" en "Toon resultaten", de koptekst bij elk zoekresultaat
Op de pagina Collegeberichten zie de koptekst "Collegeberichten", de koptekst van de tabel, bijvoorbeeld "Selectie". In het filtermenu, dat wordt geopend als op het filter icoon wordt geklikt, staan bruine teksten "Datum bericht" en "Datum publicatie". In het menu "Exporteren" staan ook bruine teksten, bijvoorbeeld "Documenten".
Onvoldoende kleurcontrast voor getallen in filteropties
Op de zoekresultatenpagina Zoekresultaten staan rechts van de zoekresultaten filters. De filteropties bevatten het aantal resultaten voor elke optie, zoals onder de filters "Object" bij de optie "Evenement (zonder agendapunten en documenten)" met het getal "(1)". De kleur van deze getallen is grijs (#999999) tegen een witte achtergrond. Het kleurcontrast is 2,8:1, wat te laag is.
Oplossing
Verhoog het kleurcontrast van de getallen in de filteropties, zodat het minstens 4,5:1 is ten opzichte van de achtergrondkleur. Dit zorgt voor betere leesbaarheid en toegankelijkheid voor gebruikers met een visuele beperking of kleurenblindheid.
Onvoldoende kleurcontrast in filtermenu en uitklapbare inhoud
Op de pagina Collegeberichten bevindt zich een filtermenu dat wordt geopend wanneer op het filterpictogram wordt geklikt. In dit menu en andere elementen zijn verschillende kleurcontrastproblemen geïdentificeerd:
Filtermenu: De grijze tekst "Filteropties" (#797979) staat op een lichtgrijze achtergrond (#F8F8F8) met een contrastverhouding van 4,1:1, wat te laag is voor tekst.
Knoppen in filtermenu: De knoppen "Reset filter" en "Pas filter toe" hebben witte tekst op een grijze achtergrond, met een contrastverhouding van 2,6:1, wat onvoldoende is.
Menu "Exporteren": De knoppen "PDF" en "Excel" hebben ook een onvoldoende contrastverhouding.
Uitklapbare inhoud in tabel: De grijze tekst (#A2A2A2) staat op een witte achtergrond (#FFFFFF) met een contrastverhouding van 2,6:1. Dit is zichtbaar bij de teksten met pdf-pictogrammen in de uitklapbare inhoud.
Zorg ervoor dat het kleurcontrast voor alle teksten en knoppen minimaal 4,5:1 is voor gewone tekst en 3,0:1 voor grote tekst (minstens 24px of vetgedrukt). Pas de kleuren van de teksten en achtergronden aan om te voldoen aan deze minimale contrastvereisten, zodat de leesbaarheid en toegankelijkheid voor alle gebruikers worden gewaarborgd.
Onvoldoende kleurcontrast in pop-ups bij interactieve elementen
Op de pagina Bijeenkomst/1180011/Raadsbijeenkomst_Informeren_Ontmoeten_08-01-2024 bevinden zich tabellen met meerdere interactieve elementen, zoals een paperclip-icoon en een "i"-pictogram, waarmee pop-ups worden geopend. In deze pop-ups staan grijze teksten op een witte achtergrond met een kleurcontrast van 3,5:1. Dit contrast is onvoldoende voor een goede leesbaarheid.
Wanneer op het paperclip-icoontje wordt geklikt in de kolom onder het kopje "Informeren Leuvenzaal 19:00-19:40", opent een pop-up met de tekst "Inkoopvisie Basisondersteuning en Jongerenwerk 2025 en verder (raadsvoorstel)". In deze pop-up staan grijze teksten zoals "Raadsvoorstellen", "Raadsvoorstellen", "Document | 267 KB", enz.
Oplossing
Zorg ervoor dat het kleurcontrast van de teksten in de pop-ups minstens 4,5:1 is ten opzichte van de achtergrondkleur. Pas de kleur van de tekst of de achtergrond aan om de toegankelijkheid en leesbaarheid voor alle gebruikers te verbeteren.
Onvoldoende kleurcontrast in uitvouwbare blokken en knoppen
Uitvouwbare blokken: De blokken met witte tekst op een rode achtergrond (#FF0000) hebben een contrastverhouding van 1,5:1. Dit is onvoldoende voor een goede leesbaarheid, met name in de blokken onder de kopjes "9. Besteding vrijvallende Essent-gelden voor de energietransitie (bevat stemmingen)", "10. Gebiedspaspoort Tramkade (bevat stemmingen)", "12. Beleidsplan begraafplaatsen 2024 's-Hertogenbosch en betreffende verordeningen", enzovoort.
Videospelerknop "Agendapunten": Wanneer de bezoeker op deze knop klikt, wordt aanvullende informatie weergegeven, waaronder de link "Toevoegen aan Outlook". Deze link heeft een grijze kleur (#444444) op een zwarte achtergrond (#0D0D0D) met een contrastverhouding van 2,0:1, wat onvoldoende is.
Zorg ervoor dat het kleurcontrast van de teksten in de pop-ups minstens 4,5:1 is ten opzichte van de achtergrondkleur.
Onvoldoende kleurcontrast in de kalenderweergave
Op de pagina Overzicht agenda, wanneer de weergave "Kalender" is geselecteerd, zijn er meerdere kleurcontrastproblemen geïdentificeerd:
Dagen van de vorige en volgende maand: De getallen en hun achtergrond gebruiken grijze en witte kleuren met een contrastverhouding van 2,7:1, wat onvoldoende is voor een goede leesbaarheid.
Dagen van de huidige maand: De getallen hebben een contrastverhouding van 3,4:1 en 3,8:1 ten opzichte van hun achtergrondkleur, wat niet voldoet aan de minimale contrastvereisten.
Huidige dag: Als de huidige dag wordt weergegeven op een grijze achtergrond (#F2F2F2), is het contrast met het rode nummer van de dag (#CA4033) 4,4:1, wat net onder de aanbevolen contrastverhouding van 4,5:1 ligt.
Oplossing
Verhoog het kleurcontrast tussen de getallen en de achtergrondkleuren om een minimale contrastverhouding van 4,5:1 te bereiken. Dit zorgt voor een betere leesbaarheid en toegankelijkheid, vooral voor gebruikers met visuele beperkingen of kleurenblindheid.
Onvoldoende kleurcontrast voor foutmeldingen in formulier
Op de Registratieformulier pagina staat een formulier onder het kopje "Inloggegevens". Wanneer dit formulier wordt verzonden met onjuiste gegevens, verschijnen er foutmeldingen in rode tekst (#FF0000) op een witte achtergrond. Het kleurcontrast van deze foutmeldingen is 4,0:1, wat onvoldoende is voor een goede leesbaarheid.
Oplossing
Verhoog het kleurcontrast van de foutmeldingen tot minimaal 4,5:1 ten opzichte van de witte achtergrond. Dit kan worden bereikt door de kleur van de tekst aan te passen, zodat deze beter zichtbaar is voor gebruikers, inclusief mensen met een visuele beperking of kleurenblindheid.
Onvoldoende kleurcontrast in PDF-document
In het PDF-document GEBIEDSPASPOORT TRAMKADE zijn verschillende gevallen van onvoldoende kleurcontrast gedetecteerd, zowel voor kleine als grote teksten. Hieronder staan enkele voorbeelden.
Kleine tekst:
Pagina 1: Witte tekst "onderdeel van de Bossche Stadsdelta" op een achtergrond met een afbeelding heeft een contrastverhouding van 1,5:1.
Pagina's 2, 3, 4, 5: Witte tekst "waterkavel 4" op een gele achtergrond met een contrastverhouding van 1,3:1.
Pagina's 2 en 3: Witte tekst "kavel 4" op een donkergroene achtergrond met een contrastverhouding van 2,7:1.
Pagina's 2 en 3: Witte tekst "kavel 11" op een groene achtergrond met een contrastverhouding van 1,9:1.
Voor kleine tekst moet het contrast minstens 4,5:1 zijn om goed leesbaar te zijn.
Grote tekst:
Pagina 1: Witte tekst "TRAMKADE" op een achtergrond met een afbeelding heeft een contrastverhouding van 1,5:1.
Voor grote tekst (minimaal 24px of vetgedrukt) moet het contrast minstens 3,0:1 zijn om goed leesbaar te zijn.
Oplossing
Zorg ervoor dat de kleurcontrastverhoudingen van alle teksten in het document voldoen aan de minimale eisen van 4,5:1 voor kleine tekst en 3,0:1 voor grote tekst. Dit kan worden bereikt door de kleuren van de tekst en/of de achtergronden aan te passen, zodat de informatie leesbaar is voor gebruikers met visuele beperkingen of kleurenblindheid.
Controleer andere pagina's op het voorkomen van deze issues.
Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken ( uitzetten,opnieuw toe te wijzen of alleen actief bij focus).
Sneltoetsen in videospeler zijn actief buiten de focus van de knop
Op de pagina Vergadering Gemeenteraad 08-10-2024 staat een video met een videospeler waarin sneltoetsen met één teken kunnen worden gebruikt, zoals "m" en "f". Het probleem is dat deze sneltoetsen actief blijven, zelfs wanneer de toetsenbordfocus op een ander element binnen de video staat. Dit kan problematisch zijn voor mensen die spraakbediening gebruiken, waarbij deze letters kunnen voorkomen in uitgesproken woorden, en voor gebruikers die per ongeluk een toets indrukken.
Oplossing
Zorg ervoor dat de sneltoetsen alleen actief zijn wanneer de focus op de betreffende knop in de videospeler staat. Dit voorkomt onbedoelde acties en biedt een veiligere en intuïtievere ervaring voor gebruikers van spraakbediening en toetsenbordnavigatie.
Dit komt in alle videospelers voor:
Het probleem met niet-unieke titels is dat het kan leiden tot verwarring voor gebruikers, vooral voor mensen die schermlezers of zoekmachines gebruiken om door de pagina’s te navigeren. Alle pagina-titels moeten een unieke tekst bevatten die de inhoud van de pagina beschrijft, gevolgd door de naam van de organisatie.
Oplossing
Pas de titels van de pagina’s aan zodat elke pagina een unieke titel heeft die de inhoud nauwkeurig beschrijft. Bijvoorbeeld: "Raadsinformatie Gemeente 's-Hertogenbosch – Live" voor de livepagina en "Raadsinformatie Gemeente 's-Hertogenbosch – Homepage" voor de homepage.
Pagina's met onvoldoende beschrijvende titels
Op meerdere pagina's in de steekproef zijn titels geïdentificeerd die onvoldoende de inhoud van de pagina beschrijven. Dit kan verwarrend zijn voor bezoekers en vermindert de toegankelijkheid, vooral voor mensen die gebruikmaken van schermlezers of zoekmachines.
Pagina 3: Overzichtheeft de titel "Overzicht Gemeente 's-Hertogenbosch".
Oplossing
Pas de titels van deze pagina’s aan zodat elke titel een duidelijke beschrijving van de inhoud bevat, gevolgd door de naam van de organisatie. Bijvoorbeeld:
"Raadsbijeenkomst Informeren & Ontmoeten – 08-01-2024 | Gemeente 's-Hertogenbosch" voor de eerste bijeenkomstpagina.
"Raadsbijeenkomst Informeren & Ontmoeten – 18-11-2024 | Gemeente 's-Hertogenbosch" voor de tweede bijeenkomstpagina.
"Uitgebreide Kalender | Gemeente 's-Hertogenbosch" voor de pagina met de uitgebreide kalender.
Dit helpt bezoekers om snel te begrijpen waar de pagina over gaat en verbetert de toegankelijkheid en vindbaarheid.
PDF-documenten zonder titel
In de steekproef zijn PDF-documenten gevonden zonder een ingestelde titel. Dit kan problemen opleveren voor gebruikers van hulpsoftware, omdat de titel essentieel is voor de navigatie tussen documenten en om te begrijpen waar het document over gaat.
Voorbeelden:
Document 2: PDF GEBIEDSPASPOORT TRAMKADE heeft eveneens geen titel. De huidige instelling gebruikt de bestandsnaam in plaats van een titel.
Oplossing
Stel een titel in voor elk PDF-document die een korte beschrijving van de inhoud biedt. Dit kan worden ingesteld via de bestandseigenschappen. Zorg ervoor dat de titel wordt weergegeven in de titelbalk in plaats van de bestandsnaam. Dit verbetert de toegankelijkheid en navigatie voor gebruikers van hulpsoftware.
Controleer andere pagina's op het voorkomen van deze issues.
Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis kan hebben voor gebruikers in het algemeen.
Links met pijlpictogrammen hebben dezelfde toegankelijke naam
Op de pagina Collegeberichten staan in de tabel, in de kolom "Acties", links met pijlpictogrammen. Alle links hebben dezelfde toegankelijke naam: "Bekijken". Hoewel ze naar verschillende pagina's leiden, beschrijven de toegankelijke namen niet duidelijk het doel van elke link.
Wanneer meerdere links dezelfde toegankelijke naam hebben, maar naar verschillende bestemmingen leiden, kan dit verwarrend zijn voor gebruikers, vooral voor degenen die voorleessoftware gebruiken. Het wordt onduidelijk naar welk doel of welke pagina elke link leidt, waardoor navigatie en het gebruik van de website moeilijker wordt.
Oplossing
Voorzie elke link van een unieke en beschrijvende toegankelijke naam die het doel of de bestemming van de link duidelijk maakt. Bijvoorbeeld "Bekijk rapport [naam]" of "Bekijk details [onderwerp]" in plaats van alleen "Bekijken". Dit helpt gebruikers te begrijpen waar elke link naartoe leidt en vergemakkelijkt de navigatie voor mensen met een visuele beperking.
Controleer andere pagina's op het voorkomen van deze issues.
Wanneer alle pagina's op een klein scherm worden weergegeven, verschijnt er bovenaan een menuknop met een pictogram van drie horizontale lijnen. Bij het klikken op deze knop verandert het pictogram in een kruisje, maar de toegankelijke naam van de knop blijft "Menu". Dit beschrijft niet duidelijk welke acties de knop uitvoert.
De toegankelijke naam van een knop moet beschrijven wat de actie van de knop is, vooral wanneer de knop van status verandert. Als de naam ongewijzigd blijft terwijl het pictogram verandert, kan dit verwarrend zijn voor gebruikers van schermlezers, omdat zij niet duidelijk geïnformeerd worden over de nieuwe functie van de knop.
Oplossing
Pas de toegankelijke naam van de knop aan zodat deze dynamisch verandert afhankelijk van de status. Gebruik bijvoorbeeld "Menu openen" wanneer het pictogram drie lijnen toont en "Menu sluiten" wanneer het pictogram in een kruisje verandert. Dit helpt gebruikers van schermlezers te begrijpen welke actie de knop uitvoert.
Onjuiste toegankelijke naam voor uitklapbare knoppen in filters
Op de pagina Zoekresultaten staan rechts van de zoekresultaten uitklapbare blokken voor filters. Elk blok kan geopend en gesloten worden met knoppen die pijlen omhoog en omlaag bevatten. De toegankelijke naam voor beide knoppen is ingesteld op "klap uit voor de opties object".
De toegankelijke naam van een knop moet duidelijk de functie van de knop beschrijven. Wanneer twee knoppen met verschillende functionaliteiten dezelfde toegankelijke naam hebben, kan dit verwarrend zijn voor gebruikers van schermlezers. Het is niet duidelijk welke actie elke knop uitvoert (uitklappen of inklappen).
Ook op pagina Vergadering Commissie BESTUUR 28-10-2024 staat een knop naast de kop "Vergadering Commissie BESTUUR 28-10-2024" met een toegankelijkheidsnaam die niet voldoet: "Openen/Sluiten". Dezelfde knop komt ook op andere pagina’s voor.
Oplossing
Zorg ervoor dat de toegankelijke naam van elke knop duidelijk de bijbehorende actie beschrijft. Bijvoorbeeld, gebruik "Opties uitklappen" voor de knop met de pijl omlaag en "Opties inklappen" voor de knop met de pijl omhoog. Dit helpt gebruikers van schermlezers om te begrijpen welke actie elke knop uitvoert.
Dubbelzinnige toegankelijke namen voor invoervelden in het filtermenu
Op de pagina Collegeberichten is er een filtermenu dat wordt geopend wanneer op het filterpictogram wordt geklikt. In dit menu zijn er twee invoervelden voor het invoeren van datums. De velden met de placeholder-tekst “Van” hebben beide dezelfde toegankelijke naam: “Van”. De velden met de placeholder-tekst “Tot en met” hebben toegankelijke namen zoals “Datum bericht” en “Datum publicatie”.
De toegankelijke namen van deze velden zijn dubbelzinnig en beschrijven niet duidelijk welke specifieke datums moeten worden ingevoerd. Dit kan verwarrend zijn voor gebruikers, vooral voor degenen die afhankelijk zijn van schermlezers om de velden te identificeren.
Oplossing
Pas de toegankelijke namen van de invoervelden aan om duidelijk het doel van elk veld te beschrijven. Gebruik bijvoorbeeld namen zoals "Van: begindatum bericht" en "Tot en met: einddatum bericht" om de context duidelijk te maken. Dit helpt gebruikers om te begrijpen welke datums in elk veld moeten worden ingevoerd.
Onduidelijke toegankelijke namen voor knoppen met nummers en paperclip-iconen
Op de pagina staan knoppen met nummers en paperclip-iconen. De toegankelijke namen van deze knoppen bevatten alleen de getallen, zoals "1", "2", enzovoort. Hierdoor is de functie van de knop niet duidelijk voor gebruikers van schermlezers. Wanneer de toegankelijke naam van een knop alleen een getal bevat, geeft dit geen duidelijke informatie over de functie van de knop. Dit kan verwarrend zijn voor gebruikers die afhankelijk zijn van schermlezers, omdat zij niet weten wat er zal gebeuren wanneer ze op de knop klikken.
Oplossing
Geef elke knop een toegankelijke naam die de functie beschrijft, zoals "Bijlagen bij punt 1 openen" of "Bijlagen bij punt 2 openen". Dit maakt duidelijk wat de knop doet en helpt gebruikers van schermlezers om de functies van de knoppen te begrijpen.
Onduidelijke en niet-unieke toegankelijke namen voor knoppen en interactieve elementen
Op verschillende pagina's zijn knoppen en interactieve elementen geïdentificeerd met onduidelijke of niet-unieke toegankelijke namen. Dit kan voor verwarring zorgen bij gebruikers van schermlezers, omdat ze de functie van de knoppen en elementen niet goed kunnen begrijpen of onderscheiden.
Probleem 1: Knoppen om video’s op specifieke punten te starten
Pagina's met video-agenda: Onder het kopje “Agenda” staan knoppen die dienen om een video op een bepaald punt te starten, zoals de knop "Opening". Deze toegankelijke namen beschrijven niet duidelijk de functie van de knop (het starten van de video op een specifiek agendapunt). Zie Vergadering Gemeenteraad 08-10-2024 .
Probleem 2: Knoppen met “i”-pictogram
Onder het kopje “Agendapunten” zijn er knoppen met een “i”-pictogram die verschillende inhoud openen, maar alle knoppen hebben dezelfde toegankelijke naam: “informatie”. Hierdoor is het voor gebruikers van schermlezers niet duidelijk welke knop welke inhoud opent. Zie Vergadering Gemeenteraad 08-10-2024 .
Probleem 3: Interactieve elementen met pictogrammen in tabellen
Pagina's met interactieve tabellen: In de tabellen worden interactieve elementen met een paperclip-icoon en een “i”-pictogram gepresenteerd. Alle elementen met een paperclip-icoon hebben de toegankelijke naam “Bijlagen agendapunt” en de elementen met het “i”-pictogram hebben de toegankelijke naam “Extra informatie agendapunt”. Deze namen zijn niet specifiek genoeg om gebruikers te helpen de juiste knop te kiezen. Zie Bijeenkomst/1180011/Raadsbijeenkomst_Informeren_Ontmoeten_08-01-2024 .
Oplossing
Voor de knoppen in de agenda: Voorzie de knoppen van een toegankelijke naam die duidelijk beschrijft dat de video op een specifiek punt start, zoals "Start video bij Opening".
Voor de knoppen met “i”-pictogram: Voorzie elke knop van een unieke toegankelijke naam die beschrijft welke inhoud de knop opent, bijvoorbeeld “Bekijk meer informatie over Opening” of “Bekijk details voor Agendapunt 1”.
Voor interactieve elementen in de tabellen: Maak de toegankelijke namen specifieker, bijvoorbeeld “Bijlagen voor Agendapunt 1 openen” en “Bekijk extra informatie over Agendapunt 2”. Dit helpt gebruikers te begrijpen welke actie elke knop uitvoert en voorkomt verwarring.
Controleer andere pagina's op het voorkomen van deze issues.
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
In de header van de website staat een logo dat fungeert als een link. De zichtbare tekst van het logo is “s-Hertogenbosch”, terwijl de toegankelijke naam van de link is ingesteld op “Overzicht”.
De toegankelijke naam van de link komt niet overeen met de zichtbare tekst in het logo. Dit kan problemen opleveren voor gebruikers van stemgestuurde systemen en schermlezers, omdat de toegankelijke naam niet duidelijk overeenkomt met de visueel weergegeven tekst.
Oplossing
Zorg ervoor dat de toegankelijke naam van de link de zichtbare tekst "s-Hertogenbosch" bevat, bij voorkeur aan het begin van de toegankelijke naam. Bijvoorbeeld: “s-Hertogenbosch - Overzicht”. Dit maakt de link beter toegankelijk voor stemgestuurde systemen en schermlezers, en zorgt voor consistentie tussen de visuele en toegankelijke inhoud.
Inconsistentie tussen zichtbare tekst en toegankelijke namen bij invoervelden
Op de pagina Collegeberichten is er een filtermenu dat wordt geopend wanneer op het filterpictogram wordt geklikt. In dit menu zijn er invoervelden voor het invoeren van datums met de plaatsaanduiding “Tot en met”. Deze velden hebben de volgende toegankelijke namen: “Datum bericht” en “Datum publicatie”.
Daarnaast is er een zoekveld dat wordt geopend wanneer op het pictogram met een vergrootglas wordt geklikt. De placeholder-tekst van dit zoekveld is “Zoeken op het veld ‘Titel’ binnen getoonde items met de huidige filterinstellingen”, terwijl de toegankelijke naam is ingesteld op “Zoekveld”.
Het succescriterium vereist dat de zichtbare tekst in de toegankelijkheidsnaam van een element is opgenomen om bediening met spraaksoftware mogelijk te maken. Wanneer de zichtbare tekst, zoals de placeholder-tekst, afwijkt van de toegankelijke naam, kunnen stemgestuurde systemen het invoerveld niet correct identificeren.
Oplossing
Zorg ervoor dat de zichtbare tekst onderdeel is van de toegankelijke naam van het invoerveld, bij voorkeur aan het begin van de naam. Bijvoorbeeld:
Voor de datumvelden: “Tot en met – Datum bericht” en “Tot en met – Datum publicatie”.
Voor het zoekveld: “Zoeken op het veld ‘Titel’ binnen getoonde items – Zoekveld”.
Dit helpt gebruikers die spraaksoftware gebruiken om de invoervelden correct te identificeren en te bedienen.
Controleer andere pagina's op het voorkomen van deze issues.
Onjuiste taalinstelling in de metadata van het PDF-document
In de metadata van het PDF-document PDF GEBIEDSPASPOORT TRAMKADE is de taal ingesteld op "en-US". Aangezien dit document in de Nederlandse taal is geschreven, moet de taalcode worden gewijzigd naar "nl-NL".
De taalinstelling van een PDF-document zorgt ervoor dat hulpsoftware de informatie met de juiste uitspraakregels voorleest. Wanneer de taal verkeerd is ingesteld, kan dit leiden tot incorrecte uitspraak en verwarring voor gebruikers die afhankelijk zijn van schermlezers.
Oplossing
Wijzig de taalinstelling in de metadata van het document naar "nl-NL". Dit kan worden ingesteld via de bestandseigenschappen in de PDF-software. Dit zorgt ervoor dat hulpsoftware de inhoud van het document correct voorleest volgens de Nederlandse uitspraakregels.
Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
Op de pagina Registratieformulier staat een formulier waarin foutvalidatie is geïmplementeerd. De foutmelding die verschijnt voor het veld "Gebruikersnaam" beschrijft echter niet wat er mis is gegaan met de ingevoerde gegevens.
Huidige foutmelding: “Het veld Gebruikersnaam moet minimaal 5 karakters bevatten.”
De huidige foutmelding geeft een instructie, maar legt niet duidelijk uit wat er fout is gegaan met de ingevoerde gegevens. Een foutmelding moet de bezoeker uitleggen wat er mis is gegaan, zodat deze de invoer kan corrigeren.
Oplossing
Verander de foutmelding in een duidelijke beschrijving van het probleem, bijvoorbeeld: “De ingevoerde gebruikersnaam is te kort. Voer een gebruikersnaam in van minimaal 5 karakters.” Dit geeft de gebruiker een duidelijke uitleg over wat er mis is gegaan en hoe het probleem kan worden opgelost.
Controleer andere pagina's op het voorkomen van deze issues.
Op de pagina Collegeberichten, onder het kopje “Collegeberichten”, staat een select-element zonder visueel label. Dit select-element heeft een waarde “Alle weken”. De eerste optie in dit element kan niet dienen als label, omdat deze verdwijnt zodra een andere optie wordt geselecteerd.
Zonder een zichtbaar label kunnen bezoekers niet gemakkelijk bepalen welke informatie ze moeten selecteren of waar het select-element voor dient. Dit kan verwarrend zijn voor gebruikers, vooral voor mensen die schermlezers gebruiken.
Oplossing
Voorzie het select-element van een duidelijk en zichtbaar label dat beschrijft wat de gebruiker moet selecteren. Gebruik bijvoorbeeld een label zoals “Selecteer week” boven of naast het select-element. Dit zorgt voor een betere gebruikerservaring en duidelijkere navigatie.
Controleer andere pagina's op het voorkomen van deze issues.
Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.
Knoppen in de carrousel missen een toegankelijke naam en rol
Op de homepage staat een carrousel met slides. Onderaan de carrousel staan knoppen om tussen de slides te wisselen. Deze knoppen hebben geen toegankelijke naam en missen een rol.
Toegankelijke naam: Een knop moet een toegankelijke naam hebben die de functie van de knop beschrijft, zodat een blinde bezoeker begrijpt wat deze knop doet. Een ontbrekende of lege toegankelijke naam kan verwarrend zijn voor gebruikers van schermlezers.
Rol: De rol van een element definieert wat het element is en hoe gebruikers ermee kunnen interageren. Schermlezers en andere ondersteunende technologieën gebruiken deze informatie om de functie van het element duidelijk te communiceren aan de gebruiker.
Oplossing
Voorzie de knoppen van een toegankelijke naam die de functie beschrijft, zoals “Volgende slide” en “Vorige slide”. Stel daarnaast een rol in, zoals “button”, om aan te geven dat het om een knop gaat. Dit helpt gebruikers van schermlezers om te begrijpen welke actie de knop uitvoert en maakt de interactie met de carrousel intuïtiever.
Knoppen met pijlpictogrammen missen een toegankelijke naam
Op de pagina Vergadering Gemeenteraad 08-10-2024 , onder het kopje “Agenda”, staan meerdere knoppen met pijlpictogrammen. Deze knoppen dienen om uitklapbare inhoud te openen en sluiten, maar ze hebben geen toegankelijke naam die beschrijft wat de knoppen doen. Er zijn ook knoppen aanwezig met een cijfer als toegankelijke naam. De betekenis van dit cijfer is niet duidelijk voor de schermlezer.
Zonder een toegankelijke naam kunnen gebruikers van schermlezers niet begrijpen wat de functie van de knop is. Dit maakt de navigatie en interactie met de inhoud moeilijk voor mensen die afhankelijk zijn van ondersteunende technologieën.
Oplossing
Voorzie de knoppen van een toegankelijke naam die beschrijft wat de knoppen doen, zoals “Inhoud uitklappen” en “Inhoud inklappen”. Dit zorgt ervoor dat gebruikers van schermlezers de functie van de knoppen begrijpen en gemakkelijker kunnen navigeren.
Select-elementen missen toegankelijke namen
Op de pagina Vergadering Gemeenteraad 08-10-2024 staan twee select-elementen onder de labels “Selecteer spreker(s)” en “Selecteer agendapunt(en)”. Deze select-elementen hebben echter geen toegankelijke namen.
Wanneer select-elementen geen toegankelijke namen hebben, kunnen schermlezers en andere ondersteunende technologieën niet duidelijk communiceren waarvoor de select-elementen dienen. Dit kan verwarrend zijn voor gebruikers die afhankelijk zijn van deze technologieën.
Oplossing
Zorg ervoor dat de select-elementen zijn gekoppeld aan hun bijbehorende labels met behulp van het for-attribuut in het <label>-element en het id-attribuut in het <select>-element. Dit verbetert de toegankelijkheid en zorgt ervoor dat schermlezers de functie van de select-elementen correct aankondigen, bijvoorbeeld: “Selecteer spreker(s)” en “Selecteer agendapunt(en)”.
Interactieve elementen missen juiste rol en toegankelijke namen
Op de pagina Bijeenkomst/1180011/Raadsbijeenkomst_Informeren_Ontmoeten_08-01-2024 zijn er meerdere interactieve elementen geïdentificeerd die niet de juiste rol hebben of geen toegankelijke naam.
In de videospeler onder het kopje “Zalen” zijn er interactieve elementen waarmee bezoekers naar specifieke video’s kunnen springen. Deze elementen hebben niet de juiste rol ingesteld, waardoor schermlezers niet duidelijk kunnen communiceren dat het om interactieve elementen gaat.
In de tabellen worden interactieve elementen met pictogrammen, zoals een paperclip-icoon en een “i”-pictogram, gepresenteerd. Deze elementen hebben geen juiste rol, waardoor gebruikers van schermlezers niet begrijpen dat ze op deze elementen kunnen klikken.
Wanneer op het paperclip-icoontje wordt geklikt in de kolom onder het kopje “Informeren Leuvenzaal 19:00-19:40”, opent een popup met de titel “Inkoopvisie Basisondersteuning en Jongerenwerk 2025 en verder (raadsvoorstel)”. Hierin staan twee interactieve elementen met de teksten “Raadsvoorstel Inkoopvisie Basisondersteuning en Jongerenwerk 2025 en verder” en “Raadsvoorstellen”. Ook deze elementen hebben geen eigen rol, waardoor de interactiemogelijkheid niet wordt gecommuniceerd aan de gebruiker.
Naast de tekst “Raadsvoorstellen” is er een pijlpictogram dat uitklapbare inhoud opent. Dit pictogram heeft geen toegankelijke naam en mist een rol.
Oplossing
Instellen van juiste rollen: Wijs een rol toe aan alle interactieve elementen, zoals button of link, om aan te geven dat ze interactief zijn. Dit helpt schermlezers om de juiste functie van deze elementen duidelijk te communiceren aan de gebruiker.
Toegankelijke namen voor pictogrammen: Voorzie alle pictogrammen van een toegankelijke naam die de actie beschrijft, zoals “Uitklappen voor meer details” of “Bekijk bijlagen”.
Controleer andere pagina's op het voorkomen van deze issues.
