Rapport:
Audit digitale toegankelijkheid website Bibliotheek Losser

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/ staat bovenaan de website een logo met de tekst “FUNDAMENT BIBLIOTHEEK”. In het alt-attribuut van dit logo staat echter “Logo Bibliotheek Losser ga naar de homepage”. De volledige zichtbare tekst uit het logo wordt dus niet weergegeven in het tekstalternatief. Hierdoor is het voor bezoekers die het logo niet kunnen zien niet duidelijk wat er precies in beeld staat. Omdat het logo in een link staat zonder zichtbare linktekst, wordt het tekstalternatief ook gebruikt als linktekst. Het tekstalternatief moet daarom aangepast worden naar: “Logo FUNDAMENT BIBLIOTHEEK, ga naar de homepagina”. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html is hetzelfde logo onder de kop “Lees online graphic novels en manga” op dezelfde manier geplaatst, met dezelfde tekortkoming.

Op pagina https://www.bibliotheeklosser.nl/ staat in de header de tekst “Zoeken in”. Deze tekst is niet opgenomen in de HTML-structuur, maar alleen via CSS zichtbaar gemaakt. Hierdoor is deze informatie niet beschikbaar voor hulpsoftware zoals schermlezers. De tekst “Zoeken in” moet in de HTML-code zelf geplaatst worden, zodat alle bezoekers, ook wie geen gebruik maakt van visuele weergave, toegang hebben tot deze informatie.

Op pagina https://www.bibliotheeklosser.nl/ bevat de zoekbalk in het bovenste menu een knop die uitsluitend bestaat uit een afbeelding van een vergrootglas. Deze afbeelding heeft geen tekstalternatief. Als een knop alleen bestaat uit een afbeelding, moet er altijd een alternatief worden toegevoegd dat de functie van de knop beschrijft. In dit geval moet bijvoorbeeld een alt-tekst aan het img-element worden toegevoegd, of het attribuut aria-label worden gebruikt. Ook kan een tekst gebruikt worden die visueel verborgen is, maar toegankelijk is voor schermlezers. Zonder zo’n oplossing is de functie van de knop niet duidelijk voor bezoekers die hulpsoftware gebruiken.

