Rapport:
Audit digitale toegankelijkheid website van Bibliotheek Wierden

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website, bijvoorbeeld op de pagina https://www.bibliotheekwierden.nl/, staat in de header een logo. De alt-tekst daarvan is "Bibliotheek Wierden". Dit is niet voldoende. De alt-tekst moet beschrijven dat het om een logo gaat. Omdat het logo in een link staat, en er geen linktekst aanwezig is zal de alt-tekst ook als linktekst dienst doen. Daarom moet ook het linkdoel vermeld worden (terug naar de homepagina gaan).

Op alle pagina's van de website https://www.bibliotheekwierden.nl/ staat in de header de zichtbare tekst “Zoeken in”. Deze tekst is echter niet beschikbaar in de code van de pagina, maar wordt alleen via CSS-opmaak toegevoegd. Daardoor wordt deze tekst niet voorgelezen door schermlezers. Bezoekers die niet kunnen zien, missen daardoor belangrijke informatie. Zet deze tekst ook in de inhoud van de pagina zelf, zodat hij voor iedereen toegankelijk is.

Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ verschijnt op kleine schermen een menu onderaan de pagina. Het menu-item met de tekst “Zoeken” opent een extra venster met twee zoekbalken waarin knoppen met zoekiconen staan. Deze iconen missen alternatieve tekst. Hierdoor is de functie van deze knoppen niet waarneembaar voor hulpsoftware. Er moet gebruik worden gemaakt van een alt-tekst bij het img-element, een aria-label of een visueel verborgen tekst om dit op te lossen.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staat naast de link “Jeugd & Jongeren” onder de kop “Jeugd | 0-6 jaar” een pijltje. Dit icoon is toegevoegd met CSS via een ::before-pseudo-element en wordt door schermlezers uitgesproken als “before”. Aangezien het om een decoratief icoon gaat dat geen extra informatie geeft, moet dit verborgen worden voor schermlezers. Zie ook pagina https://www.bibliotheekwierden.nl/activiteiten/activiteiten/voorleesfilmpjes/digitale-voorleestas.html met de link “Voorleesfilmpjes”.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html, hebben de afbeeldingen alt-tekst, maar deze kunnen als decoratief worden aangeduid. Zorg dat ze lege alt-attributen hebben. Men moet daarna wel de hele inhoud van het kaartje in een link opnemen. Een soortgelijk probleem doet zich voor op de pagina https://www.bibliotheekwierden.nl/collectie.html onder de kop "Zoek je iets?" en https://bibliotheekwierden.op-shop.nl/.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs.html onder de kop “Voor jeugd & jongeren” is een decoratieve afbeelding aanwezig. De alternatieve tekst van deze afbeelding is “wetenschappelijke boeken”, terwijl de afbeelding geen extra informatie toevoegt. Een decoratieve afbeelding moet verborgen worden voor schermlezers met een leeg alt-attribuut, bijvoorbeeld alt="". Dit probleem komt ook voor bij andere afbeeldingen op deze pagina.

Op pagina https://www.bibliotheekwierden.nl/collectie.html onder de koppen “Wetenschappelijke boeken” en “Digitale bronnen” zijn decoratieve afbeeldingen aanwezig die niet correct verborgen zijn voor schermlezers. Deze afbeeldingen bevatten een alternatieve tekst die onterecht inhoud suggereert. Voor decoratieve afbeeldingen moet een leeg alt-attribuut worden gebruikt, zoals alt="".

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs.html onder de koppen “Voor professionals” en “Onderzoek doen” is een decoratieve afbeelding aanwezig waarvan het alt-attribuut alleen een spatie bevat: alt=" ". Hierdoor is de afbeelding niet correct verborgen voor schermlezers. Een decoratieve afbeelding moet een leeg alt-attribuut hebben, zoals alt="".

Op pagina https://www.bibliotheekwierden.nl/collectie.html onder de kop “Muziek” is een decoratieve afbeelding aanwezig met een alt-attribuut dat alleen een spatie bevat. Hierdoor is de afbeelding niet verborgen voor schermlezers. Een decoratieve afbeelding moet verborgen worden door gebruik te maken van een leeg alt-attribuut, bijvoorbeeld alt="". Dit komt ook voor op https://www.bibliotheekwierden.nl/jeugd-en-onderwijs.html.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf is op alle pagina’s, behalve pagina 2, het logo van “de Bibliotheek Wierden” als artefact toegevoegd. Afbeeldingen die als artefact zijn gemarkeerd, zijn niet toegankelijk voor schermlezers. Omdat dit logo informatief is, moet het worden toegevoegd met een Figure-tag en voorzien worden van een beschrijving via een alt-tekst.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf zijn op pagina’s 1, 2, 3, 7, 9, 10 en 11 decoratieve afbeeldingen ten onrechte gemarkeerd met een Figure-tag zonder beschrijving. De Figure-tag is bedoeld voor informatieve afbeeldingen en vereist altijd een beschrijving. Deze decoratieve afbeeldingen moeten worden gemarkeerd als artefact, zodat ze verborgen zijn voor schermlezers.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf zijn op pagina’s 4, 5 en 6 decoratieve afbeeldingen aanwezig die ten onrechte zijn gemarkeerd als figures met automatisch gegenereerde beschrijvingen. Omdat deze beschrijvingen geen betekenisvolle informatie toevoegen, mogen deze afbeeldingen niet als Figure worden getagd. Ze moeten worden gemarkeerd als artefact.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html onder de kop “NTR | Klokhuis - Wat is journalistiek” staat een video met een voice-over. De video bevat automatisch gegenereerde ondertiteling. Deze ondertiteling is onnauwkeurig, bevat fouten en mist interpunctie. Video’s met gesproken tekst moeten altijd nauwkeurige ondertiteling bevatten die exact overeenkomt met wat er gezegd wordt. Alleen zo is de informatie ook toegankelijk voor bezoekers die de video niet of moeilijk kunnen horen.

