Rapport:
Audit digitale toegankelijkheid website Bibliotheek Tubbergen

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website, bijvoorbeeld op pagina https://www.bibliotheektubbergen.nl/, staat in de header een logo. De alt-tekst daarvan is "Bibliotheek Tubbergen". 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 pagina https://www.bibliotheektubbergen.nl/hulp-en-leren/taalhuis.html staan onder het kopje "Zelf vanuit huis oefenen" logo's met teksten onder de logo’s. De zichtbare tekst bij de meeste logo’s komt overeen met de teksten waar ze bij horen. Dit kan als toegankelijke alternatieve tekst worden beschouwd. Sommige logo’s bevatten echter meer informatie dan in de koppen staat. In die gevallen moet alle tekst die in het logo staat worden toegevoegd aan de alternatieve tekst. Hetzelfde probleem wordt waargenomen op pagina https://www.bibliotheektubbergen.nl/zoekresultaten.website.html?q= met logo's in de resultaten onder het kopje "Zoekresultaten".

Op pagina https://bibliotheektubbergen.op-shop.nl/2/informatiepunt-digitale-overheid-ido/vanaf/03-06-2025 staat onder het navigatiemenu een decoratief pijltje bij de link “Terug”. Dit pictogram is toegevoegd via CSS met een ::before-pseudo-element en de waarde content: 'before'. Hierdoor wordt het pictogram zichtbaar voor schermlezers en uitgesproken als “before”, wat geen betekenis heeft en verwarrend is voor bezoekers die hulpsoftware gebruiken. Een decoratief element moet altijd verborgen worden voor schermlezers, zodat alleen inhoudelijke informatie wordt voorgelezen. Dit kan worden opgelost door het pseudo-element met aria-hidden="true" te verbergen. Hetzelfde probleem komt voor bij de link “Terug” op de foutpagina https://bibliotheektubbergen.op-shop.nl/404, bij de link “Terug” op pagina https://bibliotheektubbergen.op-shop.nl/483/bankinformatiepunt/03-06-2025 en bij de link “Contact” op pagina https://www.bibliotheektubbergen.nl/contact/veelgestelde-vragen.html. Ook daar is het pictogram toegevoegd met een pseudo-element en wordt het onbedoeld uitgesproken. In al deze gevallen moet het decoratieve icoon worden verborgen voor schermlezers om verwarring te voorkomen en de pagina begrijpelijk te houden.

In het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/jaarverslag-tubbergen-2022-web.pdf staat op alle pagina’s het logo “de Bibliotheek Tubbergen”, toegevoegd als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die hulpsoftware gebruiken. Informatieve afbeeldingen moeten met een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft. Geef dit logo een tekstalternatief. Dat hoeft alleen op de eerste pagina.

In het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/jaarverslag-tubbergen-2022-web.pdf is op pagina 4 een decoratieve afbeelding aanwezig die ten onrechte met een Figure-tag zijn gemarkeerd, zonder bijbehorende beschrijving. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en moet altijd een beschrijving bevatten. Omdat deze afbeeldingen geen inhoudelijke waarde hebben, moeten ze worden gemarkeerd als artefact zodat ze verborgen zijn voor schermlezers.

In het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/jaarverslag-tubbergen-2022-web.pdfzijn op pagina’s 4 en 5 decoratieve afbeeldingen ten onrechte gemarkeerd met een Figure-tag en voorzien van automatisch gegenereerde beschrijvingen. Deze beschrijvingen voegen niets toe, want de afbeeldingen zijn decoratief. Voor decoratieve afbeeldingen mag geen Figure-tag worden gebruikt. De afbeeldingen moeten daarom worden gemarkeerd als artefact.

Het logo bovenaan de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything toont de volledige tekst “de Bibliotheek Tubbergen”, maar de alt-tekst luidt slechts “Bibliotheek Tubbergen”. Dit is niet voldoende. De alt-tekst moet duidelijk maken dat het om een logo gaat. Omdat het logo een link is zonder zichtbare linktekst, zal de alt-tekst ook dienen als linktekst. Daarom moet ook het linkdoel worden vermeld, bijvoorbeeld “Logo de Bibliotheek Tubbergen, ga naar de homepagina”. Zie ook succescriterium 2.4.4.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079… staat boven de waarderingssterren een afbeelding met de alt-tekst “Sprookjes”. Deze tekst komt overeen met de zichtbare tekst ernaast en voegt geen extra informatie toe. De afbeelding is dus decoratief. Om te voorkomen dat schermlezers dubbele informatie voorlezen, moet de alt-waarde leeg zijn: alt=””.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=&scope=anything op een klein scherm wordt bekeken, verschijnt er naast “Resultaten voor ’’ in ‘Alles’” een “?”-icoon dat fungeert als link. De afbeelding is verborgen met aria-hidden=“true” en heeft geen tekstalternatief. Daardoor heeft de link geen inhoud en is het onduidelijk wat het doel van de link is. Dit veroorzaakt problemen met succescriteria 2.4.4 en 4.1.2. Geef de afbeelding een tekstalternatief dat het linkdoel beschrijft, zodat bezoekers met een schermlezer begrijpen waar de link naartoe leidt.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/bereslim.html staat een video. Er is ondertiteling aanwezig, maar deze is automatisch gegenereerd en daardoor onnauwkeurig. Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet goed kunnen horen toch alle informatie mee. De ondertiteling moet precies overeenkomen met wat er wordt gezegd. Automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er fouten in kunnen zitten en interpunctie ontbreekt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/de-voorleeshoek.html staat onder de kop “Bekijk een voorbeeld van De Voorleeshoek” een video waarin aan het einde, rond 0:39, een logo zichtbaar is. Bezoekers die blind of slechtziend zijn, krijgen deze visuele informatie niet mee. Om deze informatie toegankelijk te maken, moet er een audiobeschrijving worden toegevoegd waarin visuele elementen zoals namen, logo’s en teksten worden uitgelegd. Een geschreven tekst als media-alternatief kan aanvullend worden gebruikt, maar om te voldoen aan succescriterium 1.2.5 is een audiobeschrijving verplicht.

Dit probleem komt ook voor bij andere video’s op dezelfde pagina, bij de video onder de kop “NOS Journaal in makkelijke taal” op pagina https://www.bibliotheektubbergen.nl/hulp-en-leren/taalhuis.html en bij de video’s op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/bereslim.html. Ook daar worden logo’s of andere visuele elementen getoond zonder dat deze in een audiobeschrijving beschikbaar zijn. Voeg audiobeschrijvingen toe aan al deze video’s zodat de inhoud volledig toegankelijk is voor bezoekers die de visuele informatie niet kunnen waarnemen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/de-voorleeshoek.html voldoet de video onder de kop “Bekijk een voorbeeld van De Voorleeshoek” niet aan succescriterium 1.2.5. In deze video is voldoende ruimte binnen het bestaande audiokanaal om een audiobeschrijving toe te voegen. Een media-alternatief is in dit geval niet toegestaan als oplossing. Er moet een audiobeschrijving beschikbaar zijn die visuele informatie, zoals logo’s, teksten en andere betekenisvolle elementen, beschrijft. Dit is essentieel voor bezoekers die de video niet of niet goed kunnen zien.

