Rapport:
Audit digitale toegankelijkheid SEP e-learningmodule

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s staat bovenaan een knop met de tekst "Help". Wanneer een bezoeker op deze knop klikt, opent een dialoogvenster met helpinformatie. In dit dialoogvenster wordt een logo getoond met behulp van een <svg>-element. De alternatieve tekst ontbreekt en er is geen <title>-element aanwezig. Omdat het logo een informatieve afbeelding is, moet het een tekstalternatief hebben dat de volledige tekst van het logo bevat. Dit zorgt ervoor dat gebruikers van schermlezers de juiste informatie krijgen. Voeg voor SVG-afbeeldingen een title-element toe dat de volledige tekst bevat die in het logo wordt getoond.

Op de pagina "Combinaties" worden na het klikken op de knop "Speel" de speelkaarten getoond. Deze kaarten zijn afbeeldingen zonder tekstalternatief. Hoewel het aria-label-attribuut wordt gebruikt, bevat het geen waarde. Hierdoor ontbreekt een tekstalternatief dat de betekenis of het doel van de afbeelding beschrijft. Afbeeldingen die informatie overdragen, zoals deze speelkaarten, moeten een tekstalternatief hebben. Dit kan worden gedaan door een alt-attribuut toe te voegen of door een correct ingevuld aria-label-attribuut te gebruiken. Op deze manier kan een schermlezer de informatie uit de afbeelding overbrengen aan blinde of slechtziende bezoekers, zodat ook zij de inhoud begrijpen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s staat bovenaan een knop met de tekst "Help". Wanneer een bezoeker op deze knop klikt, opent een dialoogvenster met helpinformatie. In dit dialoogvenster wordt het strong-element gebruikt voor de opmaak van tekst: "Bij SEP vinden we inclusief taalgebruik belangrijk.". De hele zin is gemarkeerd met een strong-element. Het strong-element heeft een semantische waarde: 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). Gebruik hiervoor CSS.

Wanneer in de module op de knop "Help" wordt geklikt, opent het dialoogvenster. De relatie tussen de activerende knop en de geopende inhoud wordt echter niet overgebracht naar schermlezers. Het dialoogvenster wordt dynamisch onderaan de HTML-code toegevoegd wanneer op de knop wordt geklikt. De "Help"-knop mist de benodigde attributen waarmee hulpmiddelen, zoals schermlezers, de relatie tussen de knop en het dialoogvenster kunnen begrijpen. Zo ontbreekt het aria-haspopup-attribuut, dat aangeeft dat de knop een dialoogvenster opent. Daarnaast ontbreekt het aria-controls-attribuut, waarmee de knop programmatisch kan worden gekoppeld aan het bijbehorende dialoogelement.

In de module bevindt zich onderaan de pagina een knop met een tandwielpictogram. Deze knop opent het instellingenmenu. In het menu staat een groep schakelknoppen. De relatie tussen deze knoppen kan niet programmatisch worden bepaald. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt.

Op de pagina "Wat heb je eraan?" staat een knop met de tekst "Voorbeelden". Wanneer een bezoeker op deze knop klikt, wordt aanvullende inhoud getoond met de knoppen "De Grote Vijf", "DISC" en "TMA". Met deze knoppen kunnen bezoekers schakelen tussen verschillende inhoudssecties. Zodra een bezoeker op een van deze knoppen klikt (inclusief de knop "Voorbeelden"), verandert de achtergrondkleur van de aangeklikte knop om aan te geven dat de corresponderende inhoud al is bekeken. Deze visuele indicator wordt echter niet doorgegeven aan schermlezers, waardoor gebruikers die afhankelijk zijn van hulpsoftware niet op de hoogte zijn van de statuswijziging. Hetzelfde probleem doet zich voor op andere pagina's met knoppen die extra inhoud openen. Bijvoorbeeld, op de pagina "Stappenplan bij inzage" staan de knoppen "Stap 1", "Stap 2", "Stap 3", enzovoort. Op de pagina "Vraag feedback" zijn dit de knoppen met nummers. Op de pagina "Achtergrond" is er een knop met "*". Dit probleem komt ook voor op andere pagina's.

Op de pagina "Helpfunctie Zoeken in help" staat een knop "Bekijk een voorbeeld". Wanneer een bezoeker op deze knop klikt, wordt een dialoogvenster met een video getoond. Het video-element is echter verborgen voor hulpsoftware, zoals schermlezers. Dit komt door het attribuut aria-hidden="true". De attributen aria-hidden="true" en role="presentation" zorgen ervoor dat inhoud verborgen wordt voor hulpsoftware. Deze moeten echter niet worden gebruikt voor informatieve elementen.

Op de pagina "Leerdoelen" wordt in de stap "Wat zou jij nu doen?" een dialoogvenster met een waarschuwing getoond wanneer een bezoeker geen keuzerondje selecteert en op de knop "Versturen" klikt. Dit dialoogvenster bevat de knop "OK". Deze knop is ook verborgen vanwege aria-hidden="true".

Op de pagina "Stappenplan bij inzage" staan knoppen die extra inhoud openen, bijvoorbeeld "Stap 1". De knop die overeenkomt met de geopende inhoud wordt visueel onderscheiden van de andere knoppen door alleen kleur te gebruiken. Gebruikers die geen kleuren kunnen zien, weten niet welke stap op dat moment is geselecteerd. Er moet een alternatief voor kleur worden geboden om slechtziende of blinde gebruikers te helpen deze informatie te begrijpen. Dit kan worden bereikt door aria-current="true" toe te voegen aan de actieve knop, zodat de actieve status programmatisch kan worden bepaald voor hulpsoftware. Een andere optie is om verborgen tekst toe te voegen met aria-label of soortgelijke attributen om extra informatie over de momenteel geopende stap te bieden. Andere oplossingen zijn ook mogelijk. Hetzelfde probleem wordt waargenomen op de pagina "Vraag feedback". Zie de knoppen met nummers die extra inhoud openen.

