Rapport:
Audit digitale toegankelijkheid website van Bibliotheek Twente

Uitkomst: Onvoldoende

Bevindingen: Het logo op https://www.bibliotheektwente.nl/ heeft een alt-tekst “Bibliotheek Twente”. Dit is niet voldoende. De alt-tekst moet beschrijven dat het om een logo gaat. Omdat alleen het logo in deze link staat, en er geen linktekst aanwezig is, moet de alt-tekst ook de bestemming van de link beschrijven. Daarom moet ook het linkdoel vermeld worden (naar de homepagina). Dit probleem komt op meerdere pagina's voor, bijvoorbeeld https://bibliotheektwente.op-shop.nl/.

Op pagina https://www.bibliotheektwente.nl/ staan onder de kop “Nieuws” afbeeldingen die binnen links zijn geplaatst. De alternatieve teksten van deze afbeeldingen herhalen de tekst van de koppen, zoals “Onverwachte ontmoetingen”, “Wise app” en “Vivian Mensink en Pomme Weemaes - Regionale Voorleeskampioenen”. Deze afbeeldingen geven geen extra informatie ten opzichte van de tekst in de links en kunnen daarom als decoratief worden beschouwd. Het alt-attribuut moet leeg worden gelaten om herhaling van de tekst te voorkomen. Ook op pagina https://www.bibliotheektwente.nl/klantenservice staan vergelijkbare afbeeldingen voor de koppen “Activiteiten & Cursussen” en “Online Bibliotheek”. Ook hier geven de afbeeldingen geen aanvullende informatie en moet het alt-attribuut leeg worden gelaten. Zie ook pagina https://www.bibliotheektwente.nl/over-ons waar afbeeldingen staan in de buurt van de koppen “Raad van Toezicht”, “Werken bij Bibliotheek Twente” en “Samenwerken? Graag!”. Deze afbeeldingen dragen geen aanvullende inhoud over en kunnen als decoratief worden beschouwd. Het alt-attribuut moet daarom leeg worden gelaten. Op pagina https://bibliotheektwente.op-shop.nl/ staan afbeeldingen bij de koppen “Digihulp”, “Taalcafé”, “Taalpunt” en andere. Ook in deze gevallen geven de afbeeldingen geen extra informatie. Het alt-attribuut moet leeg worden gelaten om overbodige herhaling te vermijden.

Op https://www.bibliotheektwente.nl/zoeken?q=Twente hebben de afbeeldingen van de zoekresultaten alt-tekst. Maar in dit geval kunnen ze als deocratief worden beschouwd. Verwijder de alt-tekst, zodat het alt-attibuut in de code leeg wordt.

Op alle pagina's van het pdf-document op https://bibliotheek-twente-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-05/Profiel%20RvT%20Bibliotheek%20Twente.pdf staat een logo 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 de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/oefenplein staat een video onder het kopje "Adres & tijden". De video bevat tekst en logo's op verschillende punten (bijvoorbeeld aan het einde). Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.bibliotheektwente.nl/oefenplein voldoet niet aan succescriterium 1.2.5, dat audiobeschrijving voor video's vereist. Specifiek voor deze video is 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 pagina https://www.bibliotheektwente.nl/ is de tekst "Zoek in de collectie" niet gemarkeerd als koptekst. 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.

In het hoofdmenu heeft de actieve link (naar de huidige pagina) een duidelijk visueel uiterlijk, maar dit onderscheid is niet aanwezig in de code. Zie pagina's: https://www.bibliotheektwente.nl/klantenservice, https://www.bibliotheektwente.nl/over-ons, https://www.bibliotheektwente.nl/lidmaatschap.
Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld `aria-current="true"` toe aan de actieve link. Andere opties zijn een `h1`-kop met dezelfde tekst als het menu-item, of het gebruik van de paginatitel (`title`).

Op pagina https://www.bibliotheektwente.nl/oefenplein zijn de teksten “Je kunt bijvoorbeeld oefenen met:” en “Oefenen onder begeleiding” verkeerd gemarkeerd met het strong-element in plaats van een kop-element. Het strong-element is niet bedoeld om koppen aan te duiden, maar om nadruk te geven aan een deel van een zin. Voor de structuur van een pagina moeten altijd kop-elementen zoals h2 worden gebruikt. Alleen dan wordt de betekenis van de tekst als kop correct begrepen door hulpsoftware.

Op pagina https://www.bibliotheektwente.nl/klantenservice-contact is de tekst “Contactformulier Klantenservice” gemarkeerd met het strong-element in plaats van een passend kop-element. Hierdoor wordt de structuur van de pagina niet duidelijk overgebracht aan hulpsoftware. Zie ook pagina https://www.bibliotheektwente.nl/digitoegankelijkheid waar de tekst “Contact” op dezelfde manier onjuist is gemarkeerd. Voor een correcte semantische structuur moet dit als kop worden aangeduid met een kop-element.

