Rapport:
Audit digitale toegankelijkheid website lezenvoordelijst.nl

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lezenvoordelijst.nl wordt bovenaan het logo getoond met de volledige tekst “de Bibliotheek Lezen voor de Lijst”, maar de alt-tekst is alleen “Lezen voor de Lijst”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel, zodat bezoekers die het plaatje niet kunnen zien ook precies weten wat er staat. Verander daarom het tekstalternatief zodat de volledige tekst van het logo erin staat: “de Bibliotheek Lezen voor de Lijst”. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op alle pagina’s van https://lezenvoordelijst.nl staat in de footer een logo als pseudo-element ::before. Dit logo heeft geen alternatieve tekst. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is, zodat bezoekers die het plaatje niet kunnen zien ook weten wat er staat. Voeg daarom een alt-tekst toe die de volledige tekst van het logo bevat. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15 staan artikelen met afbeeldingen, bijvoorbeeld “#Selfie”. Elke afbeelding bevat informatie over het leesniveau, zoals “1” of “s”, maar deze informatie staat niet in het tekstalternatief. Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben waarin de belangrijke informatie uit de afbeelding wordt beschreven.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/ staat bij de kop “1000 Serpentinen Angst” een afbeelding van een boek. Het tekstalternatief van de afbeelding herhaalt de koptekst “1000 Serpentinen Angst”. Deze afbeeldingen dragen geen andere informatie over dan al in de koptekst staat. Daarom kunnen ze als decoratief worden beschouwd. Laat in dat geval het alt-attribuut leeg om herhaling van de tekst te voorkomen.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/ staat onder de kop “Opmerkingen” een logo met de volledige tekst “GOETHE INSTITUT”, maar de alt-tekst is alleen “goethe”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel, zodat bezoekers die het plaatje niet kunnen zien ook precies weten wat er staat. Verander daarom het tekstalternatief zodat de volledige tekst van het logo erin staat: “GOETHE INSTITUT”. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/ staat helemaal onderaan de pagina een boekcover die geen alt-attribuut heeft.
Op https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/materialen/ staan afbeeldingen die geen alt-teksten en toegankelijke alternatieven hebben.

In het pdf-document op https://lezenvoordelijst.nl/media/4215890/website-voorwaarden.pdf staat op pagina 1 een logo zonder tekstalternatief (alt-tekst). Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is namelijk alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Voeg daarom alt-teksten toe aan deze informatieve afbeeldingen.

Op pagina 1 en 2 van het pdf-document op https://lezenvoordelijst.nl/media/4215998/lezen-voor-de-lijst-a4-niveau-overzicht-met-link-niveautest.pdf staan logo’s die als artefact zijn toegevoegd. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/ staat onder de tekst “Hieronder vind je een aantal filmpjes..” een video met gesproken tekst maar zonder ondertiteling. Voeg ondertiteling toe aan de video, zodat bezoekers die de video niet (goed) kunnen horen ook alle informatie krijgen.