Op de pagina "Achtergrond" is de tekst "Achtergrond" niet gemarkeerd als een kop. 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 navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6.

Hetzelfde probleem wordt waargenomen op andere pagina's. Enkele voorbeelden zijn:

• Op de pagina "Leerdoelen" wanneer op de knop "Volgende" wordt geklikt verschijnt de tekst "Wat denk je?".
• Op de pagina "Historie participatiewet" staat de tekst "Historie participatiewet".
• Op de pagina "Onderdeel 4: Aantal uitgebrachte stemmen" staat de tekst "Onderdeel 4: Aantal uitgebrachte stemmen".
• Zie ook pagina "Combinaties". De tekst "Combineer je team" is niet is opgemaakt als koptekst.
• Wanneer op de knop "Speel" wordt geklikt en een bezoeker een kaart selecteert, wordt extra inhoud getoond. Deze extra inhoud bevat teksten die niet als koppen zijn gemarkeerd. Bijvoorbeeld "Avonturier en avonturier".

Op de pagina "Criteria wegen" staat een knop "Vul de enquête zelf in" waarmee een formulier wordt geopend. Dit formulier bestaat uit twee secties. Elke sectie heeft een groepslabel: "Hoe vaak drink je koffie op het werk?" en "Selecteer de criteria die je belangrijk vindt". Dit groepslabel is niet verbonden met de groep. Hierdoor weten bezoekers die een schermlezer gebruiken niet dat er een relatie is tussen de groepslabels en de bijbehorende groepen.

In hetzelfde formulier staat een groep keuzerondjes en een groep selectievakjes. De relatie tussen deze keuzerondjes kan niet programmatisch worden bepaald. Hetzelfde geldt voor de selectievakjes. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats de teksten boven de groepen in dit element.
Hetzelfde probleem kan worden waargenomen op andere pagina's.

Op de pagina "Leerdoelen" wanneer op de knop "Vorige" wordt geklikt, verschijnen keuzerondjes onder de vraag. Ook op de pagina "Casus: kokervisus" staat een vraag met selectievakjes. De vraag en de selectievakjes zijn niet programmatisch met elkaar verbonden. De selectievakjes horen visueel bij elkaar, maar deze relatie kan niet programmatisch worden bepaald.
Hetzelfde probleem wordt ook waargenomen op de pagina "Toetsvragen". Er zijn vragen met keuzerondjes en selectievakjes eronder.

Op de pagina "Creatief denken" worden vragen weergegeven met bijbehorende tekstvelden waarin bezoekers hun antwoorden kunnen invoeren. Hoewel de relatie tussen de vraag en het bijbehorende tekstveld visueel duidelijk is, wordt deze niet programmatisch doorgegeven aan hulpsoftware. Screenreaders kondigen uitsluitend de placeholder-tekst aan, zonder de context van de bijbehorende vraag. Hierdoor kan belangrijke informatie voor gebruikers met een visuele beperking verloren gaan.

Op de pagina "De prioriteitenmatrix opbouwen" zijn knoppen met nummers die extra inhoud openen. De geopende inhoud bestaat uit een nummer en een tekst, die visueel als één samenhangend blok worden weergegeven. In de HTML zijn het nummer en de tekst echter gescheiden in twee afzonderlijke <p>-elementen. Om de visuele presentatie beter te weerspiegelen, moet deze structuur ook in de code worden aangepast. Het aantal visueel zichtbare paragrafen moet overeenkomen met het aantal <p>-elementen in de HTML, zodat consistentie wordt gewaarborgd en toegankelijkheidsproblemen worden voorkomen.

Op de pagina "Criteria wegen" staat een tabel die wordt vervangen door een formulier wanneer op de knop "Vul de enquête zelf in" wordt geklikt. Hoewel de tabel visueel wordt verborgen, blijft deze in de code toegankelijk voor schermlezers. Dit kan leiden tot verwarring bij gebruikers die zowel de visuele pagina als een schermlezer gebruiken, omdat zij zowel de verborgen tabel als het formulier tegenkomen.
Een vergelijkbaar probleem doet zich voor in het zijpaneel met het navigatiemenu, dat wordt geopend via de hamburgerknop met drie horizontale lijnen. In het zijpaneel bevindt zich een zoekveld dat pas zichtbaar wordt na het klikken op de knop met het vergrootglas. Wanneer het zoekveld visueel verborgen is, blijft er echter een element met role="search" en aria-label="Zoeken" aanwezig in de code, waardoor schermlezers het zoekveld blijven aankondigen. Dit zorgt voor verwarring bij gebruikers van schermlezers, omdat de interactie met het zoekveld niet overeenkomt met de visuele weergave.

De module bevat een zijpaneel met een navigatiemenu. De huidige link in dit menu is alleen visueel anders dan de rest. Bezoekers die de pagina laten voorlezen, hebben geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="page" toe aan de actieve link. Andere oplossingen zijn mogelijk.

Een groot deel van de content in de module is verborgen voor hulpsoftware via het attribuut aria-hidden="true". Dit betekent dat gebruikers die afhankelijk zijn van hulpsoftware, zoals een schermlezer, deze informatie mist en de functionaliteiten niet kan gebruiken. Wees daarom spaarzaam met het gebruik van dit attribuut.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de module worden op meerdere pagina’s instructies gegeven die verwijzen naar de positie van elementen op de pagina, zoals het gebruik van het woord 'rechts'. Voor bezoekers die de website in een indeling met één kolom bekijken, kunnen dergelijke instructies verwarrend of nutteloos zijn, omdat de visuele locatie van elementen verschilt per schermgrootte of indeling. Hier volgen enkele voorbeelden:

