Content audit digitale toegankelijkheid van website raad.koggenland.nl

#1 - Vetgedrukte tekst in plaats van een kop

Op deze pagina staan teksten die een kop zijn, maar er staat geen kopelement omheen. De tekst is met een strong-element vetgedrukt zodat die eruitziet als een kop. Het gaat onder andere om "Rianka te Winkel-Pancras:", "Nico Bijman:" en "Ed Dekker:".

Het strong-element geeft nadruk aan tekst en maakt geen kop. Wie de pagina met een schermlezer leest, krijgt deze koppen niet te zien in de koppenlijst en mist daarmee de opbouw van de pagina.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, mis ik de koppen die niet als kop in de code staan. Ik verwacht dat elke kop een echte kop is, zodat ik de opbouw van de pagina kan volgen.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop daarna elke kop op de pagina langs. Krijgt een kop geen label h1 tot en met h6, dan staat die tekst niet als kop in de code.

Oplossing

Haal het strong-element weg en zet deze teksten in het kopelement dat bij hun niveau hoort.

#2 - Het logo heeft een onvolledig tekstalternatief

In het logo staat de tekst "CDA KOGGENLAND". Het tekstalternatief is "Logo van CDA". Een tekstalternatief hoort alle zichtbare tekst uit het logo te bevatten, zodat bezoekers die de afbeelding niet zien dezelfde informatie krijgen als bezoekers die hem wel zien.

User story

Ik lees de website met een schermlezer. Bij het logo hoor ik niet de volledige naam van de organisatie. Ik verwacht te horen wat er in het logo staat.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Vergelijk de toegankelijke naam van het logo met de tekst die je in het logo leest: het tekstalternatief hoort alle zichtbare tekst te bevatten.

Oplossing

Vul het tekstalternatief aan tot "Logo van CDA KOGGENLAND".

#3 - Een opsomming is niet als lijst opgemaakt

Onder de kop "Contactpersonen per portefeuille" staan de portefeuilles per raadslid onder elkaar, met een streepje aan het begin van elke regel. Bij "Rianka te Winkel-Pancras" zijn dat bijvoorbeeld "Financiën" en "Sociaal domein". Deze opsomming staat niet in lijstelementen: <ul>, <ol> en <li> ontbreken. Een schermlezer meldt daardoor niet dat het een lijst is en hoeveel onderdelen erin staan. Bezoekers die de pagina zien, halen die structuur wel uit de streepjes.

Hetzelfde staat op de pagina https://raad.koggenland.nl/Over-deze-site/Toegankelijkheid, in de opsomming onder "Een echt toegankelijke website sluit geen bezoekers uit".

User story

Ik lees de website met een schermlezer. Als informatie als lijst op het scherm staat, wil ik die structuur ook horen. Ik verwacht dat mijn schermlezer meldt dat het een lijst is en hoeveel onderdelen die heeft.

Hoe te testen

Bekijk de HTML van de opsomming, of loop hem na met een schermlezer. Een opsomming die met streepjes is getypt, staat niet in <ul>- en <li>-elementen. De schermlezer meldt dan geen lijst en geen aantal onderdelen.

Oplossing

Zet de opsomming in lijstelementen: <ul> voor een lijst zonder volgorde of <ol> voor een lijst met volgorde, met elk onderdeel in een <li>-element.

#4 - Links naar sociale media hebben te weinig contrast bij muis en focus

De links naar de profielen op X en Instagram staan op de pagina als logo. Beweeg je de muis over zo'n link, of komt de toetsenbordfocus erop, dan verandert de kleur en verschijnt de naam van het platform. Die tekst heeft te weinig contrast met de achtergrond: 1,9:1 bij X en 4,2:1 bij Instagram. Voor normale tekst is 4,5:1 de ondergrens.

Bij X is ook het pictogram zelf te licht. Het contrast blijft daar onder de 3,0:1 die voor informatieve pictogrammen geldt.

Tekst en informatieve pictogrammen houden in elke toestand genoeg contrast, dus ook als de muis erop staat en als het element de toetsenbordfocus heeft.

User story

Ik heb een visuele beperking. Als ik met de muis of het toetsenbord bij de link naar X of Instagram kom, verschijnt er tekst in een andere kleur. Ik verwacht dat die tekst leesbaar blijft.