Op pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/ staan onder de teksten “Filmpje 1..”, “Filmpje 2 ..” en “Filmpje 3 ..” video’s met een voice-over. Hoewel er ondertiteling aanwezig is, wordt deze automatisch gegenereerd en is daarom onnauwkeurig. Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen, zodat bezoekers die de video niet (goed) kunnen horen ook alle informatie krijgen. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er interpunctie ontbreekt en er fouten in kunnen zitten.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/ staan 4 video’s. Alle video’s bevatten op verschillende momenten tekst en/of logo’s, bijvoorbeeld in de eerste video onder de tekst “Hieronder vind je een aantal filmpjes die laten zien hoe je Lezenvoordelijst kunt gebruiken in de les” rond 0:08, 0:09 en 6:55. Er is echter geen media-alternatief of audiobeschrijving aanwezig. Deze video’s bevatten visuele informatie (zoals teksten en logo’s) die daardoor niet toegankelijk is voor blinde gebruikers. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit kan voor succescriterium 1.2.3 worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen moet een audiobeschrijving worden toegevoegd waarin de visuele elementen in de video worden beschreven, zoals namen, functies, logo’s en teksten.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/ staan 4 video’s. Deze video’s voldoen niet aan succescriterium 1.2.5, dat audiobeschrijving vereist voor video’s. Audiobeschrijving is nodig omdat er voldoende ruimte is binnen het bestaande audiospoor. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://lezenvoordelijst.nl is de tekst “Niveautest Lezen voor de lijst” opgenomen in een strong-element in plaats van een kop-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel. Hetzelfde probleem komt voor op de pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/titellijsten/, bijvoorbeeld bij “De lijsten”; op de pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/materialen/, bijvoorbeeld bij “Download hier de niveau-iconen”; en op de pagina https://lezenvoordelijst.nl/websitevoorwaarden/, bijvoorbeeld bij “Informatie en aansprakelijkheid”.

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staan artikelen. Elk artikel bevat een kop die niet als kop is opgemaakt, bijvoorbeeld “#Selfie”. Er is geprobeerd role="heading" toe te voegen, maar bij deze rol is ook het attribuut aria-level verplicht. Dat ontbreekt nu. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar 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. Dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. 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. Meestal is dit niveau instelbaar via de content-editor in het CMS, waardoor de HTML-code voor de kop automatisch wordt toegepast. Let erop dat wanneer deze tekst als kop wordt gemarkeerd, er mogelijk problemen kunnen ontstaan met SC 1.3.2; alle inhoud die bij de kop hoort moet ook onder die kop staan. Hetzelfde probleem komt voor op de pagina https://lezenvoordelijst.nl/duits/.

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staat onder de kop “Docenten Nederlands 12-15” een tablist-element met links, bijvoorbeeld “niveau Start”. Dit tablist-element bevat child-elementen die niet zijn toegestaan, namelijk li-elementen.
Hetzelfde probleem komt voor op de pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/, op de pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/titellijsten/, op de pagina https://lezenvoordelijst.nl/duits/ en op andere pagina’s.

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staat onder de kop “Docenten Nederlands 12-15” een lijst met links, bijvoorbeeld “niveau Start”. De child-elementen van deze lijst hebben niet de juiste parent role van een list. Hetzelfde probleem komt voor op de pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/, op de pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/titellijsten/, op de pagina https://lezenvoordelijst.nl/duits/ en op andere pagina’s.

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staat een link met pijltjes die wordt gebruikt om te sorteren. Hoewel visueel duidelijk is in welke volgorde de boeken zijn gesorteerd (oplopend of aflopend), staat deze informatie niet in de HTML. Dit kan worden opgelost door bijvoorbeeld verborgen tekst voor te lezen toe te voegen. Hetzelfde probleem komt voor op de pagina https://lezenvoordelijst.nl/duits/.

Op pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/titellijsten/ staan 2 alinea’s tekst die begint met “Speciaal voor leerlingen” in één p-element. Hetzelfde probleem komt ook voor bij de tekst “De redactie kent aan elk ... maken van het niveau”. Visueel lijken deze teksten uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code terugkomen. Zorg er daarom voor dat elke alinea in een eigen p-element wordt geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code. Hetzelfde probleem komt voor op de pagina https://lezenvoordelijst.nl/websitevoorwaarden/ onder “Informatie en aansprakelijkheid” en “Informatie van derden”.

Op pagina https://lezenvoordelijst.nl/nieuws/ is een kop van niveau 1 direct gevolgd door een andere kop van hetzelfde niveau, namelijk “Nieuws” en “Lezenvoordelijst.nl ziet er anders uit”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de juiste manier gebruikt.

