Content-audit digitale toegankelijkheid van website archeodepot.nl

#1 - strong-element gebruikt voor opmaak in plaats van betekenis

Op deze pagina staat het strong-element om tekst visueel op te laten vallen, terwijl de inhoud zelf geen nadruk nodig heeft. Zie "Naam", "Contact" en "Website".

User story

Ik luister een pagina met een schermlezer. Ik wil dat alleen woorden die echt belangrijk zijn benadrukt worden. Anders krijgen willekeurige woorden de nadruk en raakt de betekenis vertekend.

Hoe te testen

Vraag je per vet/cursief af: is dit woord écht belangrijk of zou je het in spraak benadrukken? Inspecteer de HTML: rechtermuis klik op het vetgerukte woord - Inspecteren.

Oplossing

Gebruik strong alleen als een woord of zinsdeel echt belangrijk is, en door spraaksoftware benadrukt moet worden. Wil je tekst alleen visueel laten opvallen? Gebruik dan CSS, bijvoorbeeld met een eigen class-attribuut en font-weight: bold.

#2 - Gegevenstabel heeft geen kopcellen in de code

Op deze pagina staat onder de kop "Contact" een gegevenstabel. De juiste mark-up ontbreekt, waardoor de schermlezer niet kan bepalen hoe de cellen van deze tabel zich tot elkaar verhouden. Zie ook andere tabellen op deze pagina.

User story

Ik lees de website met een schermlezer. Als ik op een tabel kom, dan kan mijn schermlezer niet bepalen hoe de cellen zich tot elkaar verhouden. Ik verwacht dat mijn schermlezer duidelijk aangeeft welke gegevens bij elkaar horen.

Hoe te testen

Inspecteer de tabelstructuur met DevTools of een accessibility-inspectietool en controleer of de kolomkoppen zijn gemarkeerd met <th>-elementen. Onze Tabel-checker loopt automatisch door alle tabellen op een pagina en wijst aan welke cellen geen kopcel hebben. Navigeer daarna met een schermlezer door de tabel en bevestig dat de bijbehorende kopinformatie wordt aangekondigd bij elke gegevenscel.

Oplossing

Gebruik <th>-elementen voor de kopcellen van de tabel. Gebruik <td>-elementen voor de gegevenscellen.

#3 - Pdf-icoon heeft geen tekstalternatief

Op deze pagina staat een knop met de tekst "Print" die een pdf-icoon bevat. Het icoon heeft geen tekstalternatief, waardoor schermlezergebruikers niet weten dat de knop verwijst naar een "Print naar PDF"-functionaliteit. Deze informatie is belangrijk en moet op een toegankelijke manier worden aangeboden.

User story

Als ik mijn schermlezer gebruik, krijg ik geen informatie van iconen zonder tekst. Ik wil dat het pdf-icoon wordt voorgelezen, anders weet ik niet dat de knop een PDF-document print.

Hoe te testen

Inspecteer elke afbeelding, elk icoon en elke SVG in DevTools. Informatieve elementen hebben een tekstalternatief nodig dat de betekenis overbrengt; decoratieve img-elementen gebruiken alt="" en decoratieve svg-elementen aria-hidden="true". Verifieer met een schermlezer dat er geen ruis (bijvoorbeeld de bestandsnaam of "image") wordt voorgelezen.

Oplossing

Voeg verborgen tekst toe binnen de link (bijvoorbeeld "(PDF)") die visueel niet zichtbaar is, maar wel beschikbaar is voor schermlezers. Zo weten gebruikers dat de link naar een "Print naar PDF"-functionaliteit verwijst.

#4 - Icoon 'opent in nieuw browsertabblad' heeft geen tekstalternatief

Op deze pagina staan "Cookiebot"-links met een icoon dat aangeeft dat de link in een nieuw browsertabblad opent. Deze iconen hebben geen tekstalternatief, waardoor schermlezergebruikers dit gedrag niet horen.

Hetzelfde probleem komt voor op de pagina:

• https://www.archeodepot.nl/toegankelijkheid

User story

Als schermlezergebruiker wil ik weten wanneer een link in een nieuw tabblad opent, zodat ik beter begrijp wat er gebeurt nadat ik de link activeer.

Hoe te testen