Hoe te testen

Zoek de links met de logo's van X en Instagram. Beweeg de muis over elke link en bekijk de tekst die verschijnt. Ga daarna met de Tab-toets naar de links. Open de WCAG Radar, zet de optie "Contrast" aan en meet met de pipetten de kleur van de tekst en van de achtergrond.

Oplossing

Zorg dat de tekst minimaal 4,5:1 contrast heeft met de achtergrond, ook als de muis erop staat en als de link de focus heeft. Zorg dat informatieve pictogrammen in die toestanden minimaal 3,0:1 contrast houden.

#5 - Logo's van fracties hebben een onvolledig tekstalternatief

Onder de kop "Organisatie" staan de logo's van de fracties. Het logo van "Forum voor Democratie" heeft als tekstalternatief "Logo van FvD". De afkorting 'FvD' is niet de naam die in het logo staat. Bezoekers die het logo niet zien, krijgen daardoor andere informatie dan bezoekers die het wel zien.

De toegankelijke naam van de link hoort de zichtbare naam te bevatten, zodat het doel van de link voor iedereen hetzelfde is.

Dit speelt ook bij de logo's "VVD Koggenland", "GBK Koggenland", "CDA Koggenland" en "D66 Koggenland". In het tekstalternatief van die logo's ontbreekt het woord "Koggenland".

User story

Ik lees de website met een schermlezer. Bij het logo van Forum voor Democratie hoor ik 'Logo van FvD'. Ik verwacht de naam te horen die in het logo staat.

Hoe te testen

Open de WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Vergelijk de zichtbare tekst in het logo met het tekstalternatief.

Oplossing

Vul het tekstalternatief aan met de naam die in het logo staat, bijvoorbeeld "Logo van Forum voor Democratie". Zorg dat de toegankelijke naam van de link diezelfde naam bevat.

#6 - Het PDF-document heeft geen titel

In de eigenschappen van dit PDF-document staat geen titel. Een PDF-document hoort een titel te hebben die zegt waar het document over gaat, en die titel hoort in de titelbalk te staan in plaats van de bestandsnaam. Zo ziet een bezoeker meteen welk document hij open heeft.

User story

Ik lees PDF's met een schermlezer. Als ik een PDF open, hoor ik alleen een bestandsnaam zoals 'document123.pdf'. Ik verwacht een duidelijke titel te horen, zodat ik weet wat ik open.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en ga naar Bestand, Eigenschappen, tabblad Beschrijving. In het veld Titel hoort het onderwerp van het document te staan, niet de bestandsnaam. Controleer daarna bij Beginweergave, Tonen of "Documenttitel" is gekozen, zodat de titel in de titelbalk staat. Luister met NVDA of VoiceOver of de titel wordt voorgelezen zodra de PDF opent. Draai PAC voor een automatische controle.

Oplossing

Zet een beschrijvende titel in de eigenschappen van het bestand: Bestand, Eigenschappen, tabblad Beschrijving. Kies daarna bij Beginweergave dat de documenttitel in de titelbalk komt te staan.

#7 - De taal van het PDF-document is niet ingesteld

In de metagegevens van deze PDF staat geen taal. Met een ingestelde taal geeft een schermlezer de tekst in de juiste uitspraak weer. De taal stel je in bij de eigenschappen van het bestand.

User story

Ik lees PDF's met een schermlezer. Zonder ingestelde taal raadt mijn schermlezer de uitspraak en klinkt de tekst verkeerd. Ik verwacht dat in elke PDF de taal staat.

Hoe te testen

Open de PDF in Adobe Acrobat en ga naar Bestand, Eigenschappen, tabblad Geavanceerd. Controleer of bij Leesopties, Taal de taal van het document staat. Laat het document daarna voorlezen met een schermlezer en luister of de uitspraak klopt.

Oplossing

Stel de taal in bij de eigenschappen van het bestand: Bestand, Eigenschappen, tabblad Geavanceerd, veld Taal.

#8 - De PDF heeft geen codes