Op pagina https://www.bibliotheekwierden.nl/contact/open-plus.html zijn video’s aanwezig met automatisch gegenereerde ondertiteling. De ondertiteling is onnauwkeurig, bevat fouten en mist interpunctie. Voor video’s waarin gesproken wordt, is het noodzakelijk om correcte ondertiteling aan te bieden die overeenkomt met de gesproken tekst, zodat ook bezoekers die de video niet goed kunnen horen alle informatie krijgen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/contact/open-plus.html wordt een video gepresenteerd onder de kop "Hoe werkt Open+". De video bevat het logo van de Bibliotheek Noordwest Veluwe aan het einde (vanaf 0:52). 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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.bibliotheekwierden.nl/contact/open-plus.html voldoet niet aan succescriterium 1.2.5, dat een audiobeschrijving voor video's vereist. Specifiek voor deze video is een audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor. 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: Op alle pagina’s van de website, zoals op https://www.bibliotheekwierden.nl/, staat in de header een groep van twee keuzerondjes: “Catalogus” en “Site”, voorafgegaan door de tekst “Zoeken in”. Deze elementen vormen visueel een groep, maar deze relatie is niet vastgelegd in de HTML-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 alle pagina’s van de website, zoals op https://www.bibliotheekwierden.nl/, staat in de header een groep van twee keuzerondjes: “Catalogus” en “Site”, voorafgegaan door de tekst “Zoeken in”. Elk keuzerondje staat in een label. Het label is echter verborgen door display:none in de CSS, waardoor deze in de accessibility tree niet herkend wordt. Pas de CSS aan zodat de tekst niet meer verwijderd wordt uit de DOM en accessibility tree.

Op pagina https://www.bibliotheekwierden.nl/ wordt onder de slider paginering weergegeven. Visueel is te zien welk paginanummer actief is, maar deze visuele aanduiding is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer niet aangeven welke pagina actief is. Dit probleem kan worden opgelost door een verborgen tekst toe te voegen of door gebruik te maken van het attribuut aria-current.

Op pagina https://www.bibliotheekwierden.nl/ staan koppen van niveau 3 direct onder elkaar zonder inhoud ertussen. Dit is het geval bij de koppen “Kom langs en ontdek de bieb!” en “Doe”, en bij “Maak jij al gebruik van onze app?” en “Download de app”. Als twee koppen van hetzelfde niveau direct na elkaar komen zonder tussenliggende inhoud, wijst dit op een fout in de structuur. De kopniveaus moeten aangepast worden om de tekststructuur correct weer te geven.

Op pagina https://www.bibliotheekwierden.nl/contact.html staan de koppen “Geen antwoord op je vraag gevonden? Neem contact met ons op via:” en “Telefoon” direct onder elkaar zonder tussenliggende inhoud. Dit duidt op een onjuiste toepassing van kopniveaus. Er moet een duidelijke hiërarchie in de structuur van de tekst zijn.

Op pagina https://www.bibliotheekwierden.nl/contact/word-lid-van-de-bibliotheek.html staan de koppen “Onze Bibliotheek abonnementen” en “Jeugd t/m 17 jaar” direct onder elkaar zonder inhoud ertussen. Hierdoor klopt de kopstructuur niet. Eén van de koppen moet worden aangepast om de hiërarchie van de tekst goed weer te geven.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staan de koppen “Aan de slag met mediawijze thema’s” en “HoeZoMediawijs?” direct na elkaar zonder inhoud ertussen. Deze structuur is onjuist en moet aangepast worden door de juiste kopniveaus toe te passen.

Op pagina https://www.bibliotheekwierden.nl/privacy-statement.html staat onder de kop “Doorgifte aan derden” een tekstblok dat visueel uit acht alinea’s bestaat, maar in de code als één p-element is opgemaakt. Hierdoor wordt de structuur van de tekst niet correct weergegeven. Elke visueel herkenbare alinea moet een eigen p-element hebben. Het aantal alinea’s in de code moet overeenkomen met het aantal alinea’s dat visueel zichtbaar is.

