Rapport:
Audit digitale toegankelijkheid website ontdekdebieb.nl

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/ staat bovenaan een logo met de tekst “de Bibliotheek Noord Fryslân”. De alt-tekst van dit logo is “Bibliotheken Noord Fryslân”. Deze alt-tekst is niet voldoende. Omdat het logo in een link staat zonder zichtbare linktekst, fungeert de alt-tekst als linktekst. Daarom moet de alt-tekst beschrijven dat het om een logo gaat en dat de link leidt naar de homepagina. Bijvoorbeeld “Logo de Bibliotheek Noord Fryslân, ga naar de startpagina van Ontdek de bieb”. Zie ook succescriteria 2.4.4 en 2.5.3.
Dit probleem staat ook op pagina https://ontdekdebieb.op-shop.nl/.

Op alle pagina’s van de website https://www.ontdekdebieb.nl/ staat in de header een knop met een vergrootglasicoon. Dit icoon is een informatieve afbeelding die is toegevoegd met een CSS-pseudo-element. Er is geen tekstalternatief beschikbaar. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst aangeven wat de functie van de knop is. Het is niet voldoende om te beschrijven wat er te zien is. Als deze informatie ontbreekt, is de functie van de knop niet duidelijk voor schermlezers. De beschrijving moet worden toegevoegd via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is, maar wel toegankelijk is voor schermlezers.
Hetzelfde probleem met de knoppen “zoeken” staat op pagina https://ontdekdebieb.op-shop.nl/ en op alle pagina’s wanneer de website op een klein scherm wordt bekeken en de menu-optie “Zoeken” is geselecteerd.

Op pagina https://www.ontdekdebieb.nl/ onder de koppen "Vacatures" en “Taalbegeleiders gezocht” staan decoratieve afbeeldingen. Hun tekstalternatieven zijn "vacatures bibliotheek" en “ik word 18”. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (`alt=""`).
Een soortgelijk probleem staat bij de afbeeldingen boven de koppen “Boetevrije bibliotheek” en “Gratis wifi”.

Onderaan pagina https://www.ontdekdebieb.nl/ staan iconen van sociale media. De afbeeldingen zijn dus interactief. Er is geen tekstalternatief. Daardoor hebben de links geen inhoud (zie ook succescriteria 2.4.4 en 4.1.2). Om deze links toegankelijk te maken, moeten de afbeeldingen een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden.

Op pagina https://www.ontdekdebieb.nl/Jeugd.html staan onder de kop "Jeugd & Jongeren" kaarten met links die bestaan uit afbeeldingen, koppen en tekstlinks: “0-6 jaar”, “6-12 jaar” en “12-18 jaar”. De afbeeldingen hebben een alt-attribuut dat de koppen herhaalt en leiden naar dezelfde bestemming als de links eronder. Hoewel een beschrijvende alt-tekst dit deels zou verbeteren, is het beter om de dubbele links van de afbeeldingen te verwijderen. Omdat elke afbeelding al een bijbehorende tekstlink heeft, kan met JavaScript/CSS het klikbare gebied van de link worden uitgebreid zodat ook de afbeelding valt binnen de link. Zo vervalt de dubbele link en de alt-tekst op de afbeelding die de tekst van de kop herhaalt.

Op pagina https://www.ontdekdebieb.nl/home/over-ons.html staat naast de kop “Over ons” een logo “de Bibliotheek Noord-Fryslân” met een lege tekstalternatief. Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Een lege alt-tekst betekent: deze afbeelding is puur decoratief, geeft geen informatie. Daarom wordt er dus niets voorgelezen. Daarom moeten informatieve afbeeldingen altijd een alt-tekst krijgen. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Voeg ook het woord "Logo" toe aan de alt-tekst.

Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html staat onder de kop “Jeugd | 0-6 jaar” naast de link “Jeugd & Jongeren” een pijltje-icoon. Dit icoon is toegevoegd met CSS (::before pseudo-element) en wordt door schermlezers aangekondigd als "before". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/Leren/meer-doen-met-de-computer.html bij de link “Digi-Taalhuis”.

Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html hebben de afbeeldingen onder de kop "Jeugd | 0-6 jaar" alt-tekst, maar deze kunnen als decoratief worden aangeduid. Zorg dat ze lege alt-attributen hebben (alt=""). Men moet daarna wel een card maken van deze links. Zorg dat enkel "Ga naar de boekentips op onderwerp" een link is, en dat de hele card (afbeelding + tekst) klikbaar is door middel van JavaScript.
Een soortgelijk probleem staat bij de klikbare afbeeldingen onder de knop “Bekijk ook de boeken op onderwerp” op dezelfde pagina en op pagina https://www.ontdekdebieb.nl/Leren/meer-doen-met-de-computer.html bij de afbeeldingen onder de koppen “Digitale spreekuren” en “Werken met je DigiD”.