Op pagina https://www.bibliotheektwente.nl/rvt zijn de teksten “Directeur-bestuurder” en “Raad van Toezicht” gemarkeerd met het strong-element in plaats van een kop-element. Ook hier wordt de tekststructuur niet goed overgebracht aan hulpsoftware. Dit belemmert het gebruik van de pagina door mensen die afhankelijk zijn van hulpsoftware.

Op pagina https://www.bibliotheektwente.nl/test is het strong-element onjuist gebruikt voor opmaakdoeleinden. De volledige zin “Helaas! De pagina waar je naar zocht bestaat niet meer… hieronder.” is gemarkeerd met het strong-element om de tekst vetgedrukt te tonen. Het strong-element heeft echter een semantische functie en moet alleen worden gebruikt om nadruk aan een tekst te geven met betekenis. Het gebruik van dit element voor louter visuele opmaak is onjuist. Voor vetgedrukte tekst zonder semantische betekenis moet CSS worden gebruikt. Ook op pagina https://www.bibliotheektwente.nl/lidmaatschap komt hetzelfde probleem voor bij de teksten “Lees meer >”, “Klantenservice” en “Wel zo makkelijk toch?”. Deze teksten zijn gemarkeerd met het strong-element, maar het element wordt hier uitsluitend gebruikt om de tekst visueel op te maken. Dit gebruik is niet juist, omdat het geen inhoudelijke nadruk betreft. Voor dit doel moet opmaak met CSS worden toegepast.

Op pagina https://www.bibliotheektwente.nl/oefenplein zijn de volgende teksten niet gemarkeerd als koppen: "Bibliotheek Goor", "Bibliotheek Hengelo Stad" en "Bibliotheek Oldenzaal". Deze teksten zijn koppen voor inhoud die onder staat.

Op pagina https://www.bibliotheektwente.nl/rvt zijn de tussenkoppen met strong-elementen gemarkeerd in plaats van de kop-elementen. Zie bijvoorbeeld “Raad van toezicht”.

Op pagina https://www.bibliotheektwente.nl/zoeken?q=Twente 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.

Op pagina https://www.bibliotheektwente.nl/rvt is een tekstblok met meerdere alinea's onder "Huidige samenstelling Bestuur & Raad van Toezicht" ten onrechte gemarkeerd als één p-element. Dit gebeurt met blokken die beginnen met "Directeur-bestuurder..." en "Raad van Toezicht...". Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.

Op pagina https://bibliotheektwente.op-shop.nl/ bevat een zijbalk met filters groepen selectievakjes met de labels "Categorie", "Locatie", "Tag" en "Wanneer". Hoewel de selectievakjes visueel zijn gegroepeerd, is deze koppeling niet aanwezig in de code. Hierdoor ziet de schermlezer niet dat er een relatie is tussen het groepslabel en de keuzevakjes (checkboxes). De individuele labels van elk keuzevakje worden voorgelezen zonder het groepslabel. Dit kan worden opgelost door gebruik te maken van fieldset- en legend-elementen. Andere oplossingen zijn ook mogelijk.

In het PDF-document op https://www.bibliotheektwente.nl/sites/default/files/2023-11/Bibliotheek%20Twente%20Beleidsplan%202024-2027.pdf ontbreekt een codelaag, waardoor de inhoud niet toegankelijk is voor hulpsoftware. Door het ontbreken van deze laag kan het document niet volledig worden onderzocht. Alle succescriteria die betrekking hebben op de structuur van een pdf, zoals semantische koppen en alternatieve teksten bij afbeeldingen, zijn hierdoor niet te beoordelen. Als de codelaag wordt toegevoegd, kunnen toegankelijkheidsproblemen zichtbaar worden die nu nog niet vastgesteld kunnen worden.
In het PDF-document op https://bibliotheek-twente-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-05/Profiel%20RvT%20Bibliotheek%20Twente.pdf zijn meerdere koppen aanwezig die niet als kop zijn gemarkeerd in de tags. Het gaat bijvoorbeeld om de teksten “Profiel Raad van Toezicht Bibliotheek Twente”, “Doelstelling” en “Kaders”. Deze teksten zijn visueel als kop opgemaakt, maar gemarkeerd met een p-tag in plaats van een h-tag. Hierdoor komt de visuele structuur niet overeen met de tag-structuur van het document. De p-tags moeten vervangen worden door h-tags zodat hulpsoftware de structuur van het document correct kan interpreteren.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/zoeken?q=Twente is de volgorde van HTML-elementen binnen de zoekresultaten onjuist. De huidige volgorde is tekst over het contenttype, gevolgd door de kop en daarna tekst. Omdat de kop niet als eerste in de code staat binnen elk artikel, ontstaat er verwarring voor bezoekers die gebruikmaken van een schermlezer. Dit kan worden opgelost door de kop bovenaan te plaatsen in de code, gevolgd door de bijbehorende inhoud. Zo ontstaat een logische en begrijpelijke structuur. De visuele presentatie mag hiervan afwijken zolang de codevolgorde logisch blijft.