Hetzelfde probleem doet zich voor bij andere video’s op dezelfde pagina, bij de video onder de kop “NOS Journaal in makkelijke taal” op pagina https://www.bibliotheektubbergen.nl/hulp-en-leren/taalhuis.html, en bij de video’s op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/bereslim.html. Ook in deze gevallen is geen audiobeschrijving aanwezig, terwijl daar wel ruimte voor is. Voeg in alle gevallen een audiobeschrijving toe om te voldoen aan succescriterium 1.2.5 en om de inhoud toegankelijk te maken voor bezoekers met een visuele beperking.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, zoals op https://www.bibliotheektubbergen.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.bibliotheektubbergen.nl/ staat direct onder elkaar een kop van niveau 3 met de tekst “Kom langs en ontdek de bieb!” en daarna nog een kop van hetzelfde niveau met de tekst “Doe”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet juist toegepast. De kopstructuur moet de inhoud van de pagina logisch weergeven. Pas de kopniveaus of de structuur van de tekst aan, zodat deze beter overeenkomt met de visuele en inhoudelijke structuur.

Op pagina https://www.bibliotheektubbergen.nl/hulp-en-leren/taalhuis.html zijn de volgende tussenkopjes niet gemarkeerd als koppen: "Wat kun je leren?". Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die fungeert als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Zet deze koppen om in heading-elementen.

Op pagina https://www.bibliotheektubbergen.nl/contact/digitale-toegankelijkheid.html zijn de teksten “Huidige status” en “Contact” niet gemarkeerd als kop. Bezoekers die hulpsoftware gebruiken hebben niets aan een tekst die eruitziet als een kop maar technisch niet als kop is opgezet. Koppen moeten gemarkeerd worden met heading-elementen zodat gebruikers van hulpsoftware de pagina kunnen scannen en snel naar de gewenste sectie kunnen navigeren. Zet deze teksten daarom om in heading-elementen.

Op pagina https://.bibliotheektubbergen.op-shop.nl/ bevat de zijbalk met filters groepen keuzevakjes met de labels “Categorie”, “Locatie”, “Tag” en “Wanneer”. Visueel zijn deze keuzevakjes gegroepeerd, maar deze relatie is in de code niet aanwezig. Hierdoor weten schermlezers niet dat de keuzevakjes bij elkaar horen. Alleen de individuele labels worden voorgelezen, zonder de context van de groep. Dit probleem kan worden opgelost door gebruik te maken van fieldset- en legend-elementen, waarmee de structuur van de groepen ook voor hulpsoftware duidelijk wordt. Andere semantische oplossingen zijn ook mogelijk, zolang de relatie tussen het groepslabel en de bijbehorende checkboxen maar programmatisch vastligt.

Op pagina https://bibliotheektubbergen.op-shop.nl/ staat in een van de resultaten een kop van niveau h4 met de tekst “High Tech filmdag”, direct gevolgd door een andere kop van hetzelfde of hoger niveau, zoals “Verzorgd door Tetem”. Tussen deze koppen staat geen inhoud. Wanneer twee koppen van hetzelfde niveau direct onder elkaar worden geplaatst zonder begeleidende inhoud, is er sprake van een onjuiste toepassing van de kopstructuur. Dit kan verwarring veroorzaken bij bezoekers die hulpsoftware gebruiken, omdat de visuele en semantische structuur dan niet overeenkomen. Pas de kopniveaus of de opbouw van de inhoud aan zodat de structuur logisch en toegankelijk is.

Op pagina https://bibliotheektubbergen.op-shop.nl/2/informatiepunt-digitale-overheid-ido/vanaf/03-06-2025 zijn de teksten “Wat kun je regelen via Internet?”, “Belastingen en toeslagen” en “Hoe kunnen we je helpen?” gemarkeerd met het strong-element in plaats van met een juist kop-element zoals h2. Het strong-element is bedoeld voor visuele nadruk binnen een zin, maar geeft geen structurele betekenis aan de tekst. Hierdoor worden deze teksten niet als kop herkend door hulpsoftware en zijn ze niet bruikbaar voor navigatie. Dit belemmert de toegankelijkheid voor bezoekers die schermlezers gebruiken. Ook op pagina https://bibliotheektubbergen.op-shop.nl/483/bankinformatiepunt/03-06-2025 komt hetzelfde probleem voor bij de teksten “Info” en “Online hulp en telefonische hulp”. Ook daar worden structureel belangrijke teksten weergegeven met strong in plaats van met kop-elementen. Markeer deze teksten met de juiste h-elementen, zodat de structuur van de pagina correct wordt doorgegeven en de inhoud beter toegankelijk is.

Op pagina https://bibliotheektubbergen.op-shop.nl/404 wordt onder de kop “Pagina niet gevonden” het strong-element onjuist gebruikt voor opmaakdoeleinden. Delen van zinnen zijn in een strong-element geplaatst om ze vet weer te geven, zonder dat er inhoudelijke nadruk of betekenis wordt toegevoegd. Het strong-element heeft een semantische functie en is bedoeld om betekenisvolle nadruk aan tekst te geven. Als het doel alleen is om tekst visueel vetgedrukt weer te geven, moet hiervoor CSS worden gebruikt in plaats van een semantisch HTML-element. Pas de opmaak aan zodat visuele accenten via CSS worden toegepast, en gebruik het strong-element alleen wanneer de inhoud ook werkelijk benadrukt moet worden. Zo blijft de betekenis van de structuur duidelijk voor bezoekers die hulpsoftware gebruiken.

In het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/formulier_ik_willerentaalhuis-tubbergen-web.pdf ontbreken de structurele codes volledig. Hierdoor is de inhoud niet toegankelijk voor schermlezers. Door het ontbreken van een tagstructuur is het niet mogelijk om het document volledig te onderzoeken op toegankelijkheid. Dit geldt voor alle succescriteria die te maken hebben met de codelaag van PDF’s, zoals het gebruik van semantische koppen en alternatieve teksten bij afbeeldingen. Zodra deze structuur wordt aangebracht, kunnen er extra toegankelijkheidsproblemen aan het licht komen die nu nog niet zichtbaar zijn.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything bevat de selector naast het zoekveld niet-interactieve elementen, zoals het label “Zoek in” en een horizontale scheidingslijn. Omdat deze elementen niet zijn verborgen voor hulpsoftware, worden ze door schermlezers als opties meegeteld, waardoor het lijkt alsof er zeven opties zijn in plaats van vijf. Verberg niet-interactieve onderdelen met role=“presentation” of aria-hidden=“true”, of gebruik het juiste role-attribuut zoals role=“separator” voor scheidingslijnen. Zo wordt alleen de werkelijke inhoud van het menu voorgelezen.