Op pagina https://www.bibliotheekwierden.nl/contact/digitale-toegankelijkheid.html zijn de teksten “Huidige status” en “Contact” visueel opgemaakt als koppen, maar in de code niet gemarkeerd als heading-elementen. Hierdoor kunnen gebruikers van hulpsoftware deze tekstonderdelen niet herkennen als koppen. Om correcte navigatie mogelijk te maken, moeten deze teksten worden gemarkeerd als heading-elementen.

Op https://bibliotheekwierden.op-shop.nl/ staat een zoekfunctie in de header. De zoekknop heeft een label. Maar het label is echter verborgen door display:none in de CSS, waardoor deze in de accessibility tree niet herkend wordt. Pas de CSS aan zodat de tekst niet meer verwijderd wordt uit de DOM en accessibility tree.

Op pagina https://bibliotheekwierden.op-shop.nl/ bevat de zijbalk met filters groepen keuzevakjes met de labels “Categorie”, “Locatie”, “Tag” en “Wanneer”. Hoewel deze groepen visueel duidelijk zijn, is de relatie tussen de groepslabels en de bijbehorende keuzevakjes in de code niet aanwezig. Hierdoor worden de keuzevakjes door schermlezers voorgelezen zonder de context van het groepslabel. Dit probleem kan worden opgelost door de groepslabels samen met de bijbehorende keuzevakjes op te nemen in een fieldset-element met een bijbehorende legend. Andere semantisch correcte oplossingen zijn ook mogelijk.

Op pagina https://www.bibliotheekwierden.nl/privacy-statement.html, onder het kopje "Doorgifte aan derden", zijn lijsten met vier, vijf en twee items aanwezig, maar ontbreekt de juiste opmaak. 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://bibliotheekwierden.op-shop.nl/ wordt een kop van niveau 4 onmiddellijk gevolgd door een andere kop van hetzelfde niveau. Zie "Mijn strijd tegen onrecht" en "Verzorgd door Boek- en kantoorvakhandel Reterink".
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.

Op pagina https://bibliotheekwierden.op-shop.nl/ maakt de paginering onder de zoekresultaten visueel onderscheid tussen het huidige paginanummer, maar dit onderscheid is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit kan opgelost worden door een verborgen tekst aan de link toe te voegen, of door het aria-current-attribuut te gebruiken.

Het pdf-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf is gedeeltelijk getagd. Pagina 12 met de kop "Onze cijfers van 2022" is helemaal niet getagd. Voetnoten op alle pagina's zijn ook niet getagd. Dit deel van het document kunnen wij hierdoor niet 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.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf zijn veel koppen niet gemarkeerd als headings in de tagstructuur. Dit geldt onder andere voor de teksten “Jaarverslag2022 Bibliotheek Wierden”, “Inhoud” en “Nationale” op pagina’s 1, 2 en 3, en voor “Voorleesdagen” en “Mediawijsheid” op pagina 5. Hierdoor wijkt de visuele structuur af van de semantische structuur. De P-tags moeten worden vervangen door H-tags zodat de tagstructuur overeenkomt met de visuele structuur van het document.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf staat op pagina 3 een lege heading-tag. Een heading zonder inhoud is verwarrend voor bezoekers die hulpsoftware gebruiken. Deze lege kop moet verwijderd worden of er moet inhoud aan toegevoegd worden.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf staan op pagina 4 twee koppen van niveau 2 direct na elkaar: “Wat opviel in 2022” en “Ontwikkelingen in grote lijnen”. Tussen deze koppen staat geen inhoud. Wanneer een kop gevolgd wordt door een andere kop zonder inhoud ertussen, kan dit de indruk wekken dat er informatie ontbreekt. Dit kan opgelost worden door het kopniveau aan te passen of door een andere tag te gebruiken.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/afbeeldingen/protocol-cameratoezicht-ondertekend-door-directie.pdf ontbreken structurele tags volledig. Hierdoor is de inhoud van het document niet toegankelijk voor schermlezers. Door het ontbreken van de pdf-codelaag kunnen elementen zoals semantische koppen en alternatieve teksten bij afbeeldingen niet worden onderzocht. Wanneer de structuur wordt toegevoegd, kunnen aanvullende toegankelijkheidsproblemen zichtbaar worden die nu nog niet beoordeeld kunnen worden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/ is de volgorde van HTML-elementen binnen de artikelen onjuist. De afbeelding staat in de code boven de kop van het artikel. Voor bezoekers die een schermlezer gebruiken, kan dit verwarrend zijn omdat ze niet weten bij welk artikel de afbeelding hoort. Om de structuur logisch te maken, moet alle inhoud die bij een bepaalde kop hoort, in de code onder die kop geplaatst worden. De visuele opmaak mag hiervan afwijken.

Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek is de volgorde van elementen binnen zoekresultaten onjuist. In de HTML-code staat de afbeelding boven de bijbehorende kop, wat leidt tot een onlogische structuur voor schermlezers. Alle bijbehorende inhoud moet in de code onder de kop geplaatst worden, zodat de opbouw van de informatie duidelijk en toegankelijk is.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs.html staan in de HTML-structuur afbeeldingen boven de koppen van artikelen. Deze volgorde zorgt ervoor dat schermlezers eerst de afbeelding voorlezen, zonder context. De koppen moeten bovenaan in de code staan, zodat de informatie logisch en begrijpelijk is.

