Audit digitale toegankelijkheid van e-learningmodule Jouw kompas om bewust met AI te werken

#1 - Popup-venster heeft geen beschrijving die een schermlezer kan voorlezen

De module wordt getoond in een popup-venster of in een nieuw browsertabblad. Het <title>-element van deze pagina is leeg. Het <title>-element is verplicht en hoort een beknopte, informatieve beschrijving van de inhoud van de pagina te bevatten. Zo begrijpen bezoekers waar de pagina over gaat en kunnen ze makkelijker navigeren.

User story

Ik lees de website met een schermlezer. Als ik een nieuw venster of browsertabblad open, hoor ik geen paginatitel die vertelt waar de pagina over gaat. Ik verwacht dat mijn schermlezer direct een duidelijke titel aankondigt zodra de pagina laadt.

Hoe te testen

Controleer de titel van elke pagina in het browsertabblad (het <title>-element in de HTML). De titel moet het onderwerp of doel van de pagina beschrijven.

Oplossing

Vul het <title>-element met een beschrijvende tekst die de inhoud van de pagina nauwkeurig weergeeft.

#2 - Iframe heeft geen title-attribuut

De cursus staat in een <iframe>-element zonder title-attribuut. Schermlezers kunnen daardoor het doel van het iframe niet aankondigen. Bezoekers weten dan niet welke content er is ingesloten en of het de moeite waard is om erin te navigeren. Dat bemoeilijkt de navigatie voor bezoekers die hulpsoftware gebruiken.

User story

Ik lees de website met een schermlezer. Als ik een ingesloten element tegenkom, hoor ik geen beschrijving en weet ik niet wat het bevat. Ik verwacht dat mijn schermlezer een duidelijke naam aankondigt, zodat ik kan beslissen of ik het wil verkennen.

Hoe te testen

Snelle controle met onze eigen tool: open de WCAG Radar en zet op het tabblad Developer de optie "Toon toegankelijke naam" aan. Controleer daarna met een schermlezer of elk iframe op de website een betekenisvol title-attribuut heeft dat het doel of het type content duidelijk maakt.

Oplossing

Voeg een beschrijvend title-attribuut toe aan het <iframe>-element dat duidelijk maakt welke content is ingesloten. Bijvoorbeeld: <iframe title="E-learning module Jouw kompas om bewust met AI te werken" src="..."></iframe>.

#3 - Bij 200% en 400% zoom is content niet zichtbaar en bedienbaar

Als de pagina's van de cursus worden bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd naar 200% of 400%, is de content onderaan de pagina niet zichtbaar en kan er niet naartoe worden gescrold. Op sommige pagina's valt de sectie "Checkvragen" geheel of gedeeltelijk weg, samen met de content eronder. Op alle pagina's is de link om naar de volgende stap te gaan (zoals "6 van 6 — Afsluiting") niet zichtbaar en niet bedienbaar.

Hetzelfde probleem doet zich voor bij alle stappen van de toets "Jouw kompas om bewust met AI te werken: Toets": de laatste keuzerondjes en de "Controleer"-knoppen zijn niet bereikbaar als de pagina is ingezoomd.

User story

Ik zoom in naar 200% of 400% om de pagina te lezen. Als ik inzoom, verdwijnen sommige links en knoppen of zijn ze niet meer te gebruiken. Ik verwacht dat alle content en interactieve elementen zichtbaar en bedienbaar blijven bij inzoomen.

Hoe te testen

Zet het browservenster op 1280 pixels breed en zoom met Command + (Mac) of Control + (Windows) naar 200% en naar 400%. Alle tekst moet leesbaar blijven en er mag geen content of functionaliteit verloren gaan.

Oplossing

Zorg ervoor dat alles blijft werken als een bezoeker inzoomt naar 200% of 400% op een scherm van 1280 bij 1024 pixels.

#4 - Relatie tussen links in de broodkruimelnavigatie is niet in de code vastgelegd

Op deze pagina is de broodkruimelnavigatie opgebouwd als een verzameling losse links. De onderliggende structuur en de relatie tussen deze links zijn niet semantisch vastgelegd in de HTML. Plaats de broodkruimellinks in een <nav>- of <ol>-element om context en betekenis over te brengen aan hulpsoftware. Zo is duidelijk dat deze links samen een broodkruimelnavigatie vormen.

User story

