Content-audit digitale toegankelijkheid van website iburgerzaken.amersfoort.nl

#1 - Kop heeft niet de juiste opmaak

In stap 1 van het proces, waar de locatie kan worden gekozen, zijn enkele tussenkopjes niet als kop opgemaakt. Het gaat om "Omschrijving", "Grootte" en andere tussenkopjes bij de locatiekeuze. Deze teksten zijn visueel opgemaakt als kop, maar in de code is dat niet het geval: ze staan in <dt>-elementen, terwijl het omliggende <dl>-element ontbreekt. Daardoor zijn het noch correcte koppen, noch een correcte definitielijst.

Als tekst functioneert als kop maar de juiste opmaak mist, verliest die zijn semantische betekenis en wordt die ontoegankelijk voor bezoekers die afhankelijk zijn van hulpsoftware zoals schermlezers. Koppen zijn essentieel om de inhoud te navigeren en de structuur ervan te begrijpen.

User story

Als bezoeker lees ik de website met een schermlezer. Als ik een pagina op koppen navigeer, mis ik koppen die alleen visueel zijn opgemaakt. Ik verwacht dat alle zichtbare koppen door mijn schermlezer als kop worden herkend.

Hoe te testen

Snelle controle met onze tool: gebruik de Heading Structure Checker. Plak de pagina-URL en bekijk de lijst met koppen. Loop langs elke tekst op de pagina die er visueel uitziet als een kop (groter, vetter, een afwijkende kleur of nadrukkelijke positionering). Staan ze allemaal in de lijst van de Heading Structure Checker? Zo niet, dan zijn ze niet opgemaakt met h1 tot en met h6. Controleer met een schermlezer: navigeer met H (NVDA, JAWS) of de rotor (VoiceOver). Elke visuele kop moet als kop worden aangekondigd.

Oplossing

Zorg dat deze teksten worden opgemaakt met de juiste kop-elementen (h1 tot en met h6) om hun rol en hiërarchie in de inhoud weer te geven.

#2 - Onderstreepte tekst lijkt op een link

Op deze pagina staat een tekstblok waarvan de eerste zin is onderstreept. Het gaat om de zin die begint met "kosteloze ceremonie is alleen mogelijk ...". Onderstreepte tekst binnen lopende tekst wekt de indruk dat het om een link gaat. Dat is verwarrend voor bezoekers, en zeker voor bezoekers met een cognitieve beperking, omdat ze verwachten dat ze erop kunnen klikken.

User story

Ik ben gewend dat onderstreepte tekst in lopende tekst een link is. Ik klik op deze tekst, maar er gebeurt niets.

Hoe te testen

Klik op de onderstreepte tekst. Is het geen link? Verwijder dan de onderstreping.

Oplossing

Verwijder de onderstreping. Wil je deze tekst extra aandacht geven? Gebruik dan een kop, of maak enkele belangrijke woorden vet met de knop B in de tekstverwerker.

#3 - Informatieve afbeeldingen zonder tekstalternatief

Op deze pagina staat onder "Kies een locatie, ambtenaar of beschikbaarheid" een carrousel met twee afbeeldingen: een blauwe zaal en een gele zaal. Deze foto's hebben geen tekstalternatief. Voor een inwoner van de gemeente kan het belangrijk zijn om te weten wat het verschil tussen de twee ruimtes is. In de begeleidende tekst staat alleen dat er twee zalen met een klassiek interieur zijn.

User story

Als ik de foto's niet kan zien, weet ik niet hoe de twee zalen van elkaar verschillen. In de beschrijving op deze pagina lees ik alleen dat er twee zalen met een klassiek interieur zijn.

Hoe te testen

Inspecteer de HTML (de broncode) van de pagina of gebruik een schermlezer om te controleren of de afbeeldingen een tekstalternatief hebben.

Oplossing

Beschrijf de ruimtes in tekst. Bij deze carrousel is het technisch niet mogelijk om een tekstalternatief aan de foto's zelf toe te voegen.

#4 - Nadruk-elementen gebruikt voor opmaak in plaats van betekenis

Op deze pagina worden de elementen <strong> of <em> gebruikt om tekst visueel te laten opvallen, terwijl de inhoud zelf geen nadruk vereist. Schermlezers kunnen deze elementen met een andere klemtoon aankondigen. Daardoor krijgen woorden nadruk die niet bedoeld is, wat de betekenis van de tekst kan vertekenen.

User story

Ik lees de website met een schermlezer. Als ik een tekst beluister, klinken willekeurige woorden ineens benadrukt terwijl dat niet de bedoeling is. Ik verwacht dat alleen woorden die echt belangrijk zijn een andere klemtoon krijgen.

Hoe te testen

Loop de pagina door en kijk naar alle vetgedrukte en cursieve woorden. Vraag je per stukje vet of cursief af: is dit woord echt belangrijk, of zou je het in spraak benadrukken? Zo niet, dan hoort er geen <strong>- of <em>-element omheen, maar CSS-opmaak. Inspecteer de HTML: klik met de rechtermuisknop op het vetgedrukte of cursieve woord en kies "Inspecteren". Staat het woord in een <strong>- of <em>-element terwijl er geen semantische reden voor nadruk is? Dan klopt de opmaak niet.

Oplossing

Gebruik de knoppen B en I in de tekstverwerker alleen als een woord of zinsdeel echt belangrijk is of in spraak benadrukt zou worden. Wil je tekst alleen visueel laten opvallen? Gebruik dan CSS, bijvoorbeeld een eigen class met font-weight: bold of font-style: italic. Je kunt ook tussenkopjes toevoegen om aandacht te trekken.