Op pagina https://bibliotheektwente.op-shop.nl/ is de volgorde van HTML-elementen binnen de evenementen onjuist. Afbeeldingen staan bovenaan in de code, gevolgd door de datum, de kop en daarna aanvullende tekst. Door deze volgorde wordt de inhoud niet logisch gepresenteerd voor hulpsoftware. Om dit te herstellen moet de kop in de code vóór de afbeelding, datum en overige informatie worden geplaatst. Dit zorgt voor een duidelijke structuur, ook voor bezoekers die afhankelijk zijn van hulpsoftware.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/klantenservice-contact ontbreekt het autocomplete-attribuut bij invoervelden waarin persoonlijke informatie moet worden ingevuld, zoals voornaam, achternaam en e-mailadres. Zonder dit attribuut kunnen browsers en hulpsoftware geen ondersteuning bieden bij het automatisch invullen van deze gegevens. Het autocomplete-attribuut moet worden toegevoegd aan alle velden waarin persoonlijke informatie wordt gevraagd.

Op pagina https://www.bibliotheektwente.nl/nieuwsbrief ontbreken eveneens autocomplete-attributen bij velden voor persoonlijke gegevens. Ook hier geldt dat velden zoals e-mailadres voorzien moeten zijn van het juiste autocomplete-attribuut om automatische invulling mogelijk te maken. Dit verbetert de bruikbaarheid voor bezoekers en de werking van hulpsoftware.

Op pagina https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers missen invoervelden zoals voornaam, achternaam, e-mailadres en telefoonnummer het vereiste autocomplete-attribuut. Voor een goede ondersteuning moet dit attribuut worden toegevoegd met de juiste waarde, afhankelijk van het soort informatie. Op deze pagina staat meer informatie over het gebruik van autocomplete en de vereiste waarden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/zoeken?q=Twente wordt kleur als enige visuele aanwijzing gebruikt om aan te geven op welke paginaknop een bezoeker zich bevindt binnen de paginering onder de zoekresultaten. Deze visuele aanduiding is niet beschikbaar in de HTML-code en wordt daardoor niet doorgegeven aan hulpsoftware. Bezoekers die gebruikmaken van een schermlezer kunnen hierdoor niet bepalen op welke pagina zij zich bevinden. Dit probleem kan worden opgelost door een extra visuele aanwijzing toe te voegen, zoals een icoon, tekst of semantisch kenmerk in de code waarmee de huidige pagina aangeduid wordt.

Op pagina https://bibliotheektwente.op-shop.nl/ staan bovenaan vier filters. Deze filters openen selecties met aankruisvakjes en keuzerondjes. Deze maken gebruik van een aangepaste toetsenbordfocus die alleen zichtbaar is door een verandering van achtergrondkleur. Het contrast tussen de gefocuste en niet-gefocuste toestand is te laag, namelijk minder dan 3,0:1. Hierdoor is de focusindicator slecht zichtbaar voor bezoekers met een visuele beperking en voor toetsenbordgebruikers. Om dit op te lossen moet een duidelijkere focusindicator worden toegevoegd, bijvoorbeeld door een dikkere rand, een onderstreping of een contrastrijkere achtergrondkleur.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op vrijwel alle pagina’s van https://www.bibliotheektwente.nl/ hebben links zoals “Klantenservice (contact)”, “Lenen” en “Onverwachte ontmoetingen in de bieb” een onvoldoende contrastratio bij hover of focus. De gemeten contrastratio is 2,7:1, wat lager is dan de vereiste minimumwaarde van 3,0:1 voor grote of vette tekst. Interactieve elementen moeten in alle toestanden voldoen aan de minimale contrastvereisten. Zorg dat links en knoppen bij hover of focus minimaal een contrastratio van 3,0:1 hebben ten opzichte van de achtergrond.

In de footer op pagina’s van https://www.bibliotheektwente.nl/ is de oranje tekstkleur (HEX #ff7320) van links zoals “Voorwaarden”, “Steun ons!” en “Toegankelijkheid” te zien op een zwarte achtergrond (HEX #39373a). De contrastratio is 4,3:1, wat onvoldoende is voor tekst kleiner dan 19px. Voor deze tekstgrootte is een minimale contrastratio van 4,5:1 vereist. De leesbaarheid voor bezoekers met een visuele beperking is hierdoor onvoldoende.