Op dezelfde pagina bevat de filterzijbalk groepslabels zoals “Materiaal”, “Inhoud” en “Auteur”, maar deze zijn niet gekoppeld aan de bijbehorende checkboxes. Hierdoor leest de schermlezer alleen de labels van de individuele keuzevakjes voor, zonder de context van de groep. Dit kan worden opgelost door fieldset- en legend-elementen te gebruiken, zodat de relatie tussen groepsnaam en checkboxes duidelijk wordt. Andere oplossingen zijn ook mogelijk.
Boven de zoekresultaten staat een sorteerkop die visueel verandert afhankelijk van de geselecteerde sorteeroptie. Deze verandering wordt echter niet in de code weergegeven. Voeg een korte tekstuele aanduiding toe van de sorteerrichting, bijvoorbeeld via aria-label of aria-live, zodat hulpsoftware kan aangeven of er oplopend of aflopend wordt gesorteerd. In elk boek op de zoekresultatenpagina wordt het strong-element onterecht gebruikt voor opmaak van de auteursnaam. Dit element heeft een semantische functie en mag niet alleen gebruikt worden voor visuele styling. Gebruik hiervoor CSS, zodat de structuur en betekenis van de tekst behouden blijven.

Op dezelfde pagina worden in de paginering knoppen gebruikt in plaats van links. Dit is semantisch onjuist, omdat knoppen bedoeld zijn voor acties en links voor navigatie naar andere pagina’s. Vervang de knoppen daarom door links, zodat de semantiek klopt en hulpsoftware de functies correct kan interpreteren.

Op de detailpagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079… zijn de teksten “Onderwerp”, “Inhoud” en “Serie” visueel koppen, maar niet als koppen gemarkeerd. Zonder correcte heading-elementen zoals h2 of h3 kunnen gebruikers van hulpsoftware niet overzichtelijk door de pagina navigeren. Markeer deze teksten daarom met het juiste HTML-kopniveau. Hetzelfde probleem komt voor op andere pagina’s, zoals in de “Inhoud”-sectie van https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/NBC_PLUS/PPN:310263107….

Op het tabblad “Recensies” van de pagina hierboven wordt in het dialoogvenster onder de kop “Recensies” een tekstblok met meerdere alinea’s weergegeven, maar in de code staat alles in één div. Alinea’s moeten in een eigen p-element worden geplaatst, zodat de structuur ook in de code overeenkomt met de visuele weergave. Ditzelfde probleem speelt in het dialoogvenster op het tabblad “Tags”.
In hetzelfde dialoogvenster op het tabblad “Recensies” zijn de teksten “Meld je aan en zorg voor een nickname”, “Recensie schrijven” en “Recensies van anderen ‘liken’” gemarkeerd met strong, terwijl dit visuele koppen zijn. Het strong-element is niet bedoeld voor koppen, maar voor nadruk binnen zinnen. Gebruik echte heading-elementen zodat schermlezers weten dat het koppen zijn. Hetzelfde geldt voor “Tags toevoegen” in het dialoogvenster van het tabblad “Tags”.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474 staan boven de radio buttons “Tags” en “Nickname” de woorden “Zoek”, maar deze tekst is niet gekoppeld aan de radiogroep. Hoewel ze visueel een groep vormen, is deze relatie niet vastgelegd in de code. Plaats de radio buttons in een fieldset en zet “Zoek op” in een legend, zodat hulpsoftware duidelijk kan aangeven dat de knoppen bij elkaar horen.

Uitkomst: Onvoldoende

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

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything staan de HTML-elementen binnen de boekkaarten in een onlogische volgorde. Momenteel bestaat de structuur uit: afbeelding-link, auteursnaam, heading (titel), aanvullende tekst en knoppen. Hierdoor staat de kop (de titel van het boek) niet bovenaan de code, terwijl dit wel de logische start van de informatie is. Voor bezoekers die een schermlezer gebruiken kan dit verwarrend zijn, omdat zij de inhoud in de volgorde van de code aangeboden krijgen. Plaats daarom de heading met de boektitel bovenaan in de code en groepeer alle bijbehorende inhoud eronder. Dit zorgt voor een logische en semantisch correcte structuur. De visuele weergave mag hiervan afwijken; via CSS kan de afbeelding nog steeds boven de titel worden getoond.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.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 https://www.bibliotheektubbergen.nl 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.

Op pagina https://www.bibliotheektubbergen.nl/contact/contactformulier.html wordt in de header en op de Verzend knop een aangepaste focusindicator gebruikt die alleen te zien is als een verandering van de achtergrondkleur. Dit is niet voldoende, omdat de contrastratio tussen de gefocuste en niet-gefocuste toestand lager is dan 3,0:1. Voor bezoekers met een visuele beperking of kleurenblindheid is deze subtiele kleurverandering vaak niet goed zichtbaar. Ook voor toetsenbordgebruikers moet het duidelijk zijn waar de focus zich bevindt op de pagina. Voeg daarom een extra visuele aanduiding toe, zoals een dikkere rand of onderstreping.

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

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

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

