Rapport:
Audit digitale toegankelijkheid website bzof.nl

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website https://www.bzof.nl/ toont de volledige tekst “De Bibliotheek Zuidoost Fryslân”, maar de alt-tekst is “Bibliotheken Zuidoost Fryslân”.
In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “De Bibliotheek Zuidoost Fryslân”. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

In de header van de website https://www.bzof.nl/ ontbreekt een tekstalternatief bij de knop met het vergrootglasicoon. Het pictogram wordt via ::after ingeladen met CSS en er is verborgen tekst aanwezig. Deze tekst is verborgen met display:none. Dat is niet de juiste techniek, want dit maakt het ook onzichtbaar voor hulpsoftware. Een betere techniek is de CSS-clip techniek toe te passen op de tekst die verborgen moet worden. Dan krijgt de knop een toegankelijke naam. Ditzelfde probleem komt voor in de sticky footer van de website (wanneer deze op een klein scherm wordt bekeken) bij de vergrootglasiconen op de zoekknoppen in het submenu dat wordt geopend via het navigatie-item “Zoeken”, en op de pagina https://bzof.op-shop.nl ontbreekt bij het vergrootglasicoon op de zoekknop naast het zoekveld ook een tekstalternatief.

Op de pagina https://www.bzof.nl/jeugd-en-jongeren/digitaal-aanbod-lezen.html staat in de sectie "Voor 0 - 18 jaar" een decoratieve afbeelding met de tekstalternatief "lenerspas". 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=“”`).
Op de pagina https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025 is ook een decoratieve afbeelding aanwezig met de tekstalternatief "Digi-Taalhuis Oosterwolde". Deze afbeelding moet eveneens verborgen worden voor schermlezers.

Op de pagina https://www.bzof.nl/jeugd-en-jongeren/digitaal-aanbod-lezen.html toont het logo in de sectie “Lezen en luisteren” de volledige tekst "comics plus #ReadAllTheComics", maar de alt-tekst is slechts "logo comics plus". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “comics plus #ReadAllTheComics”. In dezelfde sectie is een logo aanwezig met de volledige tekst “Bibliotheekservice Passend Lezen”, maar de alt-tekst is “naar passendlezen.nl/jeugd”. Ook hier ontbreekt dus een deel van de zichtbare tekst. Bij deze moet de link wel verwijderd worden, omdat de huidige alt-tekst ook de linktekst is. Pas het tekstalternatief aan zodat de volledige tekst wordt opgenomen. Op de pagina https://bzof.op-shop.nl/327/papierwinkel/18-11-2025 toont het logo de volledige tekst “Papierwinkel Weststellingwerf”, maar de alt-tekst is “Papierwinkel”. Ook in dit geval moet het tekstalternatief de volledige zichtbare tekst bevatten.

Op de pagina https://www.bzof.nl/jeugd-en-jongeren/digitaal-aanbod-lezen.html staat onder de kop “Online Lezen | Jeugd & Jongeren” een link met de tekst “Jeugd & Jongeren” die een pijltje bevat. Dit pijltje is toegevoegd via een CSS-pseudo-element ::before en de `content`-eigenschap. De `content`-eigenschap bevat de tekst “before”, die wordt toegevoegd aan de toegankelijke naam van de link. Dit pijltje is decoratief. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Maak de content-eigenschap leeg om dit op te lossen. Hetzelfde probleem doet zich voor bij het pijltje op de link “Terug” op meerdere pagina’s https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025, https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025 en https://bzof.op-shop.nl/327/papierwinkel/18-11-2025.

Op de pagina https://bzof.op-shop.nl/ staan filters met interactieve elementen: "Categorie", "Locatie", "Tag" en "Wanneer". Deze interactieve elementen bevatten pijltjes die aangeven dat er verborgen inhoud aanwezig is, maar deze pijltjes hebben geen tekstalternatief. Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Zie 4.1.2 voor een oplossing.

