Rapport:
Audit digitale toegankelijkheid van website van De bibliotheek Rijn en Venen

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.bibliotheekrijnenvenen.nl/ staat boven de kop "In alle vestigingen" een decoratieve afbeelding. Deze afbeelding heeft een alt-attribuut dat alleen een spatie bevat, die niet wordt genegeerd door schermlezers. Zorg ervoor dat alle decoratieve img-elementen een leeg alt-attribuut hebben: alt="".

Op pagina https://www.bibliotheekrijnenvenen.nl/professionals/digitaal-aanbod-lezen.html staat onder het kopje "Voor 0 - 18 jaar" een decoratieve afbeelding. Het tekstalternatief is "lenerspas". Een decoratieve afbeelding geeft geen extra informatie en mag daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt="").

Het PDF-document op https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/tarieven-narrowcasting-bibliotheek-rijn-en-venen-2024.pdf bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Zie de afbeelding met tekst bovenaan en het logo met tekst "de Bibliotheek Rijn en Venen" onderaan. Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.bibliotheekrijnenvenen.nl/activiteiten/duurzaamheid.html bevat een video met een voice-over. Er zijn wel ondertitels, maar die worden automatisch gegenereerd en zijn onnauwkeurig. Bijvoorbeeld, rond 0:05 is de tekst " Het Duurzaamheidsplein" vertaald in "dus weyts plein" of rond 0:37 is de tekst " evenementen" vertaald in "uitvindingen". Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://www.bibliotheekrijnenvenen.nl/ wordt een video gepresenteerd onder het kopje "De reis van je reservering bij Bibliotheek Rijn en Venen". De video bevat op verschillende punten tekst en logo's (bijvoorbeeld rond 0:01 en 2:15). Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen. Hetzelfde probleem wordt gezien met video's op de pagina's https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html, https://www.bibliotheekrijnenvenen.nl/activiteiten/duurzaamheid.html en https://www.bibliotheekrijnenvenen.nl/digitaal/IDO.html.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op de homepage https://www.bibliotheekrijnenvenen.nl/ voldoet niet aan criterium 1.2.5, dat een audiobeschrijving voor video's vereist. Specifiek voor deze video is audiobeschrijving nodig (niveau AA). Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien. Zie dezelfde problemen op de pagina's https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html, https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html, https://www.bibliotheekrijnenvenen.nl/activiteiten/duurzaamheid.html en https://www.bibliotheekrijnenvenen.nl/digitaal/IDO.html.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bibliotheekrijnenvenen.nl/ staat een groep keuzerondjes, voorafgegaan door de tekst "Zoeken in". Hoewel ze visueel zijn gegroepeerd, is deze relatie niet programmatisch gedefinieerd in de HTML. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. De tekst "Zoeken in" kan erin worden geplaatst.

In de header van de website https://www.bibliotheekrijnenvenen.nl/ staat een knop met een vergrootglaspictogram. De inhoud van de knop is de tekst "Vind" die visueel verborgen is en ook verborgen is voor de schermlezers met display:none. De CSS-code display:none zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de knop heeft hierdoor ook geen toegankelijke naam. Wanneer de pagina's op een klein scherm worden bekeken, zie je ook het submenu "Zoeken" in het sticky navigatiemenu onderaan. Dit probleem wordt gezien bij twee knoppen met een vergrootglaspictogram.

Op pagina https://www.bibliotheekrijnenvenen.nl/organisatie.html zijn de volgende teksten niet gemarkeerd als koppen: "Post- en bezoekadres", "E-mailadres", “Statutaire naam”, “Kamer van Koophandelnummer”, “BTW-nummer”, enz. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. 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. Hetzelfde probleem wordt gezien op de pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.htm. Dit is de tekst “We zijn in 2025 gesloten op”.