Navigeer met een schermlezer naar de links en controleer of de toegankelijke naam of bijbehorende tekst aangeeft dat de link in een nieuw tabblad opent.

Oplossing

Voeg de informatie dat de link een nieuw browsertabblad opent toe als visueel verborgen tekst die wel toegankelijk is voor schermlezers, bij voorkeur achteraan de linktekst.

#5 - Kop niet gemarkeerd als kop

Op deze pagina zijn de volgende teksten in de code niet gemarkeerd als kop: "Noodzakelijk (2)" en "Niet geclassificeerd (1)". Wanneer tekst als kop fungeert maar de bijbehorende mark-up mist, verliest de tekst zijn semantische betekenis en is hij niet toegankelijk voor bezoekers die schermlezers of andere hulpsoftware gebruiken. Koppen zijn essentieel om door de pagina te navigeren en de structuur van de inhoud te begrijpen.

User story

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

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Markeer koppen met het juiste HTML-element en gebruik daarbij het correcte kopniveau (h2 tot en met h6).

#6 - Onjuist gebruik p-element

Op deze pagina staat onder "Cookieverklaring" een tekstblok ("Cookies zijn kleine tekstbestanden die door … ID en de datum van de toestemming alstublieft.") met meerdere alinea's dat onjuist als één enkel <p>-element is gemarkeerd. De visuele structuur van de inhoud moet ook in de HTML terugkomen.

User story

Ik lees de website met een schermlezer. Als ik door de tekst navigeer, dan worden alle alinea's als één lang blok voorgelezen. Ik verwacht dat ik elke visuele alinea apart kan bereiken.

Hoe te testen

Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's ook als aparte <p>-elementen zijn gemarkeerd. Gebruik een schermlezer en navigeer per alinea (bijvoorbeeld met de P-toets in NVDA). Verifieer dat elke visueel onderscheiden alinea ook als afzonderlijke alinea wordt herkend en los kan worden bereikt.

Oplossing

Plaats elke alinea in een afzonderlijk <p>-element. Het aantal alinea's dat wordt weergegeven, moet overeenkomen met het aantal <p>-elementen in de code.

#7 - Kop niet gemarkeerd als kop

Op deze pagina is de tekst "Op deze pagina" in de code niet gemarkeerd als kop.

User story

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

Hoe te testen

Navigeer met een schermlezer of een accessibility-tool van de browser via de koppen en controleer of alle visuele koppen zijn gemarkeerd met een passend kop-element (<h1>–<h6>).

Oplossing

Markeer deze kop met een passend HTML-kopelement en gebruik daarbij het juiste kopniveau (bijvoorbeeld h2 tot h6).

#8 - strong-element gebruikt in plaats van kop-element

Op deze pagina zijn de volgende teksten koppen, maar de kop-elementen ontbreken. In plaats daarvan zijn strong-elementen gebruikt om ze er als kop uit te laten zien. Zie "Redactie" en "Websitebureau en hosting".

User story

Ik lees de website met een schermlezer. Als ik door de koppen van een pagina navigeer, dan mis ik titels die alleen vet of cursief zijn opgemaakt. Ik verwacht dat alle titels als echte koppen zijn gemarkeerd, zodat ik de paginastructuur kan volgen.

Hoe te testen

Gebruik deze tool om de koppen op je webpagina te controleren: Koppen checker. Staat een kop niet in de lijst die deze tool teruggeeft? Dan is het niet als koptekst gemarkeerd. Visuele koppen moeten in de HTML staan, niet alleen als gestylede tekst.

Oplossing

Verwijder het strong-element of em-element en markeer deze tekst met een passend kop-element, zoals h2 of h3. De visuele opmaak kan eventueel met CSS worden toegepast. Dit type element wordt vaak toegevoegd via de knop "B" (vet) in een tekstbewerker.

#9 - Onduidelijke koptekst

Op deze pagina staat een kop "Ga direct naar" die de inhoud die erop volgt niet voldoende beschrijft. Koppen als "Ga direct naar", "Direct naar" of "Ga naar" zijn te generiek en geven geen betekenisvolle informatie over het doel van de inhoud. Schermlezergebruikers vertrouwen vaak op koppen om door de pagina te navigeren en de structuur te begrijpen. Koppen moeten daarom duidelijk en bondig zijn en het onderwerp van de volgende inhoud goed weergeven.