Op pagina https://lezenvoordelijst.nl/nieuws/ zijn de teksten “December 2024”, “November 2024” en andere verkeerd opgemaakt met em-elementen in plaats van met juiste kop-elementen. Het em-element is bedoeld om woorden extra nadruk te geven en heeft daarmee een andere semantische waarde dan een kop. Dit element moet daarom niet gebruikt worden voor koppen. Markeer de tussenkopjes als h3-koppen voor een correcte structuur.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/ wordt boven de kop “Over de auteur” het strong‑element verkeerd gebruikt voor opmaakdoeleinden bij de tekst “Fysiek boek bij Jeugdbibliotheek”. Het strong‑element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Daarom mag dit element niet gebruikt worden om alleen een visueel effect (vetgedrukte tekst) te bereiken. Gebruik hiervoor CSS.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten staan onder “Opdrachten” secties met verborgen inhoud waarbij de elementen die de inhoud openen en sluiten niet als kop zijn gemarkeerd; er is geprobeerd een kop toe te voegen, maar role="tab" overschrijft die rol. De teksten waarmee delen van een accordeon worden in- en uitgeklapt fungeren als koppen voor die delen en moeten daarom ook de rol van kop hebben. Het gaat mis als deze teksten niet in de code als kop zijn gemarkeerd met een h‑element zoals h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande koprol niet wordt overschreven.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten staan secties met verborgen inhoud. Elke sectie bevat een tabel met gegevens. De tabelkoppen zijn verkeerd opgemaakt met strong in plaats van met juiste tabelkop‑elementen (th), bijvoorbeeld “Buch”. Een gegevenstabel heeft een rij of kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th‑elementen en de gegevens in td‑elementen.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten, in de sectie met verborgen inhoud “Niveau 4 - Opdrachten”, onder de tekst “Verweise auf andere Werke ..”, staat een lijst met 3 items met geneste lijsten, maar zonder juiste markering. Hetzelfde probleem komt voor bij andere lijsten in secties met verborgen inhoud. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen moeten de HTML‑elementen ol (lijst met cijfers) of ul (lijst met bullets) worden gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers vooraf het aantal items in de lijst aan, zodat een blinde bezoeker weet hoeveel informatie er nog komt.

Het pdf-document op https://lezenvoordelijst.nl/media/4215890/website-voorwaarden.pdf is deels getagd. Op pagina 2 is de tekst “Websitevoorwaarden KB, versie 1 juni 2017” niet getagd. Dit deel van het document kunnen wij hierdoor niet onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen zichtbaar worden die nu nog niet aan het licht zijn gekomen, bijvoorbeeld met de tekstlabels voor de formuliervelden of de relaties van de formuliervelden met de kolomkoppen erboven.

In het pdf-document op https://lezenvoordelijst.nl/media/4215890/website-voorwaarden.pdf zijn alle koppen niet als koppen opgemaakt. Zie bijvoorbeeld op pagina 1: “Website Voorwaarden”, “Informatie en aansprakelijkheid” en andere. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H-tag, zodat de tagstructuur gelijk is aan de visuele structuur. Hetzelfde probleem komt voor in het pdf-document op https://lezenvoordelijst.nl/media/4215998/lezen-voor-de-lijst-a4-niveau-overzicht-met-link-niveautest.pdf, bijvoorbeeld op pagina 1 bij “LEZEN VOOR DE LIJST”.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staat bij sommige artikelen witte tekst “NIEUW” op een oranje achtergrond (HEX#FF7320). De contrastratio is te laag en bedraagt 2,7:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt is, moet de contrastratio minimaal 4,5:1 zijn. Hetzelfde probleem doet zich voor op de pagina https://lezenvoordelijst.nl/duits/.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/ staat grijze tekst (HEX#868686) op een witte achtergrond. De contrastratio is te laag en bedraagt 3,6:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt is, moet de contrastratio minimaal 4,5:1 zijn.

