Advies- en auditbureau in digitale toegankelijkheid | WEB: properaccess.nl | TEL: 06-28742275 | MAIL: contact@properaccess.nl
Content onderzoek digitale toegankelijkheid van website http://kerkrade.bestuurlijkeinformatie.nl/
Onderzocht door
Lana, Proper Access; Julia, Proper Access
In opdracht van
gemeente Kerkrade
Leverancier techniek
iBabs
Conformiteitsdoel
WCAG 2.2, Level AA
Methodologie
WCAG-EM
Datum
08 januari 2025
Samenvatting
De website http://kerkrade.bestuurlijkeinformatie.nl/ is onderzocht tussen 2 en 8 januari 2025. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM.
Resultaat
In dit onderzoek van content zijn 33 succescriteria onderzocht.
Beoordeling
SC
Voldoet of nvt
25
Voldoet niet
8
Totaal
33
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.2, 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 en 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 pagina's op de website http://kerkrade.bestuurlijkeinformatie.nl/
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Ondersteuning
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
Bovenaan de website staat een logo. De volledige tekst in het logo is “Gemeente Kerkrade”. Het huidige tekstalternatief is “Logo Kerkrade”. Dit tekstalternatief bevat echter niet alle tekst die in het logo staat. Om bezoekers die het logo niet kunnen zien, dezelfde informatie te bieden, moet het tekstalternatief de volledige tekst van het logo bevatten.
Pas de alt-tekst aan naar: "Gemeente Kerkrade". Dit zorgt ervoor dat gebruikers die afhankelijk zijn van schermlezers ook precies weten wat er in het logo staat.
Op de homepage staat onder het kopje "Overzichten" een gegevenstabel. Wanneer een bezoeker met de muis over een tabelrij beweegt, verandert de tekst in wit op een grijze achtergrond. Het kleurcontrast is te laag: 3,1:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn volgens de toegankelijkheidsrichtlijnen.
Tekst van informatieve elementen, zoals links en knoppen, moet altijd voldoende contrast hebben, ongeacht de staat van het element. Dit omvat de standaardweergave, wanneer het element toetsenbordfocus krijgt, en wanneer de bezoeker met de muiscursor over het element beweegt (hover). Het aanpassen van de kleurcombinatie is essentieel om de leesbaarheid en toegankelijkheid voor alle gebruikers te waarborgen.
Ontbrekende audiobeschrijving en media-alternatief voor video
Onder het kopje "Uitzending" staat een video waarin op verschillende momenten tekst verschijnt. Rond 0:07, 0:12, 0:51 enzovoort worden namen en functies van de sprekers weergegeven. Er is echter geen media-alternatief of audiobeschrijving beschikbaar voor deze visuele informatie.
Bezoekers die blind of slechtziend zijn, missen hierdoor belangrijke informatie. Om deze barrière te overwinnen, is het belangrijk om een audiobeschrijving toe te voegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Dit zorgt ervoor dat de video toegankelijk wordt en voldoet aan succescriterium 1.2.5 van de WCAG-richtlijnen. Als aanvullende oplossing kan ook een geschreven tekst (een media-alternatief) worden toegevoegd, maar een audiobeschrijving is vereist om volledig te voldoen aan de toegankelijkheidsstandaarden.
Een audiodescriptie hoeft niet per se in de nabewerking aan de video te worden toegevoegd. Laat alle sprekers hun naam en functie noemen.
Voldoet niet aan succescriterium 1.2.3 (media-alternatief vereist)
Voldoet niet aan succescriterium 1.2.5 (audiodescriptie vereist)
Onvoldoende beschrijvend titel-attribuut voor iframe met video
Een iframe met een video op deze pagina heeft geen goede beschrijving in het title-attribuut. Het huidige title-attribuut, zoals "Gemeenteraad woensdag 11 december 2024", vermeldt niet dat het om een video gaat.
Iframes moeten een betekenisvolle en unieke beschrijving hebben in het title-attribuut. Dit attribuut moet aangeven welk type inhoud het iframe bevat (bijvoorbeeld een podcast of video) en waar het inhoudelijk over gaat. Voor gebruikers van schermlezers is dit essentieel om te bepalen of de inhoud relevant voor hen is.
Om dit probleem op te lossen, moet het title-attribuut worden aangepast naar een meer informatieve beschrijving, zoals: "Video: Kinderraad woensdag 9 oktober 2024". Dit geeft duidelijk aan dat het iframe een video bevat, evenals de inhoud en context ervan. Deze aanpak verbetert de toegankelijkheid en zorgt ervoor dat blinde of slechtziende gebruikers beter geïnformeerde keuzes kunnen maken.
Voldoet niet aan succescriterium 2.4.6
Onjuiste en ontbrekende toegankelijke naam voor de afspelen/pauzeren-knop
In het bedieningspaneel van de video staat een knop met een icoon voor afspelen/pauzeren. De toegankelijke naam van deze knop is momenteel “undefined”, wat de functie van de knop niet beschrijft. Bovendien verandert de functie van de knop dynamisch wanneer de video wordt afgespeeld of gepauzeerd, maar deze verandering wordt niet weerspiegeld in de toegankelijke naam.
Voor knoppen die uit een afbeelding of icoon bestaan, moet het tekstalternatief van die afbeelding niet beschrijven wat je ziet, maar wat de functie van de knop is. In dit geval moet het tekstalternatief duidelijk maken wat de knop doet: bijvoorbeeld "Video afspelen" wanneer de video is gepauzeerd, en "Video pauzeren" wanneer de video wordt afgespeeld. De toegankelijke naam moet dynamisch worden bijgewerkt om de huidige functie van de knop correct weer te geven.
Voldoet niet aan succescriterium 2.4.6
Mismatch tussen taal van iframe en knopnamen
Op deze pagina staat een video in een iframe waarvan het lang-attribuut is ingesteld op "nl". Dit attribuut geeft aan dat de inhoud van het iframe in het Nederlands is. Echter, de namen van de knoppen binnen de videospeler, zoals "play", "undefined", "Closed captions", en "Share", zijn in het Engels. Deze mismatch kan verwarrend zijn voor gebruikers, vooral voor schermlezers, omdat de taalinstelling niet overeenkomt met de daadwerkelijke inhoud.
Pas de knoppen aan de taalinstelling aan: Zorg ervoor dat de namen van de knoppen consistent zijn met het lang-attribuut van het iframe. In dit geval moeten de knopnamen in het Nederlands worden weergegeven, zoals:
"Ondertiteling" in plaats van "Closed captions"
"Delen" in plaats van "Share"
Ontbrekende semantische structuur in overlay "Onderwerpen"
In de videospeler staat een knop met drie horizontale streepjes. Deze knop opent een overlay met een datatabel onder het kopje “Onderwerpen”. Hoewel er visueel een relatie is tussen de tekst “Onderwerpen” en de items daaronder, ontbreekt deze relatie in de HTML-structuur. Dit maakt het moeilijk voor schermlezers en andere hulpmiddelen om de inhoud logisch te interpreteren.
Om dit probleem op te lossen, moet de tekst “Onderwerpen” worden omgezet in een headings-element (bijvoorbeeld <h2>). De items onder deze kop moeten worden gestructureerd met behulp van een tabel of een lijst (<ul> of <ol>), afhankelijk van de aard van de gegevens. Dit zorgt voor een duidelijke hiërarchie en maakt de relatie tussen de kop en de bijbehorende inhoud semantisch correct en toegankelijk.
Voldoet niet aan succescriterium 1.3.1
Onvoldoende contrast in overlay “Onderwerpen”
In de videospeler staat een knop met drie horizontale streepjes. Deze knop opent een overlay met een datatabel onder het kopje “Onderwerpen”. De blauwe tekst "1 Opening" op een donkere achtergrond heeft de kleurcontrastverhouding van minder dan 4,5:1.
Voldoet niet aan succescriterium 1.4.3
Markering van opsommingen ontbreekt
Op deze pagina zijn meerdere gevallen te vinden waarin informatie eruitziet als een opsomming, maar in de code niet als een lijst is gemarkeerd. Onder de kopjes “Sprekers” en “Vaststellen agenda” staan bijvoorbeeld opsommingen die in een lijst-element moeten worden opgenomen.
Tekst die visueel als een opsomming wordt weergegeven, moet semantisch correct worden gemarkeerd met HTML-lijstelementen zoals <ol> (genummerde lijst) of <ul> (onopgemaakte lijst met bullets). Dit helpt hulpmiddelen zoals schermlezers om de structuur van de tekst beter te begrijpen en maakt de pagina toegankelijker.
Schermlezers kondigen dan bijvoorbeeld aan hoeveel items een lijst bevat, zodat gebruikers weten hoeveel informatie er nog komt.
Het corrigeren van deze opsommingen kan vaak eenvoudig worden gedaan met de content-editor in het CMS, door gebruik te maken van de lijstknop. Zo wordt de inhoud semantisch correct en beter toegankelijk voor alle gebruikers.
Voldoet niet aan succescriterium 1.3.1
Tussenkopjes niet correct gemarkeerd als kopteksten
De tekst "Sprekers", waarmee verborgen secties worden geopend en gesloten, heeft de rol van een koptekst maar is geplaatst binnen een knop-element. Het gebruik van een knopelement overschrijft echter de semantische rol van de koptekst, waardoor schermlezers de tekst niet meer aankondigen als een koptekst. Dit maakt de structuur en navigatie minder duidelijk voor gebruikers van hulpmiddelen.
In secties met inhoud die kan worden ingeklapt, fungeert de tekst die de verborgen inhoud opent en sluit als een koptekst voor die inhoud. De rol van deze koptekst mag niet worden vervangen door een andere rol, zoals die van een knop. Wanneer de koptekst binnen een knop wordt geplaatst, wordt de semantische waarde van de koptekst verloren.
Om dit te corrigeren, moet de tekst "Sprekers" worden geplaatst in een headings-element (bijvoorbeeld <h2> of <h3>), met een knop als een kind-element binnen deze heading. Dit behoudt de semantische hiërarchie en zorgt ervoor dat de tekst als een koptekst wordt voorgelezen, terwijl de knop de interactieve functionaliteit biedt. Dit verbetert de toegankelijkheid en maakt de structuur duidelijker voor alle gebruikers.
Onvoldoende beschrijvend titel-attribuut voor iframe met video
Een iframe met een video op deze pagina heeft geen goede beschrijving in het title-attribuut. Het huidige title-attribuut vermeldt niet dat het om een video gaat.
Onvoldoende beschrijvend titel-attribuut voor iframe met video
Een iframe met een video op deze pagina heeft geen goede beschrijving in het title-attribuut. Het huidige title-attribuut vermeldt niet dat het om een video gaat.
De kop "Werkgever/nevenfuncties:" is gemarkeerd met een strong-element.
Verwijder dit element en gebruik een headings-element: <h3>.
Voldoet niet aan succescriterium 1.3.1
Lijst markering ontbreekt
Onder het kopje “Werkgever/nevenfuncties” staat een opsomming. De juiste markering ontbreekt. Gebruik de lijst knop in de tekstbewerker om van deze tekst een echte lijst te maken.
Voldoet niet aan succescriterium 1.3.1
PDF ingekomen stukken raad 11 december 2024.pdf
Dit document wordt gegenereerd op pagina ingekomen stukken raad 11 december 2024 door te klikken op "Download bestand" onder het kopje "ingekomen stukken raad 11 december 2024".
Logo niet zichtbaar voor de schermlezer
Alle pagina's van dit PDF-document bevatten het 'Gemeente Kerkrade' logo dat is toegevoegd als achtergrond. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor de schermlezer. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van screenreaders. Informatieve afbeeldingen moeten worden geplaatst met een figuur-tag en voorzien zijn van een beschrijving (alt-tekst) waarin de tekst van het logo wordt vermeld.
Voldoet niet aan succescriterium 1.1.1
Niet volledig getagd
Dit PDF-document is gedeeltelijk getagd. De tekst “Ingekomen stukken raad 11 december 2024, nr. 24it03908” is niet getagd en niet beschikbaar voor de schermlezer.
Voldoet niet aan succescriterium 1.3.1
Koppen niet correct gemarkeerd in PDF-document
In het PDF-document zijn verschillende koppen niet als koppen opgemaakt. Voorbeelden hiervan zijn "Overige ingekomen post", "Raadsinformatiebrieven", en "Vragen ex artikel 38 RvO Raad". In de huidige structuur zijn deze teksten gemarkeerd met een <p>-tag in plaats van een <h>-tag. Dit leidt ertoe dat de visuele informatiestructuur van het document niet overeenkomt met de semantische structuur in de tags, wat verwarrend is voor gebruikers van schermlezers en hulpmiddelen.
Om dit te corrigeren, moeten de <p>-tags worden vervangen door de juiste <h>-tags (<h1>, <h2>, etc.), afhankelijk van het niveau van de kop. Dit zorgt ervoor dat de structuur in de tags overeenkomt met de visuele structuur en dat schermlezers deze correct kunnen interpreteren.
Onlogische leesvolgorde in handtekeningsectie van PDF-document
Aan het einde van het PDF-document staan twee kolommen voor handtekeningen van de verantwoordelijke personen. In de huidige structuur leest de schermlezer eerst beide functies voor, gevolgd door beide namen. Dit leidt tot een onlogische leesvolgorde die voor blinde bezoekers verwarrend kan zijn.
De leesvolgorde in een PDF-document wordt bepaald door de volgorde van de tags in de code. Als deze tags niet in een logische volgorde staan, kan de schermlezer de inhoud niet op de juiste manier interpreteren, wat de toegankelijkheid ernstig belemmert.
Om dit probleem te corrigeren, moet de leesvolgorde van de tags worden aangepast zodat:
Elke functie direct gevolgd wordt door de bijbehorende naam in de leesvolgorde.
De informatie op een semantisch correcte manier wordt gepresenteerd, bijvoorbeeld door het gebruik van een tabel of een lijst om de relatie tussen functies en namen duidelijk te maken.
Voldoet niet aan succescriterium 1.3.2
Dit PDF-document heeft geen titel
Elk PDF-document moet een titel bevatten die een korte beschrijving geeft van de inhoud van het bestand. Dit is vooral belangrijk voor gebruikers van schermlezers om hen te helpen beter te navigeren tussen verschillende documenten. De titel kan worden ingesteld via de bestandseigenschappen van het PDF-bestand en moet ook zo worden geconfigureerd dat deze in de titelbalk wordt weergegeven in plaats van de bestandsnaam, wat nu het geval is.
Alle pagina's van dit PDF-document bevatten het 'Gemeente Kerkrade' logo dat is toegevoegd met een figure-tag zonder beschrijving.
Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.
Voldoet niet aan succescriterium 1.1.1
Koppen niet correct gemarkeerd in PDF-document
In het PDF-document zijn verschillende koppen niet als koppen opgemaakt. In de huidige structuur zijn deze teksten gemarkeerd met een <p>-tag in plaats van een <h>-tag. Dit leidt ertoe dat de visuele informatiestructuur van het document niet overeenkomt met de semantische structuur in de tags, wat verwarrend is voor gebruikers van schermlezers en hulpmiddelen.
Op pagina 1 bij de teksten "Algemene Subsidieverordening Vrijwilligersorganisaties" en "Gemeente Kerkrade 2025".
Op pagina 17 bij de tekst "Ondertekening".
Om dit te corrigeren, moeten de <p>-tags worden vervangen door de juiste <h>-tags (<h1>, <h2>, etc.), afhankelijk van het niveau van de kop. Dit zorgt ervoor dat de structuur in de tags overeenkomt met de visuele structuur en dat schermlezers deze correct kunnen interpreteren.
Voldoet niet aan succescriterium 1.3.1
Onjuiste opmaak van alinea's in PDF-document onder "Raadsbesluit"
In het PDF-document staat onder het kopje "Raadsbesluit" een tekst die visueel als één alinea wordt weergegeven. In de tags is deze tekst echter opgedeeld in meerdere alinea’s, wat niet overeenkomt met de visuele structuur. Dit kan verwarrend zijn voor gebruikers van schermlezers, omdat de tekst hierdoor onnodig wordt onderbroken, wat de leesbaarheid en samenhang belemmert.
Onjuiste opsplitsing van lijsten in PDF-document
In dit PDF-document zijn verschillende lijsten ten onrechte opgesplitst in aparte lijsten in de tags, terwijl ze visueel als één doorlopende lijst worden weergegeven. Dit kan verwarring veroorzaken voor gebruikers van schermlezers, omdat de structuur van de inhoud niet logisch en consistent is.
Pagina 1 - 3: Een lijst met 26 items is in de tags opgedeeld in drie aparte lijsten.
Pagina 4 onder "Artikel 3 Reikwijdte": Een lijst met 4 items is gecodeerd als twee aparte lijsten.
Pagina 4 - 5 onder "Artikel 4 Staatssteunregels": Een lijst is eveneens ten onrechte opgesplitst.
Combineer de lijsten: zorg ervoor dat de afzonderlijke L-tags in de code worden samengevoegd tot één enkele lijst, zodat de schermlezer de items als een doorlopende lijst voorleest.
Een andere oplossing is om de twee lijsten ongewijzigd te laten en bij de tweede lijst een toelichting toe te voegen waarin wordt vermeld dat deze lijst een vervolg is op de lijst van de vorige pagina.
Voldoet niet aan succescriterium 1.3.1
Geneste lijsten niet correct gecodeerd in PDF-document
In het PDF-document zijn geneste lijsten aanwezig, maar deze zijn in de tags niet correct gecodeerd, wat problemen oplevert voor schermlezers en de toegankelijkheid van het document.
Pagina 2 - 3, lijstitem 19 ("Subsidieverlening:"). Dit lijstitem bevat een geneste lijst van 4 items, maar in de tags ontbreekt de correcte structuur voor geneste lijsten.
Pagina 3, lijstitem 26. Dit lijstitem bevat een geneste lijst, maar de geneste structuur is niet semantisch correct gecodeerd.
Pagina 5, onder "Artikel 5 Vormen van subsidie". Een lijst van 2 items bevat geneste inhoud, maar deze is niet juist gecodeerd als een geneste lijst.
Oplossing:
Gebruik een L-tag voor de hoofdlijst en een LI-tag voor elk lijstitem.
Binnen een LI-tag van een hoofdlijst, voeg een geneste L-tag toe voor de sublijst.
Gebruik geneste LI-tags voor elk item in de sublijst.
Op pagina 3 staat een geneste lijst van a- en b-items die gedeeltelijk is gecodeerd als meerdere paragrafen. Controleer of de lijst en alle geneste lijsten correct zijn gecodeerd. Deze informatie is zichtbaar voor ziende bezoekers, en moet ook toegankelijk zijn voor bezoekers met een schermlezer.
Op pagina 9 - 10 staan onder de kopjes "Artikel 12 De beslistermijn" en "Artikel 13 Weigeringsgronden" twee aparte lijsten van respectievelijk 4 en 16 lijstitems. Maar de tweede lijst is gecodeerd als een geneste lijst van de eerste.
Voldoet niet aan succescriterium 1.3.1
Onlogische leesvolgorde in handtekeningsectie van PDF-document
Aan het einde van het PDF-document staan twee kolommen voor handtekeningen van de verantwoordelijke personen. In de huidige structuur leest de schermlezer eerst beide functies voor, gevolgd door beide namen. Dit leidt tot een onlogische leesvolgorde die voor blinde bezoekers verwarrend kan zijn.
De leesvolgorde in een PDF-document wordt bepaald door de volgorde van de tags in de code. Als deze tags niet in een logische volgorde staan, kan de schermlezer de inhoud niet op de juiste manier interpreteren, wat de toegankelijkheid ernstig belemmert.
Om dit probleem te corrigeren, moet de leesvolgorde van de tags worden aangepast zodat:
Elke functie direct gevolgd wordt door de bijbehorende naam in de leesvolgorde.
De informatie op een semantisch correcte manier wordt gepresenteerd, bijvoorbeeld door het gebruik van een tabel of een lijst om de relatie tussen functies en namen duidelijk te maken.
Voldoet niet aan succescriterium 1.3.2
Onvoldoende kleurcontrast van tekst
Op alle pagina's wordt donker oranje keur gebruikt in koppen, in nummers van lijsten en in paginanummers. Zie bijvoorbeeld op pagina 1 de kopteksten "Algemene Subsidieverordening Vrijwilligersorganisaties", "Gemeente Kerkrade 2025", de lijstitemnummers, enzovoort. De kleurcontrastverhouding met de witte achtergrond is te laag: 4,4:1. Het contrast moet minstens 4,5:1 zijn.
Voldoet niet aan succescriterium 1.4.3
Dit PDF-document heeft geen titel
Elk PDF-document moet een titel bevatten die een korte beschrijving geeft van de inhoud van het bestand. Dit is vooral belangrijk voor gebruikers van schermlezers om hen te helpen beter te navigeren tussen verschillende documenten. De titel kan worden ingesteld via de bestandseigenschappen van het PDF-bestand en moet ook zo worden geconfigureerd dat deze in de titelbalk wordt weergegeven in plaats van de bestandsnaam, wat nu het geval is.
Op deze pagina zijn meerdere gevallen te vinden waarin informatie eruitziet als een opsomming, maar in de code niet als een lijst is gemarkeerd. Zie opsommingen onder de kopjes:
U kunt als burger inloggen aan de hand van de volgende gegevens (een lijst met 3 items)
"Agendapunten" (een geordende lijst van 9 lijstitems die begint met "1 Opening door de voorzitter")
Het corrigeren van deze opsommingen kan vaak eenvoudig worden gedaan met de content-editor in het CMS, door gebruik te maken van de lijstknop. Zo wordt de inhoud semantisch correct en beter toegankelijk voor alle gebruikers.
Op deze pagina staat onder het kopje "Raadsinformatiebrieven" een gegevenstabel. Wanneer een bezoeker met de muis over een tabelrij beweegt, verandert de tekst in wit op een grijze achtergrond. Het kleurcontrast is te laag: 3,1:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn volgens de toegankelijkheidsrichtlijnen.
Tekst van informatieve elementen, zoals links en knoppen, moet altijd voldoende contrast hebben, ongeacht de staat van het element. Dit omvat de standaardweergave, wanneer het element toetsenbordfocus krijgt, en wanneer de bezoeker met de muiscursor over het element beweegt (hover). Het aanpassen van de kleurcombinatie is essentieel om de leesbaarheid en toegankelijkheid voor alle gebruikers te waarborgen.
Op deze pagina staat een video. Op verschillende momenten verschijnt er tekst in de video, maar er is geen media-alternatief of audiobeschrijving.Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.
Voldoet niet aan succescriterium 1.2.3 (media-alternatief vereist)
Voldoet niet aan succescriterium 1.2.5 (audiodescriptie vereist)
Koptekst verliest semantische functie door role="button"
Onder de kop "Opening" staat een sectie met inhoud die kan worden uitgeklapt. De tekst "Sprekers", waarmee de verborgen sectie wordt geopend en gesloten, is bedoeld als een koptekst en is opgemaakt met een <h4>-element. Echter, doordat de tekst is geplaatst in een a-element met role="button", gaat de semantische rol van de koptekst verloren. Het a-element (de link) en role="button" overschrijven de rol van de heading, waardoor schermlezers de kop niet meer als zodanig aankondigen.
De juiste oplossing is om de structuur van de elementen te corrigeren en de hiërarchie te herstellen. Dit kan als volgt:
Plaats de knop binnen het headings-element (<h4>) als een kind-element.
<h4><a href="#">Sprekers</a></h4>
Dit behoudt de semantische rol van de koptekst en maakt de functionaliteit van de knop toegankelijk.
Voldoet niet aan succescriterium 1.3.1
Onvoldoende contrast in overlay “Onderwerpen”
In de videospeler staat een knop met drie horizontale streepjes. Deze knop opent een overlay met een datatabel onder het kopje “Onderwerpen”. De blauwe tekst "1 Opening" op een donkere achtergrond heeft de kleurcontrastverhouding van minder dan 4,5:1.
Voldoet niet aan succescriterium 1.4.3
Onvoldoende beschrijvend titel-attribuut voor iframe met video
Een iframe met een video op deze pagina heeft geen goede beschrijving in het title-attribuut. Het huidige title-attribuut vermeldt niet dat het om een video gaat.
Voldoet niet aan succescriterium 2.4.6
Onjuiste en ontbrekende toegankelijke naam voor de afspelen/pauzeren-knop
De knoppen binnen de videospeler hebben Engelstalige namen.
Ontbrekende audiobeschrijving en media-alternatief voor video
Onder het kopje "Uitzending" staat een video waarin op verschillende momenten tekst verschijnt. Er is echter geen media-alternatief of audiobeschrijving beschikbaar voor deze visuele informatie.
Voldoet niet aan succescriterium 1.2.3 (media-alternatief vereist)
Voldoet niet aan succescriterium 1.2.5 (audiodescriptie vereist)
Onvoldoende beschrijvend titel-attribuut voor iframe met video
Een iframe met een video op deze pagina heeft geen goede beschrijving in het title-attribuut. Het huidige title-attribuu vermeldt niet dat het om een video gaat.
Voldoet niet aan succescriterium 2.4.6
Onjuiste en ontbrekende toegankelijke naam voor de afspelen/pauzeren-knop
In het bedieningspaneel van de video staat een knop met een icoon voor afspelen/pauzeren. De toegankelijke naam van deze knop is momenteel “undefined”, wat de functie van de knop niet beschrijft.
De teksten “Griffie” en "Griffier" niet als kop gemarkeerd. Deze tekst doet dienst als koptekst, maar is in de HTML-code niet gemarkeerd als kop. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn je koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kop niveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kop niveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
In de inhoud onder “Hoe zit het met de toegankelijkheid van de website van de gemeenteraad van Kerkrade?” staan tussenkopjes. Deze kopjes missen de juiste markering.
Zie “Toegankelijkheidsverklaring sites gemeenteraad Kerkrade”, “Nalevingsstatus” enzovoort.
Meestal kun je het kopregelniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Voldoet niet aan succescriterium 1.3.1
Strong-element is gebruikt in kop
In de inhoud onder “Hoe kom ik in contact met ..” staan tussenkopjes die zijn opgemaakt met strong-elementen.
De elementen strong, em en b zijn niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. strong en em gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.