User story

Ik lees de website met een schermlezer. Als ik via koppen door een pagina navigeer, dan geven labels als "Ga naar" of "Direct naar" me geen bruikbare informatie. Ik verwacht dat elke kop duidelijk omschrijft welke inhoud erop volgt.

Hoe te testen

Maak een overzicht van alle koppen op de pagina (met HeadingsMap of deze Koppen checker). Elke kop moet duidelijk genoeg beschrijven wat erop volgt, zodat de gebruiker een navigatiekeuze kan maken. Vage koppen als "Sectie" of "Meer info" zijn onvoldoende.

Oplossing

Vervang de vage kop door een meer beschrijvende kop die het onderwerp van de bijbehorende sectie duidelijk weergeeft.

#10 - Onvoldoende contrast knoptekst

Op deze pagina heeft de knop "Opnieuw zoeken" (zichtbaar na het klikken op de knop "Zoeken") onvoldoende kleurcontrast. De witte tekst op de groene achtergrond (#5cb85c) heeft een contrastverhouding van 2,5:1. Dat is lager dan de vereiste 4,5:1 voor normale tekst.

Op deze pagina hebben in de kolom "VondstId" sommige items, bijvoorbeeld het item met de naam "POM 7408", een link "1 Opname" met dezelfde kleurcombinatie.

User story

Ik heb een visuele beperking. Als ik een knop zie, dan is de tekst moeilijk leesbaar door te weinig contrast met de achtergrond. Ik verwacht dat knoptekst altijd duidelijk zichtbaar is.

Hoe te testen

Gebruik Axe of Lighthouse voor een automatische contrast-check, en meet randgevallen handmatig met Colour Contrast Analyzer. Minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (vanaf 24px normaal of 18,7px bold). Let op placeholders, tekst op afbeeldingen en disabled-ogende elementen.

Oplossing

Zorg ervoor dat het contrast van de knoptekst minimaal 4,5:1 is.

#11 - Paginering: linktekst is te kort

Op deze pagina geven de pagineringslinks onvoldoende context. Ziende gebruikers begrijpen dat "1", "2", "3", enzovoort paginanummers zijn, maar voor gebruikers met een visuele beperking of een schermlezer is dat niet duidelijk. De paginering verschijnt nadat op de knop "Zoeken" is geklikt.

User story

Ik lees de website met een schermlezer. Als ik door de pagineringslinks navigeer, dan hoor ik alleen losse cijfers zoals 'één', 'twee', 'drie'. Ik verwacht dat elke link duidelijk aangeeft dat het om een paginanummer gaat.

Hoe te testen

Open de linklijst in een schermlezer (Insert+F7 in NVDA) en beoordeel elke link los van context: zou je erop klikken? Vage teksten als "Lees meer", "Klik hier" of dezelfde tekst met verschillende bestemmingen moeten worden gemarkeerd. Afbeeldinglinks hebben een alt nodig die de bestemming beschrijft.

Oplossing

Voeg context toe aan de linktekst van de pagineringsnummers, bijvoorbeeld "Pagina 1", "Pagina 2", enzovoort.

#12 - Informatief icoon heeft geen tekstalternatief

Op deze pagina staan, nadat op de knop "Zoeken" is geklikt, in de kolommen "Geconserveerd", "Exposabel" en "Geselecteerd" informatieve iconen (vinkjes) die informatie overbrengen. Deze iconen zijn via CSS verborgen voor hulpsoftware en hebben geen tekstalternatief. Hierdoor kunnen schermlezergebruikers niet vaststellen of de bijbehorende waarde in een tabelcel aanwezig is of niet.

User story

Als schermlezergebruiker wil ik dat informatieve iconen een tekstalternatief hebben, zodat ik de informatie die de tabel overbrengt kan begrijpen.

Hoe te testen

Navigeer met een schermlezer door de tabel en verifieer of de betekenis van elk vinkje wordt aangekondigd zodra de bijbehorende cel focus krijgt.

Oplossing

Geef elk informatief icoon een tekstalternatief. Maak bijvoorbeeld tekst als "Ja", "Aanwezig" of een andere passende waarde beschikbaar die de betekenis van het vinkje weergeeft.