Issues:
Audit digitale toegankelijkheid website van Bibliotheek Wierden
(Alleen de bevindingen)
Scope van de evaluatie
Naam website | Bibliotheek Wierden |
---|---|
Datum | 9 juni 2025 |
Scope van de website |
Binnen de scope van het onderzoek valt:
|
Conformiteitsdoel | WCAG 2.1 niveau AA |
Uitgebreide toetsresultaten
1. Waarneembaar
1.1 Tekstalternatieven
1.1.1 Niet-tekstuele content (Niveau A)
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 1: 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).
Bevinding 2: 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.
Bevinding 3: 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.
Bevinding 4: 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”.
Bevinding 5: 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/.
Bevinding 6: 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.
Bevinding 7: 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="".
Bevinding 8: 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="".
Bevinding 9: 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.
Bevinding 10: 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.
Bevinding 11: 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.
Bevinding 12: 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.
1.2 Op tijd gebaseerde media
1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)
Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevinding 13: 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.
Bevinding 14: 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.
1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)
Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevinding 15: 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.
1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)
Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevinding 16: 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.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 17: 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”.
Bevinding 18: 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.
Bevinding 19: 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.
Bevinding 20: 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.
Bevinding 21: 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.
Bevinding 22: 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.
Bevinding 23: 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.
Bevinding 24: 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.
Bevinding 25: 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.
Bevinding 26: 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.
Bevinding 27: 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.
Bevinding 28: 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.
Bevinding 29: 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.
Bevinding 30: 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.
Bevinding 31: 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.
Bevinding 32: 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.
Bevinding 33: 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.
Bevinding 34: 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.
Bevinding 35: 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.
1.3.2 Betekenisvolle volgorde (Niveau A)
Informatie over succescriterium 1.3.2 Betekenisvolle volgorde
Uitkomst: Onvoldoende
Bevinding 36: 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.
Bevinding 37: 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.
Bevinding 38: 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.
Bevinding 39: 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.
1.3.5 Identificeer het doel van de input (Niveau AA)
Informatie over succescriterium 1.3.5 Identificeer het doel van de input
Uitkomst: Onvoldoende
Bevinding 40: 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.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 41: 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.
Bevinding 42: 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.
Bevinding 43: 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.
Bevinding 44: 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.
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 45: 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.
Bevinding 46: 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.
Bevinding 47: 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.
Bevinding 48: 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.
Bevinding 49: 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.
Bevinding 50: 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.
Bevinding 51: 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.
1.4.4 Herschalen van tekst (Niveau AA)
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 52: 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.
1.4.10 Reflow (Niveau AA)
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevinding 53: 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.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 54: 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.
Bevinding 55: 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.
Bevinding 56: 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?”.
Bevinding 57: 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.
2. Bedienbaar
2.1 Toetsenbordtoegankelijk
2.1.1 Toetsenbord (Niveau A)
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevinding 58: 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.
2.2 Genoeg tijd
2.2.1 Timing aanpasbaar (Niveau A)
Informatie over succescriterium 2.2.1 Timing aanpasbaar
Uitkomst: Onvoldoende
Bevinding 59: 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.
2.4 Navigeerbaar
2.4.1 Blokken omzeilen (Niveau A)
Informatie over succescriterium 2.4.1 Blokken omzeilen
Uitkomst: Onvoldoende
Bevinding 60: 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.
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 61: 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”.
Bevinding 62: 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.
2.4.3 Focus volgorde (Niveau A)
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevinding 63: 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.
Bevinding 64: 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.
Bevinding 65: 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.
Bevinding 66: 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.
Bevinding 67: 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.
Bevinding 68: 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.
2.4.4 Linkdoel (in context) (Niveau A)
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevinding 69: 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.
Bevinding 70: 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.
Bevinding 71: 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/.
Bevinding 72: 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.
Bevinding 73: 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.
Bevinding 74: 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.
Bevinding 75: 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.
2.4.6 Koppen en labels (Niveau AA)
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevinding 76: 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.
Bevinding 77: 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”.
Bevinding 78: 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.
Bevinding 79: 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.
Bevinding 80: 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.
2.4.7 Focus zichtbaar (Niveau AA)
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevinding 81: 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.
Bevinding 82: 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.
Bevinding 83: 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.
2.5 Input modaliteiten
2.5.3 Label in naam (Niveau A)
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevinding 84: 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.
3. Begrijpelijk
3.1 Leesbaar
3.1.1 Taal van de pagina (Niveau A)
Informatie over succescriterium 3.1.1 Taal van de pagina
Uitkomst: Onvoldoende
Bevinding 85: 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.
Bevinding 86: 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.
Bevinding 87: 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.
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevinding 88: 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.
Bevinding 89: 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.
Bevinding 90: 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.
4. Robuust
4.1 Compatibel
4.1.2 Naam, rol, waarde (Niveau A)
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevinding 91: 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.
Bevinding 92: 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.
Bevinding 93: 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.
Bevinding 94: 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.
Bevinding 95: 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/
Bevinding 96: 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.
Bevinding 97: 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.
Onderbouwing van de evaluatie
Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.
Steekproef getoetste webpagina's
- Homepagina:
https://www.bibliotheekwierden.nl/ - Contact:
https://www.bibliotheekwierden.nl/contact.html - Zoekresultaten:
https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek - Word lid:
https://www.bibliotheekwierden.nl/contact/word-lid-van-de-bibliotheek.html - Contactformulier:
https://www.bibliotheekwierden.nl/contact/contactformulier.html - Mediawijsheid:
https://www.bibliotheekwierden.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html - Onderwijs:
https://www.bibliotheekwierden.nl/jeugd-en-onderwijs.html - Open+:
https://www.bibliotheekwierden.nl/contact/open-plus.html - Collectie:
https://www.bibliotheekwierden.nl/collectie.html - Hulp bij onze website & apps:
https://www.bibliotheekwierden.nl/contact/veelgestelde-vragen/website-en-apps.html - de Bibliotheek Wierden:
https://www.bibliotheekwierden.nl/contact/onze-vestigingen/vestiging.html - Agenda:
https://bibliotheekwierden.op-shop.nl/ - Digitale Toegankelijkheid:
https://www.bibliotheekwierden.nl/contact/digitale-toegankelijkheid.html - Privacy statement:
https://www.bibliotheekwierden.nl/privacy-statement.html - Digitale Voorleestas:
https://www.bibliotheekwierden.nl/activiteiten/activiteiten/voorleesfilmpjes/digitale-voorleestas.html - Pagina niet gevonden:
https://www.bibliotheekwierden.nl/404.html - PDF Jaarverslag wierden.indd:
https://www.bibliotheekwierden.nl/dam/bestanden/Belangrijke-documenten/Financiele-resultaten/jaarverslag-wierden-2022.pdf - Jaarverslag 2022:
https://www.bibliotheekwierden.nl/contact/over-ons/financiele-resultaten/jaarverslag-2022 - PDF protocol-cameratoezicht-ondertekend-door-directie.pdf:
https://www.bibliotheekwierden.nl/dam/afbeeldingen/protocol-cameratoezicht-ondertekend-door-directie.pdf
Ondersteunende technieken
Bronnen
-
Evaluatiedocument WCAG 2.0
www.drempelvrij.nl/over-het-waarmerk -
Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG20-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.