Audit digitale toegankelijkheid van het Leerplein van provincie Zuid-Holland

#1 - Pagina heeft geen taalcode

In de HTML van deze pagina is geen taal ingesteld. Een schermlezer moet dan gokken welke uitspraakregels hij gebruikt.

User story

Ik lees de website met een schermlezer. Als ik de pagina bezoek, dan spreekt mijn schermlezer de Nederlandse tekst uit met verkeerde klanken. Ik verwacht dat mijn schermlezer de tekst uitspreekt in het Nederlands.

Hoe te testen

Bekijk de broncode van de pagina en zoek het <html>-element. Controleer of de waarde van het lang-attribuut een geldige taalcode is die overeenkomt met de echte taal van de pagina, bijvoorbeeld lang="nl" voor een Nederlandse pagina. Luister met een schermlezer: bij een verkeerde code wordt de pagina met de verkeerde uitspraak voorgelezen.

Oplossing

Stel de taal van de pagina in op Nederlands met lang="nl", zodat hulpsoftware de inhoud op de juiste manier voorleest.

#2 - Paginatitel onvoldoende beschrijvend

De paginatitel van elke pagina is “Leerplein”. Die tekst beschrijft de inhoud van de pagina onvoldoende.

User story

Ik lees de website met een schermlezer. Als ik tussen tabbladen wissel, hoor ik alleen een vage titel en weet ik niet welke pagina ik open. Ik verwacht dat de titel duidelijk beschrijft waar de pagina over gaat.

Hoe te testen

Check de titel van elke pagina in het browser-tabblad. De titel moet het onderwerp of doel beschrijven en uniek zijn binnen de site. PDF's en app-schermen hebben ook een betekenisvolle titel nodig. Die stel je in bij de documenteigenschappen en niet alleen op het scherm.

Oplossing

Zorg ervoor dat het <title>-element van de pagina een duidelijke en beschrijvende tekst bevat die de inhoud van de pagina weergeeft, bij voorkeur aangevuld met de naam van de organisatie.

Deze tekst wordt weergegeven in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers eenvoudiger navigeren tussen verschillende pagina’s.

#3 - Alternatieve tekst van informatieve afbeelding is niet betekenisvol

Het logo bovenaan de website toont de tekst “provincie Zuid-Holland”. De alt-tekst is “PZH”. Dit geldt ook voor het logo in de footer.

User story

Ik lees de website met een schermlezer. Als ik een afbeelding tegenkom, dan hoor ik geen betekenisvolle beschrijving van wat die afbeelding toont. Ik verwacht dat de schermlezer me vertelt welke informatie de afbeelding overbrengt.

Hoe te testen

Open onze WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet per afbeelding, icoon en SVG of er een tekstalternatief is en wat erin staat. Informatieve elementen hebben een toegankelijke naam nodig die de betekenis overbrengt: een alt-attribuut bij een <img>, een aria-label of een <title>-element bij een SVG, of een toegankelijke naam bij icoon-fonts. Decoratieve elementen horen niet in de HTML te staan. Gebruik in plaats daarvan een CSS-achtergrond. Staat een decoratief element toch in de HTML? Verberg het dan voor hulpsoftware met aria-hidden="true", of met een lege alt als het een <img> is. Luister daarna met een schermlezer: die mag geen bestandsnaam en niet het woord "afbeelding" voorlezen.

Oplossing

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut. Om herhaling te voorkomen mag die tekst niet gelijk zijn aan tekst die al op de pagina staat, bijvoorbeeld als onderschrift bij de afbeelding.

#4 - Alternatieve tekst van een svg ontbreekt

Op elke pagina staan svg-iconen die zichtbaar zijn voor hulpsoftware, maar die geen tekstalternatief hebben. Deze iconen worden nu voorgelezen als “afbeelding”.

Is het icoon decoratief? Verberg het dan voor hulpsoftware, zodat het niet wordt voorgelezen. Is het informatief? Voeg dan een tekstalternatief toe.

User story

Ik lees de website met een schermlezer. Als ik een afbeelding tegenkom, dan hoor ik geen betekenisvolle beschrijving van wat die afbeelding toont. Ik verwacht dat de schermlezer me vertelt welke informatie de afbeelding overbrengt.

Hoe te testen

Open onze WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet per afbeelding, icoon en SVG of er een tekstalternatief is en wat erin staat. Informatieve elementen hebben een toegankelijke naam nodig die de betekenis overbrengt: een alt-attribuut bij een <img>, een aria-label of een <title>-element bij een SVG, of een toegankelijke naam bij icoon-fonts. Decoratieve elementen horen niet in de HTML te staan. Gebruik in plaats daarvan een CSS-achtergrond. Staat een decoratief element toch in de HTML? Verberg het dan voor hulpsoftware met aria-hidden="true", of met een lege alt als het een <img> is. Luister daarna met een schermlezer: die mag geen bestandsnaam en niet het woord "afbeelding" voorlezen.

Oplossing

Voeg een beschrijvende tekst toe aan het <title>-element in de svg.

<svg><title>Type training: </title></svg>

#5 - Herhalende content niet te omzeilen

Er is geen skiplink waarmee je meteen naar de hoofdinhoud springt.

User story