Op pagina https://www.ontdekdebieb.nl/Leren/informatiepunt-digitale-overheid.html staan onder de kop “Regelhulp” veel logo’s. Voor de meeste daarvan herhaalt de zichtbare tekst de bijbehorende koppen, wat kan worden gezien als een toegankelijke alternatief. Sommige logo’s bevatten echter meer informatie dan in de kop staat. In dat geval moet alle tekst uit het logo worden toegevoegd aan de tekstalternatief. Dit geldt voor de volgende logo’s: “Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid”, “Dienst Uitvoering Onderwijs Ministerie van Onderwijs, Cultuur en Wetenschap”, “LBIO Landelijk Bureau Inning Onderhoudsbijdragen” en “Logius Ministerie van Binnenlandse Zaken en Koninkrijksrelaties”.

Op pagina https://ontdekdebieb.op-shop.nl/ hebben de afbeeldingen bij de evenementen alt-tekst die de kop van evenementen herhaalt. Een blinde bezoeker hoort dezelfde informatie twee keer. Dit kan worden opgelost door twee links samen te voegen.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf staan decoratieve afbeeldingen die onjuist zijn getagd met figure-tags zonder beschrijvingen. Dit komt op pagina 1 voor en bij alle decoratieve afbeeldingen op andere pagina’s die aan het einde van de taglaag zijn toegevoegd. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf staat op pagina 1 een logo “de Bibliotheek Noord Fryslân” als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.

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

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html onder de kop “Digitale prentenboeken” staat een video met een voice-over onder "Digitale prentenboeken". Hoewel er ondertitels aanwezig zijn, zijn deze automatisch gegenereerd en daardoor onnauwkeurig. 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 zitten. Zo staat er rond 0:29 "isus" in plaats van "is Suus" en rond 1:30 "1 t 2". Ook ontbreekt "gezien" rond 1:45.
Een vergelijkbaar probleem staat bij de video op pagina https://www.ontdekdebieb.nl/Leren/informatiepunt-digitale-overheid.html.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html staat een video onder de kop “Voorleesfilmpjes”. In deze video verschijnt aan het einde, vanaf 0:31, het logo “De Voorleeshoek”. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Het beste kan een audiobeschrijving toegevoegd worden die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het plaatsen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet er sowieso een audiobeschrijving zijn.

Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html staat onder de kop “Digitale prentenboeken” een tweede video. Aan het einde van deze video, vanaf 02:42, verschijnt de tekst: “PROBEER BERESLIM GRATIS www.bereslim.nl/demo-aanvragen/”. Beschrijf in audio de visuele onderdelen van de video, zoals logo’s en teksten. Een geschreven tekst kan ook, maar voor succescriterium 1.2.5 is een audiobeschrijving noodzakelijk.

Op pagina https://www.ontdekdebieb.nl/Leren/informatiepunt-digitale-overheid.html onder de kop “Hoe kunnen we je helpen?” staat een video. Aan het begin van de video, van 0:02 tot 0:05, verschijnt de tekst “Heeft u vragen over de overheid?” samen met het logo “de Bibliotheek informatiepunt Digitale Overheid”. Aan het einde van de video, vanaf 1:08, wordt hetzelfde logo opnieuw getoond. Voor deze visuele elementen moeten ook audiobeschrijvingen worden toegevoegd.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video’s op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html voldoen niet aan succescriterium 1.2.5, waarin een audiobeschrijving voor video’s vereist is. Voor deze video’s moet audiobeschrijving worden toegevoegd (niveau AA), omdat er voldoende ruimte is binnen het bestaande audiokanaal. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.
Hetzelfde probleem is met de video op pagina https://www.ontdekdebieb.nl/Leren/informatiepunt-digitale-overheid.html.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, bijvoorbeeld op pagina https://www.ontdekdebieb.nl/, staat in de header een groep van twee radioknoppen (“Catalogus” en “Site”), voorafgegaan door de tekst “Zoeken in”. Hoewel deze knoppen visueel gegroepeerd zijn, is deze relatie in de HTML niet programmatisch vastgelegd. 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. Plaats hierin de tekst “Zoeken in”.

Op pagina https://www.ontdekdebieb.nl/ staat een carrousel met grijze stippen onderaan. Deze stippen geven aan hoeveel slides er zijn en welke slide actief is. De actieve slide wordt visueel onderscheiden, maar deze informatie ontbreekt in de HTML. Hierdoor weten bezoekers die schermlezers gebruiken niet welke slide actief is. Deze informatie moet beschikbaar worden gemaakt met behulp van ARIA-technieken of een tekst die visueel verborgen is, maar toegankelijk voor hulpsoftware.

Op pagina https://www.ontdekdebieb.nl/word-lid-van-de-bibliotheek.html staat een kop van niveau 3 direct gevolgd door een andere kop van hetzelfde niveau: “Kies uit deze abonnementen” en “Start 18 tot 30 jaar”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Pas de tekst aan, zodat de kopregelniveaus de structuur van de tekst correct weergeven.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/Leren/meer-doen-met-de-computer.html bij de koppen “Cursussen” (h3) en “Kennismaken met de computer” (h3).

