Rapport:
Audit digitale toegankelijkheid website 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="".

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.

Het logo bovenaan de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything toont de volledige tekst “de Bibliotheek Wierden”, maar de huidige alt-tekst luidt “Bibliotheek Wierden”. Dit is niet voldoende. De alt-tekst moet duidelijk maken dat het om een logo gaat. Omdat het logo binnen een link staat en er geen zichtbare linktekst is, fungeert de alt-tekst bovendien als linktekst. Daarom moet ook het linkdoel worden vermeld, namelijk dat de link teruggaat naar de homepagina. Dit sluit aan bij succescriterium 2.4.4.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556?qs=*&scope=anything&titleNavIndex=6&titleNavRouteName=search&titleNavTotal=19895 staat boven de beoordelingssterren een afbeelding met als alt-tekst “Thriller”. Deze tekst is een herhaling van de zichtbare tekst in de buurt. Omdat de afbeelding geen extra informatie toevoegt, is deze decoratief. Het alt-attribuut moet daarom leeg zijn (alt=””), zodat schermlezers de afbeelding overslaan en gebruikers geen dubbele informatie krijgen.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=&scope=anything op een klein scherm wordt bekeken, verschijnt er een “?”-icoon naast “Resultaten voor ’’ in ‘Alles’” dat als link functioneert. De afbeelding heeft aria-hidden=“true” en bevat geen tekstalternatief, waardoor de link geen inhoud heeft en dus niet toegankelijk is. Dit probleem raakt zowel succescriterium 2.4.4 als 4.1.2. Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft, zodat bezoekers die een schermlezer gebruiken begrijpen waar de link naartoe leidt.

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 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 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 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.

Op alle pagina’s van het domein, zoals op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything, staat naast het zoekveld een selectorelement. Visueel bevat de lijst vijf opties, maar in de code staan ook niet-interactieve items zoals het label “Zoek in” en een horizontale scheidingslijn. Omdat deze items niet verborgen zijn voor hulpsoftware, telt de schermlezer ze mee als opties en wordt er zeven items aangekondigd. Verberg deze niet-interactieve elementen voor assistive technologie met role=“presentation” of aria-hidden=“true”, of gebruik geschikte rollen zoals role=“separator” voor scheidingslijnen. Zo kondigt de schermlezer alleen de echte menuopties aan.

Op dezelfde pagina bevat de zijbalk met filters groepslabels zoals “Materiaal”, “Inhoud” en “Auteur”, maar deze zijn niet gekoppeld aan de bijbehorende checkboxgroepen. Daardoor leest een schermlezer de individuele labels voor zonder context. Dit kan worden opgelost door de checkboxes en hun groepslabel in een fieldset met een legend te plaatsen. Andere oplossingen zijn eveneens mogelijk.

Boven de zoekresultaten staat een sorteerk nop waarvan de visuele weergave verandert afhankelijk van de gekozen optie in de combobox en de sorteerrichting. Deze veranderingen zijn niet in de code terug te vinden. Voeg een korte tekstuele beschrijving toe van de sorteerrichting, bijvoorbeeld met een aria-label of met aria-live, zodat schermlezers kunnen aangeven of er oplopend of aflopend gesorteerd wordt.
In de boekkaarten op dezelfde pagina wordt het strong-element gebruikt om de naam van de auteur op te maken. Het strong-element heeft een semantische functie en geeft nadruk aan tekst. Het mag niet worden gebruikt voor puur visuele styling. Pas dit aan door CSS te gebruiken in plaats van strong voor opmaak.

Op de paginanavigatie worden knoppen gebruikt om naar een volgende of vorige pagina te gaan. Dit is semantisch onjuist, omdat knoppen bedoeld zijn voor acties en niet voor navigatie. Links moeten worden gebruikt voor navigatie naar een nieuwe pagina. Vervang daarom de knoppen door links.