• Op de pagina "Leerdoelen" staat bijvoorbeeld de tekst: “Klik rechtsonder op ‘volgende’ om verder te gaan.”
• Op de pagina "De prioriteitenmatrix opbouwen" wordt een afbeelding van een prioriteitenmatrix getoond. Als tekstalternatief voor de afbeelding is verborgen tekst gebruikt die stelt: “Rechts staat een afbeelding van prioriteitenmatrix.”
• Op de pagina "Onderdeel 4: Aantal uitgebrachte stemmen" bevat de instructie in blauwe tekst: “Typ de juiste cijfers in de groene vakken rechtsonder bij onderdeel 4 en tel ze op.”
• Op de pagina "Stap 6: Prioriteren" staat de tekst: “Gebruik de pijltjes rechts om de volgorde van de prioriteiten aan te passen.”

Deze locatiegebaseerde instructies zijn problematisch voor gebruikers met een andere lay-out of hulpmiddelen, zoals schermlezers, omdat ze afhankelijk zijn van visuele positionering. Om dit op te lossen, moeten de instructies meer beschrijvend en onafhankelijk van lay-out worden geformuleerd. Bijvoorbeeld door specifieke functies, context, of labels te benoemen in plaats van richting.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Wat heb je eraan?" is er een knop met het label "Voorbeelden". Wanneer een bezoeker op deze knop klikt, wordt aanvullende inhoud weergegeven met knoppen gelabeld als "De Grote Vijf", "DISC" en "TMA". Met deze knoppen kunnen bezoekers schakelen tussen verschillende inhoudssecties. Zodra een bezoeker op een van deze knoppen klikt, verandert de achtergrondkleur van de aangeklikte knop om aan te geven dat de corresponderende inhoud is bekeken. Het gebruik van kleur als enige manier om aan te geven dat inhoud al is bekeken, voldoet echter niet aan de toegankelijkheidsrichtlijnen. Bezoekers met een visuele beperking, zoals slechtziendheid of kleurenblindheid, kunnen deze subtiele kleurverandering mogelijk niet opmerken. Om de toegankelijkheid te verbeteren, moet er een aanvullende visuele indicator worden gebruikt om de statusverandering duidelijk te maken. Dit kan bijvoorbeeld een tekstlabel zijn (zoals "Bekeken"), een pictogram, of een achtergrondkleur met een hoger contrast, gecombineerd met andere visuele signalen zoals een dikkere rand, onderstreping, of een verandering in de vorm van de knop. Hetzelfde probleem doet zich voor op andere pagina's met knoppen die extra inhoud openen. Op de pagina "Stappenplan bij inzage" zijn dit de knoppen "Stap 1", "Stap 2", "Stap 3", enzovoort. Op de pagina "Vraag feedback" zijn dit genummerde knoppen. Op de pagina "Achtergrond" is dit de knop met een sterretje (*). Dit probleem kan ook op andere pagina's voorkomen. Het toevoegen van een extra visuele indicator zorgt ervoor dat de statusverandering voor alle bezoekers duidelijk en waarneembaar is, ongeacht visuele beperkingen.

Op de pagina “Toetsvragen” staat een vragenlijst met vier stappen. In stap 4 worden select-elementen gebruikt. Wanneer de opties in de select-elementen toetsenbordfocus krijgen, verandert de achtergrondkleur van wit naar lichtgroen. Het gebruik van kleur als enige manier om de locatie van de toetsenbordfocus aan te geven voldoet niet aan dit succescriterium.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Voorbeeldmodule" staat bovenaan een knop met de tekst "Help". Wanneer een bezoeker op deze knop klikt, wordt een dialoogvenster geopend met helpinformatie. In dit dialoogvenster is de tekst wit op een groene achtergrond (HEX #27987D). Het kleurcontrast is 3,6:1, terwijl dit minimaal 4,5:1 moet zijn.