Op pagina https://www.ontdekdebieb.nl/word-lid-van-de-bibliotheek.html onder de kop “Kies uit deze abonnementen” staan acht kaarten met soorten abonnementen. Visueel en inhoudelijk vormen zij één lijst met acht items, maar in de code zijn ze geplaatst in drie aparte ul-elementen die elkaar opvolgen. Dit verstoort de logische structuur van de pagina en kan tot verwarring leiden. De items moeten in één ul-element worden geplaatst, zodat blinde bezoekers dezelfde informatiestructuur krijgen als ziende bezoekers. Een bijkomend voordeel is dat schermlezers het juiste aantal items aankondigen voordat ze beginnen met lezen.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/home/over-ons.html bij de kaarten onder de tekst “In de Bibliotheek bent u altijd welkom!" en op pagina https://www.ontdekdebieb.nl/404.html.

Op pagina https://www.ontdekdebieb.nl/nieuws/herinrichting-bibliotheek-harlingen.html staat onder de kop “Wat gaan we doen?” een tekstblok met drie alinea’s dat onjuist is opgemaakt als één p-element. Visueel lijkt deze tekst uit drie 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.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/home/over-ons.html bij de tekst onder de kop “ANBI-status”.

Op pagina https://www.ontdekdebieb.nl/nieuws/herinrichting-bibliotheek-harlingen.html, staat onder de tekst die begint met “Heeft u vragen…” een lijst met drie items zonder correcte markering. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen 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.

Op pagina https://www.ontdekdebieb.nl/404.html, is de tekst die begint met “Helaas.... de pagina die u zoekt bestaat niet…” geen kop, maar deze is onjuist gemarkeerd met een h3-element om de lettergrootte te vergroten. Het h3-element is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. De elementen h1 tot en met h6 zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik deze elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen.

Op pagina https://ontdekdebieb.op-shop.nl/ staat in de sidebar met filters een groep selectievakjes met de labels “Categorie”, “Locatie”, “Tag” en “Wanneer”. Hoewel deze selectievakjes visueel gegroepeerd zijn, is deze relatie in de code niet programmatisch vastgelegd. Hierdoor ziet de schermlezer niet dat er een relatie is tussen het groepslabel en de keuzevakjes (checkboxes). De individuele labels van elk keuzevakje worden voorgelezen zonder het groepslabel. Dit kan worden opgelost door gebruik te maken van fieldset- en legend-elementen. Andere oplossingen zijn ook mogelijk.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/25.36%20Jaarverslag_2024_V8_definitief%20en%20gedrukt.pdf ontbreken structurele codes, waardoor de inhoud ontoegankelijk is voor schermlezers. Bovendien kunnen wij de pdf hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf zijn alle koppen niet als koppen getagd. Dit geldt bijvoorbeeld voor “BELEIDSPLAN 2023-2026 Bibliotheken Noord Fryslân” op pagina 1, “Inleiding” en “Zo leest u dit beleidsplan” op pagina 2 en andere soortgelijke koppen op andere pagina’s van het document. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H1-tot H6-tags, zodat de tag-structuur gelijk is aan de visuele structuur.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf staat een inhoudsopgave. De links naar de pagina’s maken echter geen gebruik van de Reference-tag. Deze tags zijn wel nodig: alleen dan kunnen schermlezers het document correct interpreteren. De juiste tags voor de inhoudsopgave zijn: TOC, TOCI, Reference, Link.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf staat op pagina 4 onder de kop “1.1. Bibliotheekwet en landelijke en provinciale ontwikkelingen” een lijst met vijf items zonder de juiste markering. Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen. Markeer de lijst met een L- en meerdere Li- en LBody-tags.
Een soortgelijk probleem staat op dezelfde pagina bij een lijst onder de kop “Samenvatting van het onderzoek”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://ontdekdebieb.op-shop.nl/ is de volgorde van HTML-elementen binnen de evenement-artikelen onlogisch, omdat afbeeldingen boven de koppen zijn geplaatst. De huidige volgorde is link met afbeelding, datum, kop, overige tekst. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf is de leesvolgorde niet logisch. De inhoud van pagina’s 6, 12, 13, 16, 17 en 18 is in de tags toegevoegd helemaal aan het einde van de taglaag. Schermlezers lezen een pdf-document in de volgorde van de tags die in de codelaag staan. Als die niet logisch is, is de leesvolgorde dat dus ook niet en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen. Zorg dus dat de volgorde van de tags logisch is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/klantenservice/contact.html staat een formulier met invoervelden voor persoonlijke gegevens (voornaam, achternaam, e-mailadres) zonder het attribuut autocomplete. Invoervelden voor persoonlijke informatie zoals voornaam, achternaam en e-mailadres moeten het autocomplete-attribuut hebben met de juiste waarde. 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 soortgelijk probleem staat bij het formulier op pagina https://www.ontdekdebieb.nl/home/meld-u-aan-voor-onze-nieuwsbrief.html.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.ontdekdebieb.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 hint 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.ontdekdebieb.nl/klantenservice/contact.html gebruikt het invoerveld “Wil je een bijlage meesturen??” een aangepaste toetsenbordfocusindicator die uitsluitend berust op een achtergrondkleurwijziging. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende, omdat de contrastverhouding tussen de gefocuste en niet-gefocuste staat van de achtergrondkleur 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 op welke plek van 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.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/home/meld-u-aan-voor-onze-nieuwsbrief.html bij de selectievakjes onder het label “Bent u lid van Bibliotheken Noord Fryslân”.