Op pagina https://www.bibliotheektwente.nl/oefenplein staat de zwarte tekst (HEX #39373a) “Om deze video te bekijken, moet je video-cookies accepteren.” op een grijze achtergrond (HEX #868686). De contrastratio is 3,2:1 en daarmee onvoldoende voor tekst kleiner dan 19px. De vereiste contrastratio is minimaal 4,5:1, zodat de tekst goed leesbaar is voordat een bezoeker cookies accepteert.

Op pagina’s https://www.bibliotheektwente.nl/klantenservice-contact, https://www.bibliotheektwente.nl/nieuwsbrief en https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers is bij foutmeldingen een rode tekstkleur (HEX #ff0000) te zien op een lichtrode achtergrond (HEX #ffcccc). De contrastratio is 2,8:1, wat lager is dan de vereiste 4,5:1. Foutmeldingen moeten voldoende contrast hebben om goed zichtbaar te zijn voor bezoekers met een visuele beperking.

Op pagina https://www.bibliotheektwente.nl/klantenservice-contact wordt na het versturen van een leeg formulier rode tekst (HEX #ff0000) gebruikt voor aanduidingen als “Mijn abonnement”, “Je vraag of opmerking*” en “Voornaam*” op een witte achtergrond. De contrastratio is 4,0:1. Omdat deze tekst kleiner is dan 19px, voldoet dit niet aan de vereiste minimale contrastratio van 4,5:1. Ditzelfde probleem komt ook voor op pagina’s https://www.bibliotheektwente.nl/nieuwsbrief en https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers.

Op pagina https://www.bibliotheektwente.nl/klantenservice-contact verschijnt na het verzenden van een leeg formulier de rode (HEX #ce5f6d) tekst “Ik heb een vraag of opmerking over…” op een witte achtergrond. De contrastratio is 3,8:1 en dat is te laag voor tekst kleiner dan 19px. De minimale vereiste contrastratio is 4,5:1. Ditzelfde probleem komt voor op pagina https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers bij de tekst “Gewenste vrijwilligersfunctie”. Zorg dat het contrast voldoet aan de minimale waarde zodat de tekst goed leesbaar is voor bezoekers met een visuele beperking.

