Rapport:
Aanvullend onderzoek digitale toegankelijkheid Nieuwe Bibliotheek

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/ staat het logo van De Nieuwe Bibliotheek. Deze afbeelding is aria-hidden, terwijl het om een informatieve afbeelding gaat. Blinden en slechtzienden missen zo mogelijk belangrijke informatie. Met spraaksoftware is het klikbare logo mogelijk niet te bedienen. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten. Als de afbeelding ook als link dient, moet er ook een beschrijvend linkdoel aan de alternatieve tekst toegevoegd worden. Bijvoorbeeld "Logo naam organisatie, naar homepage". Dit probleem komt op meerdere pagina's voor, bijvoorbeeld https://www.denieuwebibliotheek.nl/activiteiten.

De alt-tekst van de afbeelding van Bibo de Biebhond op https://www.denieuwebibliotheek.nl/ is niet beschrijvend genoeg: "Mascotte hond plein". Geef de afbeelding een beschrijvende alt-tekst of laat het alt-attribuut leeg om de afbeelding als decoratief aan te duiden. Dit komt ook voor in cards, zoals op https://www.denieuwebibliotheek.nl/openingstijden bij de afbeelding van Almere Haven, waarvan de alternatieve tekst "Afbeelding_DNB_haven_interieur_2025_0.jpg" is, en op pagina https://www.denieuwebibliotheek.nl/lidmaatschap bij de afbeeldingen onder de kop "Geef de bieb cadeau!".

Op pagina https://www.denieuwebibliotheek.nl/leerplein staan afbeeldingen onder de tekst "Agenda". De tekstalternatieven van deze afbeeldingen zijn gelijk aan de koppen onder de afbeeldingen. De schermlezer leest nu dezelfde informatie twee keer voor. Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen. Een vergelijkbaar probleem met afbeeldingen speelt op de pagina's https://www.denieuwebibliotheek.nl/digitaal en https://www.denieuwebibliotheek.nl/gratis-online-trainingen.

Op pagina https://www.denieuwebibliotheek.nl/activiteiten/taalcafe hebben de afbeelding naast de kop "Taalcafé" en de afbeeldingen in de carrousel onderaan de pagina geen alt-attribuut. Is een afbeelding puur decoratief en draagt deze geen betekenis over, dan moet het alt-attribuut aanwezig zijn maar leeg blijven (alt=""). Is de afbeelding informatief, dan moet het alt-attribuut een duidelijke en beknopte beschrijving van de inhoud van de afbeelding bevatten.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/online-bibliotheek is bij bijvoorbeeld de video "Inloggen in de nieuwe online Bibliotheek app" op 0:11 de tekst "Stap 1" in beeld. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals voorleessoftware niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan succescriterium 1.2.5.

Op de pagina https://www.denieuwebibliotheek.nl/online-bibliotheek staan video's waar het logo aan het begin en/of eind in beeld komt. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voice-over waardoor de audiodescriptie overbodig wordt. Dit speelt ook op https://www.denieuwebibliotheek.nl/veelgestelde-vragen-kaartverkoop.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/online-bibliotheek is bij de video "Inloggen in de nieuwe online Bibliotheek app" op 0:11 de tekst "Stap 1" in beeld. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals voorleessoftware niet weten wat er wordt getoond in de video. Laat de teksten in beeld uitspreken door een voice-over of maak gebruik van een audiodescriptie.

Op de pagina https://www.denieuwebibliotheek.nl/online-bibliotheek staan video's waar het logo aan het begin en/of eind in beeld komt. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voice-over waardoor de audiodescriptie overbodig wordt. Dit speelt ook op https://www.denieuwebibliotheek.nl/veelgestelde-vragen-kaartverkoop.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/activiteiten staat in de filters in de zijbalk een groep selectievakjes met het groepslabel "Onderwerpen". Dit groepslabel is in de code niet gekoppeld aan de bijbehorende 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 een fieldset- en legend-element. Als dat niet mogelijk is, kan aria-labelledby worden gebruikt.