Ik lees de website met een schermlezer. Als ik de broodkruimelnavigatie gebruik om te begrijpen waar ik ben, hoor ik alleen losse links zonder structuur. Ik verwacht dat mijn schermlezer dit aankondigt als een geordende navigatielijst.

Hoe te testen

Inspecteer de broodkruimelnavigatie met een schermlezer of via de broncode. Controleer of de broodkruimel is opgebouwd als een gestructureerde lijst en of de hiërarchie wordt doorgegeven aan hulpsoftware.

Oplossing

Plaats de broodkruimellinks in een <nav>-element met aria-label="Breadcrumb" en gebruik een geordende lijst (<ol>) met <li>-elementen om de hiërarchische relatie tussen de items over te brengen. Bijvoorbeeld:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Current page</li>
  </ol>
</nav>

Deze structuur maakt voor hulpsoftware duidelijk dat de links een broodkruimelnavigatie vormen met een vaste volgorde en hiërarchie.

#5 - Kopniveaus zijn niet juist gebruikt

Op deze pagina wordt een kop van niveau 2, "(Pilot) Verdiepingsmodule AI: Jouw kompas om bewust met AI te werken", direct gevolgd door een andere kop van hetzelfde niveau, "Overzicht van het onderwerp". De tweede kop is visueel verborgen, maar wel beschikbaar voor bezoekers met hulpsoftware.

Dit wijst op een onjuiste koppenstructuur. Koppen horen een logische hiërarchie te volgen. Een kop hoort niet direct gevolgd te worden door een kop van hetzelfde of een hoger niveau zonder tussenliggende content.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, volgen twee koppen van hetzelfde niveau elkaar direct op zonder content ertussen. Daardoor denk ik dat er content ontbreekt. Ik verwacht dat elke kop een eigen sectie met content inleidt.

Hoe te testen

1. Open de WCAG Radar en inspecteer de koppenstructuur van de pagina. De lijst toont het niveau van elke kop (h1, h2, h3 enzovoort).
2. Inspecteer de pagina: staan er twee koppen van hetzelfde niveau direct achter elkaar zonder content ertussen? Dat wijst op een onjuiste koppenstructuur.

Oplossing

Zorg dat koppen juist genest zijn en de structuur van de content weerspiegelen. Na een <h2> hoort bijvoorbeeld een <h3> of content te volgen, geen tweede <h2> of een <h1>.

#6 - Links zijn alleen door kleur te onderscheiden van de omringende tekst

Op deze pagina staan de links "[email protected]" en "Feedbackformulier pilot 'Jouw kompas om bewust met AI te werken'" in lopende tekst. Kleur is het enige verschil tussen de link en de gewone tekst. Alleen kleur gebruiken om links te onderscheiden is een probleem voor bezoekers die slechtziend of kleurenblind zijn.

User story

Ik kan kleuren niet goed onderscheiden. Als ik een tekst met links lees, kan ik niet zien welke woorden klikbaar zijn. Ik verwacht dat links ook een onderstreping of een ander visueel kenmerk hebben.

Hoe te testen

Bekijk de pagina in grijstinten met de WCAG Radar. Elk element dat informatie overbrengt, zoals verplichte velden, foutmeldingen, linkopmaak in lopende tekst of grafieksegmenten, heeft een tweede kenmerk nodig: tekst, een icoon, een onderstreping of een patroon.

Oplossing

Links in lopende tekst moeten aan twee voorwaarden tegelijk voldoen: het kleurcontrast tussen de link en de omringende tekst is minimaal 3,0:1 en er is een extra visueel onderscheid als de link gehoverd wordt of focus krijgt. Let op! De linktekst zelf moet een contrast van minimaal 4,5:1 hebben.

#7 - Decoratieve iconen zijn niet verborgen voor hulpsoftware

In de sectie "Verdiepingsmodule AI: Jouw kompas om bewust met AI te werken" leest een schermlezer puur decoratieve iconen voor. Deze iconen hebben de alt-tekst "SCORM-pakket icoon". Omdat de iconen geen informatieve waarde hebben, zorgt dit voor onnodige ruis voor schermlezergebruikers en wordt de pagina lastiger te navigeren. Decoratieve elementen horen verborgen te zijn voor hulpsoftware.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, hoor ik decoratieve iconen die niets toevoegen. Ik verwacht dat die iconen worden overgeslagen, zodat ik me op de echte content kan richten.