Op pagina https://bibliotheektwente.op-shop.nl/ verschijnt bij sommige evenementen groene (HEX #468847) tekst zoals “nog 1 beschikbaar” op een witte achtergrond. De contrastratio is 4,3:1 en dat is onvoldoende voor tekst kleiner dan 19px. Voor goede leesbaarheid moet het contrast minimaal 4,5:1 zijn.
In het PDF-document op https://www.bibliotheektwente.nl/sites/default/files/2023-11/Bibliotheek%20Twente%20Beleidsplan%202024-2027.pdf staat op pagina 2 een grijze link “https://repository.ifla.org/bitstream/123456789/178/1/pl-manifesto-nl.pdf” met kleur HEX #8C8B8A op een oranje achtergrond (HEX #FDE6D1). De contrastratio is slechts 2,8:1. Voor voldoende leesbaarheid moet dit minimaal 4,5:1 zijn.
In hetzelfde PDF-document staan op pagina 6 grijze links met kleur HEX #878787, zoals “https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking/bevolkingsgroei/toekomst” en “https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking/leeftijd/ouderen” op een witte achtergrond. De contrastratio is 3,4:1, wat te laag is. Dit probleem komt ook voor op pagina’s 7, 8, 9 en andere. Het contrast moet verhoogd worden naar minimaal 4,5:1.
Op pagina 19 van hetzelfde PDF-document staan witte cijfers op een oranje achtergrond (HEX #EE7203). De contrastratio is 3,4:1. Dit probleem is ook zichtbaar op pagina’s 7, 8, 9 en andere, waaronder pagina 22, 25 en 28. De contrastratio moet minimaal 4,5:1 zijn om te voldoen aan de toegankelijkheidseisen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/zoeken?q=Twente raken bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% meerdere teksten gedeeltelijk buiten beeld. Het gaat onder andere om de teksten “Bibliotheek Twente”, “Taal en digitale vaardigheden zijn belangrijk in het dagelijks … juiste plek!”, “Woensdagavond 29 januari was het zover, de … rol speelt.” en andere vergelijkbare inhoud. Deze teksten worden bij deze instellingen niet volledig weergegeven, waardoor belangrijke informatie verloren gaat. Zorg dat alle inhoud zichtbaar en leesbaar blijft wanneer een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels. De pagina moet goed functioneren bij deze instellingen, zonder dat tekst wordt afgekapt of buiten beeld valt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/ overlapt de cookiebanner bij een zoomniveau van 400% op een schermresolutie van 1280×1024 pixels de hoofdinhoud van de pagina. Hierdoor is de pagina niet leesbaar en niet toegankelijk. Daarnaast is de tekst binnen de cookiebanner zelf gedeeltelijk afgekapt, waardoor het bericht niet volledig gelezen kan worden. Zorg dat alle functies beschikbaar zijn en goed werken op kleine schermen, ook bij sterke vergroting.

Op pagina https://www.bibliotheektwente.nl/ is bij dezelfde instellingen de tekst “Thema, auteur, titel of ISBN nummer” in de placeholder-teskt van het zoekveld deels afgekapt. Dit probleem komt ook voor op pagina https://www.bibliotheektwente.nl/test. Zorg dat alle tekst volledig leesbaar blijft bij weergave op kleine schermen en bij 400% zoom.

Op pagina https://www.bibliotheektwente.nl/zoeken?q=Twente raken bij 400% zoom op een scherm van 1280 bij 1024 pixels meerdere teksten gedeeltelijk buiten beeld. Het gaat onder andere om de teksten “Bibliotheek Twente”, “Taal en digitale vaardigheden zijn belangrijk in het dagelijks … juiste plek!”, “Woensdagavond 29 januari was het zover, de … rol speelt.” en andere. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, zodat bezoekers die vergroting nodig hebben geen informatie missen.

Op pagina https://bibliotheektwente.op-shop.nl/ is bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom tekst gedeeltelijk onleesbaar. Het gaat onder meer om regels zoals “dinsdag 3 jun 09:00 - 15:00 Bibliotheek Hengelo Stad …Bibliotheek Hengelo Stad”, “dinsdag 3 jun 10:00 - 12:00 …. Bibliotheek Hengelo Stad” en “dinsdag 3 jun 10:00 - 12:00 … Bibliotheek Oldenzaal”. Deze teksten worden afgebroken of vallen buiten het zichtbare gebied. Zorg dat ook bij deze instellingen alle inhoud volledig zichtbaar blijft en goed leesbaar is.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.bibliotheektwente.nl/ is te zien dat links, knoppen en invoervelden bij toetsenbordnavigatie een oranje rand (HEX #FF7320) krijgen als focusindicator. Deze focusrand heeft een contrastratio van 2,7:1 ten opzichte van de witte achtergrond. Dit is lager dan de minimale vereiste van 3,0:1. Daardoor is het voor mensen met een visuele beperking of kleurenblindheid lastig om de toetsenbordfocus waar te nemen. Gebruik een kleurcombinatie met voldoende contrast om de focus duidelijk zichtbaar te maken.
In het hoofdmenu van de website wordt de actieve link gemarkeerd met een oranje onderstreping (HEX #FF7320). Deze onderstreping heeft een contrastratio van 2,7:1 op de witte achtergrond. Dit is te laag om als visuele aanduiding goed waarneembaar te zijn. Dit probleem komt voor op onder andere de pagina’s https://www.bibliotheektwente.nl/klantenservice, https://www.bibliotheektwente.nl/over-ons en https://www.bibliotheektwente.nl/lidmaatschap. Zorg dat de onderstreping van de huidige link een contrastratio heeft van minimaal 3,0:1.

Op pagina https://www.bibliotheektwente.nl/oefenplein gebruiken links in lopende tekst, zoals “activiteitenagenda”, een aangepaste onderstreping met een kleurcontrast van 2,7:1 ten opzichte van de witte achtergrond. Dit is onvoldoende om als visuele aanwijzing betrouwbaar te functioneren. Hetzelfde probleem is aanwezig op pagina’s zoals https://www.bibliotheektwente.nl/test, https://www.bibliotheektwente.nl/digitoegankelijkheid, https://www.bibliotheektwente.nl/rvt en andere. Zorg dat het contrast tussen de onderstreping en de achtergrond minimaal 3,0:1 bedraagt.

Op pagina https://www.bibliotheektwente.nl/klantenservice-contact hebben invoervelden, tekstgebieden en aankruisvakjes een grijze randkleur (HEX #E5E5E5) met een contrastratio van 1,3:1 ten opzichte van de achtergrond. Dit is veel te laag. Dezelfde lage contrastratio komt voor op pagina’s https://www.bibliotheektwente.nl/nieuwsbrief en https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers. Zorg dat de randen van interactieve elementen ten minste een contrastratio van 3,0:1 hebben met de achtergrond, zodat ze goed zichtbaar zijn voor alle bezoekers.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/over-ons wordt de kop "Meerjarenbeleidsplan 2024 - 2027" en "De organisatie" gedeeltelijk onleesbaar wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://bibliotheektwente.op-shop.nl/ staan vier filters, maar deze zijn niet toegankelijk via het toetsenbord. Het is niet mogelijk om de comboboxen te openen en te sluiten met alleen het toetsenbord. Zorg dat alle interactieve elementen, waaronder de filters, met het toetsenbord kunnen worden bediend.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Pagina https://www.bibliotheektwente.nl/oefenplein bevat een Youtube-videospeler die sneltoetsen met één letter gebruikt. De Youtube-speler gebruikt sneltoetsen, zoals de 'k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter `disablekb=1` toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.bibliotheektwente.nl/zoeken?q=Twente heeft als title "404 - Deze pagina kan niet worden getoond.". Dit is een pagina met zoekresultaten. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft.

Het pdf-document https://www.bibliotheektwente.nl/sites/default/files/2023-11/Bibliotheek%20Twente%20Beleidsplan%202024-2027.pdf heeft geen titel ingesteld in de bestandseigenschappen. Een soortgelijk probleem doet zich voor op de https://bibliotheek-twente-website-p01.s3.eu-central-1.amazonaws.com/s3fs-public/2024-05/Profiel%20RvT%20Bibliotheek%20Twente.pdf.
Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het pdf-document.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.bibliotheektwente.nl/ komt de toetsenbordfocus na de link “Log in” terecht op drie interactieve elementen die niet zichtbaar zijn. De focus mag niet terechtkomen op interactieve onderdelen die visueel niet waarneembaar zijn, omdat een bezoeker ze dan onbedoeld kan activeren. Dit zorgt voor verwarring en vermindert de toegankelijkheid van de site. Verwijder deze elementen uit de tabvolgorde of maak ze zichtbaar.

Wanneer de website https://www.bibliotheektwente.nl/ voor het eerst wordt bezocht, verschijnt er een cookiebanner. Deze banner bedekt de inhoud van de pagina, maar ontvangt niet automatisch als eerste de toetsenbordfocus. Hierdoor moeten bezoekers die alleen het toetsenbord gebruiken eerst door de hele pagina navigeren voordat ze het bericht kunnen sluiten. Dit belemmert de toegang tot de site. Zorg dat de focus direct naar de cookiebanner gaat zodra deze verschijnt.

Op alle pagina’s is bovenaan een menuknop aanwezig die een mobiel menu opent. Wanneer dit menu open is, blijft het toetsenbordfocus zich verplaatsen naar de onderliggende pagina. Hierdoor kan inhoud worden benaderd die visueel geblokkeerd is door het menu. De focus moet binnen het geopende menu blijven, totdat de bezoeker het menu actief sluit via de sluitknop of de ESC-toets. Het is ook mogelijk om het menu automatisch te sluiten wanneer de focus het menu verlaat.

Op alle pagina’s opent de knop “Zoeken” een dialoogvenster. Op dit moment kan de toetsenbordfocus het dialoogvenster verlaten en zich verplaatsen naar de onderliggende inhoud van de pagina. Bij dit soort dialoogvensters moet de focus goed worden ingesteld zodat deze binnen het venster blijft, totdat de bezoeker het dialoogvenster sluit met de sluitknop of de ESC-toets. Ook hier is het mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat.

Op alle pagina’s van https://www.bibliotheektwente.nl/ opent de knop met de tekst “Zoeken” een dialoogvenster. Nadat dit venster wordt gesloten, keert de toetsenbordfocus niet terug naar het element waarmee het venster werd geopend, en ook niet naar het eerstvolgende logische element in de tabvolgorde. Dit veroorzaakt verwarring bij bezoekers die navigeren met het toetsenbord. Zorg dat de focus na het sluiten van het venster terugkeert naar de knop “Zoeken” of naar het eerstvolgende logische element, zodat de navigatie vloeiend en voorspelbaar blijft.

Bij het navigeren op de pagina https://bibliotheektwente.op-shop.nl/ met het toetsenbord komt de focus op het logo van de site terecht. Op dat moment is het logo echter niet zichtbaar op het scherm. Dit doorbreekt de logische focusvolgorde en zorgt voor verwarring bij toetsenbordgebruikers, omdat zij niet kunnen zien waar de focus zich bevindt of welk element actief is. De toetsenbordfocus mag niet terechtkomen op elementen die op dat moment niet zichtbaar zijn. Verwijder dit element uit de tabvolgorde of zorg dat het zichtbaar is wanneer het focus krijgt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/ staan onder de kopjes "Nieuws" en "Speciaal voor" links die geen linkdoel hebben. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben. Dezelfde kwestie wordt gezien op pagina https://www.bibliotheektwente.nl/klantenservice voor het kopje "Vestigingen & Openingstijden" en andere pagina's zoals bijvoorbeeld https://www.bibliotheektwente.nl/zoeken?q=Twente.

Op pagina https://bibliotheektwente.op-shop.nl/ bevatten de paginatie-links onvoldoende context. Voor ziende bezoekers is het visueel duidelijk dat de links met teksten als “1”, “2”, “3” verwijzen naar verschillende paginanummers, maar voor bezoekers met een visuele beperking of gebruikers van schermlezers is dit niet altijd herkenbaar. Hierdoor is het moeilijk te begrijpen dat het gaat om navigatie naar andere pagina’s met zoekresultaten. Dit kan worden opgelost door de linkteksten aan te vullen met het woord ‘pagina’, dat visueel verborgen wordt aangeboden maar wel beschikbaar is voor hulpsoftware.

Op pagina https://bibliotheektwente.op-shop.nl/ staan meerdere links met de tekst “Meer informatie”. Deze linkteksten zijn vaag en geven geen duidelijkheid over de bestemming van de link. Voor bezoekers met cognitieve beperkingen of gebruikers van schermlezers ontstaat hierdoor verwarring. Linkteksten zoals “Meer informatie” moeten worden aangevuld met beschrijvende informatie, bijvoorbeeld door de naam van het evenement of onderwerp toe te voegen. Als dit visueel al zichtbaar is bij het onderdeel waar de link bij hoort, kan de aanvullende tekst visueel verborgen worden, zodat deze alleen door hulpsoftware wordt gelezen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheektwente.nl/zoeken?q=Twente bevatten de knoppen voor paginering onvoldoende context. Voor ziende bezoekers is het duidelijk dat de knoppen met teksten als “1”, “2”, “3” verwijzen naar verschillende pagina’s met zoekresultaten. Voor bezoekers met een visuele beperking of gebruikers van schermlezers is dit echter niet vanzelfsprekend. Het is niet duidelijk dat het om knoppen naar andere pagina’s gaat. Dit kan worden opgelost door de buttonteksten aan te vullen met het woord ‘pagina’, dat visueel verborgen wordt toegevoegd maar wel beschikbaar is voor hulpsoftware. Dit probleem is ook onder succescriterium 2.4.4 genoemd.

Op pagina https://www.bibliotheektwente.nl/oefenplein is een iframe aanwezig met het title-attribuut “Helmie - Oefenen.nl”. Deze titel biedt onvoldoende informatie over het type en de inhoud van het iframe. Een iframe moet een duidelijke en betekenisvolle beschrijving bevatten in het title-attribuut. Hierin moet staan om wat voor soort inhoud het gaat, zoals een video of een oefentoepassing, en wat het onderwerp is. Een goede beschrijving helpt bezoekers met hulpsoftware om te bepalen of ze de inhoud willen bekijken of beluisteren.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.bibliotheektwente.nl/ is de toetsenbordfocus niet zichtbaar op meerdere interactieve elementen, waaronder het logo in de header, de link “Log in”, de link “Ontdek het hier” en mogelijk andere links of knoppen. De focus moet altijd visueel zichtbaar zijn wanneer een element met het toetsenbord benaderd kan worden. Bezoekers die met het toetsenbord navigeren moeten duidelijk kunnen zien waar de focus zich bevindt, zodat zij weten op welk moment zij op Enter kunnen drukken om een knop of link te activeren. Zonder zichtbare focus is de pagina niet goed toegankelijk.

Op de pagina’s https://www.bibliotheektwente.nl/klantenservice-contact, https://www.bibliotheektwente.nl/nieuwsbrief en https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers is de toetsenbordfocus niet zichtbaar op aankruisvakjes. Ook deze elementen moeten een duidelijke visuele focus krijgen wanneer ze geselecteerd worden met het toetsenbord. Zorg dat alle interactieve onderdelen, inclusief formulieren en selecties, altijd een goed zichtbare focusindicator hebben.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan pagina https://www.bibliotheektwente.nl/ staat het logo met de tekst “De Bibliotheek Twente”. De toegankelijke naam van deze link is echter “Ga naar de homepagina”. Omdat deze naam niet overeenkomt met de zichtbare tekst in het logo, werkt de link niet goed in combinatie met spraakgestuurde systemen. Bezoekers die de zichtbare tekst uitspreken om de link te activeren, worden niet herkend. Zorg dat de zichtbare tekst “De Bibliotheek Twente” voorkomt in de toegankelijke naam, bij voorkeur aan het begin van de naam.

Op pagina https://bibliotheektwente.op-shop.nl/ bevat het logo de zichtbare tekst “De Bibliotheek Twente”, maar de toegankelijke naam is slechts “Bibliotheek Twente”. Ook hier is de toegankelijke naam niet gelijk aan de zichtbare tekst, waardoor spraakbediening niet goed functioneert. Pas de toegankelijke naam aan zodat deze volledig overeenkomt met de zichtbare tekst in het logo.

Op pagina https://www.bibliotheektwente.nl/, onder de koppen “Nieuws” en “Speciaal voor”, bevatten links naar artikelen zichtbare teksten zoals “Onverwachte ontmoetingen in de bieb”. Deze teksten zijn echter niet opgenomen in de toegankelijke naam van de links. Wanneer de zichtbare tekst niet voorkomt in de toegankelijke naam, kunnen bezoekers met spraakbediening de links niet activeren. Dit probleem kan worden opgelost door de zichtbare tekst op te nemen in de toegankelijke naam van de link, bij voorkeur vooraan. Een vergelijkbaar probleem komt voor op pagina https://www.bibliotheektwente.nl/klantenservice, vóór de kop “Vestigingen & Openingstijden”. Ook hier ontbreekt de zichtbare tekst in de toegankelijke naam van de link. Hierdoor is bediening met spraakondersteuning niet mogelijk. Zorg dat ook hier de zichtbare linktekst wordt toegevoegd aan de toegankelijke naam.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.bibliotheektwente.nl/zoeken?q=Twente heeft het grote zoekveld onder de kop "Zoek in de site" geen label. Er wordt gebruik gemaakt van een placeholder, wat niet voldoet als oplossing voor dit succescriterium. Voeg een label-element toe en koppel dit aan het invoerveld.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.bibliotheektwente.nl/ opent de knop met het label “Zoeken” een dialoogvenster. Dit venster bevat geen role="dialog" en geen aria-label. Hierdoor kunnen schermlezers niet aangeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit maakt het gebruik van het venster verwarrend en ontoegankelijk voor bezoekers die hulpsoftware gebruiken. Voeg het attribuut role="dialog" toe en geef het venster een duidelijke beschrijving met aria-label="Beschrijving van de inhoud".

Op pagina https://www.bibliotheektwente.nl/, missen onder de koppen “Nieuws” en “Speciaal voor”, meerdere links een toegankelijke naam. Bezoekers die gebruikmaken van een schermlezer krijgen daardoor geen informatie over het doel van de link. Geef deze links een toegankelijke naam die het doel beschrijft, bijvoorbeeld door de zichtbare linktekst als toegankelijke naam toe te voegen. Hetzelfde probleem is zichtbaar op pagina https://www.bibliotheektwente.nl/klantenservice, vóór de kop “Vestigingen & Openingstijden”.

Bovenaan de pagina https://bibliotheektwente.op-shop.nl/ zijn vier filters aanwezig. Deze select-elementen hebben geen toegankelijke namen of rollen. Hierdoor zijn ze niet bruikbaar voor bezoekers die een schermlezer gebruiken. Geef elk select-element een toegankelijke naam, bijvoorbeeld met een bijbehorend label of een aria-label dat beschrijft waarvoor het element dient.

Bovenaan de pagina https://bibliotheektwente.op-shop.nl/ staat een knop met een vergrootglasicoon, bedoeld om een zoekfunctie te activeren. Deze knop heeft geen toegankelijke naam, waardoor schermlezers niet kunnen doorgeven wat de functie van de knop is. Geef deze knop een toegankelijke naam die het doel beschrijft, bijvoorbeeld met aria-label="Zoeken".

Op pagina’s https://www.bibliotheektwente.nl/nieuwsbrief en https://www.bibliotheektwente.nl/aanmeldformulier-vrijwilligers staan onder het veld “Geboortedatum*” keuzelijsten (select-elementen). Deze elementen hebben geen toegankelijke naam. Hierdoor zijn ze niet bruikbaar voor bezoekers die hulpsoftware gebruiken. Voorzie elk select-element van een toegankelijke naam door een bijbehorend label te koppelen of door gebruik van aria-label.

Op de pagina https://www.bibliotheektwente.nl/ wordt het attribuut aria-visibility gebruikt bovenaan in de code. Dit is een niet-bestaand attribuut. Gebruik CSS om zaken enkel leesbaar te maken voor screenreaders of gebruik aria-hidden om het te verbergen voor hulpsoftware. Dit komt op elke pagina van dat domein voor.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's https://www.bibliotheektwente.nl/ wordt bij het klikken op de knop "Ontdek het hier" een wachtanimatie geactiveerd. Deze animatie, die dient als statusbericht, is niet toegankelijk voor blinde bezoekers. Dit soort berichten moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt. Voeg om dit te bereiken bijvoorbeeld `aria-live="polite"` toe aan het icoon. Meer informatie over ARIA is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.