In de footer van de website heeft de knop “Trek je toestemming in” een aangepaste focusindicator: een oranje rand (HEX #FF7320) op een lichtoranje achtergrond (HEX #FDE5D0). De contrastratio tussen deze kleuren is slechts 2,2:1. Dit is lager dan de vereiste minimale ratio van 3,0:1. Ook de zoekvelden “Zoeken in de collectie” en “Zoeken binnen de website” in het menu “Zoeken” op kleine schermen gebruiken deze combinatie van kleuren voor de focusstatus. Voeg een duidelijker zichtbare focusindicator toe die aan de contrastvereisten voldoet.

Wanneer ingezoomd op https://www.bibliotheektubbergen.nl/ verschijnt een menubalk onderaan de pagina. De teksten op de knoppen "Home", "Menu" en "Zoeken" hebben onvoldoende contrast wanneer deze toetsenbordfocus krijgten. De huidige contrastverhouding is 4,3:1. Voor tekst geldt een minimale contrasteis van 4,5:1.

Op pagina https://www.bibliotheektubbergen.nl/contact/onze-vestigingen/vestiging.html staan onder de koppen “Openingstijden” en “Afwijkende openingstijden” teksten in grijs (HEX #757575) op een lichtoranje achtergrond (HEX #FDE5CF). De contrastratio van deze combinatie is 3,8:1. Omdat deze tekst kleiner is dan 19px, moet het kleurcontrast minimaal 4,5:1 zijn. De huidige combinatie voldoet dus niet aan de vereisten en maakt de tekst moeilijk leesbaar voor bezoekers met een visuele beperking.

Op pagina https://www.bibliotheektubbergen.nl/zoekresultaten.website.html?q= staan onder de kop “Verfijnen op resultaten” grijze cijfers (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED). Deze combinatie heeft een contrastratio van 3,9:1. Ook hier is de tekst kleiner dan 19px, waardoor een minimumcontrast van 4,5:1 vereist is. De huidige weergave voldoet niet aan deze eis en belemmert de leesbaarheid.

Op pagina https://www.bibliotheektubbergen.nl/zoekresultaten.website.html?q= hebben de knopteksten “Type” en “Trefwoorden” onvoldoende contrast wanneer ze toetsenbordfocus krijgen. De tekst verandert dan in oranje (HEX #FF7320) op een witte achtergrond, met een contrastratio van 2,7:1. Voor tekst geldt een minimale contrastratio van 4,5:1. Ook deze combinatie is dus onvoldoende zichtbaar voor veel bezoekers, vooral voor mensen met een visuele beperking of kleurenblindheid. Pas de kleuren aan zodat het vereiste contrastniveau wordt bereikt.

Op pagina https://bibliotheektubbergen.op-shop.nl/ in de zoekresultaten heeft de groene tekst (HEX #458847) "nog 2 beschikbaar" op witte achtergrond een te lage contrastverhouding: 3,8:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

In het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/jaarverslag-tubbergen-2022-web.pdf staat de oranje tekst “Jaarverslag 2022 Bibliotheek Tubbergen” op een witte achtergrond. De gebruikte kleur (HEX #ED7D32) heeft een contrastratio van 2,8:1. Omdat het hier om grote tekst gaat, moet de contrastratio minimaal 3,0:1 zijn. De huidige combinatie voldoet dus niet aan de minimale toegankelijkheidseisen en is slecht leesbaar voor bezoekers met een visuele beperking. Ditzelfde probleem komt opnieuw voor op de laatste pagina van het document. Daarnaast bevat het document op meerdere pagina’s oranje tekst zoals “Wat opviel in 2022” op een witte achtergrond. Ook hier is de contrastratio 2,8:1. Omdat deze tekst niet vetgedrukt is en kleiner is dan 19px, is een minimale contrastratio van 4,5:1 vereist. De huidige kleur voldoet hier niet aan. Pas de tekstkleur of de achtergrondkleur aan zodat het contrast minimaal 4,5:1 is en de tekst voor alle bezoekers goed leesbaar is. Dit probleem komt ook op andere pagina’s van het document voor en moet daar eveneens worden opgelost.

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

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://bibliotheektubbergen.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://bibliotheektubbergen.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/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823) wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, is de placeholdertekst in het zoekveld niet zichtbaar. Zorg dat alle onderdelen van de pagina, waaronder de inhoud van invoervelden, ook bij 400% zoom nog goed leesbaar en bruikbaar zijn op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, zoals op https://www.bibliotheektubbergen.nl, hebben de links in de header (“Agenda”, “Collectie”, “Onderwijs” en “Contact”) een aangepaste toetsenbordfocusindicator. Deze bestaat uit een oranje rand (HEX #FF7320) op een witte achtergrond. De contrastratio tussen deze kleuren is 2,7:1. Omdat hier een aangepaste focusindicator is gebruikt (met CSS), gelden de minimale contrastvereisten van 3,0:1. De huidige focusindicator voldoet daar niet aan en moet worden aangepast zodat deze voldoende zichtbaar is voor bezoekers die navigeren met het toetsenbord.

Op pagina https://www.bibliotheektubbergen.nl verandert de rand van links onder “Word lid van een leesclub” wanneer ze toetsenbordfocus krijgen. De contrastratio is 2,7:1, wat onder de vereiste drempel van 3,0:1 ligt voor informatieve elementen. Deze situatie komt ook voor op andere pagina’s met vergelijkbare links. Zorg dat het kleurcontrast bij focus voldoet aan de minimale eis. Dit gebeurt ook op https://www.bibliotheektubbergen.nl/contact/contactformulier.html in de knop “Verzenden”, oo pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/de-voorleeshoek.html in de links “Ga meteen naar De Voorleeshoek”, "Log in bij De Voorleeshoek" en andere.

Op pagina https://bibliotheektubbergen.op-shop.nl/ krijgt het navigatiemenu toetsenbordfocus, zichtbaar door een oranje rand met kleurcode HEX #FF7320. De contrastratio tussen deze rand en de witte achtergrond is 2,7:1. Dat is lager dan de vereiste minimale contrastratio van 3,0:1. Daardoor is het voor mensen met een visuele beperking of kleurenblindheid moeilijk of zelfs onmogelijk om de focus waar te nemen. Dit kan opgelost worden door een kleurcombinatie te gebruiken met voldoende contrast. Ook op pagina https://bibliotheektubbergen.op-shop.nl/ staan links met de teksten “Meer informatie” en “Meer informatie en reserveren” die hetzelfde probleem hebben. Zie ook pagina https://bibliotheektubbergen.op-shop.nl/2/informatiepunt-digitale-overheid-ido/vanaf/03-06-2025 in de links “Terug” en “Reserveren”.

Op pagina https://bibliotheektubbergen.op-shop.nl/483/bankinformatiepunt/03-06-2025 heeft de link “Terug” ook een toetsenbordfocus met onvoldoende contrast.

Op pagina https://www.bibliotheektubbergen.nl/ staat onder de header een carrousel met grijze icoonknoppen (HEX #999999). De contrastratio tussen de kleur van deze knoppen en de witte achtergrond is slechts 2,8:1. Zorg dat het contrast tussen de knoppen en de achtergrondkleur minimaal 3,0:1 is.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/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 keuzevakjes 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 waardes liggen onder de vereiste minimale contrastverhouding van 3,0:1. Op de site wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een gekleurde rand die met CSS is toegevoegd. Voor de standaard focusindicator gelden geen contrasteisen in WCAG, maar zodra de focusindicator wordt aangepast met CSS, gelden deze eisen wel. Het contrast moet dan ten minste 3,0:1 zijn. Een vergelijkbaar probleem doet zich voor op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?… bij de focus op de tabs “Waar is het?”, “Meer info” en andere, op de link “Toon exemplaren elders” en andere elementen, en op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474 bij de radioknoppen “Tags” en “Nickname”, het zoekveld, de zoekknop en andere onderdelen.

Op de pagina met zoekresultaten (https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything) staan in de boekkaarten iconen in verschillende kleuren die de categorie van het boek aangeven. Sommige van deze iconen hebben onvoldoende kleurcontrast. Zo heeft het boek “Fruit” een roze icoon (HEX #FF7BFF) voor de categorie “Eten en Drinken” op een witte achtergrond, met een contrastverhouding van 2,2:1. Voor informatieve grafische elementen moet de contrastverhouding minimaal 3,0:1 zijn. Controleer daarom ook de andere iconen bij andere boeken op voldoende contrast.

Op de detailpagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?… is een tabnavigatie aanwezig. Het actieve tabblad heeft een outline met onvoldoende kleurcontrast: de grijze omlijning (HEX #EDEDED) op een witte achtergrond heeft een contrastverhouding van 1,2:1, terwijl visuele aanduidingen zoals outlines goed waarneembaar moeten zijn en dus minimaal 3,0:1 contrast nodig hebben. Hetzelfde probleem doet zich voor bij vergelijkbare tabs op de communitypagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474. Zorg dat de outlinekleur voldoende contrasteert met de achtergrond, zodat het actieve tabblad duidelijk herkenbaar is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://bibliotheektubbergen.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 hhttps://www.bibliotheektubbergen.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/8917/catalog/search?qs=&scope=anything verschijnt er een dialoogvenster wanneer een bezoeker die niet is ingelogd klikt op de knoppen “Reserveren” of “Mijn lijsten”. Na enkele seconden wordt de bezoeker automatisch doorgestuurd naar de inlogpagina, zonder voorafgaande waarschuwing. Zorg dat bezoekers de mogelijkheid hebben om deze tijdslimiet uit te zetten, aan te passen of te verlengen. Dit probleem komt ook voor bij dezelfde dialogen op andere pagina’s binnen het domein, bijvoorbeeld op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Alle pagina's van het domein https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=&scope=anything 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.bibliotheektubbergen.nl/ is de titel "Home" geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Deze tekst wordt bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina, die de inhoud van de pagina beschrijft.

Het title-element op de pagina https://www.bibliotheektubbergen.nl/contact/word-lid-van-de-bibliotheek.html is leeg. Dit element moet op elke pagina unieke tekst bevatten die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Deze tekst wordt getoond in de tab van de browser. Met een duidelijke beschrijving kunnen gebruikers makkelijker navigeren tussen verschillende pagina’s. Plaats een tekst in het `title`-element die de inhoud van de pagina beschrijft.

De pagina's https://bibliotheektubbergen.op-shop.nl/ en https://bibliotheektubbergen.op-shop.nl/404 hebben dezelfde tekst in het title-element van de pagina: "Bibliotheek Tubbergen". Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

Op de pagina’s https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=&scope=anything, https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 en andere pagina’s binnen dit domein staat in het title-element steeds dezelfde tekst: “Catalogus”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat op meerdere pagina’s dezelfde titel, dan kan dit verwarrend zijn voor bezoekers en maakt het navigeren lastiger. Pas daarom het title-element aan, zodat elke pagina een unieke, inhoudelijk correcte titel heeft.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website op een klein scherm wordt bekeken, verschijnt er onderaan de pagina een hamburgerknop die een mobiel menu opent. Op dit moment is het mogelijk om met het toetsenbord buiten het geopende menu te navigeren, terwijl het menu zichtbaar blijft. Dit kan leiden tot verwarring en foutieve bediening. Als een menu actief is, moet de toetsenbordfocus binnen het menu blijven. Zorg dat de focus gevangen blijft in het menu totdat de bezoeker het menu sluit met de sluitknop of de ESC-toets. Een alternatief is om het menu automatisch te sluiten zodra de focus het menu verlaat. Zo blijft de navigatie logisch en overzichtelijk voor alle gebruikers.

Op pagina https://bibliotheektubbergen.op-shop.nl/ komt de toetsenbordfocus na het navigatiebolletje onder de slider terecht op een onzichtbaar interactief element. De focus mag niet terechtkomen op verborgen links, knoppen of formuliervelden. Als dit wel gebeurt, kunnen bezoekers deze elementen onbedoeld 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 pagina https://www.bibliotheektubbergen.nl/zoekresultaten.website.html?q= is de volgorde van de toetsenbordfocus niet logisch. Na het activeren van de zoekknop in de header verspringt de focus direct naar de zoekresultaten, terwijl visueel gezien de filters in de zijbalk boven de resultaten staan. Pas de volgorde van de focus aan zodat deze aansluit op de visuele structuur: eerst de filters, daarna de zoekresultaten. Zo kunnen bezoekers die met het toetsenbord navigeren de inhoud beter volgen en bedienen.

Op alle pagina’s van het domein https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything komt de toetsenbordfocus direct terecht op een onzichtbaar interactief element in de header wanneer een bezoeker met toetsenbordnavigatie begint. De focus mag niet op verborgen links, knoppen of formuliervelden komen. Als dit toch gebeurt, kunnen bezoekers deze elementen per ongeluk activeren, wat verwarring veroorzaakt en tot toegankelijkheidsproblemen leidt. Verwijder verborgen interactieve elementen uit de tabvolgorde of maak ze volledig niet-focusbaar wanneer ze niet zichtbaar zijn.

Op dezelfde pagina is er een sectie “Filter”. Bij sommige filtergroepen (zoals “Materiaal” en “Auteur”) staat een knop “Meer…”. Wanneer hierop wordt geklikt, verschijnen extra filteropties. De toetsenbordfocus springt echter niet naar de eerste nieuw geladen optie, maar naar de knop “Minder…”. Wanneer nieuwe opties worden geladen, moet de focus automatisch naar de eerste nieuw toegevoegde optie verplaatst worden.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 staan tabbladen met verborgen panelen die zichtbaar worden zodra een tab wordt geactiveerd. De focusvolgorde werkt echter niet zoals verwacht. Tabbladen bestaan uit tablinks en tabpanelen, waarbij steeds één paneel zichtbaar is. Wanneer een tab met het toetsenbord wordt geactiveerd, moet de focus naar de inhoud van het bijbehorende tabpaneel gaan. Ook moet navigatie tussen tablinks met pijltjestoetsen mogelijk zijn. Meer informatie hierover staat op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/. Ditzelfde probleem komt voor op vergelijkbare tabnavigaties, zoals op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op dezelfde detailpagina zijn twee carrousels aanwezig. De toetsenbordfocus volgt hierin geen logische volgorde. De focus komt bijvoorbeeld op twee onzichtbare elementen terecht (“Slide 1 of 2” en “Slide 2 of 2”) die alleen voor schermlezers bedoeld lijken te zijn. Daarnaast gaat de focus eerst langs alle boektegels en daarna pas naar de navigatieknoppen, wat niet overeenkomt met de visuele opbouw. Interactieve elementen moeten in een logische volgorde worden gefocust, aansluitend op de visuele structuur, zodat toetsenbordgebruikers de pagina goed kunnen bedienen. Dit probleem doet zich ook voor bij de carrousel op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/NBC_PLUS/PPN:310263107?qs=Shakespeare%27s%20Romeo%20%26%20Julia&scope=title&filterAvailableTitles=false&src=920&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=3.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything wordt ingezoomd, opent de knop “Zoekresultaten verfijnen” een filterzijbalk, die in de code als dialoogvenster is opgezet. Op dit moment kan de toetsenbordfocus echter uit het dialoogvenster ontsnappen en terugkeren naar elementen op de onderliggende pagina. Bij dit soort dialoogvensters moet de focus binnen het venster worden vastgezet totdat de bezoeker het venster sluit (bijvoorbeeld via de sluitknop of de ESC-toets). Een alternatief is dat het venster automatisch wordt gesloten zodra de focus buiten het dialoogvenster komt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.nl/contact/word-lid-van-de-bibliotheek.html onder de kop “Onze Bibliotheek abonnementen” staan drie links met dezelfde tekst: “Word lid!”. Deze linkteksten geven geen specifieke informatie over de bestemming van de link. Dit leidt tot onduidelijkheid, vooral voor gebruikers die schermlezers gebruiken of moeite hebben met begrijpend lezen. Vervang de algemene tekst door beschrijvende linkteksten, bijvoorbeeld “Word lid van jeugdabonnement” of “Word lid van standaardabonnement”. Als de visuele weergave beknopt moet blijven, kan de aanvullende tekst visueel verborgen worden. Dit probleem komt ook voor bij de link “Lees meer” onder de kop “Doorverwijzers”. Deze tekst is te algemeen en geeft geen duidelijkheid over de bestemming. Voeg informatie toe aan de linktekst, bijvoorbeeld “Lees meer over doorverwijzers”, en verberg die indien nodig visueel.

Op pagina https://www.bibliotheektubbergen.nl/zoekresultaten.website.html?q= hebben de links in de paginering onvoldoende context. Hoewel ziende gebruikers begrijpen dat "1", "2", "3", enz. paginanummers voorstellen, is dit niet duidelijk voor slechtziende gebruikers of gebruikers die schermlezers gebruiken. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’.

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

Het logo bovenaan de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything functioneert als link, maar de toegankelijke naam “Bibliotheek Tubbergen” beschrijft het linkdoel onvoldoende. Omdat de afbeelding als link dient en er geen zichtbare linktekst aanwezig is, moet de toegankelijke naam duidelijk maken dat het om een logo gaat en dat de link naar de startpagina leidt. Pas de naam aan naar bijvoorbeeld “Logo de Bibliotheek Tubbergen, ga naar de startpagina”.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 staat onder het zoekveld de tekst “Resultaat 5 van 18436” met pijltjes om naar het vorige of volgende resultaat te gaan. De linkteksten bieden echter onvoldoende context voor bezoekers met een visuele beperking, omdat niet duidelijk is dat “Vorige” en “Volgende” verwijzen naar resultaten. Dit kan verbeterd worden door het woord “resultaat” (visueel verborgen) aan de linktekst toe te voegen. Ditzelfde probleem komt voor op vergelijkbare detailpagina’s, zoals op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/NBC_PLUS/PPN:310263107?qs=Shakespeare%27s%20Romeo%20%26%20Julia&scope=title&filterAvailableTitles=false&src=920&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=3.

Wanneer https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=&scope=anything op een klein scherm wordt bekeken, verschijnt er een “?”-icoon naast de tekst “Resultaten voor ’’ in ‘Alles’”. Dit icoon functioneert als link, maar is voorzien van aria-hidden=“true” en heeft geen tekstalternatief. Daardoor heeft de link geen toegankelijke naam en begrijpen gebruikers van schermlezers niet waar de link naartoe gaat. Dit kan worden opgelost door een passende alt-tekst aan de afbeelding toe te voegen of de link op een andere manier van een toegankelijke naam te voorzien.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.nl/ wordt in de carousel bovenaan de knop “Volgende” gebruikt. De toegankelijke naam geeft niet duidelijk aan wat deze knop doet. De naam moet aangepast worden naar “Volgende slide” zodat duidelijk is dat hiermee door de dia’s wordt genavigeerd.
In de footer van de website https://www.bibliotheektubbergen.nl/ staat de kop "Snel naar". Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Op pagina https://www.bibliotheektubbergen.nl/hulp-en-leren/taalhuis.html heeft iframe met een video het title-attribuut met “Video”. Deze beschrijving is te algemeen en zegt niets over de inhoud. Het iframe moet een unieke en betekenisvolle titel krijgen, zodat het voor schermlezersgebruikers duidelijk is waar het iframe over gaat. Er moet ook in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/de-voorleeshoek.html staan meerdere iframes onder de kop “De nieuwste filmpjes van De Voorleeshoek”, elk met dezelfde niet-unieke en weinig informatieve beschrijving “een voorstukje van het voorleesfilmpje”. Iframes moeten een goede beschrijving hebben. Die staat meestal in het attribuut title van het iframe. Er moet in staan welk type inhoud het is, zoals een podcast of video, en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Op pagina https://www.bibliotheektubbergen.nl/collectie/digitale-bronnen/bereslim.html komt hetzelfde probleem voor onder de koppen “Nieuw bij Bereslim”, “Uitgelicht bij Bereslim” en “Populair bij Bereslim”. De iframes op deze pagina gebruiken allemaal de titel “Voorstukje van een digitaal prentenboek bij Bereslim”. Ook hier geldt dat het attribuut title een unieke en inhoudelijk betekenisvolle beschrijving moet bevatten, zodat duidelijk is welke inhoud in het iframe wordt aangeboden.

Het selectorelement naast het zoekveld op https://rijnbrin​k.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything heeft de toegankelijke naam “SEARCH_SELECT_SCOPE Alles”, maar deze naam is niet beschrijvend en bevat onleesbare tekens zoals underscores. Zulke symbolen maken het voor bezoekers onduidelijk wat de functie van de link of knop is. Pas de toegankelijke naam aan door alle technische of onleesbare onderdelen te verwijderen en gebruik duidelijke, beschrijvende tekst.
Wanneer op dezelfde pagina een boek wordt toegevoegd aan “Mijn Lijsten”, opent er een modal waarbij de sluitknop het label “MODAL.CLOSE” heeft. Deze tekst is niet begrijpelijk voor gebruikers en maakt de functie van de knop onduidelijk. Vervang deze technische tekst door een duidelijke, beschrijvende naam, zoals “Sluiten”, zodat bezoekers begrijpen wat de knop doet. Dit probleem komt ook voor in modals op andere pagina’s van het domein.

Op de pagina https://rijnbrin​k.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823, op het tabblad “Lijsten”, staan tabelkoppen waarmee de inhoud gesorteerd kan worden, maar deze koppen zijn niet herkenbaar als interactieve elementen. Omdat er geen visuele of programmatische aanduiding is dat de kolommen sorteerbaar zijn, weten gebruikers niet dat de koppen klikbaar zijn. Maak de sorteerfunctie duidelijk door vooraf een indicator toe te voegen, zoals een pijltje of de tekst “sorteerbaar”, en geef de elementen een passende toegankelijke rol of naam zodat ook schermlezergebruikers begrijpen dat de kolommen kunnen worden bediend. Ditzelfde probleem komt voor in de tabel op het tabblad “Lijsten” op https://rijnbrin​k.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website voor het eerst wordt bezocht, verschijnt er bovenaan de pagina een cookiebanner. Bij het klikken op de knop “Lees hier meer over cookies” opent een dialoogvenster. In dit venster is de toetsenbordfocus niet zichtbaar op de “X”-knop om het venster te sluiten. De toetsenbordfocus moet altijd duidelijk zichtbaar zijn op interactieve elementen zoals knoppen, zodat bezoekers die met het toetsenbord navigeren kunnen zien waar ze zich bevinden en weten wanneer ze op Enter moeten drukken. Zorg dat de “X”-knop een goed zichtbare focusindicator krijgt.

Op alle pagina’s van de website, zoals op https://www.bibliotheektubbergen.nl/, is in de header een keuzemogelijkheid aanwezig tussen de radio buttons “Catalogus” en “Site”. Deze elementen zijn focusbaar, maar de toetsenbordfocus is niet zichtbaar. Alle interactieve elementen moeten een zichtbare focusindicator hebben, met voldoende contrast ten opzichte van de achtergrond. Pas de opmaak aan zodat de focus duidelijk wordt weergegeven wanneer een van deze radio buttons met het toetsenbord wordt bereikt.

Op https://rijnbrin​k.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 is de toetsenbordfocus niet zichtbaar op de knoppen met drie stippen (“Carrousel”) en negen stippen (“Raster”) naast “Toon als”. Deze knoppen zijn wel interactief, maar zonder zichtbare focusindicator weten toetsenbordgebruikers niet wanneer ze erop staan en kunnen zij de knoppen niet betrouwbaar bedienen. Zorg dat deze knoppen een duidelijke en voldoende contrasterende focusstijl krijgen, zodat de actieve positie altijd zichtbaar is.
Op dezelfde pagina is de toetsenbordfocus ook niet zichtbaar op de knoppen met “?”-iconen in de tabsectie bij “Recensies” en “Tags”. Ook hier zijn de elementen wel bedienbaar, maar zonder zichtbare focusindicatie is het voor bezoekers die met het toetsenbord navigeren onmogelijk om te zien waar de focus zich bevindt. Maak de focus daarom op alle interactieve elementen zichtbaar, zodat gebruikers duidelijk kunnen herkennen welk element op dat moment actief is.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website bevat het zoekveld de placeholdertekst “Waar ben je naar op zoek?”, maar de toegankelijke naam van het invoerveld is “Zoekopdracht”. Omdat deze toegankelijke naam niet overeenkomt met de zichtbare tekst, kan het zoekveld niet correct worden bediend met spraaksoftware. Gebruikers die stemcommando’s geven, spreken de zichtbare tekst uit. Als deze tekst niet voorkomt in de toegankelijke naam, herkent het systeem het commando niet. Zorg daarom dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin. In dit geval kan de toegankelijke naam bijvoorbeeld zijn: “Waar ben je naar op zoek? Zoekopdracht”.

Op pagina https://bibliotheektubbergen.op-shop.nl/2/informatiepunt-digitale-overheid-ido/vanaf/03-06-2025 staat onder de kop “Informatiepunt Digitale Overheid (IDO)” een tabel. Wanneer een bezoeker op de link “Reserveren” klikt, verschijnt er een formulier. In dit formulier staat boven het invoerveld het label “Deelname gratis”, maar de toegankelijke naam van het veld is leeg. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan.

Op de pagina https://rijnbrin​k.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 wordt op het tabblad “Lijsten” een zoekveld getoond waarvan de placeholdertekst “Zoek in lijsten” als zichtbaar label wordt gebruikt, terwijl de toegankelijke naam in de code “Zoek” is. Omdat de zichtbare tekst niet overeenkomt met de toegankelijke naam, kan het zoekveld niet goed met spraakbesturing worden bediend en is het voor schermlezergebruikers onduidelijk. Zorg daarom dat de toegankelijke naam de volledige zichtbare tekst bevat, bij voorkeur aan het begin.
Hetzelfde probleem komt voor in het vergelijkbare zoekveld op het tabblad “Lijsten” op de pagina https://rijnbrin​k.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheektubbergen.nl/ 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 de website.

In het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/jaarverslag-tubbergen-2022-web.pdf is de taal niet ingesteld in de metadata. Dit betekent dat hulpsoftware de tekst niet met de juiste uitspraakregels kan voorlezen. Stel de taal in via de bestandseigenschappen van de PDF, zodat deze als Nederlands wordt herkend.

Ook in het PDF-document op https://www.bibliotheektubbergen.nl/dam/bestanden/formulier_ik_willerentaalhuis-tubbergen-web.pdf ontbreekt de taalinformatie in de metadata. Om correcte uitspraak en navigatie met hulpsoftware mogelijk te maken, moet de taal van het document worden ingesteld op Nederlands via de bestandseigenschappen.

Op alle pagina’s van het domein staat het lang-attribuut ingesteld als “nl_NL”, maar dit is onjuist. De juiste notatie voor taal- en regiocodes gebruikt een koppelteken, dus het attribuut moet “nl-NL” zijn. Dit is belangrijk omdat hulpmiddelen zoals schermlezers dan de correcte uitspraakregels voor het Nederlands toepassen. Pas daarom op alle pagina’s van het domein het lang-attribuut aan naar “nl-NL”, zoals bijvoorbeeld op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything worden meerdere toegankelijke namen in het Engels gebruikt, zoals “SEARCH.SEARCH”, “SEARCH_SELECT_SCOPE Alles”, “SEARCH.SORTING”, Engelse aria-labels bij de beoordelingssterren en “MODAL.CLOSE” voor de sluitknop van het venster “Mijn lijsten”. Omdat de hoofdtaal van de pagina Nederlands is, leest een schermlezer deze Engelse woorden met Nederlandse uitspraakregels voor, waardoor de informatie moeilijk te begrijpen is. De toegankelijke namen moeten daarom worden vertaald naar het Nederlands, zodat ze aansluiten bij de taal van de pagina en begrijpelijk zijn voor bezoekers die hulpsoftware gebruiken. Dit is in lijn met succescriteria 2.4.6 en 1.3.1. Hetzelfde probleem doet zich voor op de detailpagina, in de carrouselknoppen met de namen “Previous” en “Next”, bij de zoekknop op de community-pagina met de naam “community-search-button”, bij de paginering op de tab “Lijsten” en op andere plekken binnen het domein. Alle toegankelijke namen moeten worden omgezet naar duidelijke Nederlandstalige labels, zodat schermlezers consistente en begrijpelijke informatie kunnen geven.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheektubbergen.op-shop.nl/2/informatiepunt-digitale-overheid-ido/vanaf/03-06-2025 staat onder de kop “Informatiepunt Digitale Overheid (IDO)” een tabel. In de vierde kolom van deze tabel staat een select-element met het label “Locatie”. Wanneer een bezoeker een optie kiest, wordt de pagina opnieuw geladen en begint de focus bovenaan de pagina. Dit mag niet zomaar gebeuren. Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Een andere oplossing is om een knop toe te voegen waarmee de bezoeker zijn keuze kan bevestigen. Dit select-element staat ook op andere pagina’s.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektubbergen.nl/contact/contactformulier.html wordt in het formulier gebruikgemaakt van HTML5-validatie. Wanneer het formulier met lege of onjuiste gegevens wordt verzonden, verschijnen standaard foutmeldingen van de browser. Deze meldingen worden echter niet in alle browsers en schermlezers op dezelfde manier ondersteund. De inhoud van de melding is soms kortaf, onduidelijk of wordt helemaal niet voorgelezen, wat de toegankelijkheid beperkt. Om dit probleem op te lossen, moeten eigen foutmeldingen worden toegevoegd aan het formulier. Controleer of er op andere pagina’s van de website ook formulieren aanwezig zijn die uitsluitend op HTML5-validatie vertrouwen, en pas die waar nodig ook aan. Zo wordt de toegankelijkheid en bruikbaarheid van alle formulieren verbeterd.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 staat op de tab “Lijsten” een zoekveld waarvan de placeholdertekst “Zoek in lijsten” wordt gebruikt als label. Deze placeholder verdwijnt zodra de gebruiker begint te typen en kan daarom niet dienen als zichtbaar label. Een invoerveld zonder permanent zichtbaar label kan tot verwarring leiden, omdat bezoekers niet meer kunnen zien wat er van hen verwacht wordt. Voor toegankelijkheid is een blijvend zichtbaar label vereist, bijvoorbeeld in tekstvorm boven of naast het veld, of als duidelijk herkenbaar icoon met een toegankelijke naam. Hetzelfde probleem is aanwezig op de tab “Lijsten” van de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website voor het eerst wordt bezocht, verschijnt bovenaan de pagina een cookiebanner. Na het klikken op de knop “Lees hier meer over cookies” wordt een dialoogvenster geopend. Dit venster mist zowel een role="dialog" als een aria-label. Hierdoor weten schermlezers niet dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit belemmert de toegankelijkheid voor bezoekers die afhankelijk zijn van hulpsoftware. Voeg aan het dialoogvenster het attribuut role="dialog" toe, samen met een aria-label waarin de inhoud duidelijk wordt beschreven, bijvoorbeeld aria-label="Informatie over cookies en privacy".

De zoekbalk in het bovenste menu van de website https://www.bibliotheektubbergen.nl/ heeft een zoekknop zonder toegankelijke naam. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat deze knop doet. Geef een toegankelijke naam aan de knop.

Op kleine schermen van de website https://www.bibliotheektubbergen.nl/ verschijnt een menubalk onderaan de pagina. De derde optie "Zoeken" opent een extra venster waarin twee zoekvelden staan. De zoekknoppen hebben geen toegankelijke naam.

Op pagina https://bibliotheektubbergen.op-shop.nl/ staat een zoekveld. Beide het invoerveld en de zoekknop hebben geen toegankelijke naam. Hierdoor weten bezoekers die een schermlezer gebruiken niet wat ze in dit veld moeten invullen. Geef deze toegankelijke naam.

Op pagina https://bibliotheektubbergen.op-shop.nl/ staan filters "Categorie", "Locatie", "Tag" en "Wanneer". Deze interactieve elementen hebben geen toegankelijke rol. Elk HTML-element heeft een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Op die manier kunnen ze op een intelligente manier interageren met het element en de bezoeker uitleggen wat het doet. Zorg ervoor dat het element de juiste rol en naam heeft.

Op pagina https://bibliotheektubbergen.op-shop.nl/2/informatiepunt-digitale-overheid-ido/vanaf/03-06-2025 ontbreekt de toegankelijke naam bij het select-element “Locatie" in de tabel onderaan de pagina. De schermlezer kan niet vertellen wat dit element doet. Geef het select-element een toegankelijke naam.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything staat naast het zoekveld een selector die is opgebouwd met een ul-element. De items in deze lijst hebben onterecht de ARIA-rol “menuitem”. Omdat deze rol alleen correct werkt binnen een structuur met bijvoorbeeld “menu”, “menubar” of “group”, ontstaat er voor hulpsoftware een verkeerde interpretatie. Bovendien hoort bij deze rollen een alternatieve toetsenbordbediening die hier niet aanwezig is en voor dit eenvoudige keuzemenu ook niet nodig is. De beste oplossing is om de rollen “menubar” en “menuitem” volledig te verwijderen en een gewone geneste ul-lijst te gebruiken. Dit sluit aan bij de semantiek van HTML en voorkomt onnodige toegankelijkheidsproblemen.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 bevindt zich een sectie die visueel en functioneel werkt als een tabnavigatie. De tab-elementen zelf hebben de juiste rol, maar de panelen waarin de inhoud per tab staat missen de verplichte rol “tabpanel”. Daarnaast ontbreken ook de “aria-controls”-attributen, waardoor schermlezers niet kunnen bepalen welke tab welk paneel opent. Verder heeft het actieve tab-element geen aria-selected-attribuut, zodat blinde gebruikers niet kunnen horen welke tab op dat moment actief is. De juiste rollen en ARIA-attributen moeten worden toegevoegd om deze structuur volledig toegankelijk te maken. Deze problemen komen ook voor in de vergelijkbare tabnavigatie op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 staat op de tab “Lijsten” een tabel. De koppen van deze tabel kunnen worden gebruikt om te sorteren, maar zij hebben geen rol die aangeeft dat het interactieve elementen zijn. Zonder zo’n rol kunnen gebruikers van hulpsoftware niet weten dat de kolomkoppen aanklikbaar zijn. Een geschikte rol, bijvoorbeeld “button”, maakt duidelijk dat de koppen een actie uitvoeren. Hetzelfde geldt voor de tabel op de “Lijsten”-tab van de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/title-detail/WISE/1227079?qs=*&scope=anything&titleNavIndex=2&titleNavRouteName=search&titleNavTotal=17823 bevindt zich op de tab “Recensies” een knop met een “?”-icoon die een dialoogvenster opent. Dit venster heeft geen toegankelijke naam. Zonder toegankelijke naam kan een schermlezer niet aan de gebruiker doorgeven welk soort informatie wordt getoond. Een aria-label met een duidelijke beschrijving van de inhoud is noodzakelijk. Hetzelfde probleem speelt bij het venster dat opengaat vanuit de “Tags”-tab en ook op de vergelijkbare pagina onder https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op kleine schermen verschijnt er in de header een menuknop waarmee het mobiele menu wordt geopend. Deze knop geeft niet aan of het menu is ingeklapt of uitgeklapt, waardoor gebruikers die niet kunnen zien wat er visueel gebeurt, niet weten in welke staat het menu zich bevindt. Dit kan worden opgelost door een tekstuele aanduiding toe te voegen die voor ziende gebruikers met CSS verborgen wordt. Een andere oplossing is het gebruik van aria-expanded, dat de waarde “true” krijgt wanneer het menu openstaat en “false” wanneer het gesloten is.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/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 kunnen begrijpen waar de link voor dient. Een duidelijke toegankelijke naam is noodzakelijk om de bestemming of functie van de link begrijpelijk te maken. Dit raakt onder andere succescriteria 1.1.1 en 2.4.4.

Op dezelfde pagina opent de knop “Zoekresultaten verfijnen” op een klein scherm een zijbalk met filters, die in de code wordt weergegeven als een dialoogvenster. Dit dialoogvenster heeft echter geen toegankelijke naam, waardoor schermlezers niet herkennen dat er sprake is van een dialoog met specifieke inhoud. Een aria-label dat de functie of inhoud van het filtervenster omschrijft is nodig om dit toegankelijk te maken.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/catalog/search?qs=*&scope=anything wordt tijdens het aanpassen van filters de tekst “Resultaten: 1 – 10 (van 11475)” dynamisch bijgewerkt zonder dat de pagina opnieuw laadt. Omdat dit een statusbericht is, moet het automatisch worden uitgesproken door schermlezers op het moment dat het verandert. Dat gebeurt nu niet, omdat het element geen aria-live-attribuut heeft en geen mechanisme om wijzigingen aan hulpsoftware door te geven. Door dit statusbericht in een gebied met aria-live te plaatsen (bij voorkeur aria-live=“polite”), wordt het automatisch aangekondigd zodra het verandert.

Op de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8917/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474 is er een tabnavigatie waarin tabbladen zoals “Recensies (0)” en “Gegevens” correct een statusmelding laten voorlezen wanneer er geen inhoud beschikbaar is. Dat is de gewenste werking. Wanneer een gebruiker echter naar de tabbladen “Lijsten (187)” en “Tags (4)” gaat, wordt opnieuw een statusmelding aangekondigd terwijl deze tabs wél inhoud bevatten. Dit zorgt voor onnodige herhaling en leidt tot verwarring voor gebruikers van schermlezers. Alleen tabbladen zonder inhoud of met een relevante statusupdate mogen een statusbericht laten aankondigen. De overbodige meldingen op tabbladen waar wel gegevens staan moeten daarom worden verwijderd of buiten aria-live-gebieden worden geplaatst.