Op pagina https://www.denieuwebibliotheek.nl/activiteiten/taalcafe worden de activiteiten visueel als lijst getoond, maar de lijstitems staan niet in een omliggend lijst-element. De lijststructuur staat daardoor niet in de code. Hulpsoftware kan de items dan niet als lijst aankondigen en niet melden uit hoeveel items de lijst bestaat. Groepeer de bij elkaar horende li-elementen in een ul-element, zodat de lijststructuur ook in de code beschikbaar is voor hulpsoftware.

Op https://www.denieuwebibliotheek.nl/digitaal wordt in de opsomming het strong-element gebruikt om ieder item visueel kopjes te geven. Dit element mag echter enkel gebruikt worden om een woord of enkele woorden in een zin te benadrukken. Niet voor hele zinnen, paragrafen of introteksten en niet om kopjes mee op te maken. Gebruik CSS om deze tekst op te maken. Dit komt ook voor op https://www.denieuwebibliotheek.nl/jaarverslag-en-jaarrekening en https://www.denieuwebibliotheek.nl/governance-code-cultuur.

Op pagina https://www.denieuwebibliotheek.nl/lidmaatschap is de tekst die begint met "Overstappen naar een hoger lidmaatschap?..." geen kop, maar toch opgemaakt met een h2-element om de tekst groter te tonen. Kop-elementen gebruiken voor puur visuele opmaak is semantisch niet correct. Bovendien volgt direct na deze kop een andere kop van hetzelfde niveau h2, zonder inhoud ertussen. Ook dat kan problemen geven voor bezoekers met een schermlezer. Verwijder het h2-element en gebruik CSS voor de gewenste visuele opmaak. Hetzelfde probleem speelt bij de kop die begint met "Alleen maar e-books en luisterboeken lenen?...".

Op pagina https://www.denieuwebibliotheek.nl/meerjarenbeleidsplan is de tekst "Het meerjarenbeleidsplan is gericht op vijf hoofdactiviteiten:" in de code niet als kop gemarkeerd. Voor bezoekers die hulpsoftware gebruiken, is een tekst die er visueel uitziet als kop maar niet als kop is gemarkeerd niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te springen. Dit is alleen mogelijk wanneer de koppen ook in de code als kop zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven, bijvoorbeeld door vetgedrukte tekst, wijkt bovendien de structuur van de informatie in de code af van de visuele structuur. Markeer koppen met het juiste HTML-element, op het correcte kopniveau (h1 tot en met h6).

Op pagina https://www.denieuwebibliotheek.nl/reserveren-studie-en-werkplekken zijn de volgende teksten visueel opgemaakt als kop, maar in de code is dat niet het geval: "Reserveer een gratis studiecel", "De spelregels" en "Pincode vergeten?". Ze zijn opgemaakt met een strong- en em-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h3. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.

Op https://www.denieuwebibliotheek.nl/onze-klachtenregeling is er een opsomming aanwezig die niet als zodanig is opgemaakt. Gebruik het lijst-element en lijstitems om dit op te lossen. Dit speelt ook op https://www.denieuwebibliotheek.nl/governance-code-cultuur.

Op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar staat een invoerveld "Bericht". Het label-element met de tekst "Bericht" is in de code niet gekoppeld aan het bijbehorende invoerveld: het id in het label-element ("bodyInput") komt niet voor in de HTML. 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. Door deze koppeling lezen schermlezers het label voor als een bezoeker direct naar het invoerveld navigeert.

Op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar staat onder de kop "Exclusieve (voor)vertoningen" een blok tekst met drie alinea's dat is opgemaakt als één p-element. Visueel lijkt deze tekst uit meerdere alinea's te bestaan: blokjes tekst met witruimte ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea's dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code. Hetzelfde probleem speelt onder de kop "Eenmalige vertoningen".

De PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2025-09/Meerjarenbeleidsplan%202025-2028.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Software kan daardoor bijvoorbeeld niet bepalen wat koppen zijn, wat de alternatieve tekst bij afbeeldingen is en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan. Dit komt ook voor bij https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-07/jaarverslag%202023_was%20getekend%20%281%29.pdf.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de video "E-books en luisterboeken lezen via de online Bibliotheek op je computer" op pagina https://www.denieuwebibliotheek.nl/online-bibliotheek wordt op 0:32 een instructie gegeven dat er ingelogd kan worden "door op de oranje knop te drukken". Deze instructie is niet behulpzaam voor blinde bezoekers. Zorg voor een toegankelijke instructie die niet gebruikmaakt van enkel kleur.

In de PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-07/jaarverslag%202023_was%20getekend%20%281%29.pdf staat op pagina 6 de tekst "De behaalde kernactiviteiten in 2023, conform jaarplan, staan hieronder in zwart. Niet behaalde activiteiten staan in schuine grijze letters. De belangrijkste extra behaalde activiteiten zijn aangeduid in het blauw. Initiatieven uit 2022 die alsnog zijn behaald staan in het groen vermeld.". Deze instructie is gebaseerd op oriëntatie (hieronder) en op kleur en vorm van de tekst. Deze informatie is niet behulpzaam voor blinde bezoekers. Zorg voor een toegankelijke instructie.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties mist het formulier met invoervelden voor persoonlijke informatie, bijvoorbeeld voornaam, achternaam en e-mailadres, het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals naam of e-mailadres moeten het autocomplete-attribuut met de juiste waarde 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. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes. Een vergelijkbaar probleem speelt op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar bij de invoervelden "Naam" en "E-mail".

Uitkomst: Onvoldoende