Op de pagina https://www.bzof.nl/404.html staat onder de kop “Pagina niet gevonden” een logo zonder 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. Er wordt dan 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. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.bzof.nl/klantenservice/bibliotheek-aan-huis.html bevat een video met een voice-over. Vanaf ongeveer 1:49 zijn er alleen automatisch gegenereerde ondertitels beschikbaar, en deze zijn 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 kunnen zitten.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.bzof.nl/klantenservice/bibliotheek-aan-huis.html wordt onder de kop "Meer informatie" een video getoond. De video bevat op verschillende momenten tekst en logo’s in beeld, bijvoorbeeld rond 0:01, 0:04 en 0:12. Er is echter geen media-alternatief of audiobeschrijving beschikbaar. Deze video bevat visuele informatie (tekst en logo’s) die niet toegankelijk is voor blinde bezoekers. Ook worden mensen en gebeurtenissen in beeld gebracht die betekenisvolle visuele informatie overbrengen. Deze visuele informatie is eveneens niet toegankelijk voor blinde bezoekers. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op de pagina https://www.bzof.nl/klantenservice/bibliotheek-aan-huis.html voldoet niet aan succescriterium 1.2.5, dat vereist dat er een audiobeschrijving beschikbaar is voor video’s. Een audiobeschrijving is in dit geval nodig, omdat er voldoende ruimte is binnen het bestaande audiokanaal om deze toe te voegen. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bzof.nl/ is een knop met een vergrootglasicoon aanwezig. Het button-element bevat de tekst “Vind”, maar dit informatieve element is verborgen voor schermlezers met `display:none`. De CSS-code `display:none` zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen. Wanneer de website op een klein scherm wordt bekeken, doet zich hetzelfde probleem voor in het submenu dat wordt geopend via het menu-item “Zoeken” in de sticky footer. Ook hier is de knop met het vergrootglasicoon voorzien van een button-element met tekst die niet toegankelijk is door gebruik van `display:none`.
Op de pagina https://bzof.op-shop.nl/ is hetzelfde probleem aanwezig bij de knop met het vergrootglasicoon. Het button-element bevat de tekst “Zoeken”, maar deze tekst is niet toegankelijk voor schermlezers vanwege `display:none`. Op de pagina https://bzof.op-shop.nl/ heeft het zoekveld met de plaatshoudertekst "Zoeken" een visueel verborgen label. Dit label is echter ook voor schermlezers verborgen omdat `display:none` is toegepast op dit label. Gebruik in plaats daarvan de CSS cliptechniek.

Op de pagina https://www.bzof.nl/word-lid-van-de-bibliotheek.html staat een kop van niveau 3 direct gevolgd door een andere kop van hetzelfde niveau. Het gaat om de koppen “Ontdek welk abonnement het best bij je past:” en “Basisabonnement”. 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. Ditzelfde probleem komt ook voor op andere pagina’s. Op de pagina https://www.bzof.nl/jeugd-en-jongeren/digitaal-aanbod-lezen.html staan bijvoorbeeld de koppen “Hoe werkt het?” en “1. Kies” direct onder elkaar, evenals “Lezen en luisteren” en “E-books”. Ook hier ontbreekt inhoud tussen koppen van hetzelfde niveau. Op de pagina https://www.bzof.nl/over-ons/vrijwilliger-worden.html staan de koppen “Kies jouw gemeente en bekijk de openstaande vrijwilligersvacatures:” en “Gemeente Opsterland” eveneens direct onder elkaar zonder inhoud ertussen.

Op de pagina https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025 zijn de teksten "Wanneer?", "Aanmelden" en "Meer informatie" onjuist gemarkeerd met het strong-element in plaats van met een juist kop-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel. Op de pagina https://bzof.op-shop.nl/327/papierwinkel/18-11-2025 doet hetzelfde probleem zich voor bij de teksten “Jouw hulp bij papierzaken”, “Waarmee helpt de Papierwinkel?” en “Waar is de Papierwinkel?”, en ook bij andere teksten op de pagina die als kop gepresenteerd worden maar niet met een kop-element zijn gemarkeerd.
Op de pagina https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025 is de tekst “Hoe werkt het?” ook foutief gemarkeerd met het strong-element in plaats van een kop-element.

Op de pagina https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025 wordt het `strong`-element onjuist gebruikt voor opmaakdoeleinden. Onder de kop "Klik & Tik cursus internet Oosterwolde" is een volledige alinea in het `strong`-element geplaatst om de tekst vet weer te geven. Ook teksten zoals “1.Klik & Tik. De start:” zijn met een `strong`-element gemarkeerd uitsluitend omwille van de opmaak. Het `strong`-element is bedoeld om nadruk te geven aan enkele woorden of een zinsdeel, niet voor het opmaken van volledige paragrafen of titels. Het `strong`-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything zijn er in de filters knoppen die secties openen met een groep selectievakjes. Deze groepen zijn visueel gegroepeerd, maar deze relatie is 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.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 zijn de teksten "Onderwerp" en "Inhoud" niet gemarkeerd als koppen. Deze teksten functioneren visueel als koppen, maar zijn niet gemarkeerd met een kop-element, waardoor de structuur van de pagina niet duidelijk is voor hulpsoftware. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. 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. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Hetzelfde probleem wordt waargenomen op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24 met teksten: "Onderwerp", "Inhoud" en “Toptags”.