Op pagina https://www.bibliotheeklosser.nl/ verschijnt op kleinere schermen een sticky menu. Het menu-item met de tekst “Zoeken” opent een submenu waarin twee knoppen met een zoekicoon staan. Deze iconen bevatten geen alternatief tekst. Omdat het hier gaat om knoppen die alleen bestaan uit een afbeelding, moet een van de eerder beschreven oplossingen gebruikt worden om de functie van deze knoppen duidelijk te maken. Dit kan door een alt-tekst toe te voegen aan het img-element, het attribuut aria-label te gebruiken of door een visueel verborgen tekst te plaatsen die beschikbaar is voor hulpsoftware.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html staat onder de kop “Jeugd | 6-12 jaar” een link met de tekst “Jeugd & Jongeren”, met daarnaast een pijl-icoon. Dit icoon is toegevoegd met het ::before-pseudo-element in CSS. Hierdoor wordt het door schermlezers uitgesproken als “before”, wat verwarrend is. Het betreft een decoratief element dat geen aanvullende informatie biedt en moet daarom verborgen worden voor hulpsoftware. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html komt hetzelfde probleem voor bij de link “Jeugd | 6-12 jaar” onder de kop “Mediawijsheid”. Ook op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/0-6/voorleesfilmpjes/digitale-voorleestas.html is dit probleem aanwezig bij de link “Voorleesfilmpjes”.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html staan onder de link “Jeugd & Jongeren” meerdere die als links dienen. De alternatieve teksten beschrijven de bestemming van de link niet. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html geldt dit voor de meeste aanklikbare afbeeldingen. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/0-6/voorleesfilmpjes/digitale-voorleestas.html komt dit probleem voor bij de afbeeldingen onder de kop “Kies hier een Digitale Voorleestas”.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html staat onder de kop “Nieuw in de online Bibliotheek” een afbeelding met de alt-tekst “meisje met koptelefoon en smartphone”. Deze afbeelding is decoratief en geeft geen aanvullende informatie. Daarom moet het alt-attribuut leeg zijn (alt=""), zodat hulpsoftware deze afbeelding overslaat en alleen de relevante informatie op de pagina voorleest.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html bevat de carrousel afbeeldingen die informatief zijn. Deze afbeeldingen worden via CSS toegevoegd met behulp van het ::before-pseudo-element. Voor schermlezers is er daardoor geen tekstalternatief beschikbaar, waardoor de informatie in de afbeeldingen niet wordt overgebracht aan bezoekers die hulpsoftware gebruiken. Omdat het om informatieve afbeeldingen gaat, moet er een tekstalternatief aanwezig zijn. Dit kan door de afbeeldingen zichtbaar te maken via het img-element en de informatie in het alt-attribuut te plaatsen, of door de inhoud van de afbeelding als zichtbare tekst op de pagina toe te voegen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html staat onder de kop “NTR | Klokhuis - Wat is journalistiek” een video waarin gesproken wordt. De video bevat ondertiteling, maar deze is automatisch gegenereerd. Automatisch gegenereerde ondertiteling bevat vaak fouten en mist interpunctie, waardoor niet alle gesproken informatie correct wordt overgebracht. Video’s met gesproken tekst moeten altijd voorzien zijn van correcte ondertiteling die exact overeenkomt met wat er gezegd wordt. Alleen dan is de inhoud toegankelijk voor bezoekers die de video niet of niet goed kunnen horen.
Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html wordt in de video ook gesproken. De ondertiteling is ook hier automatisch gegenereerd en bevat dezelfde tekortkomingen. Voor een goede toegankelijkheid moet de ondertiteling handmatig gecontroleerd en aangepast worden, zodat alle informatie correct en volledig beschikbaar is voor bezoekers die ondersteuning nodig hebben.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html staat onder de kop “Comics Plus in het kort” een video. In deze video is vanaf 0:01 en vanaf 1:24 het logo “Comics Plus” in beeld. Vanaf 1:21 verschijnt ook het logo “NICHE ACADEMY” en vanaf 1:25 de tekst “Learn more at support.librarypass.com”. Deze visuele informatie wordt niet uitgesproken. Bezoekers die blind of slechtziend zijn, missen daardoor belangrijke inhoud. De visuele elementen in de video moeten daarom worden toegelicht via een audiobeschrijving, waarin namen, functies, logo’s en teksten worden benoemd. Als alternatief kan er een geschreven tekst met dezelfde informatie naast de video geplaatst worden, maar om te voldoen aan succescriterium 1.2.5 moet er in ieder geval een audiobeschrijving beschikbaar zijn.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html voldoet de video niet aan succescriterium 1.2.5. Dit criterium vereist een audiobeschrijving voor video’s waarin visuele informatie wordt getoond die niet via de gesproken tekst wordt overgebracht. In deze video is er voldoende ruimte binnen het bestaande audiotrack om een audiobeschrijving toe te voegen. Een media-alternatief, zoals een tekstuele beschrijving naast de video, is in dit geval niet meer toegestaan als oplossing. Een audiobeschrijving is noodzakelijk om de video toegankelijk te maken voor mensen die de visuele inhoud niet (goed) kunnen waarnemen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/ staat in de header een groep van twee radio-buttons met de labels “Catalogus” en “Site”, voorafgegaan door de tekst “Zoeken in”. Deze elementen vormen visueel een duidelijke groep, maar deze relatie is niet vastgelegd in de HTML-code. Bezoekers die hulpsoftware gebruiken, kunnen daardoor niet begrijpen dat deze opties bij elkaar horen. De oplossing is om de radio-buttons samen te voegen in een fieldset-element en deze een naam te geven met het legend-element. In het legend-element moet de tekst “Zoeken in” worden geplaatst.

Op pagina https://www.bibliotheeklosser.nl/ is een carrousel aanwezig. Onder de carrousel geven grijze stippen aan hoeveel slides beschikbaar zijn en welke slide op dat moment actief is. De stip die de actieve slide aangeeft, ziet er visueel anders uit, maar dit verschil is niet aanwezig in de HTML. Bezoekers die schermlezers gebruiken, krijgen hierdoor geen informatie over de huidige positie in de carrousel. Dit kan worden opgelost door ARIA-attributen toe te voegen of door een visueel verborgen tekst die de actieve status beschrijft.

Op pagina https://www.bibliotheeklosser.nl/word-lid-van-de-bibliotheek.html volgt de kop “Volwassen abonnement, vanaf 18 jaar” direct na de kop “Kies uit deze abonnementen”. Beide zijn koppen van niveau 3. Als er geen inhoud tussen staat, dan klopt de kopstructuur niet. Eén van de koppen moet aangepast worden naar een ander niveau of in tekstvorm worden weergegeven. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html is dit probleem aanwezig bij de koppen “Aan de slag met mediawijze thema’s” en “HoeZoMediawijs?”. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html komt dit voor bij de koppen “Comics Plus: lees online Engelse strips, graphic novels en manga” en “Klik”. Ook op andere pagina’s kunnen soortgelijke fouten in de kopstructuur voorkomen. De structuur moet zo aangepast worden dat de kopniveaus de hiërarchie en inhoud van de tekst juist weerspiegelen.