Op de pagina "Vraag feedback" zijn er knoppen met getallen. De rode kleur van de getallen (HEX #EB3633) heeft een te laag contrast tegen de witte achtergrond: 4,1:1. Daarnaast is de tekst van de koppen in de verborgen inhoud ook rood op een lichtblauwe achtergrond (HEX #D2DFED). Dit kleurcontrast is 3,0:1. Wanneer op de knoppen wordt geklikt, verandert de achtergrondkleur in lichtrood (HEX #FBD7D6). Het kleurcontrast van de rode getallen tegen de lichtrode achtergrond is dan 3,1:1. In alle gevallen moet het kleurcontrast minimaal 4,5:1 zijn om aan de toegankelijkheidsrichtlijnen te voldoen.

Op de pagina "Starten met Word" opent de knop "Nieuw leeg document" een dialoogvenster met een afbeelding van een Word-document en knoppen. De tekst "Klik op de cijfers en leer hoe de onderdelen heten." is grijs (HEX #808080) en staat op een witte achtergrond. Het kleurcontrast is 3,9:1, terwijl dit minimaal 4,5:1 moet zijn. Ditzelfde probleem doet zich voor op andere pagina's. Op de pagina "Historie Participatiewet" staat de grijze tekst "Sleep de knop naar rechts om een overzicht te krijgen." Op de pagina "Casus: kokervisus" staat de grijze tekst "Let op: je kunt meerdere antwoorden selecteren." Op de pagina "Toetsvragen" staat bij stap 2, "Vraag 2 van 4", de grijze tekst "Let op: je kunt meerdere antwoorden selecteren."

Op de pagina "Creatief denken" staat een kopje "Vijf keer waarom". De roze tekst (HEX #C447AF) op de witte achtergrond heeft een kleurcontrast van 4,3:1, wat niet voldoet aan de vereiste 4,5:1. Op deze pagina bevindt zich ook een vragenlijst die uit meerdere stappen bestaat. In stap "De kern van het probleem" staan de knoppen "Herschrijf" en "Opnieuw". De tekst op deze knoppen is eveneens roze op de witte achtergrond met een kleurcontrast van 4,3:1, wat ook niet voldoet aan de vereiste 4,5:1.

Op de pagina "De prioriteitenmatrix opbouwen" staan knoppen met groene cijfers (HEX #64AA4C). Het contrast tegen de witte achtergrond is 2,8:1, wat te laag is. Deze knoppen openen extra inhoud. In de aanvullende inhoud hebben de groene cijfers (HEX #A2B558) een te laag contrast tegen de gele achtergrond (HEX #FFEA9E): 1,9:1. Dit contrast moet minstens 4,5:1 zijn.
Op de pagina "De prioriteitenmatrix opbouwen" staat een prioriteitenmatrix. Wanneer een bezoeker op de knoppen met nummers klikt, verschijnt er witte en rode tekst in de tabel. De witte tekst op de lichtoranje achtergrond (HEX #FEB99F) heeft een contrast van 1,7:1. De rode tekst (HEX #CB3E0B) op de lichtoranje achtergrond (HEX #FEB99F) heeft een contrast van 3,0:1. In beide gevallen moet het contrast minstens 4,5:1 zijn.

Op de pagina "Historie Participatiewet" bedekt de helft van de slider een afbeelding. Wanneer de schuifknop zich op het gedeelte van de slider bevindt dat over de afbeelding ligt, heeft het groene jaartal (HEX #4F786C) op de wit-transparante achtergrond een kleurcontrast van 3,4:1, zoals bijvoorbeeld het jaartal 1996. Dit contrast moet minstens 4,5:1 zijn.

Op de pagina "Onderdeel 4: Aantal uitgebrachte stemmen" is de tekst "Onderdeel 4" in rood (HEX #F04433). De achtergrond is wit. Het kleurcontrast is 3,8:1, wat te laag is. Dit moet minstens 4,5:1 zijn.

Op de pagina "Onderdeel 4: Aantal uitgebrachte stemmen" staat een formulier met invoervelden. De achtergrondkleur van de velden is lichtgroen (HEX #CBF9F4). De ingevoerde waarde heeft een donkergroene kleur (HEX #119285), met een contrast van 3,4:1, wat te laag is. Dit moet minstens 4,5:1 zijn.

Op de pagina "Casus: kokervisus" verschijnt het bericht "Juist!" in witte tekst op een groene achtergrond (HEX #00B050) wanneer alle selectievakjes zijn aangevinkt. Het contrast is 2,9:1, wat niet voldoet aan de vereiste 4,5:1. Dit probleem komt ook voor op andere pagina's.

Op de pagina "Combinaties" staat een knop "Speel". De blauwe tekst (HEX #0887A3) op de witte achtergrond heeft een te laag contrast van 4,2:1, wat te laag is. Dit moet minstens 4,5:1 zijn. Hetzelfde probleem geldt voor de knoppen "Volgende koppel" en "Speel opnieuw", die verschijnen nadat een bezoeker op de knop "Speel" heeft geklikt en een kaart heeft geselecteerd.
Op de pagina "Toetsvragen" staat bij stap 2 "Vraag 2 van 4" een blauwe tekst (HEX##2689AD) op een witte achtergrond. Het contrast is 4,0:1. Dit moet minstens 4,5:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's staan in de <head>-sectie van de HTML-code user-scalable=no. Dit betekent dat de tekst niet in alle browsers vergroot kan worden. Als de browserfunctie voor inzoomen wordt gebruikt, wordt de tekst zelfs kleiner gemaakt en dat is niet de bedoeling. Teksten moeten tot 200% vergroot kunnen worden. Er is wel een optie "Inzoomen" gevonden onder "Instellingen", maar die leidt er niet toe dat teksten 200% groter worden.

Uitkomst: Onvoldoende

Bevindingen: Op de meeste pagina's worden de teksten die worden getoond aan de bezoekers geïmplementeerd met behulp van de SVG-elementen. Dit is bijvoorbeeld het geval op de pagina "Leerdoelen". Deze tekst kan niet door de bezoekers worden aangepast. Als tekst als afbeelding wordt geplaatst, kunnen veel bezoekers er niets meer mee. Dit komt omdat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen. Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding staat, kunnen ze dit niet doen.

Uitkomst: Onvoldoende

Bevindingen: In de module bevindt zich bovenaan de knop "Help". Als de module wordt bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd tot 400% en het dialoogvenster "Help" is geopend, overlappen de teksten in het dialoogvenster elkaar waardoor ze moeilijk te lezen zijn. Als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, moet alles nog gewoon leesbaar zijn, zonder dat in beide richtingen moet worden gescrold.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Criteria wegen" staat een formulier met keuzerondjes en selectievakjes, dat wordt weergegeven nadat een bezoeker op de knop "Vul de enquête zelf in" heeft geklikt. De contrastverhouding tussen de grijze randkleur van de keuzerondjes (HEX #B6B6B6) en de witte achtergrond is 2,0:1. De contrastverhouding tussen de grijze rand van de selectievakjes (HEX #BDBDBD) en de witte achtergrond is 1,9:1. Dit probleem komt ook voor op de pagina's "Casus: kokervisus" en "Toetsvragen". De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben ten opzichte van de achtergrond.

Op de pagina "Casus: kokervisus" verschijnt het bericht met een wit vinkje op een groene achtergrond (HEX #00B050) wanneer alle selectievakjes zijn aangevinkt. Het contrast is 2,9:1, wat te laag is. Dit moet minstens 3,0:1 zijn.

Uitkomst: Voldoende

Bevindingen: Advies: Omdat veel teksten eigenlijk afbeeldingen van tekst zijn (zie succescriterium 1.4.5), kan de tekstafstand van deze teksten niet aangepast worden. Hiervoor is een uitzondering in dit succescriterium, maar dit maakt het niet toegankelijk.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de module bevindt zich een zijkolom. Hierin staat een interactief element met de tekst "Voorbeeldmodule". Bezoekers kunnen op dit element klikken om naar de homepagina te gaan. Deze functionaliteit is echter niet met het toetsenbord te bedienen. Zorg ervoor dat alle functionaliteit toegankelijk is via het toetsenbord.

Op de pagina "Leerdoelen", bij de stap "Wat zou jij nu doen?", staat een video. In de videospeler is een knop aanwezig om de afspeelsnelheid te regelen. Deze knop opent een menu, maar dit menu kan niet met het toetsenbord worden bediend.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de HTML-code van de module is op meerdere elementen het attribuut aria-hidden="true" toegepast, terwijl ze ook tabindex="-1" bevatten. Het gebruik van aria-hidden="true" op elementen of hun bovenliggende elementen die nog steeds focus kunnen krijgen, veroorzaakt toegankelijkheidsproblemen. Deze elementen zijn verborgen voor hulpsoftware, maar blijven wel focusbaar voor toetsenbordgebruikers. Dit kan leiden tot verwarring voor gebruikers van schermlezers en mogelijk de navigatievolgorde op het toetsenbord verstoren. Zie voor meer informatie de sectie aria-hidden van de WAI-ARIA-specificatie op https://www.w3.org/TR/wai-aria/#aria-hidden.

De module bevat een zijkolom met een navigatiemenu. Er zijn echter problemen geconstateerd bij het navigeren door dit paneel met behulp van het toetsenbord. Wanneer een bezoeker het zijpaneel opent en het tabblad Zoeken activeert, wordt het zoekveld correct geopend en gaat de focus naar het veld. Wanneer een bezoeker echter op de Tab-toets drukt, krijgt het volgende element de focus, namelijk een menu-item binnen het tabblad Inhoudsopgave. Deze focusvolgorde is niet logisch en kan gebruikers in verwarring brengen.

De focusvolgorde is ook inconsistent wanneer een bezoeker naar het geopende zijpaneel navigeert na de hoofdinhoud van een pagina. Wanneer een bezoeker bijvoorbeeld de pagina "Leerdoelen" selecteert in het zijpaneel, komt de focus terecht op de hoofdinhoud van de geselecteerde pagina. Vervolgens navigeert de bezoeker door de pagina, maar de focus belandt weer in het zijpaneel op het tabblad Inhoudsopgave. Daarna wordt het navigatiemenu ontoegankelijk via het toetsenbord: het indrukken van Enter of Spatie activeert het tabblad niet, en de pijltjestoetsen kunnen de focus niet verplaatsen naar de menu-items in het paneel.

Op de pagina "Voorbeeldmodule" staat bovenaan de knop "Help". Deze knop opent een dialoogvenster. Bij het navigeren met het toetsenbord en het openen van dit dialoogvenster komt de focus echter niet in het dialoogvenster terecht. In plaats daarvan verschuift de focus naar de knop "Afsluiten" naast de knop "Help" en pas daarna naar het dialoogvenster. De focusvolgorde moet logisch blijven door de focus direct naar de nieuwe inhoud (het dialoogvenster) te verplaatsen. Wanneer de toetsenbordfocus in het dialoogvenster terechtkomt, kan een bezoeker het venster verlaten en naar interactieve elementen op de pagina navigeren. Dit is geen logische focusvolgorde. Zorg ervoor dat de focus in het dialoogvenster blijft totdat een bezoeker het sluit. Daarnaast moet de focus na het sluiten van het dialoogvenster terugkeren naar de knop waarmee het werd geopend.

Op de pagina "Helpfunctie Zoeken in help" opent het dialoogvenster met een video wanneer een bezoeker op de knop "Bekijk een voorbeeld" klikt. Bij het openen van het dialoogvenster blijft de toetsenbordfocus echter zichtbaar op de knop die de video activeert, ook al is deze knop onzichtbaar. Zorg ervoor dat de toetsenbordfocus alleen op zichtbare interactieve elementen terechtkomt. In dit geval moet de focus worden verplaatst naar het dialoogvenster. Hetzelfde probleem doet zich voor wanneer het dialoogvenster wordt geopend en vervolgens wordt gesloten. De focus blijft hangen op de knop met het "X"-pictogram. Dit probleem wordt ook waargenomen op andere pagina's waar een bezoeker een dialoogvenster opent, zoals "Wat heb je eraan?", "Starten met Word", "Achtergrond", "Tests", enz.

Op de pagina "Helpfunctie Zoeken in help" kunnen bezoekers bij het navigeren door het dialoogvenster met een video met behulp van het toetsenbord focus krijgen op onzichtbare knoppen. Wanneer een bezoeker bijvoorbeeld een video pauzeert, verschuift de focus naar een onzichtbaar element. Hierdoor kan de afspeelknop niet meer worden geactiveerd met het toetsenbord, terwijl de focus visueel nog steeds op de knop lijkt te liggen. Als een bezoeker vervolgens op de Tab-toets drukt, verschuift de focus naar de volgende knop, zoals de "X"-knop. Om terug te keren naar de afspeelknop, moet de bezoeker de toetsencombinatie Shift + Tab gebruiken. Dit gedrag is niet logisch of gebruiksvriendelijk. Zorg ervoor dat alleen zichtbare interactieve elementen toetsenbordfocus kunnen ontvangen.

Daarnaast kan de toetsenbordfocus het dialoogvenster verlaten terwijl het nog geopend is, waardoor deze verschuift naar de onderliggende inhoud. Dit is geen correct gedrag. Bij dialoogvensters moet de toetsenbordfocus goed worden beheerd. De focus moet binnen het dialoogvenster blijven totdat het venster wordt gesloten door: de sluitknop te activeren, of de ESC-toets in te drukken. Het probleem kan worden opgelost door de focus binnen het venster te beperken totdat het correct wordt gesloten. Een alternatief is om het venster automatisch te sluiten zodra de focus eruit verdwijnt. Dit probleem doet zich ook voor op andere pagina's waar een bezoeker een dialoogvenster kan openen, zoals "Wat heb je eraan?", "Achtergrond", "Tests", enz.

Op de pagina "Casus: kokervisus" is de volgorde van de focus niet logisch. Nadat een bezoeker de selectievakjes heeft aangevinkt en op de knop "Verstuur" heeft geklikt, wordt een bericht met een pijlknop getoond. De pijlknop krijgt echter niet onmiddellijk toetsenbordfocus na de knop "Verstuur". In plaats daarvan moet een bezoeker door de elementen op de pagina bladeren om bij de pijlknop te komen. Deze volgorde kan gebruikers in verwarring brengen, vooral degenen die afhankelijk zijn van ondersteunende technologieën of navigatie via het toetsenbord. Hetzelfde probleem is ook waargenomen op andere pagina's, bijvoorbeeld "Stap 6: Prioriteren".

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Leerdoelen" op de stap "Wat zou jij nu doen?" staat een video. Het element dat de video bevat, heeft de toegankelijke naam: "vraag_v1.3 (720p).mp4". Deze toegankelijke naam is niet betekenisvol en beschrijft de inhoud van het element niet.

In dezelfde videospeler is er een knop met horizontale lijnen die een transcript opent. De toegankelijke naam van de knop is "Openen". Deze toegankelijke naam beschrijft niet duidelijk de functie van deze knop.
Op de pagina "Helpfunctie Zoeken in help" is er, wanneer een bezoeker het dialoogvenster met een video opent, een knop met horizontale lijnen waarmee een bezoeker een transcript kan openen. Nadat het transcript is geopend, verandert de toegankelijke naam van de knop in "Ovaal 3". Deze toegankelijke naam beschrijft niet het doel of de functionaliteit van de knop.

Op de pagina "Achtergrond" staat een knop met een sterretje. De toegankelijke naam van de knop is "asterisk Wajong". Het woord "asterisk" is overbodig en schept verwarring.
Bovendien verandert de toegankelijke naam nadat een bezoeker deze knop heeft geactiveerd. Deze toegankelijke naam is niet beschrijvend of betekenisvol.
Hetzelfde probleem wordt waargenomen op de pagina "Starten met Word".
Als een bezoeker op deze knop met "*" klikt, wordt er een dialoogvenster geopend. De knop met "X" heeft de toegankelijke naam "Asterisk sluiten", die ook niet zinvol is.

Op de pagina "Criteria wegen" staat een tabel. De toegankelijke naam van de tabel is "Tabel met 4 kolommen en 9 rijen". Deze komt van het aria-label-attribuut. Zo'n toegankelijke naam is niet beschrijvend en geeft geen betekenisvolle informatie aan gebruikers, vooral niet aan gebruikers die afhankelijk zijn van schermlezers.

Op de pagina "Creatief denken" staat een vragenlijst met meerdere stappen. Op de stap "De kern van het probleem" activeert een knop met het label "Herschrijf" een tekstveld. Onder dit tekstveld staat nog een knop met een pijl. De toegankelijke naam van deze pijlknop is "Ga verder," die afkomstig is van het aria-label-attribuut. Deze toegankelijke naam beschrijft niet duidelijk de functie van de knop.

Een soortgelijk probleem wordt waargenomen op de pagina "Onderdeel 4: Aantal uitgebrachte stemmen". Wanneer een bezoeker het formulier met ongeldige waarden indient, verschijnt de melding met de knop "Toon juiste antwoord". Een bezoeker klikt op deze knop en er wordt een feedbackbericht getoond. Er is een knop "Verder". Deze tekst beschrijft niet duidelijk het doel van deze knop.
Zie ook de pagina "Casus: kokervisus". Wanneer een bezoeker selectievakjes selecteert, wordt het bericht getoond met een pijlknop. De toegankelijke naam is "Verder" en komt van het aria-label-attribuut.
Op de pagina "De prioriteitenmatrix opbouwen" staan knoppen met nummers. Als deze knoppen geactiveerd worden, verandert de toegankelijke naam, bijvoorbeeld van "Stap 1" naar "1".

Op de pagina "Starten met Word" in het dialoogvenster met een schermafbeelding van het Word-document staan knoppen met nummers. De toegankelijke naam van de knoppen bevat alleen een nummer, bijvoorbeeld voor de knop met visueel label "1" is het "1".

Op de pagina "Stap 6: Prioriteren" staan blokken die herschikt kunnen worden. Elk blok dient als een knop en kan worden bediend met het toetsenbord. De toegankelijke naam van elk blok bevat de tekst van het blok. Deze toegankelijke naam geeft echter geen informatie over de functie van de knop (het blok verplaatsen).

Op elke pagina staat een zijkolom. Het navigatiemenu in dit paneel heeft de toegankelijke naam "outline-container," die afkomstig is van het attribuut aria-label. De toegankelijke naam "outline-container" is niet beschrijvend of betekenisvol voor bezoekers, vooral voor gebruikers die gebruikmaken van ondersteunende technologieën zoals schermlezers. Hoewel het technisch gezien een label is, geeft de naam niet het doel of de functie van het navigatiemenu weer.

In dit zijpaneel staat een vergrootglaspictogram dat een zoekveld opent. Wanneer een bezoeker een waarde in het veld invoert en zoeken activeert, verschijnt er een knop met het "x"-pictogram in het veld. De toegankelijke naam van deze knop is "Sluiten." Deze naam beschrijft niet duidelijk wat de knop doet.

Advies: In de module staan pagina's met navigatieknoppen "Vorige" en "Volgende". De toegankelijke namen van deze knoppen bevatten sneltoetscombinaties, bijvoorbeeld "Vorige (Ctrl+Alt+komma)". Wanneer de sneltoetsfunctionaliteit is uitgeschakeld, verwijzen de toegankelijke namen van de knoppen echter nog steeds naar deze sneltoetsen. Dit kan zorgen voor verwarring bij gebruikers, vooral bij degenen die gebruikmaken van hulpsoftware, zoals schermlezers. Het zou beter zijn als de sneltoetscombinaties alleen worden voorgelezen als de sneltoetsen actief zijn.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Voorbeeldmodule" bovenaan staat de knop "Help". Wanneer een bezoeker op deze knop klikt, wordt er een dialoogvenster geopend met helpinformatie. Wanneer dit dialoogvenster geopend is, verschijnt een knop met een kruisje. De toetsenbordfocus is niet zichtbaar op deze knop. 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 waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Onderdeel 4: Aantal uitgebrachte stemmen" staat een formulier met invoervelden. Elk invoerveld is visueel geassocieerd met een label dat bestaat uit een letter die naast het veld staat, bijvoorbeeld "E". De toegankelijke naam van elk invoerveld bevat echter alleen de gedetailleerde beschrijving en niet het zichtbare tekst. Bijvoorbeeld: het invoerveld met de letter "E" heeft een toegankelijke naam: "Vul hier het aantal stembiljetten met een geldige stem op een kandidaat in." Als de zichtbare tekst niet overeenkomt met de toegankelijke naam, kunnen de interactieve elementen niet worden bediend met spraakbesturing. Bezoekers die vertrouwen op spraakbesturingstechnologieën activeren elementen meestal door de zichtbare tekst naast de interactieve elementen uit te spreken. Als het gesproken commando de zichtbare tekst bevat, zoals "E," wordt het element niet geactiveerd omdat deze tekst geen deel uitmaakt van de toegankelijke naam. Dit kan worden opgelost door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur aan het begin.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina "Wat heb je eraan?" staat ook inhoud in een andere taal. Nadat een bezoeker op de knop "Voorbeelden" heeft geklikt, wordt er extra inhoud getoond. Er is een knop met tekst in een andere taal: "The big five". In de tekst die wordt getoond wanneer op de knop "The big five" wordt geklikt, staat ook de tekst: "The big five". De knop "DISC" opent de inhoud met de volgende tekst in een andere taal: "Insights Discovery, Profile Dynamics". Er wordt geen taalcode toegepast op deze inhoud. 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 “nl”. Staan er op de pagina teksten in een andere taal? Dan moet de schermlezer op die taal overschakelen. Geef hiervoor deze anderstalige inhoud een lokaal lang-attribuut met de juiste waarde. Voeg lang="en" toe aan deze content of aan een overkoepelend HTML-element waarin deze content staat.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de zijkolom staat een vergrootglaspictogram dat een zoekveld opent. Het zoekveld heeft geen permanent zichtbaar label. De placeholdertekst "Zoek" wordt gebruikt als label. Deze tekst verdwijnt zodra bezoeker begint te typen. Invoervelden moeten een label hebben dat altijd zichtbaar is. Hier kan dus niet een placeholdertekst voor worden gebruikt, want die verdwijnt zodra een bezoeker begint te typen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als een bezoeker met een schermlezer door het zijpaneel navigeert en de focus landt op het actieve item in het menu "Module voor WCAG-audit", wordt de naam van dit element niet aangekondigd.

Op de pagina "Voorbeeldmodule" staat bovenaan de knop "Help". Als er op deze knop wordt geklikt, wordt er een dialoogvenster geopend. Het dialoogvenster mist echter zowel een toegankelijke naam als de juiste rol. Hierdoor worden gebruikers die gebruikmaken van hulpsoftware, zoals schermlezers, niet geïnformeerd over de nieuw geopende inhoud. Hetzelfde probleem wordt waargenomen bij de dialoogvensters die op de pagina's van de module verschijnen.

Op de pagina "Helpfunctie Zoeken in help" staat een knop "Bekijk een voorbeeld". Wanneer een bezoeker op deze knop klikt, wordt een dialoogvenster met een video getoond. Dit venster heeft geen toegankelijke naam en geen juiste rol.

Op de pagina "Achtergrond" wordt door het klikken op de knop met een asterisk een dialoogvenster geopend dat geen toegankelijke naam en geen juiste rol heeft.
Zie ook de pagina "Tests" het dialoogvenster dat geopend kan worden door op de knop met de link-icoon te klikken. Dit probleem kan ook voorkomen op andere pagina’s.

Op de pagina "Leerdoelen" bij de stap "Wat zou jij nu doen?" staat een video. De slider in de videospeler heeft geen toegankelijke naam.

Op de pagina "Helpfunctie Zoeken in help" is een dialoogvenster met een video die kan worden geopend door op de knop "Bekijk een voorbeeld" te klikken. Het video-element in dit dialoogvenster heeft geen toegankelijke naam.

Op de pagina "Wat heb je eraan?" opent de knop aanvullende inhoud. In de geopende inhoud staan knoppen waarop geklikt kan worden om overeenkomstige inhoud weer te geven. Deze knoppen hebben verschillende toestanden en kunnen worden ingedrukt. De ondersteunende technologie biedt geen informatie over de status van de knop. Deze informatie is niet beschikbaar voor de schermlezer. Een blinde bezoeker weet daardoor niet wat de status is van deze knop. Hetzelfde probleem kan ook op andere pagina's worden waargenomen. Zie bijvoorbeeld de pagina's "Stappenplan bij inzage", "Starten met Word" (knoppen op de schermafbeelding die geopend kunnen worden door op de knop "Nieuw leeg document" te klikken), "De prioriteitenmatrix opbouwen", enz.

Op de pagina is een knop "Nieuw leeg document" die een dialoogvenster opent. Dit dialoogvenster bevat een schermafbeelding van een Word-document. Het screenshot-element heeft de rol van knop, maar voert geen interactieve actie uit. Deze verkeerde voorstelling van zaken zorgt voor verwarring bij gebruikers van ondersteunende technologieën, zoals gebruikers van schermlezers, over het doel en de functionaliteit van het element.

Op de pagina "Creatief denken" staat een vragenlijst met meerdere stappen. Op de stap "De kern van het probleem" activeert een knop met het label "Herschrijf" een tekstveld. Dit tekstveld heeft geen toegankelijke naam.

Op de pagina "Toetsvragen" staat een vragenlijst met meerdere stappen. Op stap 4, "Vraag 4 van 4," staan select-elementen. Er zijn verschillende problemen gedetecteerd. Deze select-elementen hebben de juiste rol van combobox, maar ze hebben geen toegankelijke namen.
De select-elementen openen vervolgkeuzelijsten die de juiste rol van "listbox" hebben, maar geen toegankelijke namen hebben.

De module bevat een zijpaneel dat is gecodeerd als een tablist. Er zijn echter problemen ontdekt bij het implementeren van dit patroon. Deze zijkolom is visueel en functioneel geen tablijst. Het is overbodig om de rol van tablist te gebruiken. Bovendien heeft het tablist-element een toegankelijke naam: "sidebar-tabs." Deze naam beschrijft niet duidelijk het doel van het element en voldoet niet aan het succescriterium 2.4.6.

Wanneer het tabblad "Zoeken" wordt geactiveerd, wordt het zoekveld in het tabblad-element geplaatst dat is gekoppeld aan het tabblad "Inhoudsopgave", in plaats van in het juiste tabblad voor het tabblad "Zoeken". Hoewel het juiste tabpanel voor het zoektabblad in de HTML bestaat, is het verborgen met display: none.

Wanneer het zoekveld wordt getoond, heeft het zoektabblad een aria-selected-attribuut dat onjuist is ingesteld op "false".

In het zijpaneel staat een interactief element met de tekst "Voorbeeldmodule". Een bezoeker kan op dit element klikken om de startpagina te openen. Dit interactieve element heeft echter niet de juiste rol.

In hetzelfde zijpaneel bevindt zich een uitklapbaar menu "Module voor WCAG-audit." Het uitklapmenu heeft de rol role="group". Deze groep heeft geen toegankelijke naam.

Een groot deel van de content in de module is verborgen voor hulpsoftware via het attribuut aria-hidden="true". Dit betekent dat veel elementen helemaal niet beschikbaar zijn voor gebruikers van hulpsoftware. Wees daarom spaarzaam met het gebruik van dit attribuut.

Advies: Op de pagina "Toetsvragen" staat een vragenlijst in vier stappen. In stap 4 staan keuze-elementen. Het element dat de vervolgkeuzelijst activeert, heeft het attribuut aria-owns. In de ARIA-specificaties staat dat het gebruik van aria-owns om de relatie tussen een combobox en zijn vervolgkeuzelijst aan te geven, niet langer de aanbevolen aanpak is. Het wordt sterk aanbevolen om hiervoor aria-controls te gebruiken. Zie de pagina
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#wai-ariaroles,states,andproperties.

Uitkomst: Onvoldoende

Bevindingen: In de module staan meerdere secties waarin ARIA-live regions niet correct zijn geïmplementeerd of geheel ontbreken. Deze attributen zijn essentieel voor het overbrengen van dynamisch bijgewerkte inhoud naar gebruikers van schermlezers en zorgen ervoor dat gebruikers van hulpsoftware op de hoogte zijn van wijzigingen zonder handmatig naar de bijgewerkte inhoud te hoeven navigeren. Het ontbreken van een goede implementatie resulteert in aanzienlijke barrières voor de toegankelijkheid, omdat gebruikers van schermlezers niet op de hoogte zijn van belangrijke updates. Hieronder staan voorbeelden van de problemen, hoewel deze lijst niet uitputtend is.

Bij het wisselen tussen de pagina's verschijnt een wachtanimatie. Deze statusmelding is niet toegankelijk voor blinde bezoekers. Bij het navigeren tussen pagina's met behulp van het zijpaneelmenu of de knoppen "Vorige" en "Volgende" in de onderste navigatie wordt de nieuw geopende pagina niet aangekondigd. Hierdoor weten gebruikers van schermlezers niet waar ze zich in de module bevinden.

Op de pagina "Criteria wegen" staat een tabel die dynamisch wordt bijgewerkt nadat een bezoeker een antwoord op de vraag heeft gegeven. Deze update wordt niet aangekondigd.

Op de pagina "De prioriteitenmatrix opbouwen" staat een prioriteitenmatrix. Als er op de knoppen met nummers wordt geklikt, wordt de prioriteitenmatrix bijgewerkt. Deze wijziging wordt echter niet aangekondigd door schermlezers.

Op de pagina "Historie Participatiewet" wordt, wanneer een bezoeker de slider aanpast, de relevante informatie getoond. Deze nieuw verschenen informatie wordt echter niet aangekondigd door schermlezers.

Op de pagina "Casus: kokervisus", wanneer er selectievakjes zijn aangevinkt en een bezoeker op "Versturen" klikt, verschijnt er een melding: "Juist!" of "Helaas, niet juist.". Deze meldingen zijn statusberichten die niet toegankelijk zijn voor een blinde bezoeker op het moment dat ze verschijnen.
Hetzelfde probleem wordt waargenomen op de pagina "Stap 6: Prioriteren". Als een bezoeker de blokken niet herschikt en op "Versturen" klikt, verschijnt de melding.

Op de pagina "Combinaties" staat een knop "Speel". Als een bezoeker op deze knop klikt, wordt het veld met speelkaarten getoond en wordt één kaart naar het midden verplaatst. Deze informatie wordt echter niet doorgegeven aan gebruikers van schermlezers.

Op de pagina "Stap 6: Prioriteren" kan een bezoeker blokken herschikken als onderdeel van een prioriteringsactiviteit. Wanneer een bezoeker deze blokken herschikt, wordt de informatie niet aangekondigd.
Dit soort berichten valt onder de definitie van een statusbericht. Ze moeten de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt. Voeg om dit te bereiken bijvoorbeeld aria-live="polite" of role="status" toe aan het icoon. Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.