Op pagina https://bibliotheekwierden.op-shop.nl/ worden binnen de artikelen afbeeldingen in de HTML-code vóór de koppen geplaatst. Om de structuur te verbeteren, moet de kop bovenaan worden geplaatst en de bijbehorende inhoud daaronder.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/contact/contactformulier.html ontbreekt bij een formulier met invoervelden voor persoonlijke gegevens (bijvoorbeeld achternaam, e-mailadres, telefoonnummer) het autocomplete-attribuut. 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. Voor het e-mailadres moet bijvoorbeeld `autocomplete="email"` worden gebruikt.
Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website wordt bekeken op een klein scherm, verschijnt er een navigatiemenu in de footer. 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. Hetzelfde probleem wordt waargenomen wanneer het item "Zoeken" een extra venster opent. De toetsenbordfocus op de knop met het zoekpictogram wordt alleen aangegeven door een kleurverandering.

Op pagina https://www.bibliotheekwierden.nl/ staat onder de header een caroussel met navigatie. De actieve stip wordt alleen met kleur aangegeven. Het kleurverschil geeft aan welk bolletje op dit moment actief is, dus bij welke sectie de bezoeker op dit moment is.Het actieve bolletje kan bijvoorbeeld iets groter gemaakt worden dan de andere bolletjes, of omlijnd in plaats van ingevuld.