In het PDF-document op https://lezenvoordelijst.nl/media/4215998/lezen-voor-de-lijst-a4-niveau-overzicht-met-link-niveautest.pdf staat witte tekst op een oranje achtergrond (HEX#E47109), bijvoorbeeld “Op welk niveau lees jij? Doe de test op jeugdbibliotheek.nl/niveautest". De contrastratio is te laag en bedraagt 3,2:1. Voor tekst kleiner dan 24px en niet vetgedrukt moet de contrastratio minimaal 4,5:1 zijn, en voor tekst groter dan 24px moet de contrastratio minimaal 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% in de sectie met verborgen inhoud “Niveau 4 - Opdrachten” een deel van de tekst niet getoond. Bijvoorbeeld de zin “Verweise auf andere Werke erkennen und in die eigene Interpretation integrieren, das Werk in einen Kontext setzen” is niet volledig zichtbaar. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://lezenvoordelijst.nl wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% in de footer het logo over een deel van de header “Over deze site” en een deel van de link “Home” geplaatst. Deze tekst is daardoor deels niet zichtbaar. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% in alle secties met verborgen inhoud een deel van de tekst niet getoond. In de sectie “Niveau 4 - Opdrachten” ontbreekt bijvoorbeeld de tekst “Verweise auf andere Werke erkennen und in die eigene Interpretation integrieren, das Werk in einen Kontext setzen”. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Op pagina https://lezenvoordelijst.nl/websitevoorwaarden/ wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de header “Websitevoorwaarden” gedeeltelijk niet getoond. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://lezenvoordelijst.nl hebben de links “Naar Jeugdbibliotheek.nl | 12-15 jaar” en “Naar Jeugdbibliotheek.nl | 15-18 jaar” een lichtblauwe focusrand (HEX #BFDEFF) wanneer deze via het toetsenbord focus krijgen. De contrastratio tussen deze focusrand en de witte achtergrond is 1,4:1. Ditzelfde probleem komt voor onder de header “Voor docenten en (onderwijs)professionals:”. Dit moet minimaal 3,0:1 zijn. Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen. Hetzelfde probleem doet zich voor op de pagina https://lezenvoordelijst.nl/contact/ met "Naar contactformulier"; op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ met de knop met het vergrootglaspictogram; op pagina https://lezenvoordelijst.nl/duits/ met de knop met het vergrootglaspictogram.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten wordt in de sectie met verborgen inhoud “Niveau 4 - Opdrachten” een deel van de tekst onzichtbaar en onleesbaar wanneer bezoekers de tekstweergave aanpassen volgens dit succescriterium. Bijvoorbeeld de zin “Verweise auf andere Werke erkennen und in die eigene Interpretation integrieren, das Werk in einen Kontext setzen” is dan niet volledig zichtbaar. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lezenvoordelijst.nl verschijnt op kleine schermen de knop “Menu”, waarmee het mobiele menu wordt geopend. Deze menuknop is echter niet toegankelijk via het toetsenbord. Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/ staan 4 YouTube-videospelers die gebruikmaken van sneltoetsen met één teken. De YouTube-speler gebruikt sneltoetsen, zoals de ‘k’ om de video te starten of stoppen en de ‘m’ om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze blijven namelijk actief wanneer de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Zie voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lezenvoordelijst.nl ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lezenvoordelijst.nl/test biedt de titel “404 - Lezen voor de lijst” geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft.

Het pdf-document https://lezenvoordelijst.nl/media/4215998/lezen-voor-de-lijst-a4-niveau-overzicht-met-link-niveautest.pdf heeft geen titel ingesteld in de documenteigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het pdf-document.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lezenvoordelijst.nl wordt een dialoogvenster geopend wanneer een bezoeker in de cookiebanner op de knop “Lees hier meer over cookies” klikt. Op dit moment kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen en terechtkomen op de onderliggende pagina. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden ingesteld. Wanneer het venster actief is, moet de toetsenbordfocus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het venster te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat.
Hetzelfde probleem doet zich voor bij het mobiele menu.

Op alle pagina’s van https://lezenvoordelijst.nl komt de toetsenbordfocus na de knop “Ik heb het begrepen” terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Hetzelfde probleem doet zich voor in het dialoogvenster dat opent na het klikken op de knop “Lees hier meer over cookies”.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lezenvoordelijst.nl staat bovenaan de website het logo met de zichtbare tekst “de Bibliotheek Lezen voor de Lijst” die tevens een link is. De toegankelijke naam van deze link is echter “Lezen voor de Lijst”. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. De bezoeker spreekt namelijk de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg er daarom voor dat de tekst die in het logo zichtbaar is ook voorkomt in de toegankelijke naam, bij voorkeur vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de metadata van het pdf-document op https://lezenvoordelijst.nl/media/4215998/lezen-voor-de-lijst-a4-niveau-overzicht-met-link-niveautest.pdf staat de taal ingesteld op “English” (en-US). Dit klopt niet: de taal van het document is Nederlands. Schermlezers lezen de tekst nu voor met de uitspraakregels van het Engels. Dat maakt het al snel onbegrijpelijk voor een blinde bezoeker. Verander de code in “nl”.