Op pagina https://www.bibliotheeklosser.nl/digitale-toegankelijkheid.html zijn de teksten “Huidige status” en “Contact” visueel opgemaakt als koppen, maar in de HTML zijn deze niet gemarkeerd als heading-elementen. Bezoekers die hulpsoftware gebruiken, kunnen daardoor de structuur van de pagina niet goed overzien en hebben moeite om snel naar een sectie te navigeren. Deze teksten moeten worden omgezet in daadwerkelijke heading-elementen, zodat ze functioneel als kop kunnen worden gebruikt. Op pagina https://www.bibliotheeklosser.nl/home/nieuws/boekenspeurtocht-meifun.html is ditzelfde probleem aanwezig bij de tekst “Kom van die bank af in de meivakantie! Help jij ons zoeken?”.

Op pagina https://www.bibliotheeklosser.nl/word-lid-van-de-bibliotheek.html staat onder de kop “Kies uit deze abonnementen” tekst die eruitziet als een opsomming. Deze tekst is echter niet als lijst gemarkeerd in de HTML. Er zijn drie opsommingen met zes, vijf en drie items. Om de structuur van de informatie duidelijk te maken voor hulpsoftware, moeten deze teksten worden omgezet in echte lijsten. Dit kan door gebruik te maken van ul- of ol-elementen, afhankelijk van het type opsomming. Hiermee kunnen schermlezers het aantal items aankondigen en krijgt een bezoeker die blind is een beter overzicht van de inhoud.

In het pdf-document op https://www.bibliotheek.nl/content/dam/landelijk/haal-meer-uit/jeugd-en-jongeren/0-6-jaar/voorleestassen/pdf/digitale-voorleestas-de-autocoureur.pdf ontbreken structurele coderingen. Hierdoor is de inhoud van het document niet toegankelijk voor schermlezers. Ook is het hierdoor niet mogelijk om het document volledig te onderzoeken op toegankelijkheidsproblemen. Er ontbreken onder andere semantische koppen en alternatieve teksten bij afbeeldingen. Door het document van een correcte codelaag te voorzien, kunnen deze problemen opgelost worden. Houd er rekening mee dat bij het toevoegen van structuur mogelijk nieuwe toegankelijkheidsproblemen zichtbaar worden die nu nog niet vastgesteld kunnen worden.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/klantenservice/contact/contactformulier.html bevat het formulier invoervelden voor persoonlijke informatie, zoals voornaam, achternaam en e-mailadres. Deze velden missen het attribuut autocomplete. Voor persoonlijke gegevens is het verplicht om dit attribuut te gebruiken. Browsers en hulpsoftware kunnen daarmee het invullen van formulieren ondersteunen, bijvoorbeeld door gegevens automatisch in te vullen. Voor het e-mailadres moet het attribuut autocomplete="email" worden gebruikt. Een overzicht van de verplichte waarden voor het attribuut autocomplete is te vinden op: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ verschijnt op een klein scherm een sticky navigatiemenu. Wanneer de opties “Home”, “Menu” of “Zoeken” via het toetsenbord focus krijgen, verandert alleen de kleur van de icoontjes en tekst van wit naar oranje. Deze kleurverandering is de enige zichtbare aanduiding van focus. Voor bezoekers met een visuele beperking of kleurenblindheid is dit verschil vaak niet goed zichtbaar. Ook voor mensen die met het toetsenbord navigeren is het essentieel dat duidelijk te zien is waar de focus zich bevindt. Daarom moet er een extra visuele aanduiding worden toegevoegd, zoals een dikkere rand, een onderstreping of een achtergrondverandering. Dit probleem komt ook voor wanneer het item “Zoeken” is geopend: de knop met het zoekicoon toont dan alleen een kleurverandering als focusaanduiding.