Op pagina https://www.bibliotheekrijnenvenen.nl/Service/abonnementen.html onder "Landelijk Lenen: leen overal in Nederland!" is een lijst met 2 items aanwezig, die geen goede markering heeft. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Zie ook pagina https://www.bibliotheekrijnenvenen.nl/organisatie.html. Onder "Contactpersonen" staat een lijst met twee items. Elke lijst bevat een sublijst, maar deze sublijsten hebben geen goede opmaak. Om dit probleem op te lossen, moet elke sublijst in een ul-element worden geplaatst binnen het bijbehorende lijstitem (li-element). Dit zorgt ervoor dat hulptechnologieën zoals schermlezers de structuur correct interpreteren.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.html onder "Activiteiten" wordt de huidige pagina in de paginering visueel aangegeven (gekleurde cirkel), maar deze informatie is niet aanwezig in de code. Hierdoor is deze informatie niet beschikbaar voor bezoekers die een schermlezer gebruiken. Los dit bijvoorbeeld op door het aria-current attribuut toe te voegen.

De pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html bevat een formulier. De volgende label-elementen zijn niet expliciet gekoppeld aan de bijbehorende invoervelden: “Email”, “Voornaam”, “Achternaam” en “Woonplaats”. De label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html staat een formulier. Onder "Geboortedatum" staan drie invoervelden en "Geboortedatum" dient als groepslabel, maar dit label is niet programmatisch gekoppeld aan de betreffende groep. Hierdoor weten bezoekers die een schermlezer gebruiken niet dat er een relatie is tussen het groepslabel en de bijbehorende groep. Zorg dat het groepslabel in de code gekoppeld is aan de groep. Dit kan bereikt worden met aria-labelledby of door het formulier op de juiste manier te structureren met fieldset- en legend-elementen. Ditzelfde probleem wordt gezien bij het label "Sending lists" en gerelateerde selectievakjes.

Op pagina https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html, wordt een kop van niveau 3 “Uitgelicht” onmiddellijk gevolgd door een andere kop van hetzelfde niveau “Een sneeuwwitte bruiloft - Sarah Morgan”. Zie ook “Nog meer boekentips” en “Speciaal voor jeugd & jongeren”, “Lees of luister ook eens bij de online Bibliotheek” en “Nieuwe e-books in de collectie”. Als twee koppen van hetzelfde niveau (bijvoorbeeld h3) direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Onder het eerste h3-element mag een h4-element komen, of andere content, maar niet nog een keer een h3-element.

Het PDF-document https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/strategisch-beleidsplan22-25.pdf heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

In het PDF-document op https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/tarieven-narrowcasting-bibliotheek-rijn-en-venen-2024.pdf is sommige tekst niet getagged. Het gaat om “Organisaties kunnen adverteren..”.

In het PDF-document op https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/tarieven-narrowcasting-bibliotheek-rijn-en-venen-2024.pdf wordt de heading-tag op onjuiste wijze gebruikt om gewone tekst visueel te vergroten. De tekst "bibliotheekrijnenvenen.nl" onderaan is opgemaakt alsof het een koptekst is, terwijl het geen koptekst is. Gebruik de juiste tag voor de tekst.

In het PDF-document op https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/tarieven-narrowcasting-bibliotheek-rijn-en-venen-2024.pdf staat een gegevenstabel. De juiste markering ontbreekt. De cellen in de eerste kolom onder "Vestiging" zijn niet gemarkeerd als kopcellen. Een datatabel heeft speciale tags nodig om de schermlezer te informeren dat er een tabelkop aanwezig is en dat deze tabelkop een relatie heeft met de onderliggende datacellen. De cellen in de koprij van de tabel moeten worden gemarkeerd met th-tags, terwijl de datacellen moeten worden gemarkeerd met td-tags.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Pagina https://www.bibliotheekrijnenvenen.nl/Service/abonnementen/school_instellingsabonnement.html bevat een formulier waarmee persoonlijke gegevens worden verzameld (bijvoorbeeld naam, e-mail, telefoonnummer). Dit zijn invoervelden met een leeg autocomplete-attribuut. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes. Ditzelfde probleem wordt gezien op de pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html.

Uitkomst: Onvoldoende

Bevindingen: Als de website https://www.bibliotheekrijnenvenen.nl/ wordt bekeken op een klein scherm, wordt het sticky menu onderaan de pagina's weergegeven. De items van dit menu hebben een aangepaste indicator voor toetsenbordfocus die te zien is aan de kleurverandering met het contrast lager dan 3:1. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende, omdat de contrastverhouding tussen de kleuren in de scherpgestelde en onscherpe stand minder dan 3,0:1 is. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.html staat onder "Activiteiten" een rode (HEX #FF0000) tekst "Er zijn geen plaatsen meer beschikbaar". De achtergrond is wit. De kleurcontrastverhouding is 4,0:1. Dit moet minstens 4,5:1 zijn.