In het PDF-document op https://www.bzof.nl/dam/Overons/Vrijwilligerworden/2022-folder-vrijwilligerswerk-in-de-bibliotheek.pdf ontbreken structurele codes, waardoor de inhoud niet toegankelijk 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. Hetzelfde probleem wordt waargenomen met het PDF-document op https://www.bzof.nl/dam/bestanden/bibliotheekreglement-bzof-22-04-2025.pdf.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bzof.op-shop.nl/ is de volgorde van HTML-elementen binnen de events onjuist opgebouwd. In de huidige opbouw staat eerst een afbeelding met link, gevolgd door de datum, dan pas de kop en daarna de overige tekst. Doordat de koppen niet bovenaan staan in de code van elk artikel, ontstaat er een onlogische structuur. Voor bezoekers die een schermlezer gebruiken kan dit verwarrend zijn, omdat zij niet direct begrijpen waar de informatie bij hoort. Dit probleem kan worden opgelost door de kop bovenaan te plaatsen in de code en alle bijbehorende inhoud daaronder te zetten. Hierdoor ontstaat een logische volgorde die de betekenis en samenhang van de inhoud beter ondersteunt. De visuele opmaak mag hiervan afwijken, zolang de volgorde in de code maar logisch blijft. Een soortgelijk probleem wordt waargenomen op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything in zoekresultaten. In de huidige opbouw staat eerst een afbeelding met link, gevolgd door de tekst, dan pas de kop en daarna de overige tekst.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.bzof.nl/klantenservice/contact.html bevat een formulier invoervelden voor persoonlijke gegevens, zoals “Naam”, “Telefoonnummer” en “Emailadres”. Bij deze velden ontbreekt het attribuut autocomplete. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten 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. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website https://www.bzof.nl/ wordt bekeken op een klein scherm, is er een vaste footer met een navigatiemenu. De opties “Home”, “Menu” en “Zoeken” veranderen van kleur wanneer zij toetsenbordfocus krijgen: de kleur van het icoon en de tekst verandert dan van wit naar oranje. Deze kleurverandering is de enige visuele aanduiding van focus. Voor bezoekers met een visuele beperking of kleurenblindheid is dit niet voldoende zichtbaar. Om toetsenbordgebruikers te laten zien waar ze zich bevinden, moet een duidelijk zichtbare focusindicator worden toegevoegd. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrondkleur met voldoende contrast.

Bovenaan pagina https://bzof.op-shop.nl/ staan vier filters. Wanneer deze geopend worden (nu alleen via muisklik, wat onder succescriterium 2.1.1 valt), verschijnen er checkboxen en keuzerondjes met een aangepaste focusindicator die uitsluitend gebruikmaakt van een verandering in achtergrondkleur. De contrastratio tussen de gefocuste en niet-gefocuste toestand is lager dan 3,0:1, waardoor de focus onvoldoende zichtbaar is voor bezoekers met een visuele beperking en toetsenbordgebruikers. Voeg een duidelijkere focusindicator toe, bijvoorbeeld een dikkere rand, onderstreping of een achtergrondkleur met voldoende contrast.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bzof.nl/ is een zoekveld aanwezig. Wanneer dit veld de hover-status heeft, is de placeholdertekst grijs (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED). De contrastratio hiervan is 3,9:1. In de focus-status is de achtergrondkleur lichtoranje (HEX #FDE5D0), met dezelfde grijze placeholdertekst (HEX #757575), wat een contrastratio van 3,8:1 oplevert. Dit voldoet niet aan de minimale eis. Zorg dat de placeholdertekst een contrastratio van minstens 4,5:1 heeft ten opzichte van de achtergrond. Dit probleem komt ook voor wanneer de website op een klein scherm wordt bekeken en het zoekmenu “Zoeken” is geopend. Ook de zoekvelden “Zoeken in de collectie” en “Zoeken binnen de website” in het menu “Zoeken” op kleine schermen gebruiken deze combinatie van kleuren voor de focus- en hover-statussen.

Op de pagina https://www.bzof.nl/klantenservice.html staat onder de kop “Meest gestelde vragen” een aantal secties met verborgen inhoud. De tekst op de knoppen die deze verborgen inhoud openen, zoals “Waar vind ik de openingstijden van de Bibliotheek?”, heeft een onvoldoende contrastratio ten opzichte van de achtergrond wanneer de knop toetsenbordfocus krijgt. De oranje tekst (HEX #FF7320) op een witte achtergrond heeft een contrastratio van 2,7:1, wat lager is dan de vereiste minimumwaarde van 4,5:1 voor standaardtekst. Zorg dat het contrast minimaal 4,5:1 is.

Op de pagina https://www.bzof.nl/klantenservice/bibliotheek-aan-huis.html staat een video met witte ondertitels. Deze ondertitels hebben onvoldoende achtergrondcontrast en zijn daardoor bijna niet zichtbaar tegen sommige lichte scènes in de video.
Voeg een ondergrond toe zodat het contrast van de tekst altijd minimaal 4,5:1 blijft.