Op de pagina met titelgegevens, zoals https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556?qs=*&scope=anything&titleNavIndex=6&titleNavRouteName=search&titleNavTotal=19895, is de tekst “Inhoud” niet als kop gemarkeerd. Voor hulpsoftware is een visueel opgemaakte kop niet voldoende: er moet een echt kop-element zoals h2 of h3 worden gebruikt. Dit voorkomt verwarring en zorgt dat gebruikers snel door de pagina kunnen navigeren. Hetzelfde probleem speelt op andere pagina’s, zoals op de “Inhoud” en “Onderwerp”-teksten van de NBC_PLUS-pagina.

Op dezelfde titelpagina staat onder de tab “Recensies” een dialoog met tekst die visueel uit meerdere alinea’s bestaat, maar in de code als één div-element staat. Elke alinea moet worden gemarkeerd met een apart p-element, zodat de structuur voor schermlezers klopt. Een vergelijkbaar probleem komt voor onder de tab “Tags”.

In het dialoogvenster dat opengaat via de “?”-knop onder “Recensies” staan teksten zoals “Meld je aan en zorg voor een nickname”, “Recensie schrijven” en “Recensies van anderen ‘liken’” als strong gemarkeerd. Deze teksten functioneren visueel als koppen en moeten daarom als echte koppen (bijvoorbeeld h2) worden opgezet. Hetzelfde geldt voor “Tags toevoegen” in het dialoogvenster onder de tab “Tags”.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/community/search?searchType=nickname&termControl=Carola_72&cWiseUserId=357679 staan twee radiobuttons (“Tags” en “Nickname”) visueel gegroepeerd onder het woord “Zoek”, maar de relatie is niet in de code vastgelegd. Plaats de radiobuttons in een fieldset met een legend, bijvoorbeeld “Zoek op”, zodat de groepering ook semantisch duidelijk is voor schermlezers.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything staat de inhoud van de boekkaarten in een onlogische volgorde in de HTML. De afbeelding staat bovenaan, daarna volgt de auteursnaam, vervolgens pas de kop (de titel), en daarna overige tekst en knoppen. Omdat de kop niet bovenaan de code van de boekkaart staat, kan dit verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort direct onder die kop in de code te plaatsen, zodat er een logische structuur ontstaat. De visuele vormgeving mag hiervan afwijken, zolang de codevolgorde maar klopt.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556?qs=*&scope=anything&titleNavIndex=6&titleNavRouteName=search&titleNavTotal=19895 staat op de tab “Recensies” een rode knop met een uitroepteken. Het witte cijfer “0” (HEX #F9F9F9) op de rode achtergrond (HEX #D36860) heeft een kleurcontrast van 3,4:1. Deze tekst is kleiner dan 24 px en niet vetgedrukt, waardoor het contrast minimaal 4,5:1 moet zijn.

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.

Wanneer een pagina van het domein https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556?qs=*&scope=anything&titleNavIndex=6&titleNavRouteName=search&titleNavTotal=19895 wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, is de plaatshoudertekst in het zoekveld niet zichtbaar. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything hebben sommige interactieve elementen een aangepaste toetsenbordfocus-indicator. Voor de link “Inloggen” in de header is dit een grijze rand (HEX #A3A2A3) op een lichtgrijze achtergrond (HEX #EFEFEF), met een contrastverhouding van 2,2:1. Voor de knoppen “Zoeken”, “Wis alle filters”, de checkboxen in de sectie “Filters” en enkele andere elementen is de focus een grijze rand (HEX #ABAAAB) op een witte achtergrond, met een contrastverhouding van 2,3:1. Beide waarden liggen onder de minimale vereiste 3,0:1. De site gebruikt geen standaardfocusindicator maar een met CSS aangepaste versie. Voor aangepaste focusindicatoren gelden wél contrasteisen, omdat bezoekers de vormgeving niet zelf kunnen aanpassen. Zorg daarom dat alle focusindicatoren minimaal 3,0:1 contrast hebben. Dit probleem komt ook voor op de pagina met de titelgegevens, waaronder de tabs “Waar is het?”, “Meer info” en andere, op de link “Toon exemplaren elders” en diverse andere interactieve elementen, evenals op de community-pagina, bijvoorbeeld bij de radioknoppen “Tags” en “Nickname”, en bij het zoekveld en de zoekknop.

Op de pagina met zoekresultaten bevatten de boekkaarten icoontjes in verschillende kleuren die categorieën weergeven. Sommige daarvan hebben onvoldoende kleurcontrast. Zo heeft op pagina 2 het boek “Moet je die Mop zien!” een geel icoon (HEX #FFFF00) op een witte achtergrond, met een contrastverhouding van 1,1:1. Voor informatieve elementen moet het contrast minimaal 3,0:1 zijn. Controleer ook de andere categorie-iconen op voldoende contrast.

Op de pagina met titelgegevens, zoals https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556?qs=*&scope=anything&titleNavIndex=6&titleNavRouteName=search&titleNavTotal=19895, hebben de tabs een outline met onvoldoende kleurcontrast. De grijze buitenlijn (HEX #EDEDED) op witte achtergrond heeft een contrastverhouding van slechts 1,2:1, waar minstens 3,0:1 aanbevolen is zodat de aanduiding van het actieve tabblad goed zichtbaar is. Dit probleem doet zich ook voor op de vergelijkbare tabs op de community-pagina.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything verschijnt er een dialoogvenster wanneer een bezoeker niet is ingelogd en op “Reserveren” of “Mijn lijsten” klikt. Na enkele seconden wordt de bezoeker automatisch doorgestuurd naar de inlogpagina, zonder voorafgaande waarschuwing. Bezoekers moeten echter de mogelijkheid hebben om deze tijdslimiet uit te zetten, aan te passen of te verlengen. Dit voorkomt onverwachte acties en zorgt dat iedereen, ook mensen die langzamer lezen of hulpmiddelen gebruiken, voldoende tijd heeft om te reageren. Hetzelfde probleem doet zich voor bij vergelijkbare dialogen op andere pagina’s van het domein, zoals op de titelpagina van het boek.

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.

Alle pagina's van het domein hebben geen skiplink.
Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

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.

De pagina’s https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=&scope=anything, https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556?qs=&scope=anything&titleNavIndex=6&titleNavRouteName=search&titleNavTotal=19895 en andere binnen het domein gebruiken allemaal dezelfde tekst in het title-element: “Catalogus”. Dit is niet de bedoeling. Het title-element moet op elke pagina een unieke tekst bevatten die duidelijk beschrijft wat de specifieke inhoud van die pagina is, bij voorkeur gevolgd door de naam van de organisatie. Wanneer meerdere pagina’s dezelfde titel gebruiken, kan dit verwarrend zijn voor bezoekers en wordt navigeren lastiger. Pas daarom het title-element per pagina aan zodat het uniek is en de inhoud nauwkeurig weergeeft.

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.

Op alle pagina’s van het domein komt het voor dat, zodra een bezoeker met het toetsenbord begint te navigeren, de focus direct terechtkomt op een verborgen interactief element in de header. De toetsenbordfocus mag nooit op verborgen links, knoppen of formuliervelden terechtkomen. Als dit wél gebeurt, kunnen bezoekers deze elementen per ongeluk activeren, wat verwarring en toegankelijkheidsproblemen veroorzaakt. Verwijder verborgen interactieve elementen uit de tabvolgorde of maak ze volledig niet-focusbaar wanneer ze niet zichtbaar zijn.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything staat in de sectie “Filter” bij sommige filtergroepen, zoals “Materiaal” en “Auteur”, een knop “Meer…”. Wanneer een bezoeker hierop klikt, worden extra opties geladen. De toetsenbordfocus verplaatst zich dan echter naar de knop “Minder…” in plaats van naar de eerste nieuw toegevoegde filteroptie. Wanneer nieuwe opties worden geladen, moet de focus automatisch naar de eerste nieuwe optie springen.

Op de titelpagina’s, zoals https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556, zijn tabbladen aanwezig met verborgen content die zichtbaar wordt wanneer een tab wordt geactiveerd. De toetsenbordfocus volgt hierin niet de verwachte volgorde. Tabbladen bestaan uit tablinks en tabpanelen. Slechts één tabpaneel is zichtbaar; de rest is verborgen. Wanneer een bezoeker een tab activeert, moet de focus automatisch naar het bijbehorende tabpaneel gaan. De pijltjestoetsen horen te worden gebruikt om tussen de tablinks te navigeren. Dit is de standaardvolgorde zoals beschreven in het ARIA-patroon voor tabs. Hetzelfde probleem komt voor op andere pagina’s, zoals de communitypagina.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556 staan twee carrousels waarbij de toetsenbordfocus niet logisch verloopt. De focus komt eerst terecht op twee onzichtbare elementen (“Slide 1 of 2” en “Slide 2 of 2”), die wel door schermlezers worden aangekondigd. Daarna gaat de focus door alle boeken heen voordat de navigatieknoppen aan de beurt zijn. Dit komt niet overeen met de visuele volgorde. Toetsenbordgebruikers moeten interactieve elementen in een logische volgorde kunnen bereiken, aansluitend op de visuele opbouw van de pagina. Zorg ervoor dat de focus steeds verplaatst naar het eerstvolgende logische element in de reeks. Hetzelfde probleem speelt bij de carrousel op de NBC_PLUS-titelpagina.

Wanneer de pagina met zoekresultaten https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556 is ingezoomd en een bezoeker op de knop “Zoekresultaten verfijnen” klikt, opent de filtersidebar die in de code de rol van dialoog heeft. De toetsenbordfocus kan echter ontsnappen uit dit dialoogvenster en zich verplaatsen naar de onderliggende pagina-inhoud — iets wat niet mag gebeuren. Bij dialoogvensters moet de focus binnen het venster worden gehouden totdat de bezoeker het sluit, bijvoorbeeld met de sluitknop of de ESC-toets. Een alternatief is het venster automatisch sluiten zodra de focus eruit verdwijnt.

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.

Het logo bovenaan de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything functioneert als link, maar de toegankelijke naam “Bibliotheek Wierden” beschrijft niet duidelijk genoeg wat het doel van de link is. De naam van een logolink moet niet alleen aangeven wat er zichtbaar is op het logo, maar ook dat de link naar de startpagina leidt. Een duidelijkere toegankelijke naam zou bijvoorbeeld zijn: “Logo de Bibliotheek Wierden, ga naar de startpagina”.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556 staat onder het zoekveld de tekst “Resultaat 7 van 19895” met pijltjes die als links functioneren om naar het vorige of volgende resultaat te gaan. Voor ziende bezoekers is duidelijk dat “Vorige” en “Volgende” verwijzen naar andere resultaten, maar voor gebruikers met een visuele beperking is deze context onvoldoende. Dit kan worden opgelost door de linkteksten aan te vullen met visueel verborgen tekst, zoals “vorig resultaat” en “volgend resultaat”. Hetzelfde probleem komt voor op andere detailpagina’s, zoals de NBC_PLUS-titelpagina.

Wanneer de pagina met zoekresultaten https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556 op een klein scherm wordt bekeken, verschijnt er een “?”-icoon naast “Resultaten voor ‘*’ in ‘Alles’”, en dit icoon werkt als link. De afbeelding heeft echter geen tekstalternatief en is bovendien verborgen met aria-hidden=“true”, waardoor de link geen toegankelijke naam heeft. Daardoor is het voor schermlezergebruikers niet duidelijk wat het doel van de link is. Dit kan worden opgelost door de afbeelding een passende alt-tekst te geven die het linkdoel beschrijft, of door op een andere manier een toegankelijke naam toe te voegen.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything staat naast het zoekveld een selector met het label “Alles”. In de code heeft deze knop echter de toegankelijke naam “SEARCH_SELECT_SCOPE Alles”. Deze naam is niet beschrijvend en bevat bovendien niet-leesbare tekens zoals underscores. Zulke tekens maken het doel van een element onduidelijk, vooral voor bezoekers die hulpsoftware gebruiken. Pas de toegankelijke naam aan door alle technische aanduidingen en symbolen te verwijderen en vervang deze door een duidelijke, begrijpelijke en beschrijvende tekst in het Nederlands.

Wanneer op dezelfde pagina een boek wordt toegevoegd aan “Mijn Lijsten”, verschijnt er een modal venster. De knop om dit venster te sluiten heeft het label “MODAL.CLOSE”, wat technisch en niet-beschrijvend is. Hierdoor is het voor bezoekers, met name schermlezergebruikers, niet duidelijk wat de functie van de knop is. Vervang dit label door een duidelijke Nederlandstalige naam, zoals “Sluiten” of “Venster sluiten”. Dit probleem komt ook op andere pagina’s van het domein voor en moet daar eveneens worden opgelost.

Op de pagina met titelgegevens (https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556…) bevat de tab “Lijsten” een tabel waarvan de kolomkoppen klikbaar zijn om te sorteren. Deze kolomkoppen zijn echter niet herkenbaar als interactieve elementen: er is geen visuele aanwijzing vóór interactie, en schermlezers krijgen niet door dat de koppen knoppen zijn. Hierdoor kunnen gebruikers niet anticiperen op de sorteermogelijkheid. Maak de kolomkoppen herkenbaar als interactieve bedieningselementen door bijvoorbeeld een zichtbaar icoon of aanduiding toe te voegen en geef de elementen een duidelijk toegankelijke rol en naam. Hetzelfde probleem doet zich voor op de “Lijsten”-tab van de community-pagina en moet daar eveneens worden aangepast.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… is de toetsenbordfocus niet zichtbaar op de knoppen met de drie puntjes (“Carrousel”) en de knop met negen puntjes (“Raster”) naast “Toon als”. Deze knoppen zijn wel interactief en kunnen met het toetsenbord worden bediend, maar zonder zichtbare focus weten bezoekers die niet met een muis werken niet waar ze zich bevinden. De focusindicator moet daarom duidelijk zichtbaar worden gemaakt met voldoende contrast, zodat toetsenbordgebruikers kunnen zien wanneer deze knoppen actief zijn.

Eenzelfde probleem doet zich op dezelfde pagina voor in de tabnavigatie: op de tabbladen “Recensies” en “Tags” is de focus niet zichtbaar op de knoppen met de “?”-iconen. Ook hier moet de focusindicator altijd duidelijk zichtbaar zijn, zodat bezoekers die met het toetsenbord navigeren weten wanneer ze een knop kunnen activeren. Zorg ervoor dat alle interactieve elementen op alle pagina’s een goed zichtbare en voldoende contrasterende focusstijl krijgen.

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.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… staat op het tabblad “Lijsten” een zoekveld waarvan de placeholdertekst “Zoek in lijsten” als zichtbaar label wordt gebruikt, terwijl de toegankelijke naam “Zoek” is. Doordat de zichtbare tekst niet terugkomt in de toegankelijke naam, werkt het zoekveld niet goed met spraakbesturing: gesproken commando’s op basis van de zichtbare tekst worden dan niet herkend. Zorg ervoor dat de toegankelijke naam de volledige zichtbare tekst bevat, bij voorkeur aan het begin, zodat het veld correct kan worden bediend door gebruikers van spraaksoftware. Hetzelfde probleem komt voor bij het soortgelijke zoekveld op het tabblad “Lijsten” op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/community/search…. Ook hier moet de toegankelijke naam worden aangepast zodat deze overeenkomt met de zichtbare tekst.

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.

Op alle pagina’s van https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything is het lang-attribuut onjuist ingesteld als "nl_NL". De juiste waarde voor het lang-attribuut is "nl-NL", met een koppelteken in plaats van een underscore. Dit is belangrijk zodat hulpsoftware de juiste uitspraakregels kan toepassen voor Nederlandse inhoud. Pas het lang-attribuut aan naar "nl-NL" op alle pagina’s van dit domein.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything komen verschillende elementen voor met Engelstalige toegankelijke namen, zoals “SEARCH.SEARCH”, “SEARCH_SELECT_SCOPE Alles”, “SEARCH.SORTING”, Engelse aria-labels bij waarderingssterren en “MODAL.CLOSE” in het “Mijn lijsten”-venster. Omdat schermlezers deze labels uitspreken volgens de uitspraakregels van de hoofdtaal van de pagina (Nederlands), klinkt dit onnatuurlijk en kan het verwarrend zijn voor gebruikers. Vertaal deze toegankelijke namen daarom naar het Nederlands en zorg dat ze duidelijk en beschrijvend zijn, zodat schermlezergebruikers de interface goed begrijpen. Zie ook succescriteria 2.4.6 en 1.3.1. Hetzelfde probleem speelt op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… en ook bij de carouselknoppen met de namen “Previous” en “Next”, op de community-pagina waar de zoekknop “community-search-button” heet, en bij de paginatieknoppen “Next” en “Previous” op het tabblad “Lijsten”. Vertaal al deze toegankelijke namen naar het Nederlands, zodat de volledige website consistent en begrijpelijk is voor bezoekers die gebruikmaken van hulpsoftware.

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.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… op het tabblad “Lijsten” wordt in het zoekveld de placeholdertekst “Zoek in lijsten” gebruikt als zichtbaar label, maar er is geen permanent label aanwezig. Een placeholder kan niet dienen als label omdat deze verdwijnt zodra een gebruiker begint te typen, wat kan leiden tot verwarring over de functie van het veld. Voor toegankelijkheid moet ieder invoerveld een altijd zichtbaar label hebben, bijvoorbeeld als tekst boven of naast het veld, of als een herkenbaar icoon met een duidelijke betekenis. Dezelfde fout komt voor in het zoekveld op het tabblad “Lijsten” op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/community/search… en daarom moet ook daar een permanent zichtbaar label worden toegevoegd.

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 openen. 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 de website https://bibliotheekwierden.op-shop.nl/ is in de zoekbalk een zoekknop aanwezig zonder toegankelijke naam. Hierdoor is de functie van de knop onduidelijk voor gebruikers van hulpsoftware. Ook hier moet een toegankelijke naam worden toegevoegd met bijvoorbeeld aria-label="Zoeken".

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/ is het invoerveld met de placeholder Zoeken heeft 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.

De selector naast het zoekveld op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything gebruikt een ul-element waarin de lijstitems onterecht de ARIA-rol “menuitem” hebben gekregen. Deze rol hoort alleen gebruikt te worden binnen een menustructuur met rollen zoals “menu”, “menubar” of “group”. Omdat die structuur ontbreekt, werkt hulpsoftware minder goed en wordt bovendien een ander toetsenbordgedrag vereist. Voor dit eenvoudige keuzemenu is ARIA-functionaliteit van dit type niet passend. De beste oplossing is om role=“menuitem” en role=“menubar” te verwijderen en gewoon een geneste lijst (ul) te gebruiken. Op https://www.w3.org/WAI/ARIA/apg/patterns/menu/ staat beschreven hoe een echte menubar moet worden opgebouwd, maar dat is hier niet nodig.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… bevindt zich een sectie die functioneert als een tabinterface. De tabknoppen hebben wel de juiste rol, maar de panelen missen de rol “tabpanel” en hebben ook geen aria-controls-attributen. Daardoor kan hulpsoftware niet bepalen welke tab welk paneel opent. Ook ontbreekt aria-selected op het actieve tabblad, waardoor schermlezers niet kunnen aangeven welke tab op dat moment actief is. Door de juiste ARIA-rollen en attributen toe te voegen wordt de relatie tussen tab en paneel duidelijk. Meer uitleg is te vinden op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… op het tabblad “Lijsten” bevat de tabel sorteerbare kolomkoppen, maar deze hebben geen toegankelijke rol die aangeeft dat ze interactief zijn. Hierdoor kan een gebruiker niet weten dat erop geklikt kan worden om te sorteren. Geef deze koppen een duidelijke toegankelijke rol, bijvoorbeeld “button”, zodat zowel visuele als schermlezergebruikers begrijpen dat de kolomtitels interactief zijn. Hetzelfde geldt voor de tabel op het tabblad “Lijsten” op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/community/search….

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/title-detail/WISE/1516556… opent op het tabblad “Recensies” een “?”-knop een dialoogvenster dat geen toegankelijke naam heeft. Daardoor begrijpt een blinde gebruiker de functie of inhoud van het venster niet. Dit kan worden opgelost door een aria-label toe te voegen met een korte, duidelijke beschrijving van het dialoogvenster. Hetzelfde geldt voor de dialogen die openen op het tabblad “Tags” en op de community-pagina.

Op kleine schermen verschijnt in de header een menuknop om het mobiele menu te openen, maar deze knop geeft niet aan of het menu is geopend of gesloten. Voor bezoekers die de pagina niet kunnen zien is die informatie essentieel. Dit kan worden opgelost door visueel verborgen tekst toe te voegen of door gebruik te maken van aria-expanded, dat “true” moet zijn wanneer het menu zichtbaar is en “false” wanneer het is ingeklapt.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=&scope=anything op een klein scherm wordt bekeken, verschijnt er naast “Resultaten voor ’’ in ‘Alles’” een link met een “?”-icoon. Deze link heeft geen toegankelijke naam, waardoor gebruikers van schermlezers niet begrijpen wat de functie van deze link is. Voorzie de link daarom van een toegankelijke naam die het doel duidelijk beschrijft, bijvoorbeeld via een aria-label of een tekstalternatief. Dit is nodig voor onder andere succescriteria 1.1.1 en 2.4.4.

Wanneer dezelfde pagina op een klein scherm wordt bekeken, opent de knop “Zoekresultaten verfijnen” een filter-zijbalk die in de code de rol “dialog” heeft, maar geen toegankelijke naam. Zonder duidelijke naam kunnen schermlezers niet aangeven wat het venster bevat. Voeg een aria-label toe met een beschrijvende naam, zodat gebruikers begrijpen waar het dialoogvenster over gaat.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/catalog/search?qs=*&scope=anything worden de zoekresultaten aangepast door filters, waarna een bericht zoals “Resultaten: 1 - 10 (van 11475)” verschijnt zonder dat de pagina opnieuw geladen wordt. Dit is een statusbericht, maar het wordt niet door schermlezers aangekondigd omdat het geen toetsenbordfocus krijgt. Statusberichten moeten automatisch worden voorgelezen zodra ze verschijnen of wijzigen. Dit kan worden opgelost door een aria-live-attribuut aan de melding toe te voegen.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/9056/community/search?searchType=nickname&termControl=Carola_72&cWiseUserId=357679 worden statusberichten correct aangekondigd op de tabbladen “Recensies (0)”, “Tags (0)” en “Gegevens”, waar inderdaad geen data aanwezig is. Op het tabblad “Lijsten (4)” gebeurt echter hetzelfde, terwijl daar wél data staat. Het aankondigen van zo’n statusbericht is dan overbodig en verwarrend. Zorg ervoor dat onnodige statusberichten niet worden uitgesproken door hulpsoftware.