Ik navigeer met een toetsenbord. Als ik een pagina open, moet ik met de Tab-toets langs elk interactief element in het hoofdmenu voordat ik bij de hoofdinhoud kom. Dat moet ik op elke pagina van de website opnieuw doen. Ik verwacht dat ik direct naar de hoofdinhoud kan springen.

Hoe te testen

Druk vanuit de adresbalk één keer op Tab. Een skiplink ("Naar hoofdinhoud") hoort als eerste focus te krijgen, zichtbaar te worden bij focus en de focus naar de hoofdinhoud te verplaatsen als je hem activeert. Landmarks en een goede koppenstructuur zijn daar een aanvulling op.

Oplossing

Zorg dat bezoekers vaste onderdelen van de pagina kunnen overslaan en meteen naar de hoofdinhoud kunnen. Dat kan bijvoorbeeld met:

• een skiplink die de toetsenbordfocus naar de hoofdinhoud verplaatst;
• het duidelijk afbakenen van paginadelen, zoals de navigatie en de hoofdinhoud;
• een consistente en correcte koppenstructuur op elke pagina.

Een skiplink moet de eerste link op de pagina zijn. Hij mag standaard verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt.

#6 - Button heeft geen toegankelijke naam

Op een klein scherm verdwijnt de zoekbalk en verschijnt een zoekknop met een vergrootglas. Deze knop heeft geen toegankelijke naam.

User story

Ik gebruik een schermlezer, spraakbesturing of andere hulpsoftware om elementen te activeren. Ik wil dat elk interactief element een naam heeft die zegt wat het doet. Zonder naam zegt mijn schermlezer alleen "knop".

Hoe te testen

Open onze WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet per interactief element wat de toegankelijke naam is. Geen enkel element mag een lege naam hebben, en de naam moet de functie beschrijven.

Oplossing

Zorg dat dit element een toegankelijke naam krijgt die beschrijft wat de functie is.

#7 - Kleurcontrast bij tekst kleiner dan 19px is onvoldoende

In de header staat een knop met de initialen van de gebruiker. De achtergrondkleur en de tekstkleur van die knop hebben onvoldoende contrast.

User story

Ik heb een visuele beperking. Als tekst te weinig contrast heeft met de achtergrond, is die moeilijk te lezen. Ik verwacht dat tekst genoeg contrast heeft om goed leesbaar te zijn.

Hoe te testen

Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of kleurverloop meet je met de twee pipetten de kleur van de tekst en de achtergrond. Minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, vanaf 24px normaal of 18,7px vet. Vergeet placeholders, tekst op afbeeldingen en uitgeschakeld ogende elementen niet.

Oplossing

Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.

#8 - De rand van het invoerveld heeft niet genoeg contrast

In de header staat een zoekveld. De rand van het invoerveld heeft onvoldoende contrast.

User story

Ik heb een visuele beperking. Als ik een invoerveld wil invullen of een keuzevakje wil aanvinken, zie ik de rand niet goed omdat die te weinig afsteekt tegen de achtergrond. Ik verwacht dat de rand van elk formulierelement duidelijk zichtbaar is, zodat ik het kan herkennen.

Hoe te testen

Meet het contrast tussen het element en de aangrenzende achtergrond met de Colour Contrast Analyzer. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken, optie Contrast.

Oplossing

Pas de kleur van de rand van het element aan zodat de contrastverhouding met de achtergrond minimaal 3,0:1 is. Dit geldt voor invoervelden, keuzevakjes en keuzerondjes. Gebruik een contrastchecker om de nieuwe kleurwaarde te verifiëren.

#9 - Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten

In de footer staat een link “Over Leerplein”. Opent een bezoeker die geen muis gebruikt dit venster met het toetsenbord en sluit hij het weer, dan begint de focus bovenaan de website. De focus hoort terug te gaan naar de link die het dialoogvenster opende, of naar de volgende link in de navigatie in de footer. Dit geldt voor alle links in de footer die een dialoogvenster openen.

User story

Ik navigeer met een toetsenbord en gebruik een schermlezer. Als ik een dialoogvenster sluit, beland ik bovenaan de pagina in plaats van waar ik was. Ik verwacht dat de focus terugkeert naar het element waarmee ik het venster opende.

Hoe te testen

Gebruik de Tab-toets om van element naar element te navigeren en controleer of de focusvolgorde logisch is. De focusvolgorde mag afwijken van de visuele volgorde zolang die logisch blijft.

Oplossing

Voeg JavaScript toe dat de focus bij het sluiten van het dialoogvenster terugzet op het element dat het venster opende, bijvoorbeeld met triggerElement.focus().

#10 - Koppen zijn niet toegankelijk

Op deze pagina staan teksten die koppen zijn, maar niet als koppen zijn gemarkeerd. Zie bijvoorbeeld “Toegewezen aan jou” en “Alles over het Leerplein”. Zie ook “Over Leerplein” in het dialoogvenster “Over Leerplein”.

Andere teksten zijn met kop-elementen gemarkeerd om ze een groter lettertype te geven, terwijl het geen koppen zijn. Zie de kaartjes tegenover “Alles over het Leerplein”. Dit zijn geen koppen, want er staat geen inhoud onder.

User story

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

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Vergelijk met de visuele sectietitels: elke visuele kop moet een kopelement hebben. Luister daarna met een schermlezer en controleer of je via de kopjeslijst naar de secties kunt springen.