Onderaan de pagina https://www.ontdekdebieb.nl/nieuws.html gebruikt de paginering kleur als enige visuele indicator voor de huidige pagina: de achtergrond rond de huidige pagina is oranje. Dit subtiele visuele onderscheid maakt de informatie ontoegankelijk voor bezoekers met een lichte visuele beperking. Ter verbetering moet een extra visuele aanwijzing worden toegevoegd, bijvoorbeeld een onderstreping of een achtergrond met voldoende contrast.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/zoekresultaten.website.html?q=werk.

Onderaan de pagina https://www.ontdekdebieb.nl/nieuws.html heeft het select-element naast “Spring direct naar pagina:” een focusindicator die alleen zichtbaar is via een kleurverandering. De contrastratio tussen de gefocuste en niet-gefocuste toestand is te laag en voldoet niet aan de minimale eis. De focus moet beter zichtbaar worden gemaakt met een extra visuele aanwijzing.

Bovenaan de pagina https://ontdekdebieb.op-shop.nl/ staan vier filters. Wanneer deze geopend worden (nu alleen met een muisklik, wat beschreven is in 2.1.1), gebruiken de selectievakjes en radioknoppen daarin een aangepaste toetsenbordfocusindicator die uitsluitend berust op een verandering van de achtergrondkleur. Het kleurcontrast tussen de gefocuste en niet-gefocuste achtergrond is te laag (minder dan 3,0:1), waardoor de focusindicator onvoldoende zichtbaar is voor bezoekers met een visuele beperking en toetsenbordgebruikers. Voeg een duidelijkere focusindicator toe, zoals een dikkere rand, onderstreping of verander het achtergrondcontrast.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website staat een zoekveld. In de hovertoestand heeft de grijze (HEX #757575) placeholdertekst tegen de lichtgrijze (HEX #EDEDED) achtergrond een contrastratio van 3,9:1. Een soortgelijk probleem doet zich voor in de focustoestand: de grijze (HEX #757575) placeholdertekst tegen de oranje (HEX #FDE5D0) achtergrond heeft een contrastratio van 3,8:1. Zorg dat de placeholdertekst een contrast van minstens 4,5:1 tegen de achtergrond heeft.
Vergelijkbare problemen met placeholderteksten zijn aanwezig wanneer de website op een klein scherm wordt bekeken en de optie “Zoeken” in het menu wordt geselecteerd (bij de velden “Zoeken in de collectie” en “Zoeken binnen de website”).

Op alle pagina’s van de website https://www.ontdekdebieb.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 toetsenbordfocus 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.ontdekdebieb.nl/klantenservice.html staan onder de kop “Meest gestelde vragen” accordeons. Wanneer deze accordeons toetsenbordfocus krijgen, veranderen de koppen van zwart naar oranje. De oranje (HEX #FF7320) tekst tegen de witte achtergrond heeft een onvoldoende contrastratio van 2,7:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Een soortgelijk probleem staat op pagina https://www.ontdekdebieb.nl/zoekresultaten.website.html?q=werk bij de accordeons onder de kop “Verfijnen op resultaten”.

Op pagina https://www.ontdekdebieb.nl/zoekresultaten.website.html?q=werk, in de sidebar onder de kop “Verfijnen op resultaten”, hebben de aantallen die het aantal resultaten voor een bepaald type of woord tonen onvoldoende contrast. De donkergrijze (HEX #757575) cijfers tegen de lichtgrijze (HEX #EDEDED) achtergrond hebben een contrastratio van 3,9:1. Dit ligt onder het vereiste minimum van 4,5:1.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/25.36%20Jaarverslag_2024_V8_definitief%20en%20gedrukt.pdf staat op pagina 13 een grafiek. Sommige teksten daarin hebben onvoldoende kleurcontrast: blauwe (HEX #3D9BBC) cijfers “112.000” op de witte achtergrond hebben een contrastratio van 3,2:1, en witte cijfers “390.000” op de blauwe (HEX #018ABE) achtergrond hebben een contrastratio van 3,9:1. Dit moet minimaal 4,5:1 zijn.

Op meerdere pagina’s van het pdf-document https://www.ontdekdebieb.nl/dam/overons/25.36%20Jaarverslag_2024_V8_definitief%20en%20gedrukt.pdf staat oranje (HEX #EC7208) tekst op een witte achtergrond. Dit geldt bijvoorbeeld voor de tekst “Figuur 1” op pagina 13, “Figuur 2” op pagina 14 en andere soortgelijke teksten. De contrastratio is hier 3,0:1 waar dat minimaal 4,5:1 moet zijn.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/25.36%20Jaarverslag_2024_V8_definitief%20en%20gedrukt.pdf vanaf pagina 39 staan koppen met witte tekst op een oranje achtergrond (HEX #F07C00). De contrastratio is 2,8:1. Voor grote teksten moet dit minimaal 3,0:1 zijn en voor kleinere teksten minimaal 4,5:1.