Op de pagina https://bzof.op-shop.nl/ staat onder de zoekresultaten in de paginering de lichtgrijze tekst “Vorige” (HEX #CCCCCC). Tegen de witte achtergrond is de contrastratio te laag: 1,6:1. Deze moet minimaal 4,5:1 zijn.
Op de pagina https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025 staat in de tabel de groene tekst “nog 8 beschikbaar” (HEX #468847) op een witte achtergrond. De contrastratio is 4,3:1. Deze moet minimaal 4,5:1 zijn.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything staan in de zoekresultaten knoppen met de grijze tekst “Niet aanwezig” (HEX #7E7D7F) op een witte achtergrond. De contrastratio is 4,1:1. Deze moet minimaal 4,5:1 zijn.

In het PDF-document op https://www.bzof.nl/dam/Overons/Vrijwilligerworden/2022-folder-vrijwilligerswerk-in-de-bibliotheek.pdf staat oranje tekst (HEX #F25E21) op een witte achtergrond, zoals “Waardering” en “De Bibliotheek en haar vrijwilligers”. De contrastratio is te laag: 3,3:1.
Zorg dat het contrast minimaal 4,5:1 is.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://bzof.op-shop.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en er tot 200% wordt ingezoomd, zijn de links in de header met de teksten “agenda”, “Jeugd & Jongeren”, “Educatie” en anderen niet meer zichtbaar en niet bedienbaar. Deze links verdwijnen uit beeld en zijn niet op een andere manier toegankelijk. Als een bezoeker inzoomt, moet alle inhoud zichtbaar en bruikbaar blijven. Zorg ervoor dat deze links ook bij 200% zoom nog zichtbaar en aanklikbaar zijn, bijvoorbeeld door de navigatie beter aan te passen aan het schermformaat of de weergave van het menu dynamisch te maken. Hetzelfde probleem doet zich voor op pagina's https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025 en https://bzof.op-shop.nl/327/papierwinkel/18-11-2025.

Wanneer de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, overlapt de tekst van de links “Nieuwsbrief” en “Word lid” de tekst van de links “Home” en “agenda”. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels. Hetzelfde probleem doet zich voor op pagina's https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 en https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24 .

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Er ontstaan problemen als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Bij succescriterium 1.4.4 is al beschreven dat er content verloren gaat als tot 200% wordt ingezoomd. Dat gebeurt ook als tot 400% wordt ingezoomd. Deze problemen zijn hier daarom niet nog een keer benoemd. Zorg dat de problemen niet alleen opgelost worden voor als tot 200% is ingezoomd, maar ook voor 400%.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bzof.nl/ wordt een aangepaste toetsenbordfocusindicator gebruikt op de links in het hoofdmenu, zoals “Agenda”. Deze focusindicator is zichtbaar als een oranje rand (HEX #FF7320) op een witte achtergrond. De contrastratio tussen deze kleuren is 2,7:1, wat lager is dan de vereiste minimale waarde van 3,0:1. Ditzelfde probleem komt op meerdere pagina’s van de website voor. In de footer van de website opent de knop “Cookie-instellingen wijzigen” een dialoogvenster. Wanneer de knoppen “Akkoord” en “Niet akkoord” hierin toetsenbordfocus krijgen, is de oranje rand zichtbaar tegen een witte achtergrond. De aangepaste toetsenbordfocusindicator wordt ook gebruikt in de footer op de knoppen “Trek je toestemming in”/“Geef toestemming” en “Cookie-instellingen wijzigen”. De oranje rand op een beige achtergrond (HEX #FDE5D0) heeft een contrastratio van 2,2:1. Op de pagina https://www.bzof.nl/ hebben de volgende links een oranje rand op een witte achtergrond wanneer ze toetsenbordfocus krijgen: “Alle adressen en openingstijden”, “Ik wil zaden inleveren”, “Naar de aanwinsten” en andere. Dit probleem komt ook voor op andere pagina’s van de website. 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.

Op de pagina https://www.bzof.nl/ gebruikt de carousel grijze stippen (HEX #999999) om het aantal dia’s en de huidige dia aan te geven. Tegen de witte achtergrond is de contrastratio 2,8:1. Deze waarde is lager dan de vereiste minimale contrastratio van 3,0:1 voor grafische objecten die een status aanduiden. De bolletjes zijn dus niet voor iedereen zichtbaar. Zorg dat de bolletjes genoeg contrast hebben.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything wordt een aangepaste toetsenbordfocusindicator gebruikt op de selectievakjes in de filters. De selectievakjes hebben een grijze kleur (HEX #9C9B9D) tegen een witte achtergrond, wat resulteert in een contrastratio van 2,8:1. Daarnaast is er een lichtgrijze rand (HEX #CDCDCE) op een witte achtergrond zichtbaar, met een contrastratio van 1,6:1. Deze waardes zijn lager dan de vereiste minimale contrastratio van 3,0:1. Ditzelfde type aangepaste toetsenbordfocusindicator wordt ook gebruikt op tabbalknoppen op pagina’s https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 en https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://bzof.op-shop.nl/ staan filters met interactieve elementen: “Categorie”, “Locatie”, “Tag” en “Wanneer”. Deze interactieve elementen en de menu’s met opties die ze openen zijn niet toegankelijk via het toetsenbord. Het is niet mogelijk om deze filters te openen of te sluiten met alleen het toetsenbord. Zorg dat alle interactieve elementen volledig met het toetsenbord bediend kunnen worden. Bezoekers die afhankelijk zijn van toetsenbordnavigatie moeten de filters kunnen bereiken, openen, opties selecteren en weer sluiten zonder gebruik van een muis.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.bzof.nl/klantenservice/contact.html gebruikt het formulier alleen HTML5-validatie voor de invoervelden “Naam”, “Straatnaam en huisnummer” en “Postcode en woonplaats”. Deze foutmeldingen verdwijnen te snel. Er is dus tijdslimiet ingesteld. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything verschijnt er na het klikken op de knoppen “Reserveren” of “Mijn lijsten” een dialoogvenster. Na ongeveer 7–8 seconden wordt de bezoeker automatisch doorgestuurd naar een andere (inlog)pagina. Hierdoor kan het voorkomen dat bezoekers niet genoeg tijd hebben om de informatie in de dialoogvensters te lezen. Er is op dit moment geen mechanisme beschikbaar om deze tijdslimiet uit te schakelen, aan te passen of te verlengen. Zorg dat bezoekers deze tijdslimiet kunnen beheren, zodat iedereen voldoende tijd krijgt om de inhoud van de dialoogvensters te begrijpen. Hetzelfde probleem wordt waargenomen op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 en https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bzof.op-shop.nl/ zijn skiplinks aanwezig. Ze worden correct weergegeven zodra ze toetsenbordfocus krijgen en zijn toegankelijk met het toetsenbord. De functionaliteit is echter onjuist: in plaats van de focus te verplaatsen naar het bedoelde gedeelte van de pagina, zoals de hoofdinhoud, wordt de bezoeker doorgestuurd naar de homepagina op https://www.bzof.nl/. Er moet een mogelijkheid zijn om vaste onderdelen van een pagina, zoals het navigatiemenu, over te slaan. Dit gebeurt met een skiplink. Een skiplink moet de eerste link op de pagina zijn en mag verborgen zijn zolang die zichtbaar wordt bij toetsenbordfocus. Zorg ervoor dat de skiplink goed werkt: de link moet de focus daadwerkelijk verplaatsen naar het juiste inhoudsdeel op dezelfde pagina. Pas de link aan zodat deze niet leidt tot een paginaverversching of redirect, maar de focus correct verplaatst binnen de huidige pagina. Hetzelfde probleem wordt waargenomen op pagina’s https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025, https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025 en https://bzof.op-shop.nl/327/papierwinkel/18-11-2025.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://bzof.op-shop.nl/ is de titel "Bibliotheek Zuidoost Fryslân" geen goede beschrijving van de inhoud van de pagina.
In het `title`-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het `title`-element van de pagina die de inhoud van de pagina beschrijft.

Op de website zijn er pagina’s waarop dezelfde tekst in het `title`-element van de pagina staat: “Catalogus”. Dit geldt voor de volgende pagina’s: https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything, https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24, https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24. Dit is niet de bedoeling. In het `title`-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het `title`-element, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

In het PDF-document op https://www.bzof.nl/dam/Overons/Vrijwilligerworden/2022-folder-vrijwilligerswerk-in-de-bibliotheek.pdf is in de documenteigenschappen de titel "folder_vrijwilligersbeleid_V5.indd" ingesteld. Deze titel beschrijft de inhoud van het document niet op een duidelijke en betekenisvolle manier. De titel van een pdf-document moet het onderwerp of doel van het document duidelijk beschrijven. Hierdoor kunnen bezoekers snel en makkelijk bepalen of het document relevant is. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het pdf-document.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://bzof.op-shop.nl/ zijn er filters die menu’s met opties openen. Deze menu’s kunnen momenteel alleen met een muisklik worden geopend, wat in strijd is met succescriterium 2.1.1. Wanneer de menu’s geopend zijn, kan de toetsenbordfocus het menu verlaten en zich verplaatsen naar de hoofdpagina, terwijl het menu open blijft en een deel van de inhoud bedekt. Hierdoor kan de focus terechtkomen op elementen die visueel verborgen zijn achter het openstaande menu. 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 de pagina https://www.bzof.nl/klantenservice.html opent de link met afbeelding onder de sectie "Suggesties & klachten" de pagina “Suggesties & klachten”. De toegankelijke naam van deze link is echter "Pratende persoon", wat de functie van de link niet juist beschrijft. Wanneer een link alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Een blinde bezoeker weet daardoor niet wat deze link precies doet. Voeg tekst toe die deze link goed beschrijft.

De pagina's met zoekresultaten op pagina https://bzof.op-shop.nl/ komen meerdere links voor met de tekst “Meer informatie”, “Meer informatie en reserveren” en “... meer”. Omdat deze links vaak in herhalende structuren staan, is niet duidelijk waar elke link naartoe leidt. Voeg specifieke informatie toe aan de linktekst, bijvoorbeeld “Meer informatie over workshop Mediawijsheid” of “Reserveren voor cursus Digitaal Veilig”. Ook hier kan aanvullende tekst visueel verborgen worden als de opmaak dat vereist.

Op de pagina https://bzof.op-shop.nl/ ontbreekt voldoende context bij de pagineringslinks. Hoewel ziende bezoekers begrijpen dat “1”, “2”, “3”, “Volgende” enzovoort verwijzen naar pagina’s, is dit niet duidelijk voor bezoekers met een visuele beperking of voor gebruikers van schermlezers. 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’.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 zijn tabbladen aanwezig die bestaan uit secties met verborgen inhoud, die zichtbaar worden wanneer een bezoeker op de tabknop klikt. De volgorde van de toetsenbordnavigatie werkt hierbij niet zoals verwacht. Tabbladen bestaan uit tablinks en tabpanelen. Eén van de tabpanelen is zichtbaar, de rest verborgen. Als een bezoeker op een tab klikt of deze activeert met het toetsenbord, verschijnt de inhoud van het bijbehorende tabpaneel. De pijltjestoetsen worden gebruikt om door de tablinks te navigeren. Als de toetsenbordfocus het actieve tabblad bereikt, moet de focus naar de inhoud van het bijbehorende tabpaneel gaan. Dit is de verwachte focusvolgorde. Lees er meer over op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/. Hetzelfde staat op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24.

Op de pagina https://www.bzof.nl/404.html staat onder de kop “Pagina niet gevonden” een logo dat tevens een link is. Deze link bevat geen beschrijvende tekst over de bestemming. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt. Dit kan opgelost worden door een alt-tekst aan de afbeelding van het logo toe te voegen, of een tekst die alleen zichtbaar is voor schermlezers, zoals een `aria-label`-attribuut.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website https://www.bzof.nl/ beschrijft de kop “Snel naar” de inhoud die erop volgt niet op een duidelijke en specifieke manier. Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. 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. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Op de pagina https://www.bzof.nl/ staat onder de carousel een knop met een pijltje die naar de volgende dia schakelt. De toegankelijke naam van deze knop is "Volgende", maar dit beschrijft de functie van de knop niet nauwkeurig. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

Op de pagina https://www.bzof.nl/klantenservice/bibliotheek-aan-huis.html staat een iframe met het `title`-attribuut "Video". Deze titel geeft geen betekenisvolle informatie over de inhoud van het iframe. Hierdoor kunnen bezoekers die afhankelijk zijn van hulpsoftware niet begrijpen wat het doel of onderwerp is van de ingesloten inhoud.
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://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything bevat de knop mit zichtbare tekst “Alles” naast het zoekveld een toegankelijke naam met onduidelijke tekst en tekens: “SEARCH_SELECT_SCOPE Alles”. Deze toegankelijke naam moet herschreven worden naar een begrijpelijke en duidelijke beschrijving zodat gebruikers meteen begrijpen wat de knop doet.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bzof.nl/ is het toetsenbordfocus niet zichtbaar op de keuzerondjes “Catalogus” en “Site” naast “Zoeken in”. 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.
In de footer van de website https://www.bzof.nl/ opent de knop met het label "Cookie-instellingen wijzigen" een dialoogvenster. In dit dialoogvenster is het toetsenbordfocus niet zichtbaar op de “X”-knop.

Op de pagina https://www.bzof.nl/klantenservice.html is het toetsenbordfocus niet zichtbaar op de links met afbeeldingen in secties zoals “Lenen”, “In de Bibliotheek”, “E-books en luisterboeken” en andere. Ditzelfde probleem doet zich voor op de pagina https://www.bzof.nl/jeugd-en-jongeren/digitaal-aanbod-lezen.html in de secties “Lezen en luisteren”, “Voorleesfilmpjes en digitale prentenboeken” en “Lezen voor school”.

Bovenaan de pagina https://bzof.op-shop.nl/ staan vier filters. Wanneer deze worden geopend (nu alleen met een muisklik, wat valt onder succescriterium 2.1.1), is het toetsenbordfocus niet zichtbaar op de geselecteerde selectievakjes en keuzerondjes.
Op de pagina https://bzof.op-shop.nl/ is het toetsenbordfocus niet zichtbaar op de pagineringslinks.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bzof.nl/ is de zichtbare tekst van de zoekbalk (de plaatshoudertekst) “Waar ben je naar op zoek?”, terwijl de toegankelijke naam van het input-element “Zoekopdracht” is. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-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, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Op de pagina https://bzof.op-shop.nl/ is er een zoekveld met de plaatshoudertekst "Zoeken". De toegankelijke naam van dit invoerveld is echter leeg. Hierdoor is de zichtbare tekst “Zoeken” niet opgenomen in de toegankelijke naam.

Op de pagina https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025 ontbreekt bij een select-element in de tabel een zichtbaar label. De eerste optie fungeert hierbij als een pseudo-label, wat niet voldoet aan de vereisten voor toegankelijke formulierstructuur. 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. Hetzelfde probleem staat op pagina https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025.

Op de pagina https://www.bzof.nl/404.html staat onder de kop “Pagina niet gevonden” een logo met de tekst “de Bibliotheken Zuidoost Fryslân”. De toegankelijke naam van deze link is leeg. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De hoofdtaal van de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything is Nederlands, maar het lang-attribuut is onjuist ingesteld als "nl_NL".
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. Hetzelfde probleem doet zich voor op pagina's https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 en https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24.

In het PDF-document op https://www.bzof.nl/dam/bestanden/bibliotheekreglement-bzof-22-04-2025.pdf is de taal niet ingesteld in de metadata. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything staan verschillende elementen met toegankelijke namen in het Engels. Dit is problematisch, omdat schermlezers de Engelse tekst uitspreken volgens de uitspraakregels van het Nederlands, wat leidt tot onduidelijke of verwarrende voorlezing. De knop met een keuzelijst naast het zoekveld heeft bijvoorbeeld de toegankelijke naam “SEARCH_SELECT_SCOPE Alles”, de zoekknop heeft de naam “SEARCH.SEARCH”, de sorteermogelijkheid heet “SEARCH.SORTING”, de invoervelden in het onderdeel “Publicatiejaar” hebben de namen “SEARCH.FROM” en “SEARCH.THROUGH” en de paginaknoppen hebben toegankelijke namen zoals “Page 1” en “Page 2”. Deze namen moeten worden vertaald naar het Nederlands, zodat ze goed worden uitgesproken en begrepen door Nederlandstalige bezoekers die hulpsoftware gebruiken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina https://www.bzof.nl/klantenservice/contact.html maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kun je de tekstgrootte niet aanpassen, zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina https://www.bzof.nl/klantenservice/contact.html maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kun je de tekstgrootte niet aanpassen, zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bzof.nl/ ontbreekt een tekstalternatief bij de knop met het vergrootglasicoon. Het pictogram wordt via ::after ingeladen met CSS en er is verborgen tekst aanwezig. Deze tekst is verborgen met display:none. Dat is niet de juiste techniek, want dit maakt het ook onzichtbaar voor hulpsoftware. Een betere techniek is de CSS-clip techniek toe te passen op de tekst die verborgen moet worden. Dan krijgt de knop een toegankelijke naam. Ditzelfde probleem komt voor in de sticky footer van de website, wanneer deze op een klein scherm wordt bekeken, ontbreekt eveneens een tekstalternatief bij de vergrootglasiconen op de zoekknoppen in het submenu dat wordt geopend via het navigatie-item “Zoeken”, en op de pagina https://bzof.op-shop.nl ontbreekt bij het vergrootglasicoon op de zoekknop naast het zoekveld ook een tekstalternatief.

Op de pagina’s van de website https://www.bzof.nl/ verschijnt bij weergave op een klein scherm een vaste footer met een navigatiemenu. Dit navigatiemenu is een lijst (`ul`) met `role="menubar"`. De vereiste kindrol ontbreekt echter bij de items in het menu. Het item “Menu” en het item “Zoeken” zijn selectievakjes. Voor sommige ARIA-rollen is een combinatie van ouder- en kindrollen nodig. Dit is voor elke rol precies beschreven in WAI-ARIA. Als deze rollen niet (volledig) in de code staan, werken de elementen niet zoals de ontwikkelaar het bedoeld heeft. En als maar een deel van de verplichte rollen aanwezig is, heeft dat geen enkel positief effect op de toegankelijkheid. Deze rol kan beter weggelaten worden, want die is hier niet nodig. Er zou veel moeten worden aangepast om het kloppend te krijgen, terwijl de lijst op zichzelf al toegankelijk is, zonder deze rol.
Het is het beste om de rol ‘menubar’ weg te laten. Daarbij moet ook het `role="none"` van de li-elementen verwijderd worden. Aangezien “Menu” en “Zoeken” knoppen zijn die submenu’s openen, moet hiervoor een correct button-element worden gebruikt in plaats van een input-element met `type="checkbox"`.
Moet deze rol toch gebruikt worden? Raadpleeg dan https://www.w3.org/WAI/ARIA/apg/patterns/menu/. Hier staat uitgelegd wat er nodig is om een toepassing met `role="menubar"` te bouwen.
Ditzelfde probleem doet zich voor in het menu dat wordt geopend via de optie “Menu”. Dit menu is een lijst (ul) met `role="menu"`, maar de items in het menu missen de juiste onderliggende rollen.

Wanneer de website https://www.bzof.nl op een klein scherm wordt bekeken, is er een sticky footer met een navigatiemenu. De items “Menu” en “Zoeken” openen submenu’s, maar een blinde bezoeker krijgt geen informatie over de toestand van deze submenu’s — of ze open of gesloten zijn. Als er een interactieve element is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen. Daarvoor kan het aria-expanded-attribuut gebruikt worden.

In de footer van de website https://www.bzof.nl/ opent de knop met het label "Cookie-instellingen wijzigen" een dialoogvenster. Dit dialoogvenster 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 (`aria-label="Beschrijving van de inhoud"`) of een aria-describedby en `role="dialog"`.

Bovenaan de pagina https://bzof.op-shop.nl/ staan filters met interactieve elementen: “Categorie”, “Locatie”, “Tag” en “Wanneer”. Deze interactieve elementen hebben geen toegankelijke rollen. Elk HTML-element heeft een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpsoftware moeten de juiste rol van elk element op een webpagina kunnen herkennen. Alleen dan kunnen zij op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Zorg ervoor dat het element de juiste rol heeft.

Op de pagina https://bzof.op-shop.nl/ zijn er filters met interactieve elementen: "Categorie", "Locatie", "Tag" en "Wanneer". Deze interactieve elementen openen menu’s met opties. De open of gesloten toestand is visueel duidelijk, maar deze status wordt niet programmatisch gecommuniceerd aan schermlezers. Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo. Dit kan opgelost worden door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Op de pagina https://bzof.op-shop.nl/ ontbreekt bij het zoekveld met de plaatshoudertekst "Zoeken" een toegankelijke naam. 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.

Op de pagina https://bzof.op-shop.nl/27/digi-taalhuis-oosterwolde/vanaf/18-11-2025 staat in de tabel een keuzelijst (select-element) met de zichtbare tekst “Locatie”. De toegankelijke naam ontbreekt. Hierdoor is het element niet toegankelijk. Geef het select-element een toegankelijke naam. Hetzelfde probleem staat op pagina https://bzof.op-shop.nl/45/klik-en-tik-oosterwolde/vanaf/18-11-2025.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything hebben de dialoogvensters die geopend worden via de links “Reserveren” en “Mijn lijsten” correct het attribuut `role="dialog"`. Binnen het element met `role="dialog"` staat echter een element met `role="document"`. De ARIA-rol `document` wordt gebruikt om aan te geven dat een element voornamelijk leesbare inhoud bevat, zoals tekstuele documenten of artikelen. Dit helpt hulpsoftware om de inhoud als leesbaar document te behandelen, waardoor navigatie voor schermlezers wordt verbeterd.
In dit geval bevat het dialoogvenster echter een mix van leesbare inhoud (zoals de boodschap en de kop) én interactieve elementen (zoals knoppen). Het gebruik van `role="document"` op een container met zowel leesbare als interactieve inhoud is problematisch. Dit kan verwarring veroorzaken bij hulpsoftware, omdat interactieve elementen binnen een `document`-container mogelijk niet als zodanig herkend worden.
De rol `document` moet daarom niet gebruikt worden op containers die zowel tekstuele inhoud als interactieve elementen bevatten. Voor meer informatie over dit onderwerp kan verwezen worden naar de documentatie over ARIA-rollen op de website van de W3C of WAI (Web Accessibility Initiative).
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role.
Hetzelfde probleem wordt waargenomen op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 en https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24.

Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/165877?qs=edu&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=24 staat een sectie met inhoud die eruitziet en zich gedraagt als tabbladen. Wanneer een bezoeker op een tabkop klikt, verschijnt nieuwe inhoud. De vereiste rollen en attributen ontbreken echter. De elementen die als tabpanel dienen, missen de juiste rol. De elementen met `role="tab"` zijn niet op enige manier gekoppeld aan de tabpanels die ze openen, omdat het `aria-controls`-attribuut ontbreekt. Daarnaast heeft het actieve `tab`-element geen `aria-selected`-attribuut. Als gevolg hiervan weet een blinde bezoeker niet welke sectie open is, en is de relatie tussen de tab en het bijbehorende paneel niet duidelijk voor hulpsoftware. Voeg de juiste rollen toe. Meer hierover is te lezen op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
Hetzelfde probleem wordt waargenomen op pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/title-detail/WISE/546823?qs=edu&scope=anything&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=24.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://fers.hostedwise.nl/wise-apps/opac/branch/9991/catalog/search?qs=edu&scope=anything passen de filters de zoekresultaten aan, en verschijnt er een melding zoals "Resultaten: 1 - 9 (van 9)" zonder dat de pagina opnieuw wordt geladen. Deze melding is een statusbericht, maar wordt niet aangekondigd door schermlezers omdat het element geen toetsenbordfocus krijgt. 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 aria-live-attribute aan de melding toe te voegen.