Oplossing

Haal het <strong>- of <em>-element weg en markeer deze tekst met een passend kop-element, zoals h2 of h3. De opmaak regel je daarna met CSS.

Dit type element wordt vaak toegevoegd via de knop “B” (vet) in een tekstbewerker.

#11 - Toetsenbordbediening ontbreekt, de interactieve rol ontbreekt

Op deze pagina staan twee links die niet met toetsenbord te bedienen zijn. Het gaat om “Start” en “Onze visie op leren”. Deze links zijn gemaakt van div-elementen met type=”button”. Dit attribuut maakt deze elementen niet interactief. Een bezoeker die een schermlezer gebruikt weet niet dat dit knoppen zijn. Een bezoeker die met alleen het toetsenbord de website bedient, kan deze links niet volgen.

User story

Ik bedien de website met een toetsenbord. Als ik een knop bedien met Enter of de Spatiebalk, dan gebeurt er niets. Ik verwacht dat elke knop op allebei reageert.

Hoe te testen

Zet de cursor in de adresbalk van de browser en navigeer met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de Spatiebalk en de pijltjestoetsen. Elk element dat je met de muis kunt bedienen, moet ook met het toetsenbord werken. Een ontwikkelaar kan in de projectcode zoeken naar onclick-events.

Oplossing

Gebruik de HTML-elementen <a> of <button>. Kan dat niet, gebruik dan ARIA om deze elementen interactief te maken.

#12 - De rand van het invoerveld, keuzevakje of keuzerondje heeft niet genoeg contrast