Dit PDF-document heeft geen codes. Zonder codes krijgt een schermlezer de inhoud niet door. Daardoor is ook een volledige beoordeling niet mogelijk: de succescriteria die over de codelaag gaan, zoals koppen en tekstalternatieven bij afbeeldingen, zijn niet te beoordelen. Zodra de codes er zijn, kunnen er nieuwe punten zichtbaar worden.

User story

Ik zie het document niet en lees met een schermlezer. Een PDF zonder codes levert mijn schermlezer niets om voor te lezen. Ik verwacht een PDF met codes, zodat ik de hele inhoud kan lezen.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de codeboom via Beeld, Tonen en verbergen, Navigatievensters, Codes. Koppen, lijsten, tabellen en formuliervelden die je ziet, horen als code te bestaan: <H1> tot en met <H6>, <L>, <Table> met <TH>, <TR> en <TD>, en <Form>. Draai daarna de ingebouwde toegankelijkheidscontrole en PAC. Lees het document tot slot regel voor regel na met een schermlezer en kijk of de volgorde klopt.

Oplossing

Voeg codes toe die de structuur van het document weergeven.

#9 - De taal van het PDF-document is niet ingesteld

In de metagegevens van deze PDF staat geen taal. Met een ingestelde taal geeft een schermlezer de tekst in de juiste uitspraak weer. De taal stel je in bij de eigenschappen van het bestand.

User story

Ik lees PDF's met een schermlezer. Zonder ingestelde taal raadt mijn schermlezer de uitspraak en klinkt de tekst verkeerd. Ik verwacht dat in elke PDF de taal staat.

Hoe te testen

Open de PDF in Adobe Acrobat en ga naar Bestand, Eigenschappen, tabblad Geavanceerd. Controleer of bij Leesopties, Taal de taal van het document staat. Laat het document daarna voorlezen met een schermlezer en luister of de uitspraak klopt.

Oplossing

Stel de taal in bij de eigenschappen van het bestand: Bestand, Eigenschappen, tabblad Geavanceerd, veld Taal.

#10 - De PDF heeft geen codes

Dit PDF-document heeft geen codes. Zonder codes krijgt een schermlezer de inhoud niet door. Daardoor is ook een volledige beoordeling niet mogelijk: de succescriteria die over de codelaag gaan, zoals koppen en tekstalternatieven bij afbeeldingen, zijn niet te beoordelen. Zodra de codes er zijn, kunnen er nieuwe punten zichtbaar worden.

User story

Ik zie het document niet en lees met een schermlezer. Een PDF zonder codes levert mijn schermlezer niets om voor te lezen. Ik verwacht een PDF met codes, zodat ik de hele inhoud kan lezen.

Hoe te testen

Open de PDF in Adobe Acrobat Pro en bekijk de codeboom via Beeld, Tonen en verbergen, Navigatievensters, Codes. Koppen, lijsten, tabellen en formuliervelden die je ziet, horen als code te bestaan: <H1> tot en met <H6>, <L>, <Table> met <TH>, <TR> en <TD>, en <Form>. Draai daarna de ingebouwde toegankelijkheidscontrole en PAC. Lees het document tot slot regel voor regel na met een schermlezer en kijk of de volgorde klopt.

Oplossing

Voeg codes toe die de structuur van het document weergeven.

#11 - Kleine tekst heeft te weinig contrast

Op pagina 1 van dit PDF-document staat blauwe tekst (#3886CA) op een witte achtergrond, bijvoorbeeld "DATUM VERGADERING" en "DOCUMENTNUMMER". Het contrast is 3,9:1 en dat is te weinig. De ondergrens voor deze tekst is 4,5:1.

User story

Ik heb weinig zicht en heb genoeg contrast nodig. Zonder dat contrast kan ik de tekst niet lezen.

Hoe te testen

Meet de contrasten met de Colour Contrast Analyser. De ondergrens is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, dus vanaf 24px of vanaf 18,7px vet. Kijk ook naar tekst op achtergrondafbeeldingen, watermerken, plaatshouders in formuliervelden en voetnoten.

Oplossing

Pas de kleur van de tekst of van de achtergrond aan, zodat het contrast minimaal 4,5:1 is. Controleer de nieuwe combinatie met de Colour Contrast Analyser op een schermafdruk van de pagina voordat je de PDF publiceert.