Audit digitale toegankelijkheid van website igc.nl
Samenvatting
Wij hebben de website igc.nl onderzocht in augustus 2025. Op dit moment is een deel van de succescriteria als voldoende beoordeeld. In dit rapport lees je per pagina welke punten nog verbetering behoeven en hoe deze kunnen worden aangepakt.
Op alle pagina’s is in de <head>-sectie van de HTML-code de user-scalable=no aanwezig. Deze code maakt het moeilijk om in oudere browsers op mobiel in te zoomen.
User story
Ik ben slechtziend en vergroot tekst in mijn browser. Wanneer ik tot 200% inzoom, verwacht ik dat alle tekst groter wordt en leesbaar blijft. Als inzoomen wordt geblokkeerd of tekst wegvalt, kan ik de inhoud niet lezen.
Hoe te testen
Zoom in de browser in tot 200% en controleer of alle tekst meegroeit en leesbaar blijft. Controleer in de <head> of inzoomen niet wordt geblokkeerd, bijvoorbeeld met user-scalable=no of een vaste maximum-scale.
Oplossing
Verwijder deze code.
#2 - Toetsenbordfocus is niet zichtbaar
Impact: GrootType: TechniekWCAG: 2.4.7EN: 9.2.4.7
Op alle pagina’s is de toetsenbordfocus niet zichtbaar op alle interactieve elementen, zoals de link “Club”, de link “Agenda”, de link met het logo en andere.
De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.
User story
Ik navigeer met het toetsenbord. Wanneer ik door de pagina tab, verwacht ik altijd te zien waar mijn focus staat. Zonder zichtbare focusindicator weet ik niet welk element ik op dat moment bedien.
Hoe te testen
Tab door de pagina en controleer of elk interactief element een duidelijk zichtbare focusindicator krijgt. Let er ook op dat de indicator voldoende contrast heeft met de achtergrond.
Oplossing
Zorg dat de toetsenbordfocus zichtbaar is op alle interactieve elementen.
#3 - Dialoogvenster heeft geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op pagina https://igc.nl/lid-worden staan naast de kop “Sfeerimpressie van onze Club” links naar video’s. Het “play”-icoon opent een dialoogvenster met een video, maar dit dialoogvenster mist een toegankelijke naam, waardoor schermlezers de inhoud niet kunnen overbrengen aan gebruikers.
Dit probleem komt op meerdere plekken voor:
op pagina https://igc.nl/club opent een link met een “play”-icoon een dialoogvenster met een video; op pagina https://igc.nl/evenementenlocatie verschijnt een dialoogvenster nadat het formulier onder de kop “Vraag een offerte aan” is verzonden;
op pagina https://igc.nl/agenda?lang=en verschijnt op een klein scherm een dialoogvenster nadat de bezoeker op een programma klikt, zoals “Japanese Kōdō workshop”;
en wanneer een bezoeker het formulier onder de kop “Inschrijven kennismakingsavond” verzendt, opent eveneens een dialoogvenster zonder toegankelijke naam.
User story
Ik lees de website met een schermlezer. Wanneer een dialoogvenster opent, kondigt mijn schermlezer het niet aan of beschrijft het de inhoud niet. Ik verwacht dat mijn schermlezer mij vertelt dat er een dialoogvenster opent en waar het over gaat.
Hoe te testen
Gebruik voor elk interactief component (link, knop, invoerveld, custom widget) het accessibility-paneel van DevTools en een schermlezer. Elk component moet doorgeven wat het is (role), de naam en de huidige status. Bevestig dat de naam het doel duidelijk identificeert.
Oplossing
Voeg een aria-label aan het dialoogvenster toe met een duidelijke beschrijving van de inhoud.
#4 - Kleurcontrast van tekst is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op veel pagina’s staat witte tekst op een achtergrond die bestaat uit afbeeldingen of video’s. Dit kan zorgen voor onvoldoende contrast, vooral wanneer delen van de achtergrond licht zijn. Bijvoorbeeld de witte tekst “Welkom bij Koninklijke Industrieele Groote Club” op een lichtgrijze achtergrond (#C4BFB9). De kleurcontrastverhouding is minder dan 3,0:1.
User story
Ik heb een visuele beperking. Wanneer ik een pagina lees, kan ik tekst die weinig contrast heeft met de achtergrond niet onderscheiden. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Tekst die kleiner is dan 24 px moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Voor tekst vanaf 24 px of 19 px vetgedrukt is een minimale contrastverhouding van 3,0:1 vereist.
#5 - Tabpanel element heeft geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Sommige pagina’s, zoals https://igc.nl/, https://igc.nl/contact en https://igc.nl/club, bevatten een tabpanel-element (carrousel met afbeeldingen) met het juiste attribuut role="tabpanel", maar zonder toegankelijke naam. Hierdoor krijgen schermlezer gebruikers geen informatie over het doel of de inhoud van het tabblad, wat de navigatie en oriëntatie bemoeilijkt.
Daarnaast worden in dit element ARIA-rollen gebruikt die niet correct zijn geïmplementeerd. Zo staat elke slide in een container met role=”tabpanel”, maar er ontbreekt de role=”tablist”. Niet correct implementeren van ARIA-technieken zorgt voor meer toegankelijkheidsproblemen.
Zie voor meer informatie over deze rol: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
User story
Ik gebruik een schermlezer. Wanneer ik door een tab-interface of carrousel navigeer, verwacht ik te horen welke tab geselecteerd is en welke inhoud daarbij hoort. Zonder de juiste rollen en namen begrijp ik de structuur niet.
Hoe te testen
Inspecteer het tab- of carrouselcomponent met DevTools en een schermlezer. Controleer of de tablist, de tabs en de tabpanelen de juiste rollen en namen doorgeven en of de geselecteerde tab als zodanig wordt aangekondigd.
Oplossing
Geef het element een betekenisvolle toegankelijke naam en implementeer de bijbehorende ARIA-rollen volledig en correct. Zie het ARIA-patroon voor tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
#6 - Decoratieve afbeelding is niet verborgen voor schermlezers
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
User story
Ik gebruik een schermlezer. Wanneer ik een pagina lees, verwacht ik dat puur decoratieve afbeeldingen worden overgeslagen. Als decoratieve afbeeldingen niet verborgen zijn, hoor ik overbodige of verwarrende informatie die mij ophoudt.
Hoe te testen
Inspecteer elke afbeelding, elk pictogram en elke SVG in DevTools. Decoratieve exemplaren moeten verborgen zijn voor hulpsoftware met alt="" of aria-hidden="true". Bevestig met een schermlezer dat ze niet worden aangekondigd.
Oplossing
Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.
#7 - Er is maar één manier om een webpagina te vinden
Er is geen tweede manier om de pagina's van deze website te vinden. Bijvoorbeeld, de pagina Historisch Sprekers Archief is alleen te vinden via een submenu in het hoofdmenu.
Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.
User story
Ik vind mijn weg op een website het liefst via zoeken of een sitemap. Wanneer er maar een manier is om een pagina te bereiken, kost het mij veel moeite om te vinden wat ik zoek. Ik verwacht meerdere manieren om een pagina te vinden.
Hoe te testen
Controleer of er minstens twee manieren zijn om een pagina te bereiken, bijvoorbeeld een menu plus een zoekfunctie of sitemap. Test of die manieren werken en naar dezelfde inhoud leiden.
Oplossing
Voeg een zoekveld toe zodat elke webpagina’s op deze manier te vinden is.
#8 - Contrast van tekst gele tekst is onvoldoende
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op alle pagina’s van de website wordt gele (#F7AD19) tekst gebruikt in links. In combinatie met een witte achtergrond heeft deze kleur een contrastverhouding van 1,9:1.
Deze gele kleur in combinatie met lichtgrijs heeft een contrastverhouding van 1,5:1.
Enkele voorbeelden zijn:
Gele links op pagina https://igc.nl/contact
De link “Club” in het hoofdmenu bevat submenu’s. In dit submenu staan links zoals “Thema’s”, “Sprekers” en andere.
Deze links hebben onvoldoende kleurcontrast wanneer de muis erover deze links wordt bewogen.
User story
Ik heb een visuele beperking. Wanneer ik een pagina lees, kan ik tekst die weinig contrast heeft met de achtergrond niet onderscheiden. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Tekst tot 23px moet een minimale contrastratio hebben van 4,5:1. De minimale eis voor tekst groter dan 24px is 3,0:1.
Op deze pagina staat een instructie om zelf kleur te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/
Het logo bovenaan de website toont de volledige tekst "IGC", maar de alt-tekst is alleen "logo". Hetzelfde geldt voor het logo in de footer. In het tekst alternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.
Dit logo is tevens een link. Omdat de zichtbare tekst van het logo niet in het tekstalternatief staat, is deze link niet met stem te bedienen.
User story
Ik lees de website met een schermlezer. Wanneer ik de pagina open, kan ik niet bepalen welke organisatie achter de site zit omdat het logo geen tekstalternatief heeft. Ik verwacht dat het logo een tekstalternatief heeft met de naam van de organisatie.
Hoe te testen
Inspecteer het logo in DevTools en beluister het met een schermlezer. Controleer of het logo een tekstalternatief heeft dat de naam van de organisatie bevat, bijvoorbeeld via een alt-attribuut of een toegankelijke naam op de SVG.
Oplossing
Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “IGC logo”.
#10 - Content die verschijnt bij hover moet makkelijk gesloten kunnen worden
Wanneer je met de muis over het menu-item “Club” beweegt, verschijnt er extra content die tekst op de pagina bedekt. Hierdoor wordt de tekst onleesbaar.
User story
Ik gebruik een schermvergroter en bedien de muis lastig. Wanneer er inhoud verschijnt bij hover, verwacht ik dat ik die kan wegklikken, dat de inhoud blijft staan als ik mijn muis ernaartoe beweeg, en dat ze niet onbedoeld verdwijnt.
Hoe te testen
Beweeg de muis over het element zodat de extra inhoud verschijnt. Controleer of de inhoud te sluiten is met Escape, of die blijft staan wanneer je de muis erheen beweegt, en of die niet vanzelf verdwijnt zolang je erover hovert.
Oplossing
De bezoeker moet deze content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.
#11 - Link naar huidige pagina alleen aan kleur te herkennen
De link naar de huidige pagina in het hoofdmenu is alleen te onderscheiden door een andere kleur. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers, omdat zij de kleuren mogelijk niet goed kunnen onderscheiden en daardoor niet zien welke link actief is. Zorg ervoor dat actieve links ook op een andere manier herkenbaar zijn, bijvoorbeeld door ze te onderstrepen of vet te maken.
User story
Ik ben kleurenblind. Wanneer informatie alleen met kleur wordt aangegeven, zoals links in een tekst, kan ik die niet onderscheiden van gewone tekst. Ik verwacht een extra kenmerk naast kleur, zoals onderstreping.
Hoe te testen
Bekijk de pagina in grijswaarden of met een kleurenblindheidssimulatie. Controleer of informatie die met kleur wordt overgebracht (zoals links of statussen) ook zonder kleur te herkennen is, bijvoorbeeld door onderstreping of een pictogram.
Oplossing
Zorg ervoor dat actieve links ook nog op een andere manier te herkennen zijn, bijvoorbeeld door ze te onderstrepen of vetgedrukt te maken.
#12 - Submenu’s niet te openen met toetsenbord
Impact: GrootType: TechniekWCAG: 2.1.1EN: 9.2.1.1
In het hoofdmenu heeft de link “Club” een submenu dat niet met het toetsenbord bedienbaar is.
User story
Ik kan geen muis gebruiken en navigeer met het toetsenbord. Wanneer ik bij een knop, link of menu kom, verwacht ik dat ik die met Tab kan bereiken en met Enter of de spatiebalk kan bedienen. Als dat niet kan, kom ik niet verder.
Hoe te testen
Leg de muis weg en bedien de pagina volledig met het toetsenbord. Controleer of alle interactieve elementen, zoals knoppen, links en submenu's, bereikbaar en te bedienen zijn met Tab, Enter, de spatiebalk en de pijltjes.
Oplossing
Zorg dat submenu’s met het toetsenbord kunnen worden geopend en gebruikt, en dat de informatie in deze submenu’s toegankelijk is voor alle bezoekers. De pagina’s waar de hoofdnavigatie-items naar linken, bevatten namelijk niet alle informatie die in de submenu’s staat.
Hetzelfde probleem doet zich voor bij het taalmenu (een pijlicoon met NL).
#13 - Geen info over de aanwezigheid van een submenu in HTML
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
In het hoofdmenu heeft de link "Club" een submenu. Dit is te zien aan het icoon van een pijltje. Deze informatie is echter niet beschikbaar voor hulpsoftware. Hulpsoftware krijgt ook geen bericht of de toestand van het menu verandert (open of dicht).
User story
Ik gebruik een schermlezer. Wanneer ik bij een bedieningselement kom, verwacht ik te horen wat het is, hoe het heet en wat de huidige status is. Als rol, naam of waarde ontbreekt, kan ik het element niet goed gebruiken.
Hoe te testen
Gebruik voor elk interactief component (link, knop, invoerveld, custom widget) het accessibility-paneel van DevTools en een schermlezer. Elk component moet doorgeven wat het is (role), de naam en de huidige status. Bevestig dat de naam het doel duidelijk identificeert.
Oplossing
Dit kan worden opgelost door het aria-expanded-attribuut toe te voegen of door een test alternatief aan het pijltje te geven.
#14 - Elementen die toetsenbordfocus krijgen vallen onder sticky header
Als je op de website naar beneden scrolt, verschijnt een sticky header: het menu dat bovenaan de website blijft plakken. Deze sticky header bedekt een deel van de pagina. Interactieve elementen, zoals de link “Ontdek de mogelijkheden”, krijgen nog steeds toetsenbordfocus, maar de focusindicator wordt achter deze header verborgen. Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus staat.
User story
Ik navigeer met het toetsenbord. Wanneer een element focus krijgt, verwacht ik dat het volledig zichtbaar is en niet achter een vaste balk of header verdwijnt. Anders weet ik niet waar mijn focus staat.
Hoe te testen
Tab door de pagina, ook bij gescrolde inhoud. Controleer of het element met focus volledig zichtbaar blijft en niet wordt afgedekt door een sticky header, footer of ander vast element.
Oplossing
Zorg ervoor dat de sticky header geen interactieve elementen bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header dynamisch verkleinen op kleinere schermen.
#15 - Focus kan het mobiele menu verlaten
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Wanneer de website op een klein scherm wordt bekeken en het mobiele menu wordt geopend, gaat de toetsenbordfocus langs alle items in het menu. Na het laatste item verlaat de focus het menu terwijl dit open blijft staan en gaat verder naar interactieve elementen op de onderliggende pagina. Hierdoor kan een bezoeker onbedoeld interactieve elementen activeren.
User story
Ik navigeer met het toetsenbord. Wanneer ik met Tab door de pagina ga, verwacht ik dat de focus een logische, voorspelbare volgorde volgt die overeenkomt met wat ik zie. Als de focus heen en weer springt, raak ik de weg kwijt.
Hoe te testen
Tab van boven naar beneden door de pagina en let op sprongen die niet overeenkomen met de visuele volgorde. Open ook dialoogvensters en dynamische componenten en controleer of de focus op een logische plek belandt en blijft.
Oplossing
Je lost dit op een van de volgende manieren op:
Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het venster automatisch: sluit het venster automatisch op het moment dat de focus eruit gaat.
Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.
#16 - Er is geen skiplink aanwezig
Impact: GrootType: TechniekWCAG: 2.4.1EN: 9.2.4.1
Op alle pagina's ontbreekt een skiplink.
Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.
User story
Ik navigeer met het toetsenbord of een schermlezer. Wanneer ik een pagina open, verwacht ik direct naar de hoofdinhoud te kunnen springen zonder eerst door het hele menu te hoeven tabben. Zonder skiplink kost elke pagina mij veel extra handelingen.
Hoe te testen
Druk op een nieuwe pagina meteen op Tab en controleer of er een zichtbare skiplink verschijnt waarmee je naar de hoofdinhoud kunt springen. Test of de link werkt en de focus daadwerkelijk verplaatst.
Oplossing
Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.
Zorg dat de skiplink:
de eerste link op de pagina is;
visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.
#17 - Menuknop heeft geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op een klein scherm verschijnt een menuknop (het “hamburger”-icoon met drie horizontale lijnen) om het mobiele navigatiemenu te openen. Deze knop heeft nu geen toegankelijke naam. Hetzelfde probleem geldt voor de knop “x” in het mobiele menu. Een bezoeker die hulpsoftware gebruikt, weet momenteel niet wat deze knop doet.
User story
Ik gebruik een schermlezer. Wanneer ik bij een bedieningselement kom, verwacht ik te horen wat het is, hoe het heet en wat de huidige status is. Als rol, naam of waarde ontbreekt, kan ik het element niet goed gebruiken.
Hoe te testen
Gebruik voor elk interactief component (link, knop, invoerveld, custom widget) het accessibility-paneel van DevTools en een schermlezer. Elk component moet doorgeven wat het is (role), de naam en de huidige status. Bevestig dat de naam het doel duidelijk identificeert.
Oplossing
Zorg dat de knop een toegankelijke naam krijgt, en dat deze naam van de knop de functie van de knop beschrijft. Zorg ook dat de naam mee verandert als de functie van de knop verandert (“menu openen” of “menu sluiten”).
#18 - Focusvolgorde is niet correct
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Dit is verwarrend voor toetsenbordgebruikers. De focus moet beperkt worden tot zichtbare elementen.
User story
Ik navigeer met het toetsenbord. Wanneer ik met Tab door de pagina ga, verwacht ik dat de focus een logische, voorspelbare volgorde volgt die overeenkomt met wat ik zie. Als de focus heen en weer springt, raak ik de weg kwijt.
Hoe te testen
Tab van boven naar beneden door de pagina en let op sprongen die niet overeenkomen met de visuele volgorde. Open ook dialoogvensters en dynamische componenten en controleer of de focus op een logische plek belandt en blijft.
Oplossing
Wanneer een mobiel menu is ingeklapt, moet de inhoud ervan worden verwijderd uit de volgorde van toetsenbordfocus (bijvoorbeeld door tabindex="-1" te gebruiken of door focus binnen het component programmatisch te beperken).
#19 - Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, zijn navigatielinks in het geopende mobiele menu niet zichtbaar. Bezoekers kunnen deze links niet bereiken omdat ze buiten het zichtbare gebied vallen en volledig onbereikbaar zijn.
User story
Ik vergroot de pagina omdat ik slechtziend ben. Wanneer ik tot 400% inzoom, verwacht ik dat alle tekst en functies beschikbaar blijven zonder horizontaal te hoeven scrollen. Als inhoud wegvalt of overlapt, kan ik de pagina niet meer gebruiken.
Hoe te testen
Zet de browser op 1280px breed en zoom in tot 400% (of stel de viewport in op 320px breed). Controleer of alle tekst en functies beschikbaar blijven zonder horizontaal scrollen en zonder dat inhoud overlapt of verdwijnt.
Oplossing
Zorg ervoor dat alle links en inhoud zichtbaar en toegankelijk blijven wanneer wordt ingezoomd tot 400% op een scherm van 1280 bij 1024 pixels.
In de footer staan onder de kop "Social media" links zonder inhoud die zichtbaar is voor hulpsoftware. De logo’s binnen deze link zijn verborgen met aria-hidden en worden niet voorgelezen. Daarnaast ontbreken tekstalternatieven bij deze logo’s.
Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.
Hetzelfde probleem doet zich voor bij de link met een pijl naar boven waarmee naar boven kan worden gescrolled.
User story
Ik gebruik een schermlezer en spring vaak van link naar link. Wanneer een link 'lees meer' of een lege tekst heeft, weet ik niet waar die naartoe gaat. Ik verwacht dat elke linktekst het doel duidelijk maakt.
Hoe te testen
Loop met een schermlezer door de lijst met links op de pagina. Controleer of elke linktekst, eventueel samen met de directe context, duidelijk maakt waar de link naartoe leidt. Let op lege links en vage teksten.
Oplossing
Voeg tekst toe die de bestemming van deze links goed beschrijft. Een andere oplossing is het gebruik te maken van een aria-label, bijvoorbeeld aria-label=”Facebook”.
#21 - Koppen zijn niet gemarkeerd als koptekst
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op bijna alle pagina's zijn de volgende teksten niet gemarkeerd als koppen: “Bar & Clubzaal” en “Besloten restaurant”.
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 springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
#22 - Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken
Wanneer de tekst op deze pagina wordt ingezoomd tot 200%, is de link naar Instagram in de footer niet meer zichtbaar. Hetzelfde probleem doet zich voor wanneer er wordt ingezoomd op 400%.
User story
Ik ben slechtziend en vergroot tekst in mijn browser. Wanneer ik tot 200% inzoom, verwacht ik dat alle tekst groter wordt en leesbaar blijft. Als inzoomen wordt geblokkeerd of tekst wegvalt, kan ik de inhoud niet lezen.
Hoe te testen
Zoom in de browser in tot 200% en controleer of alle tekst meegroeit en leesbaar blijft. Controleer in de <head> of inzoomen niet wordt geblokkeerd, bijvoorbeeld met user-scalable=no of een vaste maximum-scale.
Oplossing
Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.
#23 - Decoratieve afbeeldingen zijn niet verborgen voor schermlezers
Impact: KleinType: ContentWCAG: 1.1.1EN: 9.1.1.1
Onder de kop “Onze vier pijlers” staan decoratieve afbeeldingen. De tekstalternatief is "our-pillar-icon". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.
Hetzelfde probleem doet zich voor op de pagina https://igc.nl/club onder de kop “Onze thema's”.
User story
Ik gebruik een schermlezer. Wanneer ik een pagina lees, verwacht ik dat puur decoratieve afbeeldingen worden overgeslagen. Als decoratieve afbeeldingen niet verborgen zijn, hoor ik overbodige of verwarrende informatie die mij ophoudt.
Hoe te testen
Inspecteer elke afbeelding, elk pictogram en elke SVG in DevTools. Decoratieve exemplaren moeten verborgen zijn voor hulpsoftware met alt="" of aria-hidden="true". Bevestig met een schermlezer dat ze niet worden aangekondigd.
Oplossing
Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.
#24 - Alternatieve tekst van informatieve afbeelding is niet betekenisvol
Impact: KleinType: ContentWCAG: 1.1.1EN: 9.1.1.1
Boven de kop “Historische locatie in Amsterdam” staat een carrousel met foto’s van de club. Al deze foto’s hebben de beschrijving “surprising-img”. Deze tekst beschrijft niet wat er op de foto te zien is en is bovendien niet uniek. In de alt-tekst moet worden beschreven wat de foto toont. Hetzelfde probleem komt voor onder de kop “Wat onze leden zeggen”.
Afbeeldingen die informatie overbrengen moeten een betekenisvolle alternatieve tekst hebben, waarin belangrijke informatie uit de afbeelding wordt beschreven.
Hetzelfde probleem doet zich voor op andere pagina’s:
op https://igc.nl/contact onder de kop “Medewerkers & contact”;
op https://igc.nl/lid-worden, bij de kop “Sfeerimpressie van onze Club”, waar afbeeldingen de alternatieve teksten “atmosphere-img”, “video-player-icon” en daaronder “our-member-img” hebben;
op https://igc.nl/club bij de koppen “Ontdek onze sociëteit”, “Koninklijke IGC en haar zusterclubs” en “Ons bestuur”; en op meerdere andere pagina’s.
User story
Ik gebruik een schermlezer. Wanneer ik een informatieve afbeelding tegenkom, verwacht ik dat het tekstalternatief de informatie of boodschap van de afbeelding beschrijft. Als het tekstalternatief geen verband houdt met de inhoud, mis ik die informatie.
Hoe te testen
Inspecteer de afbeelding en vergelijk het tekstalternatief met de informatie die visueel wordt overgebracht. Controleer of het tekstalternatief het doel, de inhoud of de boodschap van de afbeelding communiceert en bevestig dit met een schermlezer.
Oplossing
Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut. Verwijder de niet-leesbare karakters.
#25 - Video speelt automatisch af
Impact: GrootType: TechniekWCAG: 2.2.2EN: 9.2.2.2
Deze pagina bevat een video die automatisch afspeelt en niet gepauzeerd of gestopt kan worden. Hetzelfde probleem doet zich voor boven de kop “Historische locatie in Amsterdam” met afbeeldingen in de slider die automatisch wisselen.
Het kan storend zijn voor mensen met een cognitieve beperking als een video op een website automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.
Zie ook pagina Club.
User story
Ik raak afgeleid of misselijk van bewegende inhoud. Wanneer een video of animatie automatisch afspeelt, verwacht ik die te kunnen pauzeren, stoppen of verbergen. Anders kan ik me niet op de inhoud concentreren.
Hoe te testen
Controleer of bewegende of automatisch startende inhoud langer dan 5 seconden duurt. Test of er een zichtbare, bereikbare manier is om de beweging te pauzeren, te stoppen of te verbergen.
Oplossing
Er moet een manier zijn waarmee bezoekers dit soort multimedia kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.
#26 - Kop-element gebruikt voor tekst die geen kop is
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Onder de kop “Wat onze leden zeggen” staan teksten zoals “De Club inspireert ..”, “Sterre Romkema”, “Bij IGC ontdekte …” en andere. Deze teksten zijn geen koppen, maar zijn onterecht gemarkeerd met een <h3>- en <h4>-element om de lettergrootte te vergroten.
Het kop-element (h3, h4) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3(h4)-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.
Hetzelfde probleem doet zich voor op de pagina https://igc.nl/lid-worden, boven de footer.
User story
Ik lees de website met een schermlezer. Wanneer ik door de koppen navigeer, kom ik een kop tegen die geen echte sectie introduceert. Ik verwacht dat elke kop het begin van een nieuwe sectie met inhoud markeert.
Hoe te testen
Gebruik de Heading Structure Checker om alle koppen op de pagina op te sommen. Loop de lijst door en vraag je per kop af of de tekst een eigen sectie met inhoud introduceert of alleen voor opmaak wordt gebruikt.
Oplossing
Verwijder het h3 en h4-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.
#27 - Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken bij een schermresolutie van 1280 bij 1024 pixels en ingezoomd op 400%, gaat de volgende tekst gedeeltelijk verloren: “Welkom bij”, “Koninklijke Industrieele Groote Club”, “Verbindt en Inspireert”, knop “Lees verder”.
User story
Ik vergroot de pagina omdat ik slechtziend ben. Wanneer ik tot 400% inzoom, verwacht ik dat alle tekst en functies beschikbaar blijven zonder horizontaal te hoeven scrollen. Als inhoud wegvalt of overlapt, kan ik de pagina niet meer gebruiken.
Hoe te testen
Zet de browser op 1280px breed en zoom in tot 400% (of stel de viewport in op 320px breed). Controleer of alle tekst en functies beschikbaar blijven zonder horizontaal scrollen en zonder dat inhoud overlapt of verdwijnt.
Oplossing
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
#28 - Website werkt niet meer goed of is niet meer leesbaar als tekstafstand wordt aangepast
Op deze pagina worden onder de kop “Wat onze leden zeggen” teksten, zoals “Bij IGC ontdekte ik een wereld van…”, gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers de tekstafstand toepassen zoals beschreven in dit succescriterium.
Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.
User story
Ik pas met een eigen stylesheet de tekstafstand aan omdat ik anders moeilijk lees. Wanneer ik regelafstand of letterafstand vergroot, verwacht ik dat de tekst leesbaar blijft zonder dat inhoud wegvalt of overlapt.
Hoe te testen
Pas met een bookmarklet of eigen CSS de tekstafstand aan (regelhoogte 1,5; alinea-afstand 2x; letterafstand 0,12em; woordafstand 0,16em). Controleer of alle tekst zichtbaar en leesbaar blijft zonder afgekapte of overlappende inhoud.
Oplossing
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
Deze pagina bevat een iframe met een kaart zonder beschrijving die zichtbaar is voor hulpsoftware.
Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
User story
Ik gebruik een schermlezer. Wanneer ik een ingesloten kader (iframe) tegenkom, verwacht ik dat het een betekenisvolle naam heeft zodat ik weet wat het bevat. Zonder naam hoor ik alleen 'frame' en weet ik niet wat erin staat.
Hoe te testen
Inspecteer elk <iframe> in DevTools. Controleer of het een title-attribuut heeft met een betekenisvolle, unieke beschrijving van de inhoud, en bevestig met een schermlezer dat die naam wordt aangekondigd.
Oplossing
Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat, bijvoorbeeld title=”Google Maps kaart met locatie van IGC in Amsterdam”.
#30 - Bij een informatieve afbeelding wordt de bestandsnaam voorgelezen
Op deze pagina, onder de kop "Bereikbaarheid", staat een knop met de tekst “plan je reis” en het logo van 9292. Dit logo is geïmplementeerd met een img-element, maar het alt-attribuut ontbreekt. De schermlezer kan niet vertellen dat deze link naar de website van 9292 verwijst. Dit maakt de bestemming van de link onduidelijk.
Hierdoor lezen schermlezers nu de bestandsnaam voor, en dat is niet de bedoeling. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat.
User story
Ik lees de website met een schermlezer. Wanneer ik een afbeelding tegenkom, leest mijn schermlezer een bestandsnaam voor in plaats van een beschrijving. Ik verwacht dat elke informatieve afbeelding een betekenisvolle beschrijving heeft.
Hoe te testen
Inspecteer de afbeelding in DevTools en beluister hem met een schermlezer. Controleer of de afbeelding een alt-attribuut heeft dat de inhoud beschrijft in plaats van een bestandsnaam, en bevestig dat de schermlezer die beschrijving voorleest.
Oplossing
Voeg een alt-tekst toe: alt=”9292”.
Tip: verwijder role=”button” van deze link. Dit is geen knop.
Deze links zijn alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden en zien dan niet dat er een link in de tekst staat.
Hetzelfde probleem doet zich voor onder de kop “Parkeerfaciliteiten”, met de links “website”.
User story
Ik ben kleurenblind. Wanneer informatie alleen met kleur wordt aangegeven, zoals links in een tekst, kan ik die niet onderscheiden van gewone tekst. Ik verwacht een extra kenmerk naast kleur, zoals onderstreping.
Hoe te testen
Bekijk de pagina in grijswaarden of met een kleurenblindheidssimulatie. Controleer of informatie die met kleur wordt overgebracht (zoals links of statussen) ook zonder kleur te herkennen is, bijvoorbeeld door onderstreping of een pictogram.
Oplossing
Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn die niet afhankelijk is van kleur.
Bijvoorbeeld:
Onderstrepen: geef de links een onderstreping.
Rand: voeg een subtiele rand (kader) toe aan de links.
Verhoogd contrast + hover-effect: verhoog het contrast tussen de kleur van de links en de omringende tekst tot minimaal 3,0:1, en voeg een tweede visuele indicator toe bij hover, zoals een onderstreping of verandering in de achtergrondkleur.
#32 - Visueel meerdere alinea’s, in de code maar één
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina, onder de kop "Parkeerfaciliteiten", staat een tekstblok met 6 alinea's binnen een <div>-element.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen <p>-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal <p>-elementen in de code.
Op deze pagina, onder de kop "Medewerkers & contact", staat een carousel met afbeeldingen. Onder de caroussel staan knoppen om tussen de afbeeldingen te navigeren. Niet-actieve lichtblauwe knoppen (#C6DCEB) op een lichtgrijze achtergrond (#E5E5E5) hebben een te lage contrastverhouding van 1,1:1. Hetzelfde probleem doet zich voor op de pagina https://igc.nl/club, onder de koppen "Ons bestuur" en "Club Magazine".
User story
Ik heb een visuele beperking. Wanneer ik bedieningselementen zoals knoppen, invoervelden of de focusindicator bekijk, verwacht ik dat hun randen en grenzen voldoende contrast hebben. Anders kan ik niet goed zien waar een element begint of waar mijn focus staat.
Hoe te testen
Meet met de Colour Contrast Analyser het contrast van bedieningselementen en hun grenzen ten opzichte van de achtergrond. Het minimum is 3,0:1 voor grafische objecten en bedieningselementen die nodig zijn om de bediening te begrijpen.
Oplossing
Zorg dat het contrast tussen de knoppen en de achtergrondkleur(en) minimaal 3,0:1 is.
Op deze pagina, onder de kop "Programma", wordt het <strong>-element gebruikt in de tekst "Onderstaand alle … activiteiten te zien". De hele zin is in een <strong>-element opgenomen om het opvallend te maken. Hetzelfde probleem is te zien in sommige programma's, bijvoorbeeld het programma “Japanese Kōdō workshop” met de tekst “Noriko Amano van Baaren …” en anderen.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.
#35 - Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Onder de kop "Programma" staat de witte tekst "Alle thema's" op een blauwe (#3787C2) achtergrond. De kleurcontrastverhouding is te laag: 3,9:1.
De grijze (#707070) tekst "Onderstaand alle …" staat op een lichtgrijze (#E5E5E5) achtergrond. De kleurcontrastverhouding is te laag: 3,9:1.
De filters boven de events veranderen van kleur wanneer een bezoeker de muis over de filters beweegt. In vele gevallen wordt het contrast van tekst in combinatie met de achtergrond lager dan 4,5:1.
Elk programma-item heeft een grijze (#969696) tekst met een datum en tijd op een lichtgrijze (#F7F7F7) achtergrond, bijvoorbeeld "dinsdag 29 april 2025 13:15 - 17:00". De kleurcontrastverhouding is te laag: 2,8:1.
User story
Ik heb een visuele beperking. Wanneer ik een pagina lees, kan ik tekst die weinig contrast heeft met de achtergrond niet onderscheiden. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Deze tekst is kleiner dan 23px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn.
#36 - Taalwisseling ontbreekt op anderstalige content
Impact: MediumType: ContentWCAG: 3.1.2EN: 9.3.1.2
Op deze pagina Engelstalige pagina staan Nederlandstalige teksten. Het gaat om de filters en de beschrijvingen van alle events.
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “en”. Je wilt echter dat de schermlezer bij deze tekst op de taal van deze zin overschakelt. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.
User story
Ik gebruik een schermlezer. Wanneer een stuk tekst in een andere taal staat, verwacht ik dat dat in de code is aangegeven, zodat mijn schermlezer de juiste uitspraak gebruikt. Anders klinkt anderstalige tekst onverstaanbaar.
Hoe te testen
Zoek tekstfragmenten in een andere taal dan de paginataal. Controleer of die fragmenten een eigen lang-attribuut hebben en beluister met een schermlezer of de uitspraak klopt.
Oplossing
Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat.
<section class=”agenda-wrp” lang=”nl”>
#37 - Visueel meerdere alinea’s, in de code maar één
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staan beschrijvingen van events. In alle events is een tekstblok dat visueel uit meerdere alinea's bestaat incorrect gemarkeerd als één <p>-element.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.
In deze teksten staan ook tussenkopjes die niet als kopteksten zijn gemarkeerd. Hierdoor verschilt de structuur van informatie in de HTML van de structuur die een ziende bezoeker ziet.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
Gebruik h2 - h6 elementen om deze koppen te markeren.
#38 - Bestandsnaam van een afbeelding wordt voorgelezen
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Binnen events staan afbeeldingen zonder alt-teksten die geplaatst zijn via het img-element. Het alt-attribuut ontbreekt.
Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.
User story
Ik lees de website met een schermlezer. Wanneer ik een afbeelding tegenkom, leest mijn schermlezer een bestandsnaam voor in plaats van een beschrijving. Ik verwacht dat elke informatieve afbeelding een betekenisvolle beschrijving heeft.
Hoe te testen
Inspecteer de afbeelding in DevTools en beluister hem met een schermlezer. Controleer of de afbeelding een alt-attribuut heeft dat de inhoud beschrijft in plaats van een bestandsnaam, en bevestig dat de schermlezer die beschrijving voorleest.
Oplossing
Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.
#39 - Informatieve afbeeldingen worden niet voorgelezen
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Elk event heeft icoontjes die het thema voorstellen. Deze iconen hebben geen tekstalternatief en worden niet voorgelezen. Een blinde bezoeker krijg niet dezelfde informatie voorgelezen.
User story
Ik lees de website met een schermlezer. Wanneer ik een afbeelding tegenkom, verwacht ik dat informatieve afbeeldingen een duidelijke beschrijving hebben en dat decoratieve afbeeldingen als zodanig zijn gemarkeerd. Anders mis ik informatie of hoor ik ruis.
Hoe te testen
Inspecteer elke afbeelding, elk pictogram en elke SVG in DevTools. Informatieve elementen hebben een tekstalternatief nodig dat hun betekenis overbrengt; decoratieve elementen gebruiken alt="" of aria-hidden="true". Bevestig het resultaat met een schermlezer.
Oplossing
Geef deze iconen een tekstalternatief of plaats tekst bij elk event om het thema aan te geven.
Onder de naam van een maand staan events. De leesvolgorde is onlogisch. De huidige structuur is:
H2: Maand - H6: datum event - H5: titel event
User story
Ik lees de website met een schermlezer. Wanneer ik door de inhoud navigeer, verwacht ik dat de structuur die ik visueel zie ook in de code aanwezig is. Als koppen, lijsten of relaties alleen visueel bestaan, begrijp ik de opbouw van de pagina mogelijk niet.
Hoe te testen
Loop de pagina door met DevTools en een schermlezer. Visuele koppen, lijsten, alinea's en actieve statussen moeten allemaal in de HTML bestaan, niet alleen als opgemaakte tekst. Gebruik axe voor een snelle automatische scan en controleer de twijfelgevallen handmatig.
Oplossing
Je lost dit op door de volgorde van HTML-elementen te veranderen. Plaats de titel van het event boven aan en neem het op in h3-element. Onder de titel komt alle informatie die bij dit event hoort.
Wanneer deze structuur van boven naar beneden wordt voorgelezen is het duidelijk bij welk event de datum en beschrijving horen.
#41 - Volgorde toetsenbordfocus is niet logisch
Impact: GrootType: TechniekWCAG: 2.3.4EN: 9.2.3.4
Op deze pagina staan onder de maanden events. Wanneer een bezoeker met het toetsenbord navigeert en op Enter drukt bij een event, verwacht de bezoeker dat de toetsenbordfocus naar de beschrijving van dit event gaat. Er staat de knop “Inschrijven” die de bezoeker wil gebruiken.
Dat gebeurt nu niet; de focus gaat verder in de zijkolom naar het volgende event. Dit is geen logische toetsenbordvolgorde.
Bij toetsenbordnavigatie moeten interactieve elementen zoals knoppen en links in een logische volgorde focus krijgen. Logisch betekent dat dit aansluit bij de volgorde van de visuele vormgeving. Als dit niet zo is, wordt het voor bezoekers die alleen een toetsenbord gebruiken moeilijker om de pagina te gebruiken, bijvoorbeeld voor mensen met een motorische of visuele beperking of een leesstoornis.
User story
Ik word onwel van beweging op het scherm. Wanneer ik in mijn systeem heb aangegeven dat ik minder beweging wil, verwacht ik dat niet-essentiele animaties uitgaan. Anders kan ik de pagina niet comfortabel gebruiken.
Hoe te testen
Zet in het besturingssysteem 'verminder beweging' aan en herlaad de pagina. Controleer of niet-essentiele animaties, zoals bewegende achtergronden of overgangen, worden uitgeschakeld of verminderd.
Oplossing
Stuur de focus naar het zijpaneel met detailgegevens van het event.
#42 - Kop-elementen gebruikt op teksten die geen koppen zijn
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
De tekst “Dameszaal - 1e etage”, “Damzaal - 2e etage”, “Bestuurskamer - 1e etage” en andere op deze pagina zijn geen koppen, maar zijn onterecht gemarkeerd met een <h3> element om de lettergrootte te vergroten.
Op deze pagina, onder de kop “Vergaderlocatie in Amsterdam”, staan twee andere koppen: “4-uurs vergaderarrangement met/zonder lunch” en “8-uurs vergaderarrangement”. Deze koptekstelementen (<h6>) bevatten echter ook andere tekst die geen kop is, zoals “€ 27,50 per persoon zonder lunch (exclusief zaalhuur)” en andere.
Het kop-element (h3) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.
#43 - Tekstalternatieven voldoen niet
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Op deze pagina staan onder de kop “Vergaderlocatie in Amsterdam” vier afbeeldingen. Bij alle vier is de alternatieve tekst “Evenementenlocatie”. De alternatieve tekst moet uniek zijn.
User story
Ik gebruik een schermlezer. Wanneer ik een informatieve afbeelding tegenkom, verwacht ik dat het tekstalternatief de informatie of boodschap van de afbeelding beschrijft. Als het tekstalternatief geen verband houdt met de inhoud, mis ik die informatie.
Hoe te testen
Inspecteer de afbeelding en vergelijk het tekstalternatief met de informatie die visueel wordt overgebracht. Controleer of het tekstalternatief het doel, de inhoud of de boodschap van de afbeelding communiceert en bevestig dit met een schermlezer.
Oplossing
Als je met deze afbeeldingen wil laten zien wat er op de locatie gedaan kan worden, geef ze een betekenisvolle alternatieve tekst, bijvoorbeeld “Culinaire hoogstandje van onze geprezen chef” of “Mensen dansen bij live muziek”. Zijn de afbeeldingen decoratief? Laat de alternatieve tekst dan leeg.
#44 - Informatieve afbeelding heeft geen tekstalternatief
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
In de HTML van deze pagina staat onder de knop “Aanvraag verzenden” een img-element zonder een alt-attribuut. Deze afbeelding van een draaiende animatie laat zien dat de webpagina aan het laden is. Bij een img-element zonder een alt-attribuut wordt de bestandsnaam van de afbeelding voorgelezen ("/img/site/spinner.gif"). Dit is niet de informatie die je aan hulpsoftware wil geven.
User story
Ik lees de website met een schermlezer. Wanneer ik een afbeelding tegenkom, verwacht ik dat informatieve afbeeldingen een duidelijke beschrijving hebben en dat decoratieve afbeeldingen als zodanig zijn gemarkeerd. Anders mis ik informatie of hoor ik ruis.
Hoe te testen
Inspecteer elke afbeelding, elk pictogram en elke SVG in DevTools. Informatieve elementen hebben een tekstalternatief nodig dat hun betekenis overbrengt; decoratieve elementen gebruiken alt="" of aria-hidden="true". Bevestig het resultaat met een schermlezer.
Oplossing
Voeg het alt-attribuut toe:
<img alt=”Aan het laden” …>
#45 - Foutmeldingen worden automatisch gegenereerd en zijn onbetrouwbaar
Ik gebruik een schermlezer en vul een formulier in. Wanneer er een fout optreedt, verwacht ik dat mijn schermlezer de foutmelding aankondigt en dat duidelijk is welk veld het betreft. Anders weet ik niet dat er iets misging.
Hoe te testen
Verstuur het formulier met fouten. Controleer of foutmeldingen programmatisch worden aangekondigd, of ze het betreffende veld benoemen en of de foutmelding betrouwbaar verschijnt. Test dit met een schermlezer.
Oplossing
Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
#46 - Het contrast van de placeholder-tekst is kleiner dan 4,5:1
Onder de kop "Vraag een offerte aan" staat een formulier met invoervelden. De grijze (#7E7E7E) placeholdertekst op een witte achtergrond heeft een contrastverhouding van 4,1:1.
User story
Ik heb een visuele beperking. Wanneer ik een invoerveld wil gebruiken, kan ik de placeholdertekst niet lezen omdat het contrast te laag is. Ik verwacht dat tekst in en rond invoervelden duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Maak deze placeholder-tekst donkerder zodat het contrast met de witte achtergrond minstens 4,5:1 wordt.
Onder de kop "Vraag een offerte aan" staat een formulier met invoervelden. Deze invoervelden missen een permanent zichtbaar label. De placeholdertekst wordt als label gebruikt. Dit mag niet omdat deze tekst verdwijnt zodra bezoeker begint te typen.
User story
Ik gebruik een schermlezer en vul een formulier in. Wanneer een invoerveld alleen een placeholder als label heeft, verdwijnt die zodra ik begin te typen en weet ik niet meer wat er werd gevraagd. Ik verwacht een permanent zichtbaar label bij elk veld.
Hoe te testen
Inspecteer elk invoerveld in DevTools en met een schermlezer. Controleer of elk veld een permanent zichtbaar label heeft dat programmatisch aan het veld is gekoppeld, en niet alleen een placeholder gebruikt.
Oplossing
Voeg een label toe in de vorm van een tekst of een icoon.
#48 - Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Onder de kop "Vraag een offerte aan" staat een formulier met invoervelden die persoonlijke informatie verzamelen (bijvoorbeeld voornaam, achternaam, telefoonnummer, e-mailadres). Het autocomplete-attribuut ontbreekt.
User story
Ik heb een motorische beperking en vul formulieren liever automatisch in. Wanneer ik mijn naam, adres of e-mailadres invul, verwacht ik dat de browser deze velden herkent en kan invullen. Zonder die herkenning kost elk formulier mij onnodig veel moeite.
Hoe te testen
Inspecteer de invoervelden voor persoonsgegevens in DevTools. Controleer of elk veld een passend autocomplete-attribuut heeft (bijvoorbeeld name, email, tel) en test of de browser de velden automatisch kan invullen.
Oplossing
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
#49 - Structuur van informatie is anders in de HTML
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Onder "Doelen van de verwerking van persoonsgegevens" staat een tekstblok die uit meerdere alinea's bestaat maar in de HTML is deze tekst in één <p>-element geplaatst.
Hetzelfde probleem doet zich voor onder de koppen “Website en Cookies”, “Beveiliging van persoonsgegevens”, “Uitwisseling van persoonsgegevens” en andere.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.
User story
Ik lees de website met een schermlezer. Wanneer ik door de inhoud navigeer, verwacht ik dat de structuur die ik visueel zie ook in de code aanwezig is. Als koppen, lijsten of relaties alleen visueel bestaan, begrijp ik de opbouw van de pagina mogelijk niet.
Hoe te testen
Loop de pagina door met DevTools en een schermlezer. Visuele koppen, lijsten, alinea's en actieve statussen moeten allemaal in de HTML bestaan, niet alleen als opgemaakte tekst. Gebruik axe voor een snelle automatische scan en controleer de twijfelgevallen handmatig.
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
#50 - Kop is niet gemarkeerd als koptekst
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina zijn de volgende teksten niet gemarkeerd als koppen: "Het doorgeven en ontvangen van persoonsgegevens binnen de vereniging" en "Het doorgeven en ontvangen van gegevens buiten de vereniging". Een bezoeker die hulpsoftware gebruikt, krijgt een andere informatiestructuur voorgelezen.
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Onder het kopje “Een rijk bestand aan sprekers” staat een widget met dezelfde problematiek als de landeninformatie op de pagina "Reciprociteit". Zie bevindingen onder dat hoofdstuk.
#52 - Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op deze pagina staat blauwe tekst (#0D6EFD) op een lichtgrijze achtergrond (#F7F7F7), bijvoorbeeld bij “(23 februari 2017) Armenië: een spectaculair deel van de Kaukasus” en andere. De kleurcontrastverhouding is te laag: 4,2:1.
Hetzelfde probleem komt voor bij de tekst “details..” met dezelfde blauwe kleur (#0D6EFD) op een grijze achtergrond (#E5E5E5 of #D9D9D9). De kleurcontrastverhouding is daar respectievelijk 3,6:1 en 3,2:1, wat lager is dan de vereiste minimumwaarde.
Een lichtblauwe tekst (#88ACD9), bijvoorbeeld “Ambassador State of Israël”, op een blauwe achtergrond (#0065A5) heeft de kleurcontrastverhouding van 2,6:1.
De grijze tekst (#707070) “Aantal sprekers: 3125” op een lichtgrijze achtergrond (#E5E5E5) heeft de kleurcontrastverhouding van 3,9:1.
User story
Ik heb een visuele beperking. Wanneer ik een pagina lees, kan ik tekst die weinig contrast heeft met de achtergrond niet onderscheiden. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
#53 - Visueel zijn meerdere alinea’s aanwezig, in de HTML maar één
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina, naast de kop "Historisch Sprekers Archief", is een blok tekst met meerdere alinea's verkeerd gemarkeerd als één <p>-element.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
#54 - Alternatieve tekst zorgt voor herhaling van tekst
Impact: KleinType: ContentWCAG: 1.1.1EN: 9.1.1.1
Naast de kop "Architectuur, Beeldende kunst & Cultuur" staan foto’s van sprekers. De tekstalternatieven van de afbeeldingen dupliceren de koptekst die ernaast staat. Er wordt nu dezelfde informatie twee keer voorgelezen.
User story
Ik gebruik een schermlezer. Wanneer ik een informatieve afbeelding tegenkom, verwacht ik dat het tekstalternatief de informatie of boodschap van de afbeelding beschrijft. Als het tekstalternatief geen verband houdt met de inhoud, mis ik die informatie.
Hoe te testen
Inspecteer de afbeelding en vergelijk het tekstalternatief met de informatie die visueel wordt overgebracht. Controleer of het tekstalternatief het doel, de inhoud of de boodschap van de afbeelding communiceert en bevestig dit met een schermlezer.
Oplossing
Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).
#55 - Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd op 400%, wordt de volgende tekst gedeeltelijk verborgen: "typ om te zoeken binnen het sprekers archief".
Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd op 400%, zijn de volgende links in de paginering niet zichtbaar en niet bedienbaar: "5", "6", "Volgende" en "Laatste".
User story
Ik vergroot de pagina omdat ik slechtziend ben. Wanneer ik tot 400% inzoom, verwacht ik dat alle tekst en functies beschikbaar blijven zonder horizontaal te hoeven scrollen. Als inhoud wegvalt of overlapt, kan ik de pagina niet meer gebruiken.
Hoe te testen
Zet de browser op 1280px breed en zoom in tot 400% (of stel de viewport in op 320px breed). Controleer of alle tekst en functies beschikbaar blijven zonder horizontaal scrollen en zonder dat inhoud overlapt of verdwijnt.
Oplossing
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Onderaan de pagina staat een paginering met links. Deze links bevatten alleen de nummers “1”, “2”, “3”, enzovoort. Voor ziende bezoekers is duidelijk dat dit paginanummers zijn, maar voor slechtziende gebruikers of mensen die een schermlezer gebruiken, is dit niet vanzelfsprekend. De links missen voldoende context om duidelijk te maken dat het om navigatie naar volgende pagina’s gaat.
User story
Ik gebruik een schermlezer en spring vaak van link naar link. Wanneer een link 'lees meer' of een lege tekst heeft, weet ik niet waar die naartoe gaat. Ik verwacht dat elke linktekst het doel duidelijk maakt.
Hoe te testen
Loop met een schermlezer door de lijst met links op de pagina. Controleer of elke linktekst, eventueel samen met de directe context, duidelijk maakt waar de link naartoe leidt. Let op lege links en vage teksten.
Oplossing
Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’. Een andere oplossing is het plaatsen van een (visueel verborgen) kop “Paginering”.
#57 - Huidige pagina in paginering is alleen visueel aangegeven, maar niet in de HTML
Onderaan de pagina staat een paginering met links. De actieve (huidige) link heeft een andere uiterlijk. Deze informatie is niet beschikbaar voor mensen die hulpsoftware gebruiken.
User story
Ik lees de website met een schermlezer. Wanneer ik door het menu of de paginering navigeer, kan ik niet horen welke pagina op dat moment actief is. Ik verwacht dat mijn schermlezer de huidige pagina duidelijk aankondigt.
Hoe te testen
Inspecteer hoe de actieve status wordt overgebracht. Een item waarvan de status visueel wordt geaccentueerd (kleur, vet) moet die status ook in de code hebben, bijvoorbeeld met aria-current of verborgen tekst.
Oplossing
Je maakt de informatie toegankelijk door:
Verborgen tekst: voeg visueel verborgen tekst toe binnen de link van de huidige pagina die aangeeft dat dit de huidige pagina is.
Bijvoorbeeld:
<span class=”sr-only”>Huidige pagina</span>.
aria-current-attribuut: voeg aria-current=”page” toe aan het a-element van de link van de huidige pagina.
#58 - Pagina werkt niet meer goed of is niet meer leesbaar als tekstafstand wordt aangepast
Als bezoekers de tekstafstand toepassen zoals beschreven in dit succescriterium, wordt de tekst onder de kop "Regeringsleiders" (deze kop verandert per de pagina) gedeeltelijk onzichtbaar en onleesbaar.
Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.
User story
Ik pas met een eigen stylesheet de tekstafstand aan omdat ik anders moeilijk lees. Wanneer ik regelafstand of letterafstand vergroot, verwacht ik dat de tekst leesbaar blijft zonder dat inhoud wegvalt of overlapt.
Hoe te testen
Pas met een bookmarklet of eigen CSS de tekstafstand aan (regelhoogte 1,5; alinea-afstand 2x; letterafstand 0,12em; woordafstand 0,16em). Controleer of alle tekst zichtbaar en leesbaar blijft zonder afgekapte of overlappende inhoud.
Oplossing
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
Onder het kopje “Zoeken in het archief” staat een invoerveld. Een permanent zichtbaar label ontbreekt. Placeholdertekst kan niet als een label dienen omdat het verdwijnt zodra bezoeker begint te typen.
User story
Ik pas met een eigen stylesheet de tekstafstand aan omdat ik anders moeilijk lees. Wanneer ik regelafstand of letterafstand vergroot, verwacht ik dat de tekst leesbaar blijft zonder dat inhoud wegvalt of overlapt.
Hoe te testen
Pas met een bookmarklet of eigen CSS de tekstafstand aan (regelhoogte 1,5; alinea-afstand 2x; letterafstand 0,12em; woordafstand 0,16em). Controleer of alle tekst zichtbaar en leesbaar blijft zonder afgekapte of overlappende inhoud.
Oplossing
Voeg een permanent zichtbaar label boven dit invoerveld.
Bovenaan de pagina staat het logo. Dit logo is onzichtbaar voor hulpsoftware omdat het een tekstalternatief mist. Hierdoor is het logo niet toegankelijk voor bezoekers die de afbeelding niet kunnen zien. Logo’s geven informatie. Daarom moeten ze altijd voorzien zijn van een tekstalternatief.
Dit logo is de enige inhoud van een link. Omdat het logo onzichtbaar is voor hulpsoftware, heeft de link ook geen inhoud. De bestemming van deze link is onbekend.
De zichtbare tekst van het logo staat niet in de toegankelijke naam van de link. Hierdoor is de link niet met stem te bedienen.
User story
Ik lees de website met een schermlezer. Wanneer ik de pagina open, kan ik niet bepalen welke organisatie achter de site zit omdat het logo geen tekstalternatief heeft. Ik verwacht dat het logo een tekstalternatief heeft met de naam van de organisatie.
Hoe te testen
Inspecteer het logo in DevTools en beluister het met een schermlezer. Controleer of het logo een tekstalternatief heeft dat de naam van de organisatie bevat, bijvoorbeeld via een alt-attribuut of een toegankelijke naam op de SVG.
Oplossing
Je lost dit op door de afbeelding als een img-element te plaatsen en een alt-tekst toevoegen die alle tekst van het logo bevat.
#61 - Het contrast van de placeholder-tekst is kleiner dan 4,5:1
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
In het login formulier staan grijze (#999999) placeholder teksten tegen de witte achtergrond. De contrastverhouding is 2,8:1.
User story
Ik heb een visuele beperking. Wanneer ik een invoerveld wil gebruiken, kan ik de placeholdertekst niet lezen omdat het contrast te laag is. Ik verwacht dat tekst in en rond invoervelden duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Zorg dat de placeholder-tekst een contrast van minstens 4,5:1 tegen de achtergrond heeft.
#62 - De kleur van de rand van het invoerveld heeft niet genoeg contrast
In het login formulier staan invoervelden. De contrastverhouding tussen de grijze (#CCCCCC) rand en de witte achtergrond van de pagina is 1,6:1.
User story
Ik heb een visuele beperking. Wanneer ik bedieningselementen zoals knoppen, invoervelden of de focusindicator bekijk, verwacht ik dat hun randen en grenzen voldoende contrast hebben. Anders kan ik niet goed zien waar een element begint of waar mijn focus staat.
Hoe te testen
Meet met de Colour Contrast Analyser het contrast van bedieningselementen en hun grenzen ten opzichte van de achtergrond. Het minimum is 3,0:1 voor grafische objecten en bedieningselementen die nodig zijn om de bediening te begrijpen.
Oplossing
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Het placeholder-tekst kan een alternatief zijn voor de onvoldoende contrasterende randen van het invoerveld, maar deze placeholder-tekst heeft ook onvoldoende contrast, zie vorige bevindingen.
#63 - Placeholdertekst wordt gebruikt als label bij een invoerveld
Impact: MediumType: ContentWCAG: 3.3.2EN: 9.3.3.2
In het loginformulier staan invoervelden met de placeholderteksten “Uw e-mailadres” en “Uw wachtwoord”. Er ontbreken permanente, zichtbare labels; de placeholdertekst wordt nu als label gebruikt.
User story
Ik gebruik een schermlezer en vul een formulier in. Wanneer een invoerveld alleen een placeholder als label heeft, verdwijnt die zodra ik begin te typen en weet ik niet meer wat er werd gevraagd. Ik verwacht een permanent zichtbaar label bij elk veld.
Hoe te testen
Inspecteer elk invoerveld in DevTools en met een schermlezer. Controleer of elk veld een permanent zichtbaar label heeft dat programmatisch aan het veld is gekoppeld, en niet alleen een placeholder gebruikt.
Oplossing
Voeg een permanent zichtbaar label toe bij het invoerveld.
#64 - Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
In het loginformulier staan invoervelden voor persoonlijke informatie (e-mailadres en wachtwoord), maar het ontbreekt aan het autocomplete-attribuut.
User story
Ik heb een motorische beperking en vul formulieren liever automatisch in. Wanneer ik mijn naam, adres of e-mailadres invul, verwacht ik dat de browser deze velden herkent en kan invullen. Zonder die herkenning kost elk formulier mij onnodig veel moeite.
Hoe te testen
Inspecteer de invoervelden voor persoonsgegevens in DevTools. Controleer of elk veld een passend autocomplete-attribuut heeft (bijvoorbeeld name, email, tel) en test of de browser de velden automatisch kan invullen.
Oplossing
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
De primaire taal van deze pagina is Nederlands, maar het lang-attribuut is onjuist ingesteld op "en" (Engels).
Je moet de primaire taal van de pagina aangeven met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen.
User story
Ik gebruik een schermlezer met spraaksynthese. Wanneer de taal van de pagina niet of verkeerd is ingesteld, leest mijn schermlezer de tekst met de verkeerde uitspraak voor. Ik verwacht dat de paginataal correct is vastgelegd.
Hoe te testen
Controleer het lang-attribuut op het <html>-element. Bevestig dat het de werkelijke taal van de pagina aangeeft en beluister met een schermlezer of de uitspraak klopt.
Oplossing
Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.
#66 - Contrast tussen focusindicator en achtergrond is te laag
Op deze pagina, wanneer invoervelden de toetsenbordfocus krijgen, is dit zichtbaar door een lichtblauwe (#4EA7E7) focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is 2,6:1.
Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
User story
Ik heb een visuele beperking. Wanneer ik bedieningselementen zoals knoppen, invoervelden of de focusindicator bekijk, verwacht ik dat hun randen en grenzen voldoende contrast hebben. Anders kan ik niet goed zien waar een element begint of waar mijn focus staat.
Hoe te testen
Meet met de Colour Contrast Analyser het contrast van bedieningselementen en hun grenzen ten opzichte van de achtergrond. Het minimum is 3,0:1 voor grafische objecten en bedieningselementen die nodig zijn om de bediening te begrijpen.
Oplossing
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
#67 - Knop heeft niet de juiste toegankelijke rol
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op deze pagina heeft de knop "Menu" op een klein scherm niet de juiste toegankelijke rol. Hulpsoftware ziet dit element niet als een knop en kan niet aan zijn gebruiker vertellen dat hiermee een actie kan worden uitgevoerd.
Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet.
User story
Ik bedien de website met het toetsenbord en een schermlezer. Wanneer een element eruitziet als een knop, verwacht ik dat het ook de rol van knop heeft en met het toetsenbord te bedienen is. Anders kan ik het niet gebruiken.
Hoe te testen
Inspecteer het bedieningselement in de accessibility tree. Controleer of het de juiste role heeft en of het met Tab bereikbaar en met Enter of de spatiebalk te bedienen is.
Oplossing
Zorg dat de knop de juiste toegankelijke rol heeft. Gebruik het button-element.
#68 - Knop is niet met het toetsenbord te bedienen
Impact: GrootType: TechniekWCAG: 2.1.1EN: 9.2.1.1
Op deze pagina is de knop "Menu" die verschijnt op een klein scherm niet toetsenbordtoegankelijk.
User story
Ik kan geen muis gebruiken en navigeer met het toetsenbord. Wanneer ik bij een knop, link of menu kom, verwacht ik dat ik die met Tab kan bereiken en met Enter of de spatiebalk kan bedienen. Als dat niet kan, kom ik niet verder.
Hoe te testen
Leg de muis weg en bedien de pagina volledig met het toetsenbord. Controleer of alle interactieve elementen, zoals knoppen, links en submenu's, bereikbaar en te bedienen zijn met Tab, Enter, de spatiebalk en de pijltjes.
Oplossing
Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.
Op deze pagina toont het loginformulier de foutmelding "Fout bij het inloggen". Dit is een slechte foutmelding omdat het niet uitlegt wat er precies misging en in welk veld de fout zich heeft voorgedaan.
Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld “Mail” is niet (goed) ingevuld."
User story
Ik gebruik een schermlezer en vul een formulier in. Wanneer er een fout optreedt, verwacht ik dat mijn schermlezer de foutmelding aankondigt en dat duidelijk is welk veld het betreft. Anders weet ik niet dat er iets misging.
Hoe te testen
Verstuur het formulier met fouten. Controleer of foutmeldingen programmatisch worden aangekondigd, of ze het betreffende veld benoemen en of de foutmelding betrouwbaar verschijnt. Test dit met een schermlezer.
Oplossing
Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.
Op deze pagina toont het loginformulier de foutmelding “Fout bij het inloggen” met een link “x”. Deze link sluit de foutmelding, maar de toegankelijke naam is “x”, wat de functie niet duidelijk beschrijft. Een blinde bezoeker weet daardoor niet wat deze link precies doet.
User story
Ik gebruik een schermlezer en spring vaak van link naar link. Wanneer een link 'lees meer' of een lege tekst heeft, weet ik niet waar die naartoe gaat. Ik verwacht dat elke linktekst het doel duidelijk maakt.
Hoe te testen
Loop met een schermlezer door de lijst met links op de pagina. Controleer of elke linktekst, eventueel samen met de directe context, duidelijk maakt waar de link naartoe leidt. Let op lege links en vage teksten.
Oplossing
Voeg tekst toe die deze link goed beschrijft.
#71 - Blinde bezoekers krijgen geen bericht van de foutmelding
Op deze pagina is een loginformulier aanwezig. Bij fouten in het formulier verschijnt de melding “Fout bij het inloggen”. Deze melding krijgt geen focus, waardoor de schermlezer de melding niet aankondigt. Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, horen blinde bezoekers geen melding van hun schermlezer.
User story
Ik gebruik een schermlezer. Wanneer er een statusbericht verschijnt, zoals een bevestiging of een foutmelding, verwacht ik dat mijn schermlezer dat aankondigt zonder dat ik de focus hoef te verplaatsen. Anders mis ik belangrijke terugkoppeling.
Hoe te testen
Roep een statusbericht op (bijvoorbeeld een bevestiging of foutmelding). Controleer of het bericht in een live region staat (aria-live of een geschikte rol) en met een schermlezer wordt aangekondigd zonder focuswissel.
Oplossing
Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
De pagina's https://igc.nl/en/club/dresscode?lang=en en https://igc.nl/club/dresscode bevatten dezelfde tekst in het <title>-element van de pagina: “Koninklijke IGC - Kledingvoorschrift”.
Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger.
User story
Ik gebruik een schermlezer en heb vaak meerdere tabbladen open. Wanneer pagina's dezelfde titel hebben, kan ik ze niet uit elkaar houden. Ik verwacht dat elke pagina een unieke, beschrijvende titel heeft.
Hoe te testen
Bekijk de <title> van elke onderzochte pagina. Controleer of de titel het onderwerp van de pagina beschrijft en uniek is ten opzichte van de andere pagina's.
Oplossing
Verander de tekst in het title-element van, zodat elke pagina een unieke title-tekst heeft die de inhoud van de pagina nauwkeurig beschrijft.
Algemeen advies voor alle pagina’s: zet de unieke tekst in het title-element vooraan. Zo maak je de navigatie tussen de pagina’s makkelijker.
#73 - Visueel meerdere alinea’s, in de code maar één
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Naast de kop "Dresscode" staat een blok tekst met meerdere paragrafen dat onjuist gemarkeerd als één <p>-element.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
#74 - Kop is niet gemarkeerd als koptekst
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina zijn de volgende teksten niet gemarkeerd als koppen: "After 5 pm Monday to Thursday: Tenue de Ville" en "Until 5 pm and on Fridays: smart casual, neatly dressed". Een blinde bezoeker kan niet van kop naar kop navigeren.
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
#75 - Visueel meerdere alinea’s, in de code maar één
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Naast de kop "Kledingvoorschrift" staat een blok tekst met meerdere alinea's onterecht gemarkeerd als één <p>-element.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
#76 - Kop is niet gemarkeerd als koptekst
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina zijn de volgende teksten niet gemarkeerd als koppen: "Na 17.00 uur van maandag tot en met donderdag: Tenue de Ville." en "Tot 17.00 uur en op de vrijdag: Smart casual, netjes gekleed.".
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
#77 - Visueel meerdere alinea’s, in de code maar één
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina is onder de kop “Doelstelling” een tekstblok met meerdere alinea’s onjuist gemarkeerd als één enkel p-element. Hetzelfde probleem komt voor onder de koppen “Algemeen”, “Kledingvoorschrift”, “Tafels” en andere.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
Op deze pagina staat onder de kop “Gebouw 'Industria'” een video in een iframe. Dit iframe heeft geen toegankelijke naam die hulpsoftware kan voorlezen.
Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
User story
Ik gebruik een schermlezer. Wanneer ik een ingesloten kader (iframe) tegenkom, verwacht ik dat het een betekenisvolle naam heeft zodat ik weet wat het bevat. Zonder naam hoor ik alleen 'frame' en weet ik niet wat erin staat.
Hoe te testen
Inspecteer elk <iframe> in DevTools. Controleer of het een title-attribuut heeft met een betekenisvolle, unieke beschrijving van de inhoud, en bevestig met een schermlezer dat die naam wordt aangekondigd.
Oplossing
Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.
#79 - Visueel meerdere alinea’s, in de code maar één
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Onder de kop "De Groote Club Doctrina et Amicitia" staat een tekstblok met meerdere alinea's onjuist gemarkeerd als één <p>-element. Hetzelfde probleem doet zich voor onder de koppen “De Industrieele Club”, “De Koninklijke Industrieele Groote Club”, “Gebouw 'Industria'” en andere.
User story
Ik lees de website met een schermlezer. Wanneer ik door de tekst navigeer, worden meerdere alinea's als een lang blok voorgelezen. Ik verwacht dat elke visuele alinea afzonderlijk bereikbaar is.
Hoe te testen
Inspecteer de inhoudsstructuur en controleer of visueel gescheiden alinea's zijn opgemaakt als afzonderlijke <p>-elementen. Navigeer per alinea met een schermlezer (bijvoorbeeld met de P-toets in NVDA).
Oplossing
Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.
#80 - Er staan twee kopregels van hetzelfde niveau direct onder elkaar
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina wordt een kop van niveau 2 direct gevolgd door een andere kop van hetzelfde niveau. Zie “Particulier lidmaatschap” en “Een particulier lidmaatschap biedt de volgende voordelen:”, “Bedrijfslidmaatschap” en “Een bedrijfslidmaatschap biedt de volgende voordelen:”.
Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h2-element mag een h3-element komen of andere content, maar niet nog een keer een h2-element of een h1-element.
User story
Ik lees de website met een schermlezer. Wanneer ik een pagina op koppen doorloop, 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 de lijst door en controleer of elke zichtbare kop als kop is gemarkeerd en of de niveaus logisch oplopen.
Oplossing
Pas de tekst aan, zodat de kopregelniveaus de structuur van de tekst correct weergeven.
#81 - Kop-element is gebruikt voor tekst die geen kop is
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina zijn de teksten "Club video", "Cindy Roza" en "Quintus Willemse" geen koppen, maar zijn ze ten onrechte gemarkeerd met een <h5>-element om de lettergrootte te vergroten.
User story
Ik lees de website met een schermlezer. Wanneer ik door de koppen navigeer, kom ik een kop tegen die geen echte sectie introduceert. Ik verwacht dat elke kop het begin van een nieuwe sectie met inhoud markeert.
Hoe te testen
Gebruik de Heading Structure Checker om alle koppen op de pagina op te sommen. Loop de lijst door en vraag je per kop af of de tekst een eigen sectie met inhoud introduceert of alleen voor opmaak wordt gebruikt.
Oplossing
Verwijder het h-element en gebruik een ander element, zoals een p-element.
#82 - Video mist correcte ondertitels
Impact: MediumType: ContentWCAG: 1.2.2EN: 9.1.2.2
Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.
User story
Ik ben doof of slechthorend. Wanneer ik een video bekijk, verwacht ik ondertitels die de gesproken inhoud correct weergeven. Zonder goede ondertitels mis ik de informatie uit de video.
Hoe te testen
Speel de video af en zet de ondertitels aan. Controleer of de ondertitels synchroon lopen, de gesproken tekst correct weergeven en ook relevante geluiden benoemen.
Oplossing
Zorg dat de ondertiteling van hoge kwaliteit is en exact weergeeft wat wordt gezegd in de video.
#83 - Video bevat tekst of logo’s waarvoor geen alternatief is
Op deze pagina staat een video van Cindy. Deze video bevat tekst en logo's op 0:10 en 1:19. Deze informatie wordt niet met stem voorgelezen. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.
Hetzelfde probleem geldt voor de video van Quintus. De video bevat tekst en logo's op 0:16 en 1:15.
User story
Ik ben blind of slechtziend. Wanneer een video belangrijke beeldinformatie bevat die niet wordt uitgesproken, verwacht ik een alternatief waarin die informatie wel beschikbaar is. Anders mis ik de boodschap van de video.
Hoe te testen
Bekijk de video en let op tekst, logo's of beeldinformatie die niet hoorbaar is. Controleer of er een audiodescriptie of een tekstalternatief is dat deze visuele informatie overbrengt.
Oplossing
Onder SC 1.2.3 is het voldoende om een transcript aan de video toe te voegen. Onder SC 1.2.5 is audiodescriptie vereist.
#84 - Iframes missen unieke of betekenisvolle beschrijving
Impact: MediumType: ContentWCAG: 2.4.6EN: 9.2.4.6
Op deze pagina staan meerdere iframes met video’s, elk met de niet-unieke en niet-helpende titel “YouTube video player”. Iframes moeten een duidelijke beschrijving van de inhoud hebben, meestal in het title-attribuut van het iframe. Daarin moet staan om welk type inhoud het gaat (bijvoorbeeld een podcast of video) en waar het inhoudelijk over gaat. Deze beschrijving moet uniek en betekenisvol zijn, zodat blinde bezoekers kunnen bepalen of het de moeite waard is de inhoud van het iframe te verkennen.
User story
Ik gebruik een schermlezer. Wanneer ik op koppen en labels afga om de pagina te begrijpen, verwacht ik dat ze de inhoud of het doel duidelijk beschrijven. Vage of betekenisloze koppen en labels brengen mij in de war.
Hoe te testen
Loop met een schermlezer door de koppen en formulierlabels. Controleer of elke kop en elk label de bijbehorende inhoud of functie duidelijk beschrijft.
Oplossing
Verander de tekst van het title-attribuut van de iframes zodat duidelijk is welk type inhoud elk iframe bevat, en waar het inhoudelijk over gaat.
#85 - Videospelers gebruiken een letter toets als sneltoetsen
Impact: MediumType: ContentWCAG: 2.1.4EN: 9.2.1.4
Op deze pagina staan videospelers die gebruik maken van sneltoetsen met één teken.
De Youtube-speler gebruikt sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.
De Vimeo-speler gebruikt sneltoetsen, zoals de ‘s' om een video te delen en de 'd’ om technische details te bekijken. Deze sneltoetsen botsen met schermlezers.
User story
Ik gebruik spraakbesturing en een schermlezer. Wanneer een speler losse lettertoetsen als sneltoets gebruikt, activeer ik die per ongeluk terwijl ik praat of typ. Ik verwacht dat dergelijke sneltoetsen uit te schakelen of aan te passen zijn.
Hoe te testen
Controleer of bedieningselementen met enkele lettertoetsen worden bediend. Test of zo'n sneltoets per ongeluk afgaat bij invoer en of die uitgeschakeld of opnieuw toegewezen kan worden.
Oplossing
Bij Youtube-video’s lost je dit op door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).
Bij Vimeo-video’s lost je dit op door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).
#86 - Links naar video zijn niet met stem te bedienen
Op deze pagina, naast de kop “Sfeerimpressie van onze Club”, staan links die video’s afspelen. De tekst die zichtbaar op de pagina, bijvoorbeeld Club video" staat niet in de toegankelijke naam van de link.
Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.
User story
Ik lees de website met een schermlezer. Wanneer ik een afbeelding tegenkom, verwacht ik dat informatieve afbeeldingen een duidelijke beschrijving hebben en dat decoratieve afbeeldingen als zodanig zijn gemarkeerd. Anders mis ik informatie of hoor ik ruis.
Hoe te testen
Inspecteer elke afbeelding, elk pictogram en elke SVG in DevTools. Informatieve elementen hebben een tekstalternatief nodig dat hun betekenis overbrengt; decoratieve elementen gebruiken alt="" of aria-hidden="true". Bevestig het resultaat met een schermlezer.
Oplossing
Je lost het als volgt op:
Laat het alt-attribuut van de afbeelding leeg. Nu staat er “"video-player-icon".
Verwijder h5-element. Dit is geen kop.
Plaats de tekst die nu in het h5-element staat binnen de link.
#87 - Foutmeldingen helpen niet om het probleem te begrijpen
Impact: GrootType: TechniekWCAG: 3.1.1EN: 9.3.1.1
Op deze pagina, onder de kop “Inschrijven kennismakingsavond”, wordt in een formulier alleen HTML5-validatie gebruikt in de velden "Aanhef", "Voornaam", "Achternaam" en andere invoervelden.
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan.
Hetzelfde probleem doet zich voor op de pagina https://igc.nl/en/club/membership-contributions?lang=nl.
User story
Ik gebruik een schermlezer met spraaksynthese. Wanneer de taal van de pagina niet of verkeerd is ingesteld, leest mijn schermlezer de tekst met de verkeerde uitspraak voor. Ik verwacht dat de paginataal correct is vastgelegd.
Hoe te testen
Controleer het lang-attribuut op het <html>-element. Bevestig dat het de werkelijke taal van de pagina aangeeft en beluister met een schermlezer of de uitspraak klopt.
Oplossing
Voeg altijd zelf geschreven foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
#88 - Het contrast van de placeholder-tekst is kleiner dan 4,5:1
Op deze pagina, onder de kop "Inschrijven kennismakingsavond", zijn invoervelden aanwezig. De grijze (#7E7E7E) placeholder-tekst tegen de witte achtergrond heeft een contrastverhouding van 4,1:1. Deze tekst is niet goed zichtbaar voor mensen met milde visuele beperkingen.
Hetzelfde probleem doet zich voor op de pagina https://igc.nl/en/club/membership-contributions?lang=nl.
User story
Ik heb een visuele beperking. Wanneer ik een invoerveld wil gebruiken, kan ik de placeholdertekst niet lezen omdat het contrast te laag is. Ik verwacht dat tekst in en rond invoervelden duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Zorg dat de placeholder-tekst een contrast van minstens 4,5:1 tegen de achtergrond heeft.
#89 - Invoervelden hebben geen permanent zichtbaar labels
Op deze pagina, onder de kop "Inschrijven kennismakingsavond", is een formulier aanwezig. De invoervelden missen permanent zichtbare labels. Dit geldt ook voor twee select-elementen.
Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen.
Hetzelfde probleem doet zich voor op de pagina https://igc.nl/en/club/membership-contributions?lang=nl.
User story
Ik gebruik een schermlezer en vul een formulier in. Wanneer een invoerveld alleen een placeholder als label heeft, verdwijnt die zodra ik begin te typen en weet ik niet meer wat er werd gevraagd. Ik verwacht een permanent zichtbaar label bij elk veld.
Hoe te testen
Inspecteer elk invoerveld in DevTools en met een schermlezer. Controleer of elk veld een permanent zichtbaar label heeft dat programmatisch aan het veld is gekoppeld, en niet alleen een placeholder gebruikt.
Oplossing
Voeg een label toe in de vorm van een tekst of een icoon.
#90 - Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Op deze pagina, onder de kop "Inschrijven kennismakingsavond", staat een formulier met invoervelden die persoonlijke gegevens (bijvoorbeeld voornaam, achternaam, telefoonnummer) verzamelen Deze velden missen het autocomplete-attribuut.
Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Hetzelfde probleem doet zich voor op de pagina https://igc.nl/en/club/membership-contributions?lang=nl.
User story
Ik heb een motorische beperking en vul formulieren liever automatisch in. Wanneer ik mijn naam, adres of e-mailadres invul, verwacht ik dat de browser deze velden herkent en kan invullen. Zonder die herkenning kost elk formulier mij onnodig veel moeite.
Hoe te testen
Inspecteer de invoervelden voor persoonsgegevens in DevTools. Controleer of elk veld een passend autocomplete-attribuut heeft (bijvoorbeeld name, email, tel) en test of de browser de velden automatisch kan invullen.
Oplossing
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
#91 - Tekst is niet meer leesbaar als tekstafstand wordt aangepast
Op deze pagina, wanneer bezoekers de tekstafstand toepassen zoals beschreven in dit succescriterium, wordt de tekst boven de footer gedeeltelijk onzichtbaar en onleesbaar.
Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.
User story
Ik pas met een eigen stylesheet de tekstafstand aan omdat ik anders moeilijk lees. Wanneer ik regelafstand of letterafstand vergroot, verwacht ik dat de tekst leesbaar blijft zonder dat inhoud wegvalt of overlapt.
Hoe te testen
Pas met een bookmarklet of eigen CSS de tekstafstand aan (regelhoogte 1,5; alinea-afstand 2x; letterafstand 0,12em; woordafstand 0,16em). Controleer of alle tekst zichtbaar en leesbaar blijft zonder afgekapte of overlappende inhoud.
Oplossing
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
Op deze pagina staat een link met een afbeelding die de video opent. De zichtbare tekst op de afbeelding is “Bezoek VIRTUEEL de 'Koninklijke Industrieele Groote Club'”. De toegankelijke naam van deze link is “ontdek onze sociëteit”.
Zoals je ziet is de toegankelijke naam van de link niet hetzelfde als de zichtbare tekst in het afbeelding. Daardoor werkt de link niet goed als je hem met je stem wilt activeren. Je noemt dan namelijk de tekst die je in het afbeelding ziet. Als de toegankelijke naam anders is, zal het systeem de link dus niet herkennen.
User story
Ik bedien de website met spraakbesturing. Wanneer ik de zichtbare tekst van een knop uitspreek, verwacht ik dat de knop reageert. Als de toegankelijke naam afwijkt van het zichtbare label, kan ik het element niet met mijn stem bedienen.
Hoe te testen
Vergelijk voor elk bedieningselement de zichtbare tekst met de toegankelijke naam in de accessibility tree. Controleer of de zichtbare tekst (letterlijk) in de toegankelijke naam voorkomt, zodat spraakbesturing werkt.
Oplossing
Zorg dat de tekst die in het afbeelding zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.
Op deze pagina opent de link met het “play”-icoon een dialoogvenster. Na het sluiten van dit dialoogvenster gaat de toetsenbordfocus niet naar het volgende logische element op de pagina, namelijk de link “Lees onze gehele historie”, maar direct naar de footer. Deze volgorde van toetsenbordfocus is niet logisch.
User story
Ik navigeer met het toetsenbord. Wanneer ik met Tab door de pagina ga, verwacht ik dat de focus een logische, voorspelbare volgorde volgt die overeenkomt met wat ik zie. Als de focus heen en weer springt, raak ik de weg kwijt.
Hoe te testen
Tab van boven naar beneden door de pagina en let op sprongen die niet overeenkomen met de visuele volgorde. Open ook dialoogvensters en dynamische componenten en controleer of de focus op een logische plek belandt en blijft.
Oplossing
Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.
#94 - Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op deze pagina heeft grijze tekst (#969696) op een witte (#FFFFFF) achtergrond onvoldoende kleurcontrast, bijvoorbeeld “81 Collins Street … Australië”, “61 Tamar street … Australië” en andere. De kleurcontrastverhouding is te laag: 2,8:1.
De gele tekst op een witte achtergrond en andersom heeft kleurcontrast van 2,2:1.
Wanneer een een bezoeker over een geselecteerde land de muis beweegt, verandert de tekst in wit en de achtergrond in lichtgrijs. Het contrast wordt 1,2:1.
User story
Ik heb een visuele beperking. Wanneer ik een pagina lees, kan ik tekst die weinig contrast heeft met de achtergrond niet onderscheiden. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
#95 - Focusvolgorde klopt niet
Impact: GrootType: ContentWCAG: 1.4.3EN: 9.1.4.3
User story
Ik gebruik de website met een toetsenbord en heb een visuele beperking. Wanneer een element focus krijgt, wordt de tekst soms moeilijk leesbaar door te laag contrast. Ik verwacht dat tekst leesbaar blijft wanneer een element focus heeft.
Hoe te testen
Voer axe of Lighthouse uit voor een geautomatiseerde contrastcontrole en meet daarna de twijfelgevallen met de Colour Contrast Analyser. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst (≥24px normaal of ≥18,7px vetgedrukt).
Oplossing
Stuur de focus naar het panel dat bij het geselecteerde land hoort.
#96 - img-element heeft geen alt-attribuut
Impact: KleinType: ContentWCAG: 1.1.1EN: 9.1.1.1
In de sectie met landen staan naast de namen van landen afbeeldingen van vlaggen. Deze afbeeldingen zijn toegevoegd met een img-element, maar het alt-attribuut ontbreekt.
Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.
User story
Ik gebruik de website met een toetsenbord en een schermlezer. Wanneer ik bij een knop of link kom, kondigt de schermlezer alleen de soort aan zonder verdere context. Ik verwacht dat elk bedieningselement een duidelijke naam heeft zodat ik weet wat het doet.
Hoe te testen
Gebruik voor elk interactief component (link, knop, invoerveld, custom widget) het accessibility-paneel van DevTools en een schermlezer. Elk component moet doorgeven wat het is (role), de naam en de huidige status. Bevestig dat de naam het doel duidelijk identificeert.
Oplossing
Voeg het alt-attribuut toe aan het img-element en laat ze leeg.
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
Hoe werkt dit rapport?
Bevindingen bekijken en filteren
Alle gevonden toegankelijkheidsproblemen staan onder Gevonden problemen. Je kunt de bevindingen filteren op:
Impact (Groot, Medium, Klein, Advies) — hoe ernstig is het probleem voor de gebruiker?
Type (Content, Techniek) — moet de inhoud of de techniek worden aangepast?
Status (Open, Opgelost) — welke problemen zijn al verholpen?
Voortgang bijhouden
Je kunt je voortgang op twee manieren bijhouden:
CSV-export — exporteer alle bevindingen als CSV-bestand en laad het in een (online) spreadsheet om met je team samen te werken.
Jira-export — exporteer alle bevindingen als Jira-compatibel CSV-bestand. Importeer het via Jira > Issues > Import issues from CSV. Bevindingen worden aangemaakt als bugs met prioriteit op basis van impact.
Registreer in de browser — activeer deze optie om per bevinding bij te houden of het is opgelost. Je voortgang wordt opgeslagen in je browser. Niemand anders kan je resultaat zien. Let op: de voortgang is gekoppeld aan je browser. Als je een andere browser of een ander apparaat gebruikt, begint de telling opnieuw.
Plan van aanpak — download een geprioriteerd plan van aanpak om de gevonden problemen stap voor stap op te lossen. Dit is beschikbaar bij audits vanaf maart 2026.
Link naar een specifieke bevinding delen
Bij elke bevinding verschijnt een link-icoon wanneer je er met de muis overheen gaat. Klik op dit icoon om de directe link naar die bevinding te kopiëren. Je kunt deze link plakken in een e-mail of chatbericht, bijvoorbeeld om een vraag te stellen aan Proper Access over een specifiek punt.