In de filters staan invoervelden met de lichtgrijze randkleur (#e7e7eb). In combinatie met de witte achtergrond van de pagina, is de contrastratio slechts 1,2:1. Dit moet minimaal 3,0:1 zijn.

User story

Ik heb een visuele beperking. Als ik een invoerveld wil invullen of een keuzevakje wil aanvinken, zie ik de rand niet goed omdat die te weinig afsteekt tegen de achtergrond. Ik verwacht dat de rand van elk formulierelement duidelijk zichtbaar is, zodat ik het kan herkennen.

Hoe te testen

Meet het contrast tussen het element en de aangrenzende achtergrond met de Colour Contrast Analyzer. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken, optie Contrast.

Oplossing

Pas de kleur van de rand van het element aan zodat de contrastverhouding met de achtergrond minimaal 3,0:1 is. Dit geldt voor invoervelden, keuzevakjes en keuzerondjes. Gebruik een contrastchecker om de nieuwe kleurwaarde te verifiëren.

#13 - Er ontbreekt een label bij een invoerveld

In de filters, onder “Opleiders” verschijnt een zoekbalk zonder een permanent zichtbaar label. Er wordt een placeholder tekst gebruikt als label. Deze tekst verdwijnt bij het typen.

User story

Ik lees de website met een schermlezer. Als ik een formulier invul, dan hoor ik niet wat ik in een veld moet typen. Ik verwacht dat elk invoerveld een duidelijk label heeft.

Hoe te testen

Bekijk elk invoerveld en elke groep keuzevakjes of keuzerondjes. Elk heeft een zichtbaar label of een duidelijke instructie nodig die uitlegt wat er wordt gevraagd. Een placeholder alleen telt niet. Bij een speciale notatie, zoals een datum of een postcode, hoort een instructie. Uitleg bij verplichte velden is een advies en geen eis van 3.3.2.

Oplossing

Geef alle invoervelden een duidelijk label in de vorm van tekst of een afbeelding met een alt-tekst.

#14 - Knoppen met onduidelijke namen

In de filters staat een knop met “Skills”. Die knop opent een submenu met meerdere knoppen die verborgen inhoud openklappen. De toegankelijke naam van de knop bevat alle tekst die onder deze knop staat.

User story

Ik lees de website met een schermlezer. Als ik een knop tegenkom, hoor ik een naam die niet vertelt wat de knop doet. Ik verwacht dat elke knop een duidelijke naam heeft die de actie beschrijft.

Hoe te testen

Open onze WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet per knop wat de toegankelijke naam is. Vergelijk elke naam met wat de knop daadwerkelijk doet; de naam moet de functie beschrijven. Luister daarna met een schermlezer wat er wordt voorgelezen.

Oplossing

Zorg ervoor dat de toegankelijke naam van de knop de functie duidelijk beschrijft.

#15 - Afbeelding heeft geen tekstalternatief (alt-attribuut ontbreekt)

Op deze pagina staan kaartjes met decoratieve afbeeldingen. Deze afbeeldingen hebben geen alt-attribuut.

User story

Ik lees de website met een schermlezer. Als ik een afbeelding tegenkom, dan leest mijn schermlezer een bestandsnaam voor in plaats van een beschrijving. Ik verwacht dat elke afbeelding een duidelijke beschrijving heeft of als decoratief is gemarkeerd.

Hoe te testen

Bekijk elke afbeelding met de WCAG Radar of met axe DevTools. Een <img>-element hoort altijd een alt-attribuut te hebben. Bij een decoratieve afbeelding blijft dat attribuut leeg, dus alt="". Bij een informatieve afbeelding staat er een duidelijke beschrijving in.

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.

#16 - Toetsenbordfocus onzichtbaar op knoppen

De knoppen “Aanmelden” bij alle events hebben geen zichtbare toetsenbordfocus. De CSS-class .cIXxkw bevat outline: none. Deze knop opent een pop-upvenster. Ook de knoppen “Sluit” en “Inschrijven” tonen geen zichtbare focus. Die knoppen staan op veel pagina’s. Bij de class .bFsvQn is de toetsenbordfocus op dezelfde manier weggehaald met outline: none.

User story

Ik bedien de website met een toetsenbord. Als ik door de knoppen navigeer, zie ik niet welke knop de focus heeft. Ik verwacht dat de actieve knop duidelijk zichtbaar gemarkeerd is.

Hoe te testen

Navigeer met Tab door de hele pagina en controleer of je altijd kunt zien waar de focus zit. Zoek in de CSS naar outline: none zonder vervanging. Je kunt ook de WCAG Radar openen en de optie "Focus zichtbaar maken" aanzetten.

Oplossing

Zorg ervoor dat de toetsenbordfocus altijd zichtbaar is op knoppen. Gebruik daarvoor een duidelijk focusstijl, zodat bezoekers kunnen zien wanneer een knop actief is.

#17 - Opsomming wordt niet als lijst voorgelezen

Onder het kopje “Resultaat” staat een opsomming die in de HTML niet als lijst is gemarkeerd.

User story

Ik lees de website met een schermlezer. Wanneer informatie is gepresenteerd als een lijst, moet ik deze structuur kunnen horen. Ik verwacht dat mijn schermlezer de structuur en het aantal items aankondigt.

Hoe te testen

Bekijk de pagina met een schermlezer of met de developer tools van de browser. Controleer of elke opsomming die je ziet ook in de HTML een lijst is, met <ul>, <ol> en <li>. Handmatig getypte streepjes of andere tekens zijn geen lijst.

Oplossing

Markeer de opsomming met de juiste HTML-elementen: <ul> voor een ongeordende lijst of <ol> voor een geordende lijst. Gebruik <li> voor elk afzonderlijk item.

#18 - Vetgedrukte tekst doet dienst als kop

De hoofdinhoud van deze pagina heeft in de broncode een andere structuur dan op het scherm. Bezoekers die de pagina zien, herkennen de structuur en de hiërarchie aan de koppen, de lijsten en de alinea’s. In de broncode staat al die inhoud in één alinea, een <p>-element. Een schermlezer leest het daardoor voor als één stuk tekst.

User story

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

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Controleer daarna elke kop op de pagina. Kreeg een kop geen label h1 tot en met h6? Dan is die kop niet goed gemarkeerd.

Oplossing

Haal het <strong>- of <em>-element weg en markeer deze tekst met een passend kop-element, zoals h2 of h3. De opmaak regel je daarna met CSS.

Dit type element wordt vaak toegevoegd via de knop “B” (vet) in een tekstbewerker.

#19 - Kleurcontrast bij tekst kleiner dan 19px is onvoldoende

Heeft de deelnemer zich voor een event ingeschreven, dan verschijnt een knop met “Ingeschreven”. De tekst op die knop is bijna onleesbaar: de contrastverhouding is 1,9:1.

User story

Ik heb een visuele beperking. Als tekst te weinig contrast heeft met de achtergrond, is die moeilijk te lezen. Ik verwacht dat tekst genoeg contrast heeft om goed leesbaar te zijn.

Hoe te testen

Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of kleurverloop meet je met de twee pipetten de kleur van de tekst en de achtergrond. Minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, vanaf 24px normaal of 18,7px vet. Vergeet placeholders, tekst op afbeeldingen en uitgeschakeld ogende elementen niet.

Oplossing

Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.

#20 - Hovercontent ontoegankelijk met toetsenbord

De ingeschreven deelnemer kan zijn deelname annuleren door een e-mail te sturen. Deze informatie staat in een extra venster dat verschijnt wanneer de deelnemer de muis over de “Ingeschreven” knop beweegt. Deze informatie is niet toegankelijk voor deelnemers die geen computermuis gebruiken.

User story

Ik bedien de website met een toetsenbord. Als ik door de pagina navigeer en een knop focus krijgt, verschijnt de extra inhoud niet. Ik verwacht dat dezelfde informatie ook met het toetsenbord zichtbaar wordt.

Hoe te testen

Ga met Tab naar het element dat extra inhoud toont als je er met de muis overheen gaat. Diezelfde inhoud moet ook verschijnen als het element toetsenbordfocus krijgt. Verschijnt er niets bij focus, dan is de extra inhoud niet met het toetsenbord op te roepen.

Oplossing

Zorg dat de extra inhoud ook met het toetsenbord verschijnt. Wat met de muis werkt, moet ook zonder muis werken.

#21 - Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Aan de rechterkant van het scherm verdwijnt tekst wanneer een bezoeker inzoomt tot 200%.

User story

Ik vergroot de tekst tot twee keer zo groot om de pagina te kunnen lezen. Als ik inzoom op deze pagina, verdwijnt er tekst of overlapt het andere onderdelen. Ik verwacht dat alle tekst zichtbaar en leesbaar blijft bij 200% zoom.

Hoe te testen

Zet de browser op 1280px breed en vergroot de tekst tot 200% met Ctrl + + of Cmd + +. Alle tekst moet zichtbaar en leesbaar blijven, zonder dat er inhoud verdwijnt of overlapt.

Oplossing

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

#22 - Kop is niet als koptekst gemarkeerd

Op deze pagina staat het kopje “Voortgang tot afronding”. Die kop is niet als koptekst gemarkeerd.

User story

Ik lees de website met een schermlezer. Ik laat de koppen voorlezen om de inhoud van de pagina te scannen en ik navigeer van kop naar kop. Als koppen niet als kopteksten zijn gemarkeerd, mis ik deze secties en kan ik niet zo makkelijk navigeren.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop daarna deze stappen langs:

• Zoek alle teksten op de pagina die er visueel uitzien als een kop: groter, vetter, een eigen kleur of een nadrukkelijke positie.
• Kijk of ze allemaal een kop-markering van de WCAG Radar krijgen. Zo niet, dan zijn ze niet met h1 tot en met h6 gemarkeerd.
• Verifieer met een schermlezer: navigeer met H in NVDA en JAWS, of met de rotor in VoiceOver. Elke visuele kop moet als kop worden aangekondigd.

Oplossing

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

#23 - Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staan meerdere decoratieve afbeeldingen met een alt-tekst. Die tekst voegt niets toe aan de pagina en kan beter wegblijven.

User story

Ik lees de website met een schermlezer. Als ik langs een decoratieve afbeelding kom, dan leest mijn schermlezer onnodige tekst voor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen en niet worden voorgelezen.

Hoe te testen

Open onze WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet per afbeelding, icoon en SVG of er een tekstalternatief is en wat erin staat. Informatieve elementen hebben een toegankelijke naam nodig die de betekenis overbrengt: een alt-attribuut bij een <img>, een aria-label of een <title>-element bij een SVG, of een toegankelijke naam bij icoon-fonts. Decoratieve elementen horen niet in de HTML te staan. Gebruik in plaats daarvan een CSS-achtergrond. Staat een decoratief element toch in de HTML? Verberg het dan voor hulpsoftware met aria-hidden="true", of met een lege alt als het een <img> is. Luister daarna met een schermlezer: die mag geen bestandsnaam en niet het woord "afbeelding" voorlezen.

Oplossing

Bij een <img>-element gebruik je een leeg alt-attribuut: alt="".

#24 - Kleurcontrast bij tekst kleiner dan 19px is onvoldoende

Op deze pagina staan meerdere grijze teksten (#7A7A7D) die onvoldoende contrast hebben met de witte achtergrond. Het contrast is momenteel 4,3:1, terwijl het minimaal 4,5:1 moet zijn.

User story

Ik heb een visuele beperking. Als tekst te weinig contrast heeft met de achtergrond, is die moeilijk te lezen. Ik verwacht dat tekst genoeg contrast heeft om goed leesbaar te zijn.

Hoe te testen

Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of kleurverloop meet je met de twee pipetten de kleur van de tekst en de achtergrond. Minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, vanaf 24px normaal of 18,7px vet. Vergeet placeholders, tekst op afbeeldingen en uitgeschakeld ogende elementen niet.

Oplossing

Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.

#25 - Statusbericht wordt niet voorgelezen

Voegt een deelnemer deze cursus toe, dan verschijnt de bevestiging “Toegevoegd aan rij met opgeslagen items op startpagina”. Een schermlezer leest dit bericht niet voor.

Een blinde bezoeker hoort dit bericht pas als het in de code als statusbericht is gemarkeerd.

User story

Ik lees de website met een schermlezer. Als ik een cursus toevoeg, dan hoor ik de bevestiging niet. Ik verwacht dat mijn schermlezer die melding automatisch voorleest.

Hoe te testen

Loop met een schermlezer aan elke actie op de pagina na die een statusmelding geeft zonder dat er een nieuwe pagina laadt: verstuur een formulier, voeg iets toe aan een lijst, voer een zoekopdracht uit, wacht op een laadindicator. Elke melding moet worden aangekondigd zonder dat de focus verspringt, meestal met role="status", aria-live="polite" of een vergelijkbare live region.

Oplossing

Geef het bericht het attribuut aria-live="polite" of role="status". De schermlezer leest het dan automatisch voor. Koppel het bericht met aria-describedby aan het onderdeel waar het over gaat, als de bezoeker het daar later nodig heeft.

#26 - Koppenstructuur kan worden verbeterd

Op deze pagina ontbreken de koppen h1 en h2. De inhoud begint meteen met een kop van niveau 3.

User story

Ik gebruik een schermlezer en spring door de pagina op kopniveau. Als de niveaus overslaan, dan raak ik kwijt in welk onderdeel ik zit en zie ik niet meer wat bij wat hoort.

Hoe te testen

Gebruik de WCAG Radar, optie “Koppen”, om de koppen op de pagina zichtbaar te maken.

Oplossing

Corrigeer de kopniveaus.

#27 - Icoon ‘opent in nieuw browser tab’ heeft geen tekstalternatief

Naast de link “[email protected]” staat een icoon dat aangeeft dat de link in een nieuw browsertabblad opent. Dit icoon heeft geen tekstalternatief. Hetzelfde icoon staat op https://leerplein.pzh.nl/learningconcept/CclTuFIDFt2FmbDsNqfSW.

User story

Ik lees de website met een schermlezer. Als ik op een link klik, dan hoor ik niet dat die link in een nieuw tabblad opent. Ik verwacht dat de schermlezer deze informatie voorleest.

Hoe te testen

Open onze WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet per afbeelding, icoon en SVG of er een tekstalternatief is en wat erin staat. Informatieve elementen hebben een toegankelijke naam nodig die de betekenis overbrengt: een alt-attribuut bij een <img>, een aria-label of een <title>-element bij een SVG, of een toegankelijke naam bij icoon-fonts. Decoratieve elementen horen niet in de HTML te staan. Gebruik in plaats daarvan een CSS-achtergrond. Staat een decoratief element toch in de HTML? Verberg het dan voor hulpsoftware met aria-hidden="true", of met een lege alt als het een <img> is. Luister daarna met een schermlezer: die mag geen bestandsnaam en niet het woord "afbeelding" voorlezen.

Oplossing

Voeg als visueel verborgen tekst toe dat de link een nieuw browsertabblad opent. Een schermlezer leest die tekst wel voor.

#28 - Sectie met verborgen inhoud is niet toegankelijk

Op meerdere plekken op deze pagina staan secties met verborgen inhoud, de zogenoemde accordeons. Deze secties zijn niet toegankelijk voor bezoekers die een schermlezer gebruiken.

De vraag is niet als een kopje gemarkeerd. Zonder deze markering is de relatie tussen de vraag en het antwoord niet duidelijk voor iemand die de pagina niet kan zien.

De knop met een plusje heeft geen toegankelijke naam en vertelt ook niet of de verborgen sectie open of dicht is. Als de accordeon open is, verandert het icoon op de knop. Deze wijziging staat niet in de toegankelijke naam van de knop die nu leeg is.

User story

Ik lees de website met een schermlezer. Als ik een accordeon activeer, hoor ik niet of de sectie open of gesloten is. Ik verwacht dat mijn schermlezer aangeeft of een sectie is ingeklapt of uitgeklapt.

Hoe te testen

Bekijk elk interactief onderdeel, dus links, knoppen, invoervelden en zelfgebouwde componenten, met het accessibility-panel in DevTools en met een schermlezer. Elk onderdeel moet doorgeven wat het is met een rol, hoe het heet met een naam, in welke staat het staat met bijvoorbeeld aria-expanded, aria-selected of aria-checked, en welke waarde het heeft als dat van toepassing is. Gebruik liever gewone HTML dan zelfgebouwde ARIA.

Oplossing

1. Zet de vragen om in koppen (h3 of h4).

2. Geef de knop een naam met aria-label en geef de staat aan met aria-expanded.

#29 - Informatie is niet meer leesbaar als tekstafstand wordt aangepast

In de sectie met verborgen inhoud onder de vraag “Wat voor aanbod is er beschikbaar op het Leerplein?” verdwijnt een deel van de tekst zodra de tekstafstand groter wordt. Dat geldt ook voor de andere antwoorden met veel tekst.

User story

Ik lees langzamer door een cognitieve beperking, slechtziendheid of dyslexie. Als ik meer ruimte tussen letters en regels instel, verdwijnt er tekst of valt die buiten beeld. Ik verwacht dat alle tekst zichtbaar en leesbaar blijft na mijn aanpassing.

Hoe te testen

Gebruik de WCAG Radar, optie Tekstafstand. Die past de tekstafstand uit dit succescriterium toe op de pagina. Er mag geen tekst verdwijnen en niets mag ophouden met werken.

Een alternatief zonder extensie: gebruik de tekstafstand-check van Proper Access. Sleep de knop "Tekstafstand aan/uit" naar je bladwijzerbalk. Lukt slepen niet, kopieer dan de code en plak die in een nieuwe bladwijzer. Klik op deze knop op elke pagina die je wilt testen. De tekst krijgt dan de stijlkenmerken uit dit succescriterium. Klik nog een keer om de stijlen weer uit te zetten.

Oplossing

Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.

#30 - Button zonder toegankelijke naam

Boven de footer staan op deze pagina drie knoppen zonder toegankelijke naam. Een schermlezer kan niet vertellen wat deze knoppen doen. Dit komt op meerdere pagina’s voor, bijvoorbeeld op https://leerplein.pzh.nl/learningconcept/CclTuFIDFt2FmbDsNqfSW/episode/2WobddEkY65gKZbv5Xt69L.

User story

Ik gebruik een schermlezer, spraakbesturing of andere hulpsoftware om elementen te activeren. Ik wil dat elk interactief element een naam heeft die zegt wat het doet. Zonder naam zegt mijn schermlezer alleen "knop".

Hoe te testen

Open onze WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet per interactief element wat de toegankelijke naam is. Geen enkel element mag een lege naam hebben, en de naam moet de functie beschrijven.

Oplossing

Zorg dat dit element een toegankelijke naam krijgt die beschrijft wat de functie is.

#31 - Decoratieve afbeelding is niet verborgen voor schermlezers

Bovenaan de pagina staat een grote afbeelding als achtergrond. Deze decoratieve afbeelding heeft de alt-tekst “ZDWD - 6.Datalek”. Die tekst draagt niets bij aan de inhoud van de pagina, maar wordt wel voorgelezen.

User story

Ik lees de website met een schermlezer. Als ik langs een decoratieve afbeelding kom, dan leest mijn schermlezer onnodige tekst voor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen en niet worden voorgelezen.

Hoe te testen

Open onze WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet per afbeelding, icoon en SVG of er een tekstalternatief is en wat erin staat. Informatieve elementen hebben een toegankelijke naam nodig die de betekenis overbrengt: een alt-attribuut bij een <img>, een aria-label of een <title>-element bij een SVG, of een toegankelijke naam bij icoon-fonts. Decoratieve elementen horen niet in de HTML te staan. Gebruik in plaats daarvan een CSS-achtergrond. Staat een decoratief element toch in de HTML? Verberg het dan voor hulpsoftware met aria-hidden="true", of met een lege alt als het een <img> is. Luister daarna met een schermlezer: die mag geen bestandsnaam en niet het woord "afbeelding" voorlezen.

Oplossing

Bij een <img>-element gebruik je een leeg alt-attribuut: alt="".

#32 - Kleurcontrast bij tekst kleiner dan 19px is onvoldoende

Bovenaan de pagina staat witte tekst op een lichtblauwe achtergrond. Het contrast is 2,4:1 en dat moet minimaal 4,5:1 zijn. Zie ook de grijze tekstkleur op de cursuskaartjes.

User story

Ik heb een visuele beperking. Als tekst te weinig contrast heeft met de achtergrond, is die moeilijk te lezen. Ik verwacht dat tekst genoeg contrast heeft om goed leesbaar te zijn.

Hoe te testen

Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of kleurverloop meet je met de twee pipetten de kleur van de tekst en de achtergrond. Minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, vanaf 24px normaal of 18,7px vet. Vergeet placeholders, tekst op afbeeldingen en uitgeschakeld ogende elementen niet.

Oplossing

Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.

#33 - Knop heeft geen toegankelijke naam

De cursuskaartjes hebben knoppen om een cursus aan de favorieten toe te voegen. Deze knoppen hebben geen toegankelijke naam. Staat een cursus eenmaal bij de favorieten, dan veranderen het uiterlijk en de functie van de knop: je haalt de cursus er dan juist mee weg. Die verandering is niet toegankelijk voor deelnemers die een schermlezer gebruiken.

User story

Ik gebruik een schermlezer, spraakbesturing of andere hulpsoftware om elementen te activeren. Ik wil dat elk interactief element een naam heeft die zegt wat het doet. Zonder naam zegt mijn schermlezer alleen "knop".

Hoe te testen

Open onze WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet per interactief element wat de toegankelijke naam is. Geen enkel element mag een lege naam hebben, en de naam moet de functie beschrijven.

Oplossing

Zorg dat dit element een toegankelijke naam krijgt die beschrijft wat de functie is.

#34 - Leesvolgorde wijkt af van wat je ziet

Op deze pagina staan 3 cursuskaartjes. Elke cursus heeft een h3-kop met daaronder alle informatie die bij die cursus hoort. In de broncode heeft die informatie een andere structuur, en daarmee een andere betekenis.

Voor iemand die de pagina niet ziet, lijkt het alsof kop 4 bij de vorige cursus hoort. Op de screenshot is de paginastructuur te lezen.

User story

Ik lees de website met een schermlezer. Als de inhoud in een andere volgorde wordt voorgelezen dan op het scherm staat, klopt het verhaal niet meer. Ik verwacht dat de leesvolgorde logisch blijft en overeenkomt met wat er op het scherm staat.

Hoe te testen

Kies in de WCAG Radar, tabblad Redactie, voor “Algemeen” en dan “Pagina structuur”.

Oplossing

Pas de koppen aan.

#35 - Opsomming wordt niet als lijst voorgelezen

Onder de tekst “Ook jij draagt bij aan privacy en informatieveiligheid” staan twee opsommingen die niet zijn gemarkeerd als lijsten. Hulpsoftware leest een andere structuur voor dan op de pagina te zien is.

User story

Ik lees de website met een schermlezer. Wanneer informatie is gepresenteerd als een lijst, moet ik deze structuur kunnen horen. Ik verwacht dat mijn schermlezer de structuur en het aantal items aankondigt.

Hoe te testen

Bekijk de pagina met een schermlezer of met de developer tools van de browser. Controleer of elke opsomming die je ziet ook in de HTML een lijst is, met <ul>, <ol> en <li>. Handmatig getypte streepjes of andere tekens zijn geen lijst.

Oplossing

Markeer de opsomming met de juiste HTML-elementen: <ul> voor een ongeordende lijst of <ol> voor een geordende lijst. Gebruik <li> voor elk afzonderlijk item.

#36 - Decoratieve afbeelding is niet verborgen voor schermlezers

Op elke pagina van deze e-learning staat een svg-tekening van een computer. Die afbeelding is zichtbaar voor schermlezers, maar heeft geen tekstalternatief. Een schermlezer leest alleen “afbeelding” voor.

User story

Ik lees de website met een schermlezer. Als een decoratieve afbeelding een tekstalternatief heeft, leest mijn schermlezer zinloze tekst voor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen door mijn schermlezer.

Hoe te testen

Open onze WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet per afbeelding, icoon en SVG of er een tekstalternatief is en wat erin staat.

Oplossing

Deze afbeelding is decoratief. Een <svg>-element verberg je door het <title>-element leeg te laten of weg te laten. Je kunt ook aria-hidden="true" op het <svg>-element zetten, of role="presentation" om de rol van afbeelding weg te halen.

#37 - Link zonder toegankelijke naam

Bovenaan elke pagina van deze e-learning staat een paginering. Die links hebben geen inhoud en daardoor geen toegankelijke naam. Een schermlezer kan niet vertellen waar ze naartoe gaan.

User story

Ik gebruik een schermlezer, spraakbesturing of andere hulpsoftware om elementen te activeren. Ik wil dat elk interactief element een naam heeft die zegt wat het doet. Zonder naam zegt mijn schermlezer alleen "knop".

Hoe te testen

Open onze WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet per interactief element wat de toegankelijke naam is. Geen enkel element mag een lege naam hebben, en de naam moet de functie beschrijven.

Oplossing

Zorg dat dit element een toegankelijke naam krijgt die beschrijft wat het doet. Dat kan met visueel verborgen tekst of met een aria-label.

#38 - Toetsenbordbediening ontbreekt

Op deze pagina kun je geen optie selecteren met het toetsenbord. De Spatiebalk en Enter werken niet op deze keuzevakjes. Zolang de opties niet zijn aangevinkt, wordt de knop “Versturen” niet actief. Een bezoeker zonder computermuis komt niet verder dan deze slide.

User story

Ik bedien de website met een toetsenbord. Als ik een knop bedien met Enter of de Spatiebalk, dan gebeurt er niets. Ik verwacht dat elke knop op allebei reageert.

Hoe te testen

Zet de cursor in de adresbalk van de browser en navigeer met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de Spatiebalk en de pijltjestoetsen. Elk element dat je met de muis kunt bedienen, moet ook met het toetsenbord werken. Een ontwikkelaar kan in de projectcode zoeken naar onclick-events.

Oplossing

Zorg dat de knop met de Spatiebalk en met Enter werkt.

#39 - Toetsenbordfocus zit vast in een component

Op deze pagina blijft de toetsenbordfocus in het menu. De bezoeker gaat met Tab naar de knop met drie horizontale streepjes. Het menu gaat open, de focus loopt langs alle items in het menu en komt op de sluitknop. Na Enter of Esc sluit het menu en gaat de focus terug naar de menuknop. De focus gaat daarna niet verder naar de hoofdinhoud, maar opent het menu opnieuw. Een bezoeker komt zo niet bij de rest van de pagina met het toetsenbord.

User story

Ik bedien de website met een toetsenbord. Als ik een onderdeel open, blijft mijn focus daarin en kan ik niet verder door de pagina. Ik verwacht dat ik een onderdeel altijd kan verlaten met Tab of Shift + Tab.

Hoe te testen

Tab door de hele pagina, inclusief modals, videoplayers en iframes. De focus moet altijd weg kunnen met Tab of Shift + Tab. Geen enkel element mag de focus vasthouden. Een dialoogvenster mag de focus tijdelijk vasthouden, maar alleen met een duidelijke uitweg: Esc of een sluitknop.

Oplossing

Zorg dat de toetsenbordfocus altijd uit het onderdeel kan met Tab of Shift + Tab.

#40 - Koppen zijn niet als kopteksten gemarkeerd

Op deze pagina staan secties met verborgen inhoud. In deze inhoud staat tekst met tussenkopjes, bijvoorbeeld “Het doel van de AVG”. Deze tussenkopjes zijn niet als kopteksten gemarkeerd. De tekst die eruit ziet als alinea’s met kopjes is in een p-element geplaatst.

User story

Ik lees de website met een schermlezer. Ik laat de koppen voorlezen om de inhoud van de pagina te scannen en ik navigeer van kop naar kop. Als koppen niet als kopteksten zijn gemarkeerd, mis ik deze secties en kan ik niet zo makkelijk navigeren.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop daarna deze stappen langs:

• Zoek alle teksten op de pagina die er visueel uitzien als een kop: groter, vetter, een eigen kleur of een nadrukkelijke positie.
• Kijk of ze allemaal een kop-markering van de WCAG Radar krijgen. Zo niet, dan zijn ze niet met h1 tot en met h6 gemarkeerd.
• Verifieer met een schermlezer: navigeer met H in NVDA en JAWS, of met de rotor in VoiceOver. Elke visuele kop moet als kop worden aangekondigd.

Oplossing

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

#41 - Semantisch element strong is niet betekenisvol gebruikt

In de sectie met verborgen inhoud die begint met “Beveiligingsincidenten en datalekken” staat een hele zin in het strong-element.

User story

Ik lees de website met een schermlezer. Ik verwacht dat alleen woorden die echt belangrijk zijn een andere klemtoon krijgen.

Hoe te testen

Gebruik de WCAG Radar, optie Tekst, met “Sterke nadruk” en “Nadruk”, om deze elementen op de pagina te laten opvallen.

Oplossing

Gebruik het <strong>-element alleen als een woord of zinsdeel echt belangrijk is, of in spraak nadruk zou krijgen. Wil je tekst alleen visueel laten opvallen? Gebruik dan CSS, bijvoorbeeld een eigen class met font-weight: bold of font-style: italic.