Uitkomst: Onvoldoende

Bevindingen: Op de website staan teksten in een andere taal zonder een lokaal taalattribuut. Zie bijvoorbeeld pagina https://lezenvoordelijst.nl/duits/niveau-5/1000-serpentinen-angst/?opdrachten in de secties met ingeklapte inhoud. Deze teksten hebben een lokaal taalswitch nodig zodat de schermlezer met de juiste uitspraakregels gaat voorlezen. Dit probleem komt op meerdere pagina’s voor.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lezenvoordelijst.nl opent de cookiemelding in een dialoogvenster. Dit dialoogvenster mist zowel een correcte ARIA-rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog". Hetzelfde probleem doet zich voor bij het modale dialoogvenster dat verschijnt na het klikken op de knop “Lees hier meer over cookies”.

Op alle pagina’s van https://lezenvoordelijst.nl verschijnt op kleine schermen de knop “Menu”, waarmee het mobiele menu wordt geopend. Deze menuknop heeft echter niet de juiste toegankelijke rol. Momenteel heeft deze knop de rol van een listitem. Hierdoor herkennen hulpmiddelen zoals schermlezers de knop niet als knop. Ook geeft de knop geen informatie over de status van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals mensen die een schermlezer gebruiken. De juiste rol voor de menuknop is “button”, omdat er een actie mee wordt uitgevoerd: het openen of sluiten van het menu. Als de knop niet de juiste rol heeft, kan een schermlezer of ander hulpmiddel de knop niet goed herkennen, waardoor deze moeilijker te gebruiken is. Zorg er daarom voor dat de knop “Menu” de juiste rol krijgt, door het button-element te gebruiken of role="button" toe te voegen. De status van het menu kan worden aangegeven door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die visueel verborgen is met CSS. Een andere optie is om het attribuut aria-expanded te gebruiken voor de menuknop. Dit attribuut moet de waarde “true” hebben wanneer het menu zichtbaar is en “false” wanneer het verborgen is.

Op alle pagina’s van https://lezenvoordelijst.nl verschijnt op kleine schermen de knop “Menu”. Deze knop opent een modaal dialoogvenster met het mobiele menu. Dit dialoogvenster mist zowel een correcte ARIA-rol als een toegankelijke naam. Hierdoor kunnen schermlezers niet doorgeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Mobiel menu") en role="dialog".

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staat onder de kop “Docenten Nederlands 12-15” een tablist-element met links, bijvoorbeeld “niveau Start”. De vereiste rollen ontbreken. De rol tablist vereist specifieke children met rollen zoals tab en tabpanel. Deze rollen ontbreken nu. Voeg de juiste rollen toe. Lees er meer over op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
Hetzelfde probleem doet zich voor op de pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/; op de pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/titellijsten/; op de pagina https://lezenvoordelijst.nl/duits/; en andere pagina’s.

Op pagina https://www.lezenvoordelijst.nl/docenten-12-15/ staat onder de kop “Docenten Nederlands 12-15” een tablist-element met links, bijvoorbeeld “niveau Start”. Hierbij wordt de rol tablist gebruikt. De toegankelijke naam ontbreekt echter. Zonder toegankelijke naam kan een schermlezer de functie en context van de tablist niet duidelijk doorgeven. Zie voor meer informatie over dit role: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
Hetzelfde probleem doet zich voor op de pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/; op de pagina https://lezenvoordelijst.nl/voor-mediatheken-bibliotheken/titellijsten/; op de pagina https://lezenvoordelijst.nl/duits/; en andere pagina’s.

Op pagina https://lezenvoordelijst.nl/docenteninformatie/praktijkvoorbeelden/ staan 4 iframes met video zonder een title-attribuut. Iframes moeten een goede beschrijving hebben. Die beschrijving komt meestal in het title-attribuut van het iframe. Daarin moet staan om welk type inhoud het gaat (bijvoorbeeld een podcast of video) en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Dankzij zo’n beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Uitkomst: Voldoende