In het PDF-document op https://www.ontdekdebieb.nl/dam/overons/25.36%20Jaarverslag_2024_V8_definitief%20en%20gedrukt.pdf staat op pagina 14 een cirkeldiagram. De teksten in het rode en oranje deel hebben een lage contrastratio: respectievelijk 3,8:1 en 2,2:1.
Hetzelfde diagram staat ook op pagina 8 van het PDF-document https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf. Zorg dat het contrast minimaal 4,5:1 is.

In het pdf-document op https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf op veel pagina's zijn er oranje (HEX #F47921) teksten op een witte achtergrond en vice versa. De kleurcontrastverhouding is te laag: 2,8:1. Zie bijvoorbeeld de kop "Zo leest u dit beleidsplan" op pagina 2, de inhoudsopgave op pagina 3, teksten zoals "De Wet Stelsel Openbare Bibliotheken en de 01 landelijke en provinciale ontwikkelingen" op pagina 3, en vele andere teksten op verschillende pagina's. De contrastverhouding moet 3,0:1 zijn voor grote tekst en 4,5:1 voor kleine tekst.

Op pagina 6 van het pdf-document https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf zijn er gekleurde blokken. Witte teksten op blauwe (HEX #00A4E6), groene (HEX #03B8A4), gele (HEX #CED51E) achtergronden hebben onvoldoende contrast: 2,8:1, 2,5:1 en 1,6:1. Het vereiste minimum voor gewone tekst is 4,5:1.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://ontdekdebieb.op-shop.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd is tot 200%, zijn de volgende links in de header niet zichtbaar en bedienbaar: "Activiteiten", "Cursussen", "Collectie" en nog drie andere. Als een bezoeker inzoomt, moet alles nog werken.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://ontdekdebieb.op-shop.nl/ bij een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400% zijn de links in de header “Activiteiten”, “Cursussen”, “Collectie” en nog drie andere niet zichtbaar en niet bruikbaar. Als een bezoeker inzoomt, moet alles nog werken.

Uitkomst: Onvoldoende

Bevindingen: Op de website verschijnt na het accepteren van cookies helemaal onderaan in de footer een knop met het label "Trek je toestemming in". Deze knop heeft een aangepaste focusmarkering: een oranje rand (HEX #FF7320) tegen een lichtoranje achtergrond (HEX #FDE5D0). De contrastratio van 2,2:1 is te laag. Omdat dit een aangepaste focusmarkering is, moet deze voldoen aan de minimale contrastratio van 3,0:1.
Een vergelijkbaar probleem staat op pagina https://www.ontdekdebieb.nl/Jeugd.html bij de link “Ga snel naar de speciale vakantielezen pagina” en op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html bij de link “Jeugd & Jongeren”.

Op pagina https://www.ontdekdebieb.nl/ staat onder de header een carrousel. De slides in de carrousel bevatten links zoals "Ontdek en doe mee!", "Meer" en andere. Deze links hebben een aangepaste toetsenbordfocusindicator, een oranje (HEX #FF7320) rand op een witte achtergrond. De contrastverhouding tussen deze kleuren is 2,7:1, wat lager is dan het vereiste minimum van 3,0:1. Op de site wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een (gekleurde) rand. Die aanpassing is met CSS toegevoegd. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Dit moet ten minste 3,0:1 zijn.
Een soortgelijk probleem doet zich voor bij de link "Inschrijven" op dezelfde pagina, links "Ga naar lenen, reserveren en de Boetevrije bibliotheek", "Bekijk de openingstijden en onze faciliteiten" en andere op pagina https://www.ontdekdebieb.nl/klantenservice.html, links "Ga naar LeesSimpel de website", "Vraag een les op maat aan" en andere op pagina https://www.ontdekdebieb.nl/Leren.html en op vele andere pagina's van de website.

Op pagina https://www.ontdekdebieb.nl/ staat een carrousel. Onder de carrousel zijn drie grijze stippen (HEX #999999) zichtbaar tegen een witte achtergrond. Deze dienen om de actieve slide aan te geven. De contrastratio van 2,8:1 is te laag voor informatieve elementen. Voor dit soort visuele aanduidingen geldt een minimum contrastratio van 3,0:1. Zorg dat deze indicatoren voldoende contrast hebben met de achtergrond.

Op pagina https://www.ontdekdebieb.nl/klantenservice.html onder de kop “Meest gestelde vragen” staan accordeons. Wanneer deze accordeons toetsenbordfocus krijgen, veranderen de “+” en “-” iconen van zwart naar oranje (HEX #FF7320) op een witte achtergrond. De contrastratio van 2,7:1 is onvoldoende. Voor informatieve elementen geldt minimaal 3,0:1.
Een soortgelijk probleem is op pagina https://www.ontdekdebieb.nl/zoekresultaten.website.html?q=werk met pijlpictogrammen naast accordeons onder de kop "Verfijnen op resultaten".

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://ontdekdebieb.op-shop.nl/ staan bovenaan vier filters. Deze filters zijn niet via het toetsenbord te gebruiken: de comboboxen kunnen niet met het toetsenbord worden geopend of gesloten. Zorg dat alle interactieve elementen, waaronder de filters, met het toetsenbord kunnen worden bediend.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/klantenservice/contact.html gebruikt het formulier alleen HTML5-validatie voor alle invoervelden. Deze foutmeldingen verdwijnen na enige tijd. Er is dus tijdslimiet ingesteld. Voeg daarom altijd zelf foutmeldingen toe aan het formulier.
Een vergelijkbaar probleem staat bij het formulier op pagina https://www.ontdekdebieb.nl/home/meld-u-aan-voor-onze-nieuwsbrief.html. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://ontdekdebieb.op-shop.nl/ staan skiplinks, maar deze werken niet correct. Ze zijn visueel aanwezig en met het toetsenbord bereikbaar, maar de focus wordt niet naar de beoogde bestemming verplaatst en de bezoeker wordt doorgestuurd naar de homepagina https://www.ontdekdebieb.nl/. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplinks werken zoals hierboven is beschreven, en dat de focus naar de juiste content wordt verplaatst.

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.ontdekdebieb.nl/word-lid-van-de-bibliotheek.html mist een title-element. Dit element moet op elke pagina aanwezig zijn en unieke tekst bevatten die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Deze tekst wordt dan getoond in de tab van de browser. Met een duidelijke beschrijving kunnen gebruikers makkelijker navigeren tussen verschillende pagina’s. Voeg het title-element toe aan de pagina en zet er een duidelijke tekst in.

Het pdf-document https://www.ontdekdebieb.nl/dam/overons/25.36%20Jaarverslag_2024_V8_definitief%20en%20gedrukt.pdf heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het pdf-document.

Het pdf-document https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pdf mist ook een titel. Stel een documenttitel in de metadata van het PDF-bestand in. Dit zorgt ervoor dat in plaats van de bestandsnaam een duidelijke titel wordt weergegeven en maakt het document beter toegankelijk voor gebruikers, vooral voor mensen met beperkingen.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.ontdekdebieb.nl/ opent de knop “Lees hier meer over cookies” in de cookiebanner een dialoogvenster. Momenteel kan de toetsenbordfocus uit dit venster ontsnappen en terechtkomen op de onderliggende inhoud van de pagina. Bij dialoogvensters moet de focus binnen het venster blijven zolang het actief is. Dit voorkomt verwarring en zorgt dat gebruikers met het toetsenbord correct kunnen navigeren. De focus moet vastgezet worden binnen het dialoogvenster totdat de bezoeker het venster sluit via de sluitknop of met de ESC-toets. Een andere oplossing is om het venster automatisch te sluiten wanneer de focus het venster verlaat.

Advies: op pagina https://www.ontdekdebieb.nl/zoekresultaten.website.html?q=werk gaat de focus eerst naar de zoekresultaten en pas daarna bij de filters. Het zou gebruiksvriendelijker zijn om de focus eerst naar de filters te laten gaan, zodat de gebruiker direct de zoekresultaten kan verfijnen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/ staat bovenaan een logo met de tekst “de Bibliotheek Noord Fryslân”. De alt-tekst van dit logo is “Bibliotheken Noord Fryslân”. Deze alt-tekst is niet voldoende. Omdat het logo in een link staat zonder zichtbare linktekst, fungeert de alt-tekst als linktekst. Daarom moet de alt-tekst beschrijven dat het om een logo gaat en dat de link leidt naar de homepagina. Bijvoorbeeld “Logo de Bibliotheek Noord Fryslân, ga naar de startpagina van Ontdek de bieb”. Zie ook succescriteria 1.1.1 en 2.5.3.
Dit probleem staat ook op pagina https://ontdekdebieb.op-shop.nl/.

Op pagina https://www.ontdekdebieb.nl/ staat onder de header een carrousel. De tweede slide in de carrousel bevat een link met de vage tekst "Meer". Deze tekst beschrijft de bestemming van de link onvoldoende. Hierdoor kunnen gebruikers met cognitieve beperkingen of degenen die afhankelijk zijn van schermlezers niet goed bepalen waar de link naartoe gaat. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.
Een soortgelijk probleem doet zich voor op pagina https://www.ontdekdebieb.nl/Leren.html met drie "Lees meer" links onder "Digi-Taalhuis", "Online cursussen" en "Informatiepunt Digitale Overheid", op pagina https://www.ontdekdebieb.nl/word-lid-van-de-bibliotheek.html met talloze links "Bekijk alle voordelen", op pagina https://www.ontdekdebieb.nl/Leren/meer-doen-met-de-computer.html en andere.

Op pagina https://www.ontdekdebieb.nl/ staan onderaan icoontjes van sociale media die als links functioneren, maar hun alt-attribuut is leeg (alt=""). Hierdoor worden de afbeeldingen verborgen voor schermlezers. Daardoor heeft deze link 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. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn ook mogelijk.

Op pagina https://www.ontdekdebieb.nl/klantenservice.html heeft de afbeeldingslink onder de kop "Lenen" de toegankelijke naam "Lenen" en verwijst naar https://www.ontdekdebieb.nl/klantenservice/Lidmaatschapenkosten.html. Onder de kop "Abonnementen" is de afbeeldingslink met dezelfde toegankelijke naam "Lenen" aanwezig, maar de bestemming van deze tweede link is anders. Zo zijn er op de pagina twee links aanwezig met dezelfde linktekst, maar die naar verschillende doelpagina’s verwijzen. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.
Een vergelijkbaar probleem staat bij afbeeldingslinks onder de koppen “In de Bibliotheek” en “Website en apps” (dezelfde naam “Bibliotheek”) en onder de koppen “E-books en luisterboeken” en “Tips en opmerkingen” (dezelfde naam “E-book”).

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/ staat bovenaan een carrousel met een knop “Volgende” voor navigatie. Hoewel deze knop werkt, is het label niet voldoende beschrijvend. De toegankelijke naam van deze knop moet worden aangepast naar "Volgende slide" om meer context te geven over de functie.
Een soortgelijk probleem is op pagina https://www.ontdekdebieb.nl/Leren.html met de carrouselknoppen "Vorige" en "Volgende" naast de kop "Studeren voor je rijbewijs?", op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html voor knoppen naast de kop "Nieuwe boeken | 0-6 jaar" en op andere pagina's met carrousels.

Op pagina https://www.ontdekdebieb.nl/ zijn afbeeldingen per ongeluk opgenomen in de heading-elementen: “Boetevrije bibliotheek”, “Gratis wifi” en “Informatiepunt Digitale Overheid”. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Verwijder de niet-kopinhoud uit het h3-element en laat alleen de teksten over die semantisch de kopfunctie vervullen: "Boetevrije bibliotheek", "Gratis wifi" en "Informatiepunt Digitale Overheid".
Een soortgelijk probleem doet zich voor op de pagina's https://www.ontdekdebieb.nl/Jeugd.html met de koppen "0-6 jaar", "6-12 jaar" en "12-18 jaar", https://www.ontdekdebieb.nl/Leren/meer-doen-met-de-computer.html met de koppen "Informatiepunt" en "Donorregistratie" en op pagina https://www.ontdekdebieb.nl/404.html.

Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html staat onder de kop “Digitale prentenboeken” een iframe met het title-attribuut "Een selectie toptitels van bereslim". 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 bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Op pagina https://www.ontdekdebieb.nl/Jeugd/0-6.html bevatten de video’s bedieningsknoppen met foutieve informatie over toetsenbordbediening. De afspeelknop heeft bijvoorbeeld de toegankelijke naam “Afspelen sneltoets k”, terwijl deze sneltoets niet beschikbaar is. Dit kan verwarrend zijn voor bezoekers die afhankelijk zijn van hulpsoftware. Verwijder deze verwijzingen naar niet-bestaande sneltoetsen in de toegankelijke namen van de knoppen.
Hetzelfde probleem is met video op pagina https://www.ontdekdebieb.nl/Leren/informatiepunt-digitale-overheid.html.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website voor het eerst wordt bezocht, verschijnt er een cookiebanner bovenaan de pagina. Na het klikken op de knop "Lees hier meer over cookies" opent er een dialoogvenster. De toetsenbordfocus is niet zichtbaar op de "X"-knop in dit dialoogvenster. 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 ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op alle pagina’s van de website, bijvoorbeeld op pagina https://www.ontdekdebieb.nl/, is in de header het toetsenbordfocus niet zichtbaar bij twee radioknoppen: “Catalogus” en “Site”. Interactieve elementen dienen altijd een zichtbare focusindicator te krijgen, die voldoende contrast biedt met de achtergrond en het element dat het omringt.

Onderaan de pagina https://www.ontdekdebieb.nl/ staan socialmediaknoppen. De toetsenbordfocus is daarop niet zichtbaar. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen, zodat toetsenbordgebruikers weten waar ze zijn en wanneer ze op Enter moeten drukken.

Op pagina https://www.ontdekdebieb.nl/klantenservice.html is de toetsenbordfocus niet zichtbaar op afbeeldingen die als links fungeren onder de koppen "Lenen", "In de Bibliotheek", "E-books en luisterboeken" en andere.
Een soortgelijk probleem is op pagina https://www.ontdekdebieb.nl/Leren.html met de afbeeldingslink onder de kop "Leessimpel app".

Op pagina https://ontdekdebieb.op-shop.nl/ is het toetsenbordfocus niet zichtbaar op de pagineringslinks. Er moet een zichtbare focusmarkering aan deze interactieve elementen worden toegevoegd.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/ staat bovenaan een logo met de tekst “de Bibliotheek Noord Fryslân”. De alt-tekst van dit logo is “Bibliotheken Noord Fryslân”. Deze alt-tekst is niet voldoende. Omdat het logo in een link staat zonder zichtbare linktekst, fungeert de alt-tekst als linktekst. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, 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. Bijvoorbeeld “Logo de Bibliotheek Noord Fryslân, ga naar de startpagina van Ontdek de bieb”. Zie ook succescriteria 1.1.1 en 2.4.4.
Dit probleem staat ook op pagina https://ontdekdebieb.op-shop.nl/.

In de header van de website is een zoekveld aanwezig. De placeholdertekst is "Waar ben je naar op zoek?", maar de toegankelijke naam van het invoerelement is "Zoekopdracht". 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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/ is het lang-attribuut onjuist ingesteld op "nl_NL". De juiste waarde voor het lang-attribuut is "nl-NL", met een koppelteken in plaats van een underscore. Dit is belangrijk zodat hulpsoftware de juiste uitspraakregels kan toepassen voor Nederlandse inhoud. Pas het lang-attribuut aan naar "nl-NL" op deze pagina.
Hetzelfde probleem is met enkele andere pagina's van de website: https://www.ontdekdebieb.nl/home/over-ons.html, https://www.ontdekdebieb.nl/home/meld-u-aan-voor-onze-nieuwsbrief.html

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document https://www.ontdekdebieb.nl/dam/overons/22-211-beleidsplan20232026v7digitaal-def.pd staan twee pagina’s in verschillende talen (pagina’s 17 en 18). Voor deze pagina’s is echter geen specifiek taalattribuut ingesteld; ze nemen de standaardtaal van het document “nl-NL” over. Dit vermindert de toegankelijkheid, omdat schermlezers niet profiteren van correcte taalwisselingen, wat kan leiden tot verkeerde uitspraak. Wijs de juiste taal op paginaniveau of op het niveau van de structurele elementen toe, zodat de inhoud correct wordt weergegeven.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/klantenservice/contact.html, in het formulier, wordt de HTML5-validatie gebruikt, waarbij standaard HTML5-foutmeldingen worden weergegeven wanneer het formulier met onjuiste gegevens wordt ingediend. 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.
Hetzelfde probleem is met het formulier op pagina https://www.ontdekdebieb.nl/home/meld-u-aan-voor-onze-nieuwsbrief.html. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.ontdekdebieb.nl/klantenservice/contact.html staat een formulier met meerdere verplichte velden die met een asterisk zijn gemarkeerd. Wanneer een asterisk wordt gebruikt om verplichte velden aan te geven, moet er boven het formulier een instructie staan zoals "Velden gemarkeerd met * zijn verplicht".
Hetzelfde probleem is relevant voor het formulier op pagina https://www.ontdekdebieb.nl/home/meld-u-aan-voor-onze-nieuwsbrief.html.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de website verschijnt bij het eerste bezoek een cookiebanner bovenaan de pagina. Na een klik op de knop “Lees hier meer over cookies” opent een dialoogvenster. Dit dialoogvenster mist zowel een correcte ARIA-rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Op alle pagina's van de website heeft de zoekbalk in het bovenste menu een zoekknop zonder toegankelijke naam. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat deze knop doet. Geef een toegankelijke naam aan de knop.
Hetzelfde probleem met zoeken-knoppen staat op pagina https://ontdekdebieb.op-shop.nl/ en op alle pagina’s wanneer de website op een klein scherm wordt bekeken en de menuoptie “Zoeken” is geselecteerd.

Onderaan de pagina https://www.ontdekdebieb.nl/ functioneren socialmedia-iconen als links, maar ze missen toegankelijke namen. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de links. Geef deze links een toegankelijke naam die het doel van de links beschrijft.

Wanneer de website op een klein scherm wordt bekeken en de optie “Zoeken” in het hoofdmenu wordt geopend, verschijnt er een submenu met de invoervelden “Zoeken in de collectie” en “Zoeken binnen de website”. Beide velden hebben een zoekknop ernaast, maar deze knoppen hebben geen toegankelijke naam. Daardoor is voor schermlezersgebruikers niet duidelijk wat de functie van de knoppen is. Voeg voor beide knoppen een toegankelijke naam toe, bijvoorbeeld met aria-label="Zoeken in de collectie" en aria-label="Zoeken binnen de website", zodat gebruikers die hulpsoftware gebruiken weten welke actie de knop uitvoert.

Op kleine schermen worden het hamburgermenu en de zoekoptie weergegeven als interactieve elementen, maar deze zijn foutief gecodeerd als invoerelementen met role="checkbox". Hierdoor wordt de functie van deze knoppen niet juist doorgegeven aan hulpsoftware. De knop voor het openen en sluiten van het menu moet als een knop worden herkend, met het juiste roltype. Gebruik hiervoor een echt button-element of voeg het attribuut role="button" toe. Alleen dan kan de schermlezer correct doorgeven dat het om een knop gaat, en kan ook de status (open of gesloten) via bijvoorbeeld aria-expanded worden meegegeven. Pas deze elementen aan zodat ze correct functioneren voor bezoekers die niet visueel kunnen waarnemen of het menu open of gesloten is.

Uitkomst: Voldoende