Op pagina https://www.bibliotheekwierden.nl/contact/contactformulier.html hebben de invoervelden "Onderwerp Verplicht" en "Wil je een bijlage meesturen?" een aangepaste indicator voor toetsenbordfocus die alleen te zien is aan verandering van de achtergrondkleur. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende. 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.
Bovenaan pagina https://bibliotheekwierden.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: Op pagina https://www.bibliotheekwierden.nl/ is in de header een zoekveld aanwezig. In hover-toestand heeft de grijze placeholdertekst (HEX #757575) tegen de lichtgrijze achtergrond (HEX #EDEDED) een contrastratio van 3,9:1. In focus-toestand heeft dezelfde grijze placeholdertekst tegen de oranje achtergrond (HEX #FDE5D0) een contrastratio van 3,8:1. Deze contrastverhoudingen zijn onvoldoende. Zorg dat de placeholdertekst een contrastratio van minstens 4,5:1 heeft ten opzichte van de achtergrond.

Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ staat op kleine schermen in de footer een menubalk. De oranje tekstkleur (HEX #FF7320) van de items “Home”, “Menu” en “Zoeken” heeft bij toetsenbordfocus op een grijze achtergrond (HEX #39373A) een contrastratio van 4,3:1. Dit voldoet niet aan de minimale eis van 4,5:1 voor tekst. De tekstkleur moet worden aangepast om aan de vereiste contrastratio te voldoen.

Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek staat in de zijbalk onder de kop “Verfijnen op resultaten” een filtergedeelte met accordeons “Type” en “Trefwoorden”. Wanneer deze accordeons toetsenbordfocus krijgen, verandert de koptekst van zwart naar oranje (HEX #FF7320) op een witte achtergrond. De contrastratio is dan 2,7:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet de minimale contrastratio 4,5:1 zijn. Pas de kleur aan om aan deze eis te voldoen.

Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek staan in de zijbalk bij de filters aantallen weergegeven in donkergrijze tekst (HEX #757575) tegen een lichtgrijze achtergrond (HEX #EDEDED). De contrastratio is 3,9:1 en voldoet niet aan de minimale eis van 4,5:1. De tekstkleur of de achtergrondkleur moet worden aangepast om aan de vereiste contrastratio te voldoen.

Op pagina https://bibliotheekwierden.op-shop.nl/ bevatten sommige events groene tekst (HEX #468847), zoals “nog 4 beschikbaar”, op een witte achtergrond. De contrastratio is 4,3:1. Omdat deze tekst kleiner is dan 19px, moet de contrastratio minimaal 4,5:1 zijn. De kleur moet worden aangepast om aan de toegankelijkheidseisen te voldoen.

Op pagina https://www.bibliotheekwierden.nl/contact/onze-vestigingen/vestiging.12116328.html/de-bibliotheek-wierden/ staan onder de koppen “Openingstijden” en “Afwijkende openingstijden” grijze teksten (HEX #757575) op een lichtoranje achtergrond (HEX #FDE5D0). De contrastratio is 3,8:1. Aangezien deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn. De kleuren moeten worden aangepast om de leesbaarheid te verbeteren.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf komt op meerdere pagina’s oranje tekst (HEX #F8931D) voor op een witte achtergrond. De contrastratio is 2,3:1. Voor kleine tekst is een minimale contrastratio van 4,5:1 vereist, en voor grote tekst 3,0:1. Dit probleem is zichtbaar bij onder andere “Inhoud” op pagina 3, “Wat opviel in 2022” en “Ontwikkelingen in grote lijnen” op pagina 4, en “Geletterde samenleving” op pagina 5. De tekstkleur moet worden aangepast om aan de vereiste contrastratio te voldoen.
In hetzelfde PDF-document is op pagina 12 witte tekst te zien op een oranje achtergrond (HEX #FF7320), bijvoorbeeld in “Onze cijfers van”. De contrastratio is 2,7:1, wat te laag is. Ook hier moet de contrastratio minimaal 4,5:1 zijn voor kleine tekst. De kleuren moeten worden aangepast voor voldoende contrast.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://bibliotheekwierden.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”, “Collectie”, “Onderwijs” en “Contact” 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://bibliotheekwierden.op-shop.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en er tot 400% wordt ingezoomd, zijn de links in de header met de teksten “Agenda”, “Collectie”, “Onderwijs” en “Contact” niet meer zichtbaar en niet bedienbaar. Deze links verdwijnen uit beeld en er wordt geen alternatief aangeboden, zoals een menu dat zich aanpast aan het kleinere zichtbare gebied. Als een bezoeker inzoomt, moet alle functionaliteit behouden blijven. Alle links moeten zichtbaar blijven en met toetsenbord en muis te bedienen zijn. Pas de lay-out aan zodat ook bij 400% zoom alle navigatielinks toegankelijk blijven.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ bevat de cookiebanner een knop met de tekst “Lees hier meer over cookies” die een dialoogvenster opent. De knoppen “Akkoord” en “Niet akkoord” gebruiken een aangepaste focusindicator in de vorm van een oranje rand (HEX #FF7320) op een witte achtergrond. De contrastratio van deze combinatie is 2,7:1 en voldoet niet aan de minimale eis van 3,0:1. Omdat de focusindicator via CSS is aangepast, geldt deze contrastratio-eis.

Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ is in de header eenzelfde probleem zichtbaar bij de links “Agenda”, “Collectie”, “Onderwijs” en “Contact”. De aangepaste oranje focusrand (HEX #FF7320) op de witte achtergrond heeft een contrastratio van 2,7:1 en voldoet daarmee niet aan de minimale vereiste van 3,0:1.

Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ verandert de tekstkleur van sommige links bij toetsenbordfocus van zwart naar oranje (HEX #FF7320), terwijl de achtergrond lichtoranje is (HEX #FDE5D0). Deze combinatie heeft een contrastratio van 2,2:1, wat onvoldoende is. De minimale contrastratio voor een aangepaste focusindicator is 3,0:1. Dit probleem is zichtbaar bij onder andere de links “Kom naar het Informatiepunt Digitale Overheid”, “Naar de BoekStartdag” en “Kom je ook een kijkje nemen?”.

Op pagina https://www.bibliotheekwierden.nl/ staan onder de header carrouselknoppen met grijze boliconen (HEX #999999) op een witte achtergrond. De contrastratio is 2,8:1 en voldoet niet aan de minimale eis van 3,0:1. De kleur van de iconen of de achtergrond moet worden aangepast.
Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek staan in de zijbalk filters met accordeons “Type” en “Trefwoorden”. Wanneer deze accordeons toetsenbordfocus krijgen, verandert de kleur van de pijliconen van zwart naar oranje (HEX #FF7320) tegen een witte achtergrond. De contrastratio van 2,7:1 is te laag. Voor informatieve elementen zoals iconen moet het contrast minimaal 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://bibliotheekwierden.op-shop.nl/ staan vier filters. Deze filters functioneren als uitklapbare comboboxen, maar 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, waaronder de filters, 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 pagina https://www.bibliotheekwierden.nl/contact/contactformulier.html maakt het formulier uitsluitend gebruik van HTML5-validatie voor alle invoervelden. De foutmeldingen die hierdoor verschijnen, verdwijnen te snel. Er is dus sprake van een tijdslimiet. Bezoekers krijgen hierdoor mogelijk niet voldoende tijd om de meldingen te lezen of hierop te reageren. Voeg daarom altijd zelf foutmeldingen toe aan het formulier, zodat deze duidelijk zichtbaar blijven en pas verdwijnen wanneer de gebruiker daar zelf actie op onderneemt. Controleer ook of er nog andere formulieren op de website zijn met hetzelfde probleem.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekwierden.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.bibliotheekwierden.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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/contact/word-lid-van-de-bibliotheek.html ontbreekt het title-element. Dit element moet op elke pagina aanwezig zijn en een unieke tekst bevatten die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Deze titel verschijnt in de browsertab en helpt bezoekers om snel te herkennen waar de pagina over gaat, vooral bij het gebruik van meerdere tabbladen of hulpsoftware. Voeg het title-element toe aan de HTML van de pagina en geef het een duidelijke en beschrijvende tekst, zoals bijvoorbeeld: “Lid worden van de bibliotheek – Bibliotheek Wierden”.

In het PDF-document https://www.bibliotheekwierden.nl/dam/afbeeldingen/protocol-cameratoezicht-ondertekend-door-directie.pdf is de titel niet ingesteld in de documenteigenschappen. 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.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekwierden.nl komt de toetsenbordfocus eerst op het logo terecht. Daarna verplaatst de focus zich naar de cookiebanner en vervolgens naar de skiplink. Omdat de cookiebanner visueel en functioneel het eerste interactieve element op de pagina is, moet deze ook als eerste focus krijgen. Daarna moet de skiplink volgen. De volgorde van interactieve elementen moet overeenkomen met de visuele volgorde om bezoekers die alleen een toetsenbord gebruiken goed te ondersteunen.

In de cookiebanner opent de knop “Lees hier meer over cookies” een dialoogvenster, maar de toetsenbordfocus verplaatst zich niet automatisch naar de knop “Sluiten” van dit venster. Hierdoor is het niet duidelijk waar de gebruiker zich bevindt binnen de interface. Bij het openen van een dialoogvenster moet de toetsenbordfocus direct verplaatst worden naar het eerste logische element binnen dat venster.

Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek verplaatst de toetsenbordfocus zich na de zoekknop in de header direct naar de zoekresultaten, waarbij de filters in de zijbalk worden overgeslagen. De filters zijn echter visueel gezien het eerstvolgende interactieve onderdeel. De focusvolgorde moet worden aangepast zodat de filters eerst focus krijgen, aansluitend op de visuele structuur.

Op alle pagina’s van de website https://www.bibliotheekwierden.nl opent de knop “Lees hier meer over cookies” in de cookiebanner een dialoogvenster. Wanneer dit venster open is, kan de toetsenbordfocus ontsnappen naar onderliggende pagina-inhoud. De focus moet binnen het actieve dialoogvenster blijven totdat het wordt gesloten met de sluitknop of via de ESC-toets. Dit voorkomt dat bezoekers met het toetsenbord per ongeluk buiten het venster terechtkomen en de context verliezen.

Op pagina https://bibliotheekwierden.op-shop.nl/ openen de interactieve elementen “Categorie”, “Locatie”, “Tag” en “Wanneer” een dialoogvenster. Ook hier kan de toetsenbordfocus ontsnappen naar de onderliggende pagina terwijl het venster open blijft. De focus moet worden beperkt tot het actieve dialoogvenster totdat het gesloten wordt.

Wanneer de website op een klein scherm wordt bekeken, verschijnt onderaan de pagina een hamburgermenu. Dit menu opent een mobiel menu, maar bezoekers kunnen met het toetsenbord buiten dit menu navigeren terwijl het nog openstaat. De toetsenbordfocus moet binnen het geopende menu blijven totdat het menu wordt gesloten via de sluitknop of de ESC-toets. Dit voorkomt verwarring en vergroot de bruikbaarheid van het menu voor bezoekers die het toetsenbord gebruiken.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staat onder de kop “Mediawijsheid” de link “Jeugd | 6-12 jaar” met een toegankelijke naam “before Jeugd | 6-12 jaar”. Deze linktekst beschrijft niet duidelijk waar de link naartoe leidt. Voor bezoekers met cognitieve beperkingen of voor gebruikers van schermlezers kan dit verwarrend zijn. De linktekst moet duidelijk maken wat de bestemming of functie van de link is.

Op pagina https://www.bibliotheekwierden.nl/activiteiten/activiteiten/voorleesfilmpjes/digitale-voorleestas.html staat de link “Voorleesfilmpjes” met het woordje ‘before’ in de naam. Ook hier is de betekenis van de link onduidelijk voor bezoekers die gebruikmaken van hulpsoftware. De linktekst moet verduidelijken wat er te verwachten is bij het volgen van de link.
Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek komt de linktekst “Virussen door de eeuwen heen” twee keer voor, maar met verschillende bestemmingen. Voor bezoekers die gebruikmaken van schermlezers is dit verwarrend, omdat zij dezelfde linktekst horen maar niet weten dat de doelen verschillen. Links met identieke teksten moeten ook naar dezelfde bestemming verwijzen. Als het doel verschilt, moet ook de linktekst worden aangepast.

Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek bevat de paginering links met alleen cijfers, zoals “1”, “2”, “3”, en een link met de tekst “Volgende”. Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor bezoekers met een visuele beperking of gebruikers van schermlezers is dit onduidelijk. De linkteksten moeten aangevuld worden met het visueel verborgen woord ‘pagina’, zodat schermlezers bijvoorbeeld “pagina 1” of “pagina 2” voorlezen. Zie ook paginering op pagina https://bibliotheekwierden.op-shop.nl/.

Op pagina https://www.bibliotheekwierden.nl/contact/word-lid-van-de-bibliotheek.html staan onder de kop “Onze Bibliotheek abonnementen” twee links met dezelfde tekst: “Word lid!”. Deze tekst maakt niet duidelijk wat de bestemming van de link is. Dit kan verwarrend zijn voor bezoekers met cognitieve beperkingen of voor gebruikers van schermlezers. De linktekst moet verduidelijken waar de link naartoe leidt, bijvoorbeeld door aan te geven om welk abonnement het gaat. Deze aanvullende informatie kan visueel verborgen worden als het visueel al duidelijk is bij welk onderdeel de link hoort.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs.html staat onder de kop “Voor jeugd & jongeren” een link met de tekst “Lees meer”. Deze tekst is niet informatief genoeg voor schermlezers. De linktekst moet aangevuld worden met informatie over de bestemming, zoals de titel van de pagina of het onderwerp. Deze toevoeging kan visueel verborgen worden als het in de context al duidelijk is.

Op pagina https://bibliotheekwierden.op-shop.nl/ staan meerdere links met de tekst “Meer informatie en reserveren” en “Meer informatie”. Omdat deze teksten op meerdere plaatsen voorkomen, is het voor schermlezers onduidelijk waar de link naartoe leidt. De linkteksten moeten worden aangevuld met specifieke informatie over het betreffende evenement. Indien de context visueel al duidelijk is, kan deze toevoeging visueel verborgen worden.

Op pagina https://bibliotheekwierden.op-shop.nl/ bevatten de afbeeldingen bij de evenementen alt-teksten die gelijk zijn aan de titel van het evenement. Aangezien de afbeeldingen decoratief zijn, moet het alt-attribuut leeg gelaten worden (alt=""). Ook moet de link om de afbeelding aangepast worden zodat het alle inhoud van het artikel bevat. Als het wenselijk is dat de afbeelding klikbaar blijft, is het beter om het hele evenement op te maken als een card waarbij de titel van het evenement de enige link is. De volledige card kan dan klikbaar worden gemaakt met JavaScript.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ staat in de footer de kop “Snel naar”. Deze kop is te algemeen en biedt geen context over de inhoud die volgt. Koppen zoals “Snel naar”, “Direct naar” of “Ga naar” geven geen extra informatie voor bezoekers die gebruikmaken van schermlezers. Deze bezoekers gebruiken koppen om snel te navigeren en te begrijpen wat voor soort inhoud volgt. De kop moet worden vervangen door een specifiekere aanduiding, zoals “Populaire pagina’s” of “Belangrijke onderwerpen”, zodat de inhoud die volgt duidelijker wordt.

Op pagina https://www.bibliotheekwierden.nl/ bevat de carrousel onder de header navigatieknoppen met pijlen. De toegankelijke naam van deze knoppen is “Volgende”. Deze naam geeft onvoldoende informatie over de functie van de knop. Een betere naam is bijvoorbeeld “Volgende slide”. Zo is voor gebruikers van hulpsoftware direct duidelijk wat de knop doet. Ditzelfde probleem is aanwezig op pagina https://www.bibliotheekwierden.nl/collectie.html onder de kop “Nieuwe boeken”.

Op pagina https://www.bibliotheekwierden.nl/contact.html wordt de kop “Contact” meerdere keren gebruikt met verschillende kopniveaus, zoals h2 en h3. Elke kop verwijst naar een ander gedeelte van de inhoud, zoals een algemene introductie of een specifieke sectie met contactgegevens. Door dezelfde koptekst te herhalen zonder duidelijke context ontstaat verwarring, vooral bij gebruikers van hulpsoftware. Deze technologieën gebruiken kopteksten om de structuur van een pagina te begrijpen. Unieke en betekenisvolle kopteksten zijn nodig om duidelijk te maken wat de inhoud van een sectie is. Ook op pagina https://www.bibliotheekwierden.nl/collectie.html komt de kop “Collectie” meerdere malen voor. Ook hier moet elke kop uniek worden gemaakt door het onderwerp van de sectie toe te voegen.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staat onder de kop “NTR | Klokhuis - Wat is journalistiek” een iframe met als beschrijving de tekst “Video”. Deze beschrijving geeft alleen het type inhoud aan en beschrijft niet waar de video over gaat. Een iframe moet een unieke en betekenisvolle beschrijving hebben die de inhoud beschrijft. Hierdoor kunnen blinde bezoekers beter beslissen of ze het bekijken van de inhoud de moeite waard vinden.

Op pagina https://www.bibliotheekwierden.nl/contact/open-plus.html is hetzelfde probleem zichtbaar bij de video’s. De iframes hebben beschrijvingen die onvoldoende beschrijven waar de video over gaat. Ook hier moet een duidelijke en beschrijvende titel worden toegevoegd aan het title-attribuut.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, bijvoorbeeld op https://www.bibliotheekwierden.nl, is in de header de toetsenbordfocus niet zichtbaar op de twee radio buttons “Catalogus” en “Site”. De focus moet altijd visueel waarneembaar zijn op interactieve elementen zoals knoppen, links en invoervelden die met het toetsenbord bereikbaar zijn. Zonder zichtbare focus kunnen bezoekers die met het toetsenbord navigeren niet bepalen welk element actief is, waardoor zij het niet kunnen bedienen.

Op pagina https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html zijn onder de kop “Aan de slag met mediawijze thema’s” afbeeldingen aanwezig die functioneren als links. Deze zijn focusbaar, maar de toetsenbordfocus is niet zichtbaar. Hierdoor is voor toetsenbordgebruikers onduidelijk wanneer een afbeelding actief is.

Op pagina https://bibliotheekwierden.op-shop.nl/ is de focusindicator niet zichtbaar op de knoppen voor paginering. Ook hier is het niet mogelijk om te zien welk paginanummer op dat moment focus heeft. De visuele focus moet worden toegevoegd aan deze knoppen zodat toetsenbordgebruikers correct kunnen navigeren.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ bevat de header een zoekveld met de placeholdertekst “Waar ben je naar op zoek?”. De toegankelijke naam van het invoerveld is echter “Zoekopdracht”. Omdat de zichtbare tekst niet overeenkomt met de toegankelijke naam, kunnen bezoekers die spraaksoftware gebruiken het zoekveld niet bedienen. Deze software herkent alleen commando’s op basis van zichtbare tekst. Zorg dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur met “Waar ben je naar op zoek?” aan het begin van de naam. De naam mag ook precies gelijk zijn aan de placeholdertekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekwierden.nl/ is het lang-attribuut onjuist ingesteld als nl_NL. Deze waarde is niet geldig. Schermlezers gebruiken het lang-attribuut om te bepalen welke uitspraakregels toegepast moeten worden. Als dit attribuut fout is ingesteld, wordt de tekst op een onjuiste manier uitgesproken, wat het begrijpen bemoeilijkt. De juiste taalcode voor Nederlands in Nederland is lang="nl-NL". Dit moet op het html-element worden toegepast.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf is de documenttaal niet ingesteld in de metadata. Hierdoor kunnen schermlezers de inhoud niet met de juiste uitspraakregels voorlezen. De taal moet worden ingesteld in de bestandseigenschappen van het document, zodat hulpsoftware de juiste uitspraak kan toepassen.

In het PDF-document op https://www.bibliotheekwierden.nl/dam/afbeeldingen/protocol-cameratoezicht-ondertekend-door-directie.pdf is eveneens geen taal ingesteld in de metadata. Ook hier moet de taal worden toegevoegd via de bestandseigenschappen, zodat de inhoud correct wordt voorgelezen door schermlezers.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

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

Op alle pagina’s van de website, zoals op https://www.bibliotheekwierden.nl/, staat in de header een zoekfunctie. De zoekknop heeft geen label. Verzorg een label voor deze knop.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://bibliotheekwierden.op-shop.nl/ openen de interactieve elementen “Categorie”, “Locatie”, “Tag” en “Wanneer” een dialoogvenster. Het role="dialog" en een toegankelijke naam ontbreken. Deze attributen zijn nodig zodat schermlezers correct kunnen aangeven dat het om een dialoogvenster gaat en wat de inhoud ervan is.

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

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

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

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

Op pagina https://bibliotheekwierden.op-shop.nl/ missen de interactieve elementen met de teksten “Categorie”, “Locatie”, “Tag” en “Wanneer” een correcte toegankelijke rol en naam. Deze elementen openen een interface waarmee filters geselecteerd kunnen worden, maar in de code ontbreekt de juiste rol of semantische aanduiding. Hierdoor is het voor schermlezers onduidelijk wat deze elementen doen. Elk interactief element moet een passende toegankelijke rol hebben die de functie beschrijft (zoals button of dialog) en een duidelijke toegankelijke naam (bijvoorbeeld met aria-label) die aangeeft wat de bezoeker ermee kan doen. Zo kunnen bezoekers die afhankelijk zijn van hulpsoftware goed begrijpen welke actie wordt uitgevoerd.

Op pagina https://bibliotheekwierden.op-shop.nl/ heeft het invoerveld met de placeholder Zoeken geen toegankelijke naam. Dit invoerveld is gekoppeld aan een label, maar het label is verborgen met display: none. Hierdoor wordt het niet gedetecteerd door schermlezers en heeft het invoerveld geen 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.

Uitkomst: Voldoende