Op pagina https://www.bibliotheekrijnenvenen.nl/collectie/cursussen.html wordt de tekst van knoppen die gedeelten met verborgen inhoud openen en sluiten oranje (HEX #FF7320) wanneer deze de toetsenbordfocus krijgen. Het contrast tegen de witte achtergrond is te laag: 2,7:1. Dit moet minstens 4,5:1 zijn. Hetzelfde probleem wordt gezien wanneer de bezoeker op deze knoppen klikt.

In het PDF-document https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/strategisch-beleidsplan22-25.pdf zijn er meerdere problemen met kleurcontrasten van de tekst tegen de achtergrond.
Op pagina 1 staat а witte tekst "De Bibliotheek" op de oranje (HEX #E67A15) achtergrond. De kleurcontrastverhouding is te laag: 2,9:1. Het contrast moet minstens 3,0:1 zijn.
Op pagina 1 staat de witte tekst "Strategisch beleidsplan 2022-2025" op de oranje (HEX #EE7203) achtergrond. Het contrast is 3,0:1. Deze tekst is klein en het contrast moet minstens 4,5:1 zijn. Dezelfde kleurencombinaties worden ook op andere pagina's gebruikt.
Op dezelfde pagina 1 staat een witte tekst "opent deuren" op de lichtoranje (HEX #F2CAA5) achtergrond. Het contrast is 1,5:1. Het contrast moet minstens 3,0:1 zijn.
Op pagina 2 staan oranje (HEX #EE770C) cijfers op een lichtoranje (HEX #FBCAA1) achtergrond. Het contrast is 1,9:1. Dit moet minstens 4,5:1 zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website https://www.bibliotheekrijnenvenen.nl/ wordt de oranje kleur (HEX #FF7320) gebruikt in informatieve elementen. Deze kleur heeft een te lage kleurcontrastverhouding ten opzichte van de achtergrond. Dit moet minimaal 3,0:1 zijn. Hierdoor 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. Hieronder staan de voorbeelden, maar ze zijn niet uitputtend.
Wanneer in de header van de website de links in het hoofdnavigatiemenu de toetsenbordfocus krijgen, is dit zichtbaar door een oranje toetsenbordfocusrand. De contrastverhouding tussen de toetsenbordfocusrand en de witte achtergrond is 2,7:1. Dit zijn de links “Collectie”, “Activiteiten”, “Taal”, enz.
Op de homepage https://www.bibliotheekrijnenvenen.nl/ zie de focus in links: “Lees meer over het IDO”, “Schrijf je in voor het spreekuur”, enz. Op pagina https://www.bibliotheekrijnenvenen.nl/organisatie.html zie focus in de link “Lees hier ons jaarverslag” en links in artikelen, zoals “Lees ons beleidsplan”. Op pagina https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html heeft de focus onvoldoende contrast bij de volgende links: “Ontdek de Maakplaats agenda!”, “Naar de agenda” en “Ga naar YouTube”. Zie ook andere pagina's.

Als de website https://www.bibliotheekrijnenvenen.nl/ wordt bekeken op een klein scherm, verschijnt het sticky menu onderaan de pagina's. Het menu-item "Zoeken" heeft een submenu. In dit submenu staan twee knoppen met een vergrootglaspictogram. Als deze knoppen toetsenbordfocus krijgen, verandert de kleur van het pictogram en de rand van de knop in oranje. De achtergrond is beige (HEX #FDE5D0). Het kleurcontrast is 2,2:1. Dezelfde kleurencombinatie wordt ook op andere pagina's gebruikt. Op de pagina's staan bijvoorbeeld links met een pijl bovenaan: https://www.bibliotheekrijnenvenen.nl/organisatie.html “Home”, https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html “Activiteiten”, https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html “Collectie”, en anderen.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html staat een formulier met invoervelden. De contrastverhouding tussen de grijze (HEX #AAAAAA) rand en de achtergrond van de pagina is 2,3:1. Zie de invoervelden: “Email”, “Voornaam”, “Achternaam” en “Woonplaats”. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekrijnenvenen.nl/Service/abonnementen/school_instellingsabonnement.html gebruikt een formulier alleen HTML5-validatie voor invoervelden.
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Dit PDF-document met https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/strategisch-beleidsplan22-25.pdf heeft geen titel. Een PDF-document moet een titel bevatten die duidelijk het onderwerp of het doel van het document beschrijft. Daarnaast dient deze titel in de titelbalk te worden getoond in plaats van de bestandsnaam. Dit is belangrijk voor bezoekers met verschillende beperkingen omdat het hen in staat stelt snel en gemakkelijk vast te stellen of de informatie in het document relevant is voor hen. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het PDF-document.
Hetzelfde probleem wordt gezien met het PDF-document op https://www.bibliotheekrijnenvenen.nl/dam/Organisatie/tarieven-narrowcasting-bibliotheek-rijn-en-venen-2024.pdf.

Uitkomst: Onvoldoende

Bevindingen: De eerste keer dat een bezoeker de website https://www.bibliotheekrijnenvenen.nl/ bezoekt, verschijnt het dialoogvenster “Cookies”. De toetsenbordfocus komt terecht in dit dialoogvenster. Bezoekers kunnen echter uit dit dialoogvenster navigeren met behulp van het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het dialoogvenster open blijft. Dit is geen logische focusvolgorde. Zorg dat de toetsenbordfocus binnen het dialoogvenster blijft, totdat de bezoeker het dialoogvenster sluit.

Als de website https://www.bibliotheekrijnenvenen.nl/ op een klein scherm wordt bekeken, verschijnt het sticky menu met de belangrijkste navigatie links onderaan de pagina's. De items van dit menu krijgen als laatste de toetsenbordfocus. Dit maakt de volgorde van de toetsenbordfocus niet logisch. De focusvolgorde moet bezoekers toegang geven tot de primaire navigatie vóór andere elementen van de pagina. In dit menu hebben de volgende items submenu's: "Menu" en "Zoeken". Het probleem is dat bezoekers die het toetsenbord gebruiken uit deze submenu's kunnen navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekrijnenvenen.nl/organisatie.html staat onder het kopje "Organisatie" een link met de tekst "Home" en een pijl. De toegankelijke naam van deze link is echter "voor Home". Zo'n toegankelijke naam beschrijft de bestemming van de link niet goed. Het woord "voor" geeft geen bruikbare informatie en kan verwarrend zijn voor gebruikers van schermlezers. Zie bijvoorbeeld andere pagina's met vergelijkbare links: https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html, https://www.bibliotheekrijnenvenen.nl/Service/abonnementen.html, enz.
Op pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.html wordt een soortgelijk probleem gezien onder "Activiteiten". Er is een link met een pijl naar links. De toegankelijke naam van de link is “before Vorige”.

Op pagina https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html onder "Komende activiteiten" staan afbeeldingen die fungeren als links, maar hun alt-attributen zijn leeg (alt=""), waardoor deze afbeeldingen verborgen blijven voor schermlezers. Hierdoor hebben deze links geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Hetzelfde probleem wordt ook op andere pagina's waargenomen: https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html onder “Speciaal voor jeugd & jongeren”, https://www.bibliotheekrijnenvenen.nl/404.html onder “Homepagina”, enz.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.html, onder “Activiteiten”, missen de pagineringlinks voldoende context. Terwijl ziende bezoekers begrijpen dat "1," "2," "3," enz. paginanummers voorstellen, is dit niet duidelijk voor slechtziende bezoekers of bezoekers die schermlezers gebruiken. Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’. Hetzelfde probleem wordt gezien bij de paginering met de links met pijlen.

Op pagina https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html onder "Leen e-books, luisterboeken en tijdschriften" staat de link "Ontdek meer". Deze tekst beschrijft de bestemming van de link niet adequaat, waardoor onduidelijkheid ontstaat, vooral voor gebruikers met cognitieve beperkingen of gebruikers die afhankelijk zijn van schermlezers. Zij kunnen een lijst van links opvragen om op die manier efficient te navigeren, hierbij valt de context van de link weg. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst aan te vullen met de titel van het artikel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

Op pagina https://www.bibliotheekrijnenvenen.nl/404.html staan links die alleen afbeeldingen bevatten zonder zichtbare tekst. De toegankelijke namen voor deze links komen van de alt-attributen van de afbeeldingen. Bijvoorbeeld, onder "Vestigingen" heeft een link met een afbeelding de toegankelijke naam "Afbeelding adres en openingstijden". Deze toegankelijke namen zijn niet betekenisvol en kunnen gebruikers van schermlezers in verwarring brengen omdat ze het doel van de links niet duidelijk beschrijven.

Advies. Op alle pagina's van de website https://www.bibliotheekrijnenvenen.nl/ komen artikelen voor die dubbele links bevatten: een link met een afbeelding en een andere met tekst, die beide naar dezelfde bestemming leiden. Op de homepage onder "Studeren in de Bibliotheek" staat bijvoorbeeld een link met een afbeelding met de toegankelijke naam "Als je hier klikt, ga je naar de openingstijden van de vestigingen" en een link met de tekst "Bekijk onze openingstijden". Beide links verwijzen bezoekers naar dezelfde pagina met de titel "Vestigingen". Gebruikers van schermlezers horen beide links afzonderlijk, ook al leiden ze naar dezelfde bestemming. Dit kan verwarrend zijn, omdat bezoekers kunnen denken dat het twee verschillende links zijn. Het zorgt ook voor onnodige herhaling en maakt navigatie moeilijker voor gebruikers van ondersteunende technologie. Een mogelijke oplossing is om deze dubbele links te combineren zodat zowel de afbeelding als de tekst deel uitmaken van één enkele link. Via CSS of JavaScript kan eventueel het klikbare gebied van de link vergroot worden. Op deze manier kondigen schermlezers slechts één link aan, wat de navigatie duidelijker en efficiënter maakt. Als er aparte links nodig zijn, zorg er dan voor dat ze consistente en betekenisvolle toegankelijke namen hebben, zodat schermlezers duidelijk begrijpen waar deze links naartoe leiden.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.bibliotheekrijnenvenen.nl/ verschijnen, als de website op een klein scherm wordt bekeken, onder "Verhalen uit de bieb" knoppen met pijlen. Deze knoppen hebben de volgende toegankelijke namen "Vorige" en "Volgende". Onder "Als eerste op de hoogte van het laatste nieuws!" staan dezelfde knoppen met dezelfde toegankelijke namen. Deze knoppen dienen echter verschillende doelen: ze worden gebruikt om meer inhoud in verschillende carousels te tonen. Dit kan verwarrend zijn voor gebruikers van schermlezers die vertrouwen op toegankelijke namen om het doel van de knoppen te begrijpen. Zorg ervoor dat elke knop een meer beschrijvende naam heeft die het doel beschrijft. Hetzelfde probleem is waargenomen op de pagina's: https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html onder "Komende activiteiten" en "Makersboeken in onze collectie", https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html onder "Speciaal voor jeugd & jongeren", "Lees of luister ook eens bij de online Bibliotheek", "Nieuwe luisterboeken in de collectie", enz. Zie ook andere pagina's. Op de pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.htm staan de knoppen met pijlen alleen onder "Nieuwe boeken". De toegankelijke namen "Vorige" en "Volgende" beschrijven echter nog steeds niet nauwkeurig de functie van deze knoppen.

De homepagina https://www.bibliotheekrijnenvenen.nl/ bevat een iframe met als titelattribuut "Video". Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Hetzelfde probleem wordt op andere pagina's waargenomen: https://www.bibliotheekrijnenvenen.nl/activiteiten/duurzaamheid.html onder “Bezoek het Duurzaamheidsplein in de Bibliotheek!”, https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html onder “Maak je eigen toverstok”‘, “Cajón van karton” en “Maak een automaton”, https://www.bibliotheekrijnenvenen.nl/digitaal/IDO.html onder “Hoe kunnen we je helpen?”

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bibliotheekrijnenvenen.nl/ naast "Zoeken in" is de toetsenbordfocus niet zichtbaar op de keuzerondjes wanneer deze zijn geselecteerd. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op de homepagina https://www.bibliotheekrijnenvenen.nl/ is de toetsenbordfocus niet zichtbaar op de volgende elementen: links met afbeeldingen binnen de artikelen onder de kopjes, bijvoorbeeld "Informatiepunt Digitale Overheid", "Belastingspreekuur door vrijwilligers van het Gilde", "Meer dan boeken alleen", enzovoort. Zulke artikelen met links waarvan de enige inhoud afbeeldingen zijn, staan ook op andere pagina's, bijvoorbeeld, https://www.bibliotheekrijnenvenen.nl/organisatie.html, https://www.bibliotheekrijnenvenen.nl/Service/abonnementen.html, etc.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html is een formulier aanwezig. De toetsenbordfocus is niet zichtbaar op het select-element onder "Geboortedatum", op de selectievakjes en op de knop “Send”.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bibliotheekrijnenvenen.nl/ is de zichtbare tekst (placeholder-tekst) van de zoekbalk "Waar ben je naar op zoek?" terwijl de toegankelijke naam van dit invoerelement "Zoekopdracht" is. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholdertekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html is een formulier met invoervelden aanwezig. De zichtbare labels van de volgende invoervelden zijn niet opgenomen in hun toegankelijke namen: “Email”, “Voornaam”, “Achternaam” en “Woonplaats”.
Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. Zie ook select-element met tekst "Maand" onder "Geboortedatum". Dit select-element heeft geen zichtbaar label en de eerste optie dient als pseudo-label. Dit label verdwijnt als de bezoeker een andere optie selecteert. Hierdoor kunnen bezoekers die gebruikmaken van spraaksoftware het element niet bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Het label moet daarom permanent zichtbaar zijn, én terugkomen in de toegankelijke naam van het element.
Want als de zichtbare tekst niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De primaire taal van de pagina's op de website https://www.bibliotheekrijnenvenen.nl/ is Nederlands, maar het attribuut lang is onjuist ingesteld op "lang="nl_NL"". Er mag geen onderliggend streepje in dit attribuut aanwezig zijn. Zorg dat de primaire taal van de pagina aangegeven is met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen. Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bibliotheekrijnenvenen.nl/ staat een link met de tekst “Translate”. Deze tekst is in een andere taal zonder taalcode.
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element. Hetzelfde probleem wordt gezien op de pagina https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html. Er zijn secties met links die boektitels in het Engels bevatten. Bijvoorbeeld, onder "Nieuwe e-books in de collectie" in de carrousel is er een link met de tekst “Open-minded”. Zie onder "Nieuwe luisterboeken in de collectie" in de carrousel de link met tekst: “Boy Swallows Universe”, “Tiny Habits”. Onder “Nieuwe populaire titels bij Muziekweb” dit zijn links die teksten bevatten: “Back to California”, “Buenos Aires today”, “So close to what”, enz.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html is het formulier aanwezig. Dit formulier gebruikt teksten in een andere taal, bijvoorbeeld: label “Sending lists”, placeholder teksten “Day” en “Year”, de opties van het select-element zoals “Month” en de namen van de maanden, de tekst “Send” op de knop, enz. Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal de teksten naar het Nederlands. Ook de foutmelding “Please check the required fields” is in het Engels.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekrijnenvenen.nl/Service/abonnementen/school_instellingsabonnement.html maakt een formulier gebruik van HTML5-validatie, waarbij standaard HTML5-foutberichten worden weergegeven wanneer het formulier wordt ingediend met lege of onjuiste gegevens. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html staat een formulier. Wanneer dit formulier wordt verzonden met lege velden of onjuiste gegevens, verschijnt een foutmelding met de tekst: "Please check the required fields." Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld.". Zorg dat de melding in de juiste taal wordt weergegeven.

Uitkomst: Onvoldoende

Bevindingen: Als de website https://www.bibliotheekrijnenvenen.nl/ wordt bekeken op een klein scherm, verschijnt het sticky menu onderaan de pagina's. Het menu-item "Zoeken" heeft een submenu. In dit submenu staan twee invoervelden met placeholder teksten: "Titel, auteur, etc." en "Bijv. openingstijden, drukker". Deze teksten bevatten instructies. Deze instructies zijn echter niet permanent zichtbaar op de pagina omdat de placeholder-tekst verdwijnt wanneer een bezoeker begint te typen. Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html is het formulier aanwezig. Onder "Geboortedatum" staan invoervelden met placeholder teksten: “Day” en “Year”. Ze hebben echter geen permanent zichtbaar label; de placeholder-tekst wordt gebruikt als label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Hier kan dus niet een placeholdertekst voor worden gebruikt, want die verdwijnt zodra de bezoeker begint te typen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De eerste keer dat een bezoeker de website https://www.bibliotheekrijnenvenen.nl/ bezoekt, verschijnt er een dialoogvenster met cookies. Dit venster heeft geen ARIA-rol en geen 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 wordt gezien met het dialoogvenster dat wordt geopend wanneer de knop "Lees hier meer over cookies" is geactiveerd.

In de header van de website https://www.bibliotheekrijnenvenen.nl/ staat een knop met een vergrootglaspictogram. Deze knop heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop. Zorg voor een toegankelijke naam die het doel van de knop beschrijft. Wanneer de pagina's op een klein scherm worden bekeken, zie je ook het submenu "Zoeken" in het sticky navigatiemenu onderaan. Dit probleem wordt gezien bij twee knoppen met een vergrootglaspictogram.

Als de website https://www.bibliotheekrijnenvenen.nl/ wordt bekeken op een klein scherm, wordt het sticky menu onderaan de pagina's weergegeven. Dit menu is geïmplementeerd met behulp van het ARIA Menubar Pattern. Het patroon is echter onjuist geïmplementeerd. Hieronder staan enkele belangrijke problemen. Het element met de role="menubar" heeft geen toegankelijke naam, waardoor het voor gebruikers van schermlezers moeilijk is om het doel ervan te begrijpen. De menu-items met de tekst "Menu" en "Zoeken" hebben niet de juiste rol, namelijk "menuitem". Bovendien sturen deze menu-items submenu's aan, maar ze missen belangrijke ARIA-attributen. Het aria-haspopup attribuut moet worden gebruikt om de aanwezigheid van een submenu aan te geven. Het aria-expanded attribuut moet worden gebruikt om de status van het submenu aan te geven (open of gesloten). Een ander probleem is het beheer van de toetsenbordfocus. De submenu-items onder "Menu" en "Zoeken" kunnen niet worden genavigeerd met pijltjestoetsen, wat een vereist gedrag is voor ARIA-menubars. Raadpleeg de pagina voor meer informatie: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/.

Op pagina https://www.bibliotheekrijnenvenen.nl/activiteiten/maakplaats.html onder "Komende activiteiten" wordt aria-hidden="true" gebruikt voor elementen waarop kan worden gefocust: links met afbeeldingen. Een focusbaar element met aria-hidden="true" wordt genegeerd als onderdeel van de leesvolgorde, maar het maakt nog steeds deel uit van de focusvolgorde, waardoor onduidelijk is of het zichtbaar of verborgen is. Zorg ervoor dat focusbare inhoud tabindex="-1" heeft of wordt verwijderd uit de HTML-code. Een ander probleem is dat deze links geen toegankelijke namen hebben. Hetzelfde probleem wordt ook op andere pagina's waargenomen: https://www.bibliotheekrijnenvenen.nl/collectie/inspiratie.html onder “Speciaal voor jeugd & jongeren”.

Op pagina https://www.bibliotheekrijnenvenen.nl/404.html staat onder "Homepagina" een link met een afbeelding die geen toegankelijke naam heeft.

Pagina https://www.bibliotheekrijnenvenen.nl/home/vestigingen/bibliotheek-alphen-centrum.html bevat een iframe zonder titelattribuut onder "Adres en contact". Dit is een iframe dat een kaart bevat. Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Zie hetzelfde probleem op de pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html.

Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html is een formulier aanwezig. De volgende invoervelden hebben geen toegankelijke namen: “Email”, “Voornaam”, “Achternaam” en “Woonplaats”. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen. Zie ook een vervolgkeuzelijst (selecteer element) onder "Geboortedatum". Ook hier ontbreekt de toegankelijke naam.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekrijnenvenen.nl/home/inschrijven-nieuwsbrief-bibliotheek-rijn-en-venen.html staat een formulier. Als het formulier met fouten wordt verzonden, verschijnt er een foutmelding, maar deze krijgt geen focus. Dit betekent dat schermlezers dit bericht niet als een statusbericht zullen voorlezen aan blinde gebruikers. Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt. Hetzelfde probleem wordt gezien wanneer het formulier met succes wordt verzonden.