Op pagina https://www.bibliotheeklosser.nl/klantenservice/contact/contactformulier.html wordt bij het veld “Wil je een bijlage meesturen?” een aangepaste focusstijl gebruikt die alleen bestaat uit een verandering van de achtergrondkleur. Alleen kleur gebruiken om focus aan te geven is echter onvoldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is dit vaak niet duidelijk zichtbaar. Een goed zichtbare focusindicator is noodzakelijk. Dit kan het beste gerealiseerd worden met een aanvullende visuele aanduiding, zoals een rand, een onderstreping of een andere achtergrond.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/ staat in de header een zoekveld. In hover- en focus-toestand heeft de grijze plaatshoudertekst (HEX #757575) onvoldoende contrast tegen de achtergrond. In hover-toestand is de achtergrond lichtgrijs (HEX #EDEDED), wat resulteert in een contrastratio van 3,9:1. In focus-toestand is de achtergrond lichtoranje (HEX #FDE5D0) en bedraagt de contrastratio 3,8:1. Beide verhoudingen zijn lager dan de vereiste minimumwaarde van 4,5:1 voor tekst. De plaatshoudertekst moet daarom aangepast worden zodat deze voldoende contrasteert met de achtergrond.

Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ verschijnt op kleine schermen in de footer een menubalk. De tekst van de menu-items “Home”, “Menu” en “Zoeken” is oranje (HEX #FF7320) en wordt weergegeven tegen een grijze achtergrond (HEX #39373A) wanneer deze items via het toetsenbord focus krijgen. De contrastratio in deze toestand is 4,3:1, wat lager is dan de vereiste 4,5:1 voor gewone tekst. De kleur van de tekst of achtergrond moet worden aangepast om aan de minimale contrastratio te voldoen.

Op pagina https://www.bibliotheeklosser.nl/zoekresultaten.website.html?q=boek bevindt zich in de zijbalk onder de kop “Verfijnen op resultaten” een filtersectie met accordeons “Type” en “Trefwoorden”. Wanneer deze accordeons via het toetsenbord focus krijgen, verandert de tekstkleur van zwart naar oranje (HEX #FF7320) tegen een witte achtergrond. De contrastratio van 2,7:1 is te laag voor tekst kleiner dan 24 pixels en niet vetgedrukt. De tekstkleur moet worden aangepast zodat deze voldoet aan de minimale contrastratio van 4,5:1.
Op dezelfde pagina hebben de getallen die het aantal resultaten per type of trefwoord tonen een te laag contrast. De getallen zijn donkergrijs (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED), met een contrastratio van 3,9:1. Voor leesbare tekst moet dit minimaal 4,5:1 zijn. De kleur van de tekst of achtergrond moet worden aangepast om aan deze eis te voldoen.

Op pagina https://www.bibliotheeklosser.nl/onze-vestigingen/vestiging.12153392.html/fundament—bibliotheek-losser/ staat onder de koppen “Openingstijden” en “Afwijkende openingstijden” grijze tekst (HEX #757575) op een lichtoranje achtergrond (HEX #FDE5D0). Deze combinatie heeft een contrastratio van 3,8:1. Aangezien de tekst kleiner is dan 19 pixels, is de vereiste minimumcontrastverhouding 4,5:1. De kleuren moeten worden aangepast om aan deze norm te voldoen.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html staat in de carrousel blauwe tekst (HEX #128ECC) met het woord “Plus” op een gele achtergrond (HEX #F9D407). De contrastratio van deze combinatie is 2,5:1. Voor grote tekst moet de minimale contrastratio 3,0:1 zijn. De kleuren moeten worden aangepast om aan deze vereiste te voldoen.
In het PDF-document op https://www.bibliotheek.nl/content/dam/landelijk/haal-meer-uit/jeugd-en-jongeren/0-6-jaar/voorleestassen/pdf/digitale-voorleestas-de-autocoureur.pdf staat witte tekst op een oranje achtergrond (HEX #EE7203), met een contrastratio van 2,98:1. Voor kleine tekst is een contrastratio van 4,5:1 vereist, en voor grote tekst minimaal 3,0:1. De huidige combinatie voldoet dus niet en de tekstkleur moet worden aangepast om aan de toegankelijkheidsrichtlijnen te voldoen.

In het PDF-document op https://www.bibliotheek.nl/content/dam/landelijk/haal-meer-uit/jeugd-en-jongeren/0-6-jaar/voorleestassen/pdf/digitale-voorleestas-de-autocoureur.pdf staan links met blauwe tekst (HEX #275B9B) op een oranje achtergrond (HEX #EE7203), waaronder “De Voorleeshoek”, “kleurplaat” en “het liedje”. De contrastratio van deze combinatie is 2,3:1, wat lager is dan de vereiste 4,5:1 voor tekst. De kleur van de tekst of achtergrond moet worden aangepast om het contrast voldoende te verhogen.
In hetzelfde PDF-document staat de witte tekst “Digitale Voorleestas #ikleesthuis” op een blauwe achtergrond (HEX #00ADA0). De contrastratio is 2,8:1 en dat is lager dan de vereiste minimale waarde van 4,5:1. Deze tekst moet aangepast worden zodat het contrast tussen tekst en achtergrond voldoet aan de toegankelijkheidsnormen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ bevat de cookiebanner een knop met de tekst “Lees hier meer over cookies” die een dialoogvenster opent. In dit venster zijn de knoppen “Akkoord” en “Niet akkoord” voorzien van een aangepaste focusindicator in de vorm van een oranje rand (HEX #FF7320) tegen een witte achtergrond. De contrastratio van deze combinatie is 2,7:1. Omdat dit een aangepaste focusstijl betreft die via CSS is toegevoegd, geldt een minimale contrastratio van 3,0:1. Deze eis wordt niet gehaald. Hetzelfde probleem komt voor bij meerdere andere elementen op de website, zoals op pagina https://www.bibliotheeklosser.nl/ bij de links “Klik hier voor meer nieuws” en “Meer romans”.

Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ verandert de focuskleur van sommige links van zwart naar oranje (HEX #FF7320), waarbij de oranje rand getoond wordt tegen een lichtoranje achtergrond (HEX #FDE5D0). De contrastratio van deze combinatie is slechts 2,2:1, wat lager is dan de vereiste minimumwaarde van 3,0:1 voor aangepaste focusaanduidingen. Dit probleem komt voor bij verschillende links, waaronder “Bekijk ons filmpje” en “Naar de genres”. Deze contrastcombinatie moet worden aangepast om te voldoen aan de richtlijnen. Hetzelfde probleem is aanwezig op andere pagina’s.

Op pagina https://www.bibliotheeklosser.nl/ staan onder de header knoppen voor de carrousel. Deze knoppen bestaan uit grijze bolletjes (HEX #999999) op een witte achtergrond, met een contrastratio van 2,8:1. De minimale vereiste contrastratio voor knoppen is 3,0:1. De kleur van de bolletjes of de achtergrond moet worden aangepast om aan deze eis te voldoen. Hetzelfde probleem komt voor op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html.

Op pagina https://www.bibliotheeklosser.nl/zoekresultaten.website.html?q=boek&pagetype=Prentenboek bevindt zich in de zijbalk een filtersectie met de accordeons “Type” en “Trefwoorden”. Wanneer deze accordeons via het toetsenbord focus krijgen, verandert de kleur van de pijltjesicoontjes van zwart naar oranje (HEX #FF7320). Tegen de witte achtergrond levert dit een contrastratio op van 2,7:1. Voor informatieve elementen zoals icoontjes geldt een minimale contrastratio van 3,0:1. De kleur van het icoon moet worden aangepast om aan deze toegankelijkheidseis te voldoen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/klantenservice/contact/contactformulier.html maakt het formulier gebruik van HTML5-validatie voor alle invoervelden. De foutmeldingen die bij onjuiste of ontbrekende invoer worden weergegeven, verdwijnen automatisch na korte tijd. Dit betekent dat er een tijdslimiet is ingesteld voor het waarnemen van deze meldingen. Bezoekers die hulpsoftware gebruiken of moeite hebben met snelle interactie, krijgen daardoor mogelijk niet de kans om de foutmelding te lezen. Het is noodzakelijk om handmatig foutmeldingen aan het formulier toe te voegen die zichtbaar blijven totdat ze zijn opgelost. Controleer of dit probleem ook voorkomt bij andere formulieren op de website en pas indien nodig ook daar de foutafhandeling aan.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/word-lid-van-de-bibliotheek.html ontbreekt het title-element. Elke webpagina moet een title-element bevatten met unieke tekst die de inhoud van de pagina beschrijft. Deze tekst wordt weergegeven in het tabblad van de browser en helpt bezoekers om te navigeren tussen verschillende geopende pagina’s. Het title-element moet worden toegevoegd aan de HTML van de pagina. De inhoud van dit element moet duidelijk maken waar de pagina over gaat, bijvoorbeeld: “Lid worden van de Bibliotheek – Bibliotheek Losser”.

In het PDF-document op https://www.bibliotheek.nl/content/dam/landelijk/haal-meer-uit/jeugd-en-jongeren/0-6-jaar/voorleestassen/pdf/digitale-voorleestas-de-autocoureur.pdf is geen documenttitel ingesteld in de bestandsmetadata. Zelfs als de titel visueel op de eerste pagina staat, moet ook in de PDF-eigenschappen een officiële documenttitel worden ingesteld. Wanneer een PDF wordt geopend in een browser of lezer, zoals Adobe Acrobat, wordt zonder documenttitel de bestandsnaam getoond, bijvoorbeeld “digitale-voorleestas-de-autocoureur.pdf”. Als een titel is ingesteld, wordt deze in plaats van de bestandsnaam weergegeven. Dit helpt bezoekers, ook met beperkingen, sneller te bepalen of een document relevant is. De titel kan worden ingesteld via de documenteigenschappen van het bronbestand of direct in de PDF.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ opent de knop “Lees hier meer over cookies” in de cookiebanner een dialoogvenster. Op dit moment kan de toetsenbordfocus het dialoogvenster verlaten en naar de onderliggende pagina gaan, terwijl het venster nog open is. Bij dit soort dialoogvensters moet de toetsenbordfocus binnen het venster blijven zolang het geopend is. De focus mag pas terugkeren naar de pagina als de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Een andere mogelijkheid is om het venster automatisch te sluiten zodra de focus het venster verlaat. Dit voorkomt verwarring bij bezoekers die hulpsoftware of alleen het toetsenbord gebruiken.

Wanneer de website https://www.bibliotheeklosser.nl/ op een klein scherm wordt bekeken, verschijnt onderaan de pagina een menuknop waarmee een mobiel menu geopend kan worden. Ook in dit geval kan de toetsenbordfocus het menu verlaten terwijl het nog openstaat, waardoor de focus naar de onderliggende pagina gaat. Dit zorgt voor een verwarrende ervaring voor bezoekers die het toetsenbord gebruiken. De focus moet binnen het mobiele menu blijven totdat de bezoeker bewust het menu sluit via de sluitknop of de ESC-toets. Het menu kan ook automatisch sluiten zodra de focus het menu verlaat.

Op pagina https://www.bibliotheeklosser.nl/zoekresultaten.website.html?q=boek&pagetype=Prentenboek wordt na het gebruik van de zoekknop in de header de toetsenbordfocus direct verplaatst naar de zoekresultaten, terwijl de visuele volgorde op de pagina aangeeft dat eerst de filteropties in de zijbalk aan de beurt zijn. Deze volgorde is niet logisch voor bezoekers die met het toetsenbord navigeren. Interactieve elementen moeten een volgorde hebben die overeenkomt met hun visuele positie. De toetsenbordfocus moet daarom na de zoekknop naar het volgende relevante element gaan, in dit geval de filtersectie in de zijbalk. Hierdoor wordt de pagina beter bruikbaar voor bezoekers met een visuele, motorische of cognitieve beperking.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html staat onder de kop “Mediawijsheid” een link met de tekst “Jeugd | 6-12 jaar”. Deze link heeft de toegankelijke naam “before Jeugd | 6-12 jaar” doordat er een icoon is toegevoegd met het ::before-pseudo-element. Deze extra tekst maakt de link onduidelijk, vooral voor bezoekers die gebruik maken van schermlezers of moeite hebben met tekstverwerking. De toegankelijke naam van een link moet duidelijk maken waar de link naartoe leidt, zonder verwarring of overbodige elementen. Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html komt ditzelfde probleem voor bij de link “Jeugd | 6-12 jaar” onder de kop “Mediawijsheid”. Ook op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/0-6/voorleesfilmpjes/digitale-voorleestas.html bij de link “Voorleesfilmpjes” is dit probleem aanwezig.

Op pagina https://www.bibliotheeklosser.nl/word-lid-van-de-bibliotheek.html staan onder de kop “Onze Bibliotheek abonnementen” twee links met dezelfde linktekst: “Lid worden”. Deze teksten zijn te algemeen en maken niet duidelijk waar de link naartoe leidt. Dit veroorzaakt verwarring, vooral voor bezoekers met een cognitieve beperking of voor wie afhankelijk is van hulpsoftware. Linkteksten moeten een duidelijke beschrijving geven van de bestemming. Een oplossing is om de tekst aan te vullen, bijvoorbeeld met “Lid worden van het jeugdabonnement” of “Lid worden van het volwassenenabonnement”. Als deze extra informatie al visueel op de pagina staat, mag de aanvullende tekst ook visueel verborgen worden.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html hebben de afbeeldingen bij de evenementen alt-teksten die niet duidelijk maken wat het doel is van de bijbehorende link. Dit probleem is eerder beschreven bij succescriterium 1.1.1. De alt-tekst van een afbeelding die als link fungeert, moet beschrijven wat de bezoeker kan verwachten wanneer op de afbeelding wordt geklikt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op verschillende pagina’s van de website staan navigatieknoppen met pijlen boven en onder carrousels. Deze knoppen hebben als toegankelijke naam “Vorige” en “Volgende”. Deze namen geven onvoldoende informatie over de functie van de knoppen. Voor bezoekers die hulpsoftware gebruiken, moet duidelijk zijn wat deze knoppen doen. De toegankelijke namen moeten daarom specifieker zijn, zoals “Vorige slide” en “Volgende slide”. Dit probleem komt onder andere voor bij de carrousel onder de header en onder de kop “Nieuwe boeken” op pagina https://www.bibliotheeklosser.nl/, bij de navigatieknoppen op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html en op andere pagina’s van de website.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html staat onder de kop “NTR | Klokhuis - Wat is journalistiek” een iframe met daarin een video. Het iframe heeft als title-attribuut “Video”. Deze titel beschrijft alleen het type inhoud, maar geeft geen informatie over het onderwerp van de video. De iframes moeten een unieke en betekenisvolle titel hebben, zodat bezoekers die blind zijn kunnen bepalen of de inhoud relevant is. De titel van dit iframe moet daarom worden aangepast naar bijvoorbeeld “Video over journalistiek van NTR | Klokhuis”. Een vergelijkbaar probleem is aanwezig op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/digitaal-aanbod-lezen/comics-plus.html, waar het iframe met de video ook alleen de generieke titel “Video” heeft. Ook daar moet een beschrijvende en unieke titel worden toegevoegd.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, bijvoorbeeld op https://www.bibliotheeklosser.nl/, is in de header een groep met twee radio-buttons aanwezig: “Catalogus” en “Site”. Wanneer deze knoppen via het toetsenbord worden gefocust, is de focus niet waarneembaar. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals radio-buttons, zodat bezoekers die met het toetsenbord navigeren kunnen zien waar ze zich bevinden en weten wanneer ze kunnen interageren.

Bij het eerste bezoek aan de website verschijnt er bovenaan een cookiebanner. De knop “Lees hier meer over cookies” opent een dialoogvenster waarin een sluitknop met een “x” aanwezig is. Op deze knop is de toetsenbordfocus niet zichtbaar. Ook hier geldt dat de focus altijd duidelijk zichtbaar moet zijn op interactieve elementen. Bezoekers moeten kunnen herkennen welk element op dat moment actief is, zodat ze correct kunnen navigeren en interacteren met de inhoud.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12/mediawijsheid.html staan meerdere afbeeldingen die functioneren als links. Voorbeelden zijn de afbeeldingen onder de koppen “Aan de slag met mediawijze thema’s” en “Schermtijd en mediagebruik”. Deze afbeelding-links zijn focusbaar, maar wanneer ze focus krijgen via het toetsenbord, is dat visueel niet zichtbaar. De focus moet ook hier duidelijk worden aangegeven. Hetzelfde probleem komt voor op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html bij de afbeeldingen onder de kop “Mediawijsheid”. Op al deze interactieve afbeelding-links moet een duidelijke visuele focusstijl worden toegevoegd zodat toetsenbordgebruikers weten waar ze zich op de pagina bevinden.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ staat bovenaan de pagina een logo met de zichtbare tekst “FUNDAMENT BIBLIOTHEEK”. De toegankelijke naam van de link waarin het logo is opgenomen luidt echter “Logo Bibliotheek Losser ga naar de homepage”. Deze naam komt niet overeen met de zichtbare tekst. Voor bezoekers die spraaksoftware gebruiken, is het daardoor niet mogelijk om de link met spraak te activeren. Spraakgestuurde systemen herkennen alleen commando’s gebaseerd op de zichtbare tekst. De toegankelijke naam moet daarom worden aangepast zodat deze de zichtbare tekst uit het logo bevat, bij voorkeur vooraan. Een correcte toegankelijke naam zou bijvoorbeeld zijn: “FUNDAMENT BIBLIOTHEEK, ga naar de homepagina”.

Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ bevat de header een zoekveld met de zichtbare placeholdertekst “Waar ben je naar op zoek?”. De toegankelijke naam van dit veld is echter ingesteld op “Zoekopdracht”. Deze naam komt niet overeen met de tekst die de bezoeker ziet. Voor gebruikers van spraaksoftware is het hierdoor niet mogelijk om het zoekveld met een gesproken commando te activeren. De toegankelijke naam van het zoekveld moet worden aangepast zodat de zichtbare tekst “Waar ben je naar op zoek?” erin voorkomt, bij voorkeur aan het begin. Het is ook toegestaan om deze tekst exact als toegankelijke naam te gebruiken.

Op pagina https://www.bibliotheeklosser.nl/jeugd-en-jongeren/6-12.html staat een link met de zichtbare tekst “Boeken op onderwerp”, maar de toegankelijke naam van deze link is “Digitaal vaardig”. Omdat de zichtbare tekst niet overeenkomt met de toegankelijke naam, kunnen bezoekers die spraakbediening gebruiken deze link niet activeren. De link moet aangepast worden zodat de toegankelijke naam de zichtbare tekst “Boeken op onderwerp” bevat, bij voorkeur vooraan in de naam. Hierdoor wordt de link herkenbaar en bruikbaar voor spraakgestuurde systemen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/ is het lang-attribuut onjuist ingesteld als lang="nl_NL". Deze waarde wijkt af van de correcte notatie volgens de HTML-specificaties. De juiste schrijfwijze voor het aangeven van de primaire taal van een pagina is lang="nl-NL". Schermlezers gebruiken deze taalcode om de juiste uitspraakregels toe te passen. Bij een onjuiste code, zoals nl_NL, kunnen woorden verkeerd worden uitgesproken, wat de begrijpelijkheid van de inhoud ernstig belemmert.
Hetzelfde probleem komt voor op pagina https://www.bibliotheeklosser.nl/home/nieuws.html en op pagina https://www.bibliotheeklosser.nl/home/nieuws/boekenspeurtocht-meifun.html. Ook daar moet het lang-attribuut op het html-element worden aangepast naar lang="nl-NL". Zo wordt ervoor gezorgd dat schermlezers de tekst correct voorlezen en de inhoud voor alle bezoekers goed toegankelijk is.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheeklosser.nl/klantenservice/contact/contactformulier.html wordt HTML5-validatie gebruikt in het formulier. Bij het indienen van onjuiste of onvolledige gegevens worden standaard HTML5-foutmeldingen getoond. Deze foutmeldingen worden niet in alle browsers en door alle schermlezers op dezelfde manier ondersteund. Ze zijn soms onduidelijk of onvolledig, waardoor bezoekers die hulpsoftware gebruiken het formulier mogelijk niet goed kunnen invullen. Voeg daarom altijd eigen foutmeldingen toe die duidelijk en toegankelijk zijn. Controleer of er op andere pagina’s ook formulieren aanwezig zijn die gebruikmaken van standaard HTML5-validatie en pas dit daar ook aan.

Op pagina https://www.bibliotheeklosser.nl/klantenservice/contact/contactformulier.html bevat het formulier meerdere verplichte velden die aangeduid zijn met een asterisk (*). Wanneer een asterisk wordt gebruikt om verplichte velden aan te duiden, moet boven het formulier een duidelijke instructie worden toegevoegd, zoals: “Velden gemarkeerd met * zijn verplicht”. Dit zorgt voor duidelijkheid voor alle bezoekers, inclusief mensen die gebruikmaken van hulpsoftware.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ opent de knop “Lees hier meer over cookies” een dialoogvenster, maar in de code wordt deze functionaliteit niet aangegeven. Voeg aan de knop het attribuut aria-haspopup="dialog" toe om aan te geven dat de knop een dialoogvenster opent. De cookiebanner heeft niet de juiste rol om aan te geven dat dit een dialogvenster is.

Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ bevat de zoekbalk in het hoofdmenu een zoekknop zonder toegankelijke naam. Hierdoor is voor bezoekers die een schermlezer gebruiken niet duidelijk wat deze knop doet. De knop moet een toegankelijke naam krijgen.

Op kleine schermen is op alle pagina’s van https://www.bibliotheeklosser.nl/ een menu onderaan de pagina aanwezig. Het menu-item “Zoeken” opent een venster waarin twee zoekbalken staan met knoppen die eveneens geen toegankelijke naam hebben. Ook deze knoppen moeten worden voorzien van een duidelijke toegankelijke naam.

Op alle pagina’s van de website https://www.bibliotheeklosser.nl/ is op kleine schermen een vast menu aanwezig dat is opgebouwd met een ul-element met role="menubar" en li-elementen met role="menuitem". Deze ARIA-rollen zijn in deze context onnodig en kunnen tot problemen leiden. Daarnaast wordt binnen de submenu’s een geneste ul gebruikt met role="menu", maar de li-elementen hebben role="none" en bevatten links zonder duidelijke rol of semantiek. Hierdoor ontstaat een inconsistente en incorrecte structuur, waarbij de rol menuitem ontbreekt binnen een menurol. Verder wordt role="checkbox" toegepast op container-elementen van het menu, terwijl deze rol bedoeld is voor invoervelden met een aan/uit-toestand. Het gebruik van deze rol op structurele of interactieve elementen buiten formuliercontext is niet correct. Omdat een standaard geneste lijst met links al toegankelijk is zonder extra rollen, is het beter om role="menubar", role="menu", role="menuitem" en role="checkbox" volledig te verwijderen. Voor uitklapbare menu’s kunnen de correcte ARIA-attributen worden toegepast, zoals aria-haspopup="true" en aria-expanded="true" of "false", op het activerende element. Dit sluit beter aan bij de structuur die wordt aanbevolen in de W3C-richtlijnen: https://www.w3.org/WAI/ARIA/apg/patterns/menu/.

Uitkomst: Voldoende