Bevindingen: In de PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-07/jaarverslag%202023_was%20getekend%20%281%29.pdf staat op pagina 6 de tekst "Niet behaalde activiteiten staan in schuine grijze letters. De belangrijkste extra behaalde activiteiten zijn aangeduid in het blauw. Initiatieven uit 2022 die alsnog zijn behaald staan in het groen vermeld.". Kleurenblinden en slechtziende bezoekers kunnen deze kleuren mogelijk niet onderscheiden. Maak gebruik van een andere manier om de informatie over te dragen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De kleurencombinatie van roze (HEX #ED008C) en wit heeft onvoldoende contrast. De contrastverhouding is 4,2:1 waar het minstens 4,5:1 moet zijn voor normale tekst. Voor grote tekst is het contrast wel voldoende, daar wordt 3,0:1 verwacht. Grote tekst wordt gedefinieerd als 18pt (24 CSS-pixels) met een normaal lettertypegewicht of 14pt (18,67 CSS-pixels) vette tekst (font-weight minstens 700). Deze kleurencombinatie komt op alle pagina's voor. Dit probleem komt ook voor wanneer links op bijvoorbeeld https://www.denieuwebibliotheek.nl/online-bibliotheek veranderen naar de roze (HEX #ED008C) kleur als deze focus krijgen, en niet meer onderstreept zijn. Zorg dat linktekst ook als de link focus heeft voldoende contrast heeft met de witte achtergrond.

Op https://www.denieuwebibliotheek.nl/ staat een zoekveld voor zoeken in de collectie. Het contrast van de placeholdertekst is te laag. De lichtgrijze (HEX #C6C6C6) tekst op de witte achtergrond heeft een contrastverhouding van 1,7:1. De contrastverhouding moet minstens 4,5:1 zijn voor normale tekst, voor grote tekst is dat 3,0:1. Dit probleem met placeholders komt op meerdere pagina's voor, bijvoorbeeld https://www.denieuwebibliotheek.nl/activiteiten, https://www.denieuwebibliotheek.nl/collectie en https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar.

Op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties is de foutmelding in het formulier rode (HEX #FF0000) tekst op een roze (HEX #FFCCCC) achtergrond. De contrastverhouding is 2,8:1. Ook de veldlabels veranderen van kleur naar rood (HEX #FF0000) en hebben met 4,0:1 onvoldoende contrast. Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen. Zorg ervoor dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

Op https://www.denieuwebibliotheek.nl/lidmaatschap is de kleurencombinatie van blauw (HEX #00ADEE) en wit niet contrastrijk genoeg. Het levert een contrast op van 2,5:1. De contrastverhouding moet minstens 4,5:1 zijn voor normale tekst, voor grote tekst is dat 3,0:1. Grote tekst wordt gedefinieerd als 18pt (24 CSS-pixels) met een normaal lettertypegewicht of 14pt (18,67 CSS-pixels) vette tekst (font-weight minstens 700).

Op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar heeft de tekst van de foutmelding een rode kleur (HEX #FF0000) op een witte (HEX #F5F5F5) achtergrond met een contrastverhouding van 3,7:1, waar dit minimaal 4,5:1 moet zijn.

In de PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2025-09/Meerjarenbeleidsplan%202025-2028.pdf wordt bijvoorbeeld op pagina 13 gebruikgemaakt van blauwe (HEX #3DB5EA) tekst op een witte achtergrondkleur. De contrastverhouding is 2,3:1 waar dit minimaal 3,0:1 moet zijn voor grote tekst en 4,5:1 voor kleine tekst. Een vergelijkbaar probleem komt voor in de PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-07/jaarverslag%202023_was%20getekend%20%281%29.pdf waar meerdere kleurencombinaties onvoldoende contrast hebben, bijvoorbeeld op pagina 8 de roze (HEX #FF3399) tekst op de witte achtergrond met een contrastverhouding van 3,4:1, waar dat minimaal 4,5:1 moet zijn. Zorg voor voldoende contrast in de PDF's.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina https://www.denieuwebibliotheek.nl/collectie wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, verschijnt een scrollbalk. Horizontaal scrollen op de hele pagina is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, informatieve afbeeldingen, presentaties, video en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen. Laat de inhoud van de pagina zich aanpassen aan de kleine schermen. Zorg ervoor dat de horizontale scroll verdwijnt. Een vergelijkbaar probleem speelt op de pagina's https://www.denieuwebibliotheek.nl/digitaal en https://www.denieuwebibliotheek.nl/onze-klachtenregeling.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/activiteiten staan in de filters in de zijbalk selectievakjes bij "Onderwerpen". Deze hebben een grijze (HEX #E5E5E5) rand op de witte achtergrond. Dat levert een contrastverhouding op van 1,3:1. Een vergelijkbaar contrastprobleem speelt wanneer de selectievakjes focus hebben: de lichtblauwe (HEX #40C1F2) rand op de witte achtergrond heeft een contrastverhouding van 2,1:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze filteropties moet minimaal 3,0:1 zijn. Hetzelfde probleem speelt bij andere elementen op de website, bijvoorbeeld de selectievakjes in de cookiebanner en de select-elementen op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/gratis-online-trainingen is het logo van Europe Direct klikbaar om te vergroten. Dit kan echter alleen met de muis, niet met het toetsenbord. Als de functionaliteit om het logo te vergroten noodzakelijk is, dan moet de code aangepast worden en het logo in een link gezet worden. Is het vergroten van het logo niet belangrijk, verwijder dan de functionaliteit.

De knoppen van de Rich Text Editor op https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar zijn niet bedienbaar met het toetsenbord. Dit komt doordat er geen interactief element wordt gebruikt, maar div-elementen. Gebruik het <button>-element om er echte knoppen van te maken en ze bedienbaar te maken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Opmerking: Op https://www.denieuwebibliotheek.nl/online-bibliotheek en https://www.denieuwebibliotheek.nl/veelgestelde-vragen-kaartverkoop en https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Er is voor gezorgd dat de bediening met tekentoetsen uit staat, er is disablekb=1 toegevoegd. Met deze aanpassing zorg je er normaal gesproken voor dat je voldoet aan dit succescriterium. De normale bediening gaat bij deze oplossing (disablekb=1) goed, maar zodra je instellingen wil aanpassen (zoals afspeelsnelheid) werkt dit niet via het toetsenbord. De hoop is dat dit een tijdelijk probleem is wat op termijn wordt opgelost.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina met zoekresultaten https://www.denieuwebibliotheek.nl/zoeken?query=wet behoudt de paginatitel van de pagina waarop de zoekactie is uitgevoerd, of toont soms "404 - Deze pagina kan niet worden getoond". Zorg ervoor dat de resultatenpagina een unieke en beschrijvende titel krijgt.

De PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2025-09/Meerjarenbeleidsplan%202025-2028.pdf heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond. Dit komt ook voor bij https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-07/jaarverslag%202023_was%20getekend%20%281%29.pdf.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website op een klein scherm wordt bekeken, opent de hamburgerknop een navigatiemenu. De toetsenbordfocus kan het geopende menu nu verlaten en op de pagina-inhoud erachter terechtkomen. Bij dit soort navigatiemenu's moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de toetsenbordfocus 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 het menu sluit, bijvoorbeeld met de sluitknop, de menuknop of de ESC-toets.

Wanneer pagina https://www.denieuwebibliotheek.nl/activiteiten op een klein scherm wordt bekeken, opent de knop "Open filter" een uitklapbaar gedeelte met een probleem in de focusvolgorde: elementen in het ingeklapte gedeelte kunnen nog steeds toetsenbordfocus krijgen, ook als ze niet zichtbaar zijn. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren en daarbij naar het scherm kijken. Zorg dat elementen die niet zichtbaar zijn geen toetsenbordfocus krijgen.

Uitkomst: Onvoldoende

Bevindingen: De cards in de blokken "Aanbod" en "Nieuws" op https://www.denieuwebibliotheek.nl/ hebben geen linktekst. Dit is verwarrend voor bezoekers met schermlezers en bezoekers die spraakbesturing gebruiken. Zorg voor een toegankelijke naam voor de links met een duidelijk linkdoel. Gebruik het <a>-element op de titel van het artikel en maak de rest van de card klikbaar met JavaScript om dit op te lossen. Zie ook succescriterium 4.1.2. Dit geldt ook voor de cards op onder andere https://www.denieuwebibliotheek.nl/zoeken?query=wet, https://www.denieuwebibliotheek.nl/collectie, https://www.denieuwebibliotheek.nl/leerplein en andere pagina's.

Op https://www.denieuwebibliotheek.nl/zoeken?query=wet is er paginering aanwezig. De linktekst bestaat enkel uit het nummer van de pagina, waardoor het voor bezoekers met hulpsoftware niet duidelijk is wat de context en het doel is van deze links. Zet in iedere link het woord pagina erbij, of verzorg een (verborgen) koptekst "Paginering". Dit komt ook voor op https://www.denieuwebibliotheek.nl/blog.

De linkteksten van de cursuslinks op https://www.denieuwebibliotheek.nl/gratis-online-trainingen bevatten naast de linktekst ook de alt-tekst van de afbeelding. Dit kan verwarrend zijn voor bezoekers. Maak enkel de titel van de cursus een link en maak de hele card klikbaar met JavaScript.

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: Op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties staat een formulier. Onderaan het formulier is een knop om het formulier mee te verzenden. De naam van de knop is "Aanschafsuggesties" terwijl de functie het verzenden van het formulier is. Daarom is het te adviseren om de naam en de toegankelijke naam van de knop aan te passen naar bijvoorbeeld "Verzenden".

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website is in de header de standaard toetsenbordfocus niet zichtbaar op het element "Select language". 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 op welke plek van de pagina zij zich bevinden. Herstel de standaard focusstijl of zorg voor een eigen focusindicator die voldoende contrast heeft en duidelijk zichtbaar is.

Wanneer pagina https://www.denieuwebibliotheek.nl/activiteiten op een klein scherm wordt bekeken, is de toetsenbordfocus niet zichtbaar op de knoppen "Open filter" en "Sluit filter". Zorg dat de toetsenbordfocus altijd zichtbaar is op alle interactieve elementen.

Advies: Op de website wordt bijna geen gebruik gemaakt van een focusrand om links en knoppen, waar dit wel gebruikelijk is. De huidige manier van bijvoorbeeld de kleurwissel voor knoppen en het onderstrepen van de links in de hoofdnavigatie is niet af te keuren, maar toch is het aan te raden om gebruik te maken van een volledige focusrand, zodat het altijd duidelijk is voor bezoekers die navigeren met het toetsenbord welk element de focus heeft.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website staat in de header een select-element "Select language" zonder zichtbaar label; de eerste optie fungeert 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 gelijk zijn aan de zichtbare tekst.

Op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar staat een invoerveld waarvan de placeholdertekst en het label "Bericht" zijn, maar de toegankelijke naam is "rdw-editor". De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando's die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer het formulier verzonden wordt op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties dan komt de bezoeker op een andere pagina terecht (https://bibliotheek.formstack.com/forms/index.php). De taalaanduiding van de hele pagina is Engels. De pagina is echter in het Nederlands. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest.

In de PDF https://vbp-dnb-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-07/jaarverslag%202023_was%20getekend%20%281%29.pdf is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website staat in de header de keuzelijst "Select language" in het Engels, 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. Aan de Engelstalige tekst voeg je lang="en" toe. Een vergelijkbaar probleem speelt op pagina https://www.denieuwebibliotheek.nl/het-nieuwe-filmhuis-2 met filmtitels in het Engels, zoals "The Devil Wears Prada 2", "10 Things I Hate About You" en andere.

Op pagina https://www.denieuwebibliotheek.nl/activiteiten/taalcafe staat een carrousel. De pijlknoppen om te navigeren hebben aria-label-attributen met Engelse tekst: "Previous slide" en "Next slide". Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal de teksten van de aria-labels naar het Nederlands.

Foutmeldingen op https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties zijn in het Engels, bijvoorbeeld "Please fill in a valid value for all required fields". Vertaal de tekst naar het Nederlands. Een vergelijkbaar probleem speelt op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/activiteiten staat in de filters in de zijbalk, onder de knop "Volgende maand", een invoerveld met de placeholdertekst "...of kies een datum". Dit invoerveld heeft geen in beeld blijvend label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen. Voeg een label toe in de vorm van een tekst of een icoon.

Op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties heeft het tweede invoerveld bij "naam" geen visueel label (en geen toegankelijke naam, zie ook succescriterium 4.1.2). Bezoekers weten mogelijk niet wat zij hier in moeten vullen. Zorg ervoor dat het label niet enkel programmatisch is, maar dat het label ook op de pagina wordt getoond.

Verplichte invoervelden zijn op https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties aangeduid met een asterisk. Er is verder geen uitleg dat verplichte velden zijn aangeduid met een asterisk. Voeg deze uitleg toe.

Uitkomst: Onvoldoende

Bevindingen: Bij het invoeren van een ongeldig e-mailadres, bijvoorbeeld met een komma in plaats van een punt, op https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties wordt er geen foutsuggestie gegeven hoe het probleem opgelost kan worden. Verzorg een goede foutsuggestie. Dit speelt ook op https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar.

In het formulier op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar is niet voor verplichte velden aangegeven dat het een verplicht veld is. Het gaat om alle invoervelden. Zorg ervoor dat duidelijk is dat deze velden verplicht ingevuld moeten worden.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.denieuwebibliotheek.nl/ komt bovenaan in de code twee keer een <div>-element voor met als attribuut aria-visibility: <div aria-visibility="hidden" class="sr-text" style="font-family: 'Univers'; font-weight: 400;"> </div>. Dit attribuut bestaat niet. Verwijder het attribuut. Dit komt op iedere pagina voor.

De links van de cards in de blokken "Aanbod" en "Nieuws" op https://www.denieuwebibliotheek.nl/ hebben geen toegankelijke naam. Omdat de links daarmee geen linkdoel hebben, is het voor blinden en slechtzienden die gebruikmaken van een schermlezer niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Zie ook succescriterium 2.4.4. Dit geldt ook voor de cards op onder andere https://www.denieuwebibliotheek.nl/zoeken?query=wet, https://www.denieuwebibliotheek.nl/collectie, https://www.denieuwebibliotheek.nl/leerplein en andere pagina's.

Op https://www.denieuwebibliotheek.nl/zoeken?query=wet worden in de paginering knoppen gebruikt in plaats van links. Dit is semantisch niet correct: knoppen zijn er om een actie te bevestigen, links zijn om naar een andere pagina te gaan. Gezien het feit dat er naar een andere pagina gegaan wordt, is het gebruik van links correcter. Dit komt ook voor op https://www.denieuwebibliotheek.nl/blog.

Op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties hebben de invoervelden bij "Naam" geen toegankelijke naam. Voeg de toegankelijke naam toe om dit probleem op te lossen.

Op https://www.denieuwebibliotheek.nl/gratis-online-trainingen is het logo van Europe Direct klikbaar om te vergroten. Het dialoogvenster dat dan opent, heeft geen juiste 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, bijvoorbeeld aria-label="Beschrijving van de inhoud", of een aria-describedby, en role="dialog".

Op dezelfde pagina heeft de sluitknop in het geopende dialoogvenster geen toegankelijke rol en geen toegankelijke naam. Omdat deze rol ontbreekt, is de knop ontoegankelijk voor bezoekers met schermlezers en bezoekers die zonder muis navigeren. De knop heeft een rol nodig die de schermlezer vertelt dat dit een interactief element is waarop kan worden geklikt of gedrukt om een actie in gang te zetten (het sluiten van een dialoogvenster). Zorg er ook voor dat de knop een toegankelijke naam heeft. Er zijn meerdere oplossingen om deze knop een naam te geven, bijvoorbeeld via een aria-label.

Op https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar wordt in de Rich Text Editor voor het schrijven van een reactie gebruikgemaakt van ARIA. Deze attributen mogen echter niet gebruikt worden, omdat ze op een <div>-element staan. Zie succescriterium 2.1.1 voor een oplossing.

Op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar heeft het tekstvak om je reactie in te typen het aria-label "rdw-editor". Dit is geen beschrijvend aria-label. Verzorg een duidelijke toegankelijke naam, bijvoorbeeld "Bericht". Dit komt ook bij de andere velden in het formulier voor.

Advies: Op pagina https://www.denieuwebibliotheek.nl/formulier-aanschafsuggesties staat een formulier. Onderaan het formulier is een knop om het formulier mee te verzenden. De naam van de knop is "Aanschafsuggesties" terwijl de functie het verzenden van het formulier is. Daarom is het te adviseren om de naam en de toegankelijke naam van de knop aan te passen naar bijvoorbeeld "Verzenden".

Op pagina https://www.denieuwebibliotheek.nl/blog hebben de filterknoppen met de teksten "Cultuur", "Inspiratie" en andere twee toestanden: ingedrukt en niet ingedrukt. De ingedrukte knop, de geselecteerde optie, ziet er anders uit dan de rest, maar deze toestand staat niet in de code. Hulpsoftware kan de toestand van de knop daardoor niet doorgeven aan bezoekers, met name aan bezoekers die blind of slechtziend zijn. Gebruik het aria-pressed-attribuut om de toestand van de knop in de code weer te geven. Zet aria-pressed="true" als de knop is ingedrukt en aria-pressed="false" als dat niet zo is. Werk dit attribuut dynamisch bij wanneer de toestand van de knop verandert. Een nog betere oplossing voor filteropties is het gebruik van de standaard HTML-elementen met input type="checkbox".

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.denieuwebibliotheek.nl/zoeken?query=wet verschijnt na een zoekactie een melding zoals "129 resultaten voor", zonder dat de pagina opnieuw laadt. Deze melding wordt echter niet voorgelezen door schermlezers. Dat zou wel moeten gebeuren. Deze melding is namelijk een statusbericht. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Dit kan opgelost worden door een aria-live-attribuut aan de melding toe te voegen. Een vergelijkbaar probleem speelt op pagina https://www.denieuwebibliotheek.nl/activiteiten wanneer een zoekopdracht wordt uitgevoerd in het veld "Zoek (activiteit of onderwerp)".

Op pagina https://www.denieuwebibliotheek.nl/blog/en-de-oscar-gaat-naar staat een formulier. Wanneer er fouten in het formulier zitten, verschijnt een foutmelding, bijvoorbeeld "Please complete the ReCaptcha". Deze melding wordt niet voorgelezen door een schermlezer. 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.