Hoe te testen

Controleer alle afbeeldingen, iconen en SVG's, bijvoorbeeld met de WCAG Radar of via de broncode. Informatieve elementen hebben een toegankelijke naam nodig die hun betekenis overbrengt: een alt-attribuut op een <img>, een aria-label of <title>-element op een SVG, of een toegankelijke naam op iconfonts. Controleer met een schermlezer dat er geen ruis wordt voorgelezen, zoals een bestandsnaam of het woord "afbeelding".

Oplossing

Verberg de decoratieve iconen voor schermlezers door het alt-attribuut leeg te laten: alt="".

#8 - Koppen in de footer zijn niet als kop gemarkeerd

Op deze pagina staan in de footer teksten die als kop dienen, maar de kopelementen ontbreken. Er zijn <strong>-elementen gebruikt om ze eruit te laten zien als koppen. Zie "RADIO Leerplatform", "Service" en "Over deze site".

Het <strong>-element is bedoeld voor semantische nadruk, niet voor het maken van koppen. Wie het gebruikt in plaats van kopelementen (<h1> tot en met <h6>) geeft de structuur van de content verkeerd weer en maakt die ontoegankelijk voor hulpsoftware.

User story

Ik lees de website met een schermlezer. Als ik op koppen navigeer, mis ik koppen die niet als kop zijn opgemaakt. Ik verwacht dat alle titels als echte koppen zijn gemarkeerd, zodat ik de structuur van de pagina kan volgen.

Hoe te testen

Gebruik de WCAG Radar. Zet de koppenoptie aan en controleer elke kop op de pagina.

Oplossing

Verwijder de <strong>-elementen en gebruik voor deze teksten de juiste kopelementen.

#9 - Tekstcontrast is onvoldoende bij toetsenbordfocus

Op deze pagina verandert in de footer de tekstkleur van de links "Neem contact op met onze leverancier" en "Bekijk de website" naar wit zodra ze toetsenbordfocus krijgen, op de lichtblauwe achtergrond (#9DDEFE). De contrastverhouding is dan 1,6:1 en dat is te laag.

User story

Ik gebruik de website met een toetsenbord en heb een visuele beperking. Als ik naar een element navigeer en het focus krijgt, wordt de tekst slecht leesbaar door het lage contrast. Ik verwacht dat tekst leesbaar blijft als een element focus heeft.

Hoe te testen

Gebruik de Tab-toets om naar het element te navigeren en maak een screenshot. Open de WCAG Radar, optie Contrast, en meet de kleur van de tekst en de achtergrond.

Oplossing

Zorg dat de tekstkleur voldoende contrast houdt (minimaal 4,5:1 voor normale tekst) als het element toetsenbordfocus krijgt.

#10 - Instructie leunt op visuele kenmerken

Op deze pagina leunt in de sectie "Moeilijke woorden" de instructie "De woorden die daar staan, hebben we in de lopende tekst blauw en dikgedrukt gemaakt." op kleur en vorm. Blinde bezoekers die een schermlezer gebruiken krijgen geen kleurinformatie en kunnen niet bepalen naar welk element wordt verwezen. Bezoekers die kleurenblind zijn nemen de beschreven kleurverschillen mogelijk niet waar. Instructies moeten daarom ook een verwijzing bevatten die niet afhangt van kleur of vorm, zodat alle bezoekers de informatie begrijpen.

User story

Als blinde of slechtziende bezoeker wil ik dat instructies naar de tekst zelf verwijzen in plaats van naar het uiterlijk ervan, zodat ik begrijp wat er wordt bedoeld.

Hoe te testen

Lees alle instructies op de pagina en controleer of ze naar elementen verwijzen via hun uiterlijk, zoals kleur, vorm, grootte of positie.

Oplossing

Verwijs in de tekst naar het element zelf, niet naar de kleur of vorm.

#11 - Koppen zijn niet als kop gemarkeerd

Op deze pagina zijn de teksten "Sam", "Hannah", "Ryan" en "Nina" niet als kop opgemaakt. Er zijn <strong>-elementen gebruikt om ze eruit te laten zien als koppen.

Het <strong>-element is bedoeld voor semantische nadruk, niet voor het maken van koppen. Wie het gebruikt in plaats van kopelementen (<h1> tot en met <h6>) geeft de structuur van de content verkeerd weer en maakt die ontoegankelijk voor hulpsoftware.

User story

Ik lees de website met een schermlezer. Als ik op koppen navigeer, mis ik koppen die niet als kop zijn opgemaakt. Ik verwacht dat alle titels als echte koppen zijn gemarkeerd, zodat ik de structuur van de pagina kan volgen.

Hoe te testen

Gebruik de WCAG Radar. Zet de koppenoptie aan en controleer elke kop op de pagina.

Oplossing

Verwijder de <strong>-elementen en gebruik voor deze teksten de juiste kopelementen.

#12 - Groepslabel is niet gekoppeld aan de groep

Op deze pagina en op meerdere andere pagina's staan checkvragen. Deze groep selectievakjes heeft het groepslabel "Checkvragen". Dat label is niet programmatisch aan de groep gekoppeld.

Door die ontbrekende koppeling horen schermlezergebruikers niet wat de relatie is tussen het groepslabel en de elementen die het beschrijft.

User story

Ik lees de website met een schermlezer. Als de schermlezer bij de selectievakjes komt, hoor ik niet wat de relatie is tussen de vraag en de antwoorden.

Hoe te testen

Gebruik een schermlezer om deze groep te inspecteren. Een andere optie is de broncode lezen om te controleren of de groep een toegankelijke naam heeft. Gebruik de WCAG Radar om deze naam te controleren.

Oplossing

Koppel het groepslabel expliciet aan de bijbehorende groep. Dat kan bijvoorbeeld met aria-labelledby, of door het formulier op te bouwen met fieldset en legend.

#13 - Geselecteerde puzzelstukjes hebben onvoldoende contrast

Op deze pagina staat onder de vraag "Wat is de veiligste keuze?" een opdracht om puzzelstukjes met elkaar te verbinden. Als een puzzelstukje is geselecteerd, verandert een deel van het stukje van lichtblauw (#7FBEE3) naar blauw (#007DC7) om de geselecteerde status aan te geven. Het contrast tussen deze twee kleuren is 2,2:1 en dat is lager dan de vereiste 3,0:1. Slechtziende bezoekers kunnen daardoor moeilijk zien welk puzzelstukje geselecteerd is.

User story

Ik gebruik de website met een toetsenbord en heb een visuele beperking. Ik wil dat een geselecteerd puzzelstukje visueel te onderscheiden is, zodat ik makkelijk zie welk stukje op dat moment geselecteerd is.

Hoe te testen

Bepaal met een contrastmeter welke visuele kenmerken de status van een component weergeven, zoals geselecteerd, focus of actief. Controleer of deze kenmerken een contrast van minimaal 3,0:1 hebben met de aangrenzende kleuren.

Oplossing

Vergroot het contrast tussen de geselecteerde en de niet-geselecteerde status van de puzzelstukjes, zodat de contrastverhouding tussen beide minimaal 3,0:1 is.

#14 - Decoratieve emoji's worden voorgelezen door schermlezers

Op deze pagina staan onder de kop "Milieu" decoratieve emoji's die geen betekenisvolle informatie overbrengen. Toch worden ze voorgelezen door schermlezers. Dat voegt onnodige en mogelijk afleidende informatie toe voor bezoekers met hulpsoftware.

User story

Als schermlezergebruiker wil ik dat decoratieve emoji's worden genegeerd, zodat ik alleen betekenisvolle content hoor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen en niet worden aangekondigd.

Hoe te testen

Navigeer met een schermlezer door content met emoji's of decoratieve symbolen. Controleer dat decoratieve elementen niet worden aangekondigd en dat informatieve elementen een betekenisvolle tekstuele beschrijving hebben. Een andere optie is het controleren van de broncode van de pagina.

Oplossing

Verberg decoratieve emoji's voor hulpsoftware. Plaats ze bijvoorbeeld in een element met aria-hidden="true", zodat schermlezers ze negeren. Alleen emoji's die betekenisvolle informatie overbrengen horen beschikbaar te zijn voor hulpsoftware.

#15 - Instructie leunt alleen op visuele positie

Op deze pagina duidt onder de kop "Hieronder staan een aantal voorbeelden van AI-systemen. Welke voorbeelden horen bij welk risiconiveau?" een instructie content alleen aan via de visuele positie: "Sleep de vijf voorbeelden hieronder naar links als ze bij hoog risico-AI horen of rechts als ze bij verboden AI horen". Blinde bezoekers die een schermlezer gebruiken hebben geen beeld van de visuele lay-out en kunnen niet bepalen naar welk element wordt verwezen. Ook voor bezoekers die sterk inzoomen of een andere schermindeling gebruiken is de beschreven positie onbetrouwbaar. Instructies moeten daarom ook een niet-visuele verwijzing bevatten, zoals de naam of functie van het element.

Een vergelijkbaar probleem staat op de cursuspagina "6 van 6 — Afsluiting" en aan het einde van de toets. Na het sluiten van de cursus of de toets verschijnt de instructie: "Je kunt deze pagina nu sluiten. Klik op het kruisje rechtsboven."

User story

Als blinde of slechtziende bezoeker wil ik dat instructies naar de tekst zelf verwijzen in plaats van naar het uiterlijk ervan, zodat ik begrijp wat er wordt bedoeld.

Hoe te testen

Lees alle instructies op de pagina en controleer of ze naar elementen verwijzen via hun uiterlijk, zoals kleur, vorm, grootte of positie.

Oplossing

Verwijs in de tekst naar het element zelf, niet naar de positie. Is dat binnen deze module niet mogelijk? Overweeg dan een alternatieve toets voor mensen voor wie deze opdracht ontoegankelijk is.

#16 - Onvoldoende tekstcontrast bij de feedback op de opdracht

Op deze pagina verschijnen na het afronden van de opdracht onder "Hieronder staan een aantal voorbeelden van AI-systemen. Welke voorbeelden horen bij welk risiconiveau?" teksten zoals "5/5 antwoorden goed" en "Probeer opnieuw". Deze teksten zijn wit op de lichtblauwe achtergrond (#8BCBE0) en halen daarmee het minimumcontrast van 4,5:1 niet. Onvoldoende contrast maakt tekst moeilijk of niet leesbaar voor bezoekers die slechtziend of kleurenblind zijn, of die een scherm in fel licht gebruiken.

User story

Ik heb een visuele beperking. Als ik een pagina lees, kan ik tekst met weinig contrast ten opzichte van de achtergrond niet ontcijferen. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.

Hoe te testen

Open de WCAG Radar, optie Contrast, en meet de kleur van de tekst en de achtergrond. Test de tekst op de normale weergavegrootte en het normale gewicht. Uitgeschakelde bedieningselementen zijn uitgezonderd van deze eis.

Oplossing

Tekst van normale grootte (kleiner dan 18 pt, of kleiner dan 14 pt vet) heeft een contrastverhouding van minimaal 4,5:1 nodig om goed leesbaar te zijn. Pas de tekstkleur of de achtergrondkleur aan zodat de contrastverhouding minimaal 4,5:1 is. Controleer dit met een contrastmeter zoals de Colour Contrast Analyser.

#17 - Bedieningselementen van de carrousel hebben onvoldoende contrast

Op deze pagina staat onder de kop "Vragen over de toekomst" een carrousel. De pijlknoppen en de navigatiestippen eronder zijn wit op de lichtblauwe achtergrond (#80CFCA) en hebben een contrastverhouding van 1,8:1. Dat voldoet niet aan de vereiste 3,0:1 voor interactieve componenten. Interactieve componenten zoals knoppen, invoervelden, selectievakjes en schakelknoppen moeten visueel te onderscheiden zijn van hun omgeving. Als de rand of het vlak van een component onvoldoende contrast heeft, kunnen slechtziende bezoekers het bedieningselement mogelijk niet waarnemen of herkennen.

User story

Ik ben slechtziend of kleurenblind. Als ik de carrousel gebruik, kan ik niet zien waar de knoppen zitten. Ik verwacht dat alle interactieve elementen duidelijk zichtbaar zijn tegen de achtergrond.

Hoe te testen

Meet met een contrastmeter zoals de Colour Contrast Analyser het contrast van interactieve elementen, focusindicatoren, randen van invoervelden, statussen van selectievakjes en keuzerondjes en informatieve iconen ten opzichte van hun achtergrond. Het minimum is 3,0:1.

Oplossing

Zorg dat de visuele rand of het vlak van de componenten een contrastverhouding van minimaal 3,0:1 heeft met de aangrenzende achtergrond. Dit geldt voor alle statussen van de componenten, inclusief :focus, :hover en :active.