Rapport:
Audit digitale toegankelijkheid website Bibliotheek Almelo

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s op https://www.bibliotheekalmelo.nl/ bevat de zoekbalk in het bovenste menu een knop met een vergrootglas icoon zonder alternatieve tekst. Wanneer een knop alleen uit een afbeelding bestaat, moet de alt-tekst de functie of het doel van de knop vermelden. Dit kan bijvoorbeeld met een alt-tekst bij het img-element, een aria-label of een visueel verborgen tekst die toegankelijk is voor schermlezers.

Op pagina https://www.bibliotheekalmelo.nl/collectie.html en op https://www.bibliotheekalmelo.nl/ staan decoratieve iconen met alt-teksten. Dit geldt voor de iconen boven “Feijn Lunchen & Lezen” op de homepagina en boven “Zoek je iets?” op de Collectiepagina. Decoratieve iconen hebben geen informatieve waarde en hoeven geen alt-tekst te hebben. Verwijder de alt-teksten van deze iconen om verwarring te voorkomen.

Op pagina https://www.bibliotheekalmelo.nl/ staan onder het kopje “Nieuws van de Bibliotheek Almelo” links met logo’s waarvan niet alle zichtbare tekst in de tekstalternatieven is opgenomen. De link met de tekst “Gradua” heeft bijvoorbeeld de toegankelijke naam “Gradua”, terwijl de zichtbare tekst in het logo “Gradua huiswerkbegeleiding” is. Op dezelfde manier heeft de link “Publicroam” de toegankelijke naam “Publicroam”, terwijl de zichtbare tekst in het logo “publicroam Overal Veilig Wifi” is. Zorg ervoor dat de tekstalternatieven alle zichtbare en betekenisvolle tekst uit de logo’s bevatten, zodat gebruikers van schermlezers dezelfde informatie krijgen als visuele gebruikers.

Op pagina https://www.bibliotheekalmelo.nl/ ontbreken tekstalternatieven voor afbeeldingen onder de kopjes “Lid worden”, “Meer met de computer” en “Nederlands leren”. Deze afbeeldingen fungeren als links, maar zonder tekstalternatieven hebben deze links geen inhoud. Dit betekent dat schermlezers niet kunnen vaststellen waar de links naartoe leiden, wat de toegankelijkheid aanzienlijk vermindert. Voeg tekstalternatieven toe die het doel van de link beschrijven, zodat gebruikers die schermlezers gebruiken weten wat ze kunnen verwachten bij het activeren van de link.

Op pagina https://www.bibliotheekalmelo.nl/post-footer/over-ons/meerjarenbeleidsplan.html heeft het logo onder de kop “Meerjarenbeleidsplan” geen tekstalternatief. Een leeg alt-attribuut (alt="") zorgt ervoor dat schermlezers deze afbeelding volledig negeren, omdat dit wordt geïnterpreteerd als een decoratieve afbeelding zonder informatieve waarde. Aangezien dit een informatieve afbeelding is, moet een alt-tekst worden toegevoegd die de volledige tekst van het logo bevat om de toegankelijkheid te waarborgen.

Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html staan onder het kopje “Websites van de overheid” logo’s zonder tekstalternatief. Dit geldt bijvoorbeeld voor de logo’s onder de kopjes “CJIB”, “DUO”, “LBIO” en andere. De tekstalternatieven moeten alle zichtbare en betekenisvolle tekst uit de logo’s bevatten, tenzij deze informatie al op een andere toegankelijke manier beschikbaar is. Voeg tekstalternatieven toe aan alle logo’s om te zorgen dat alle gebruikers, inclusief gebruikers van schermlezers, dezelfde zichtbare informatie krijgen.

Op pagina https://weblocal.bibliotheekalmelo.nl/agenda ontbreekt bij het logo bovenaan de website, geïmplementeerd met een img-element, een alt-attribuut. Hierdoor lezen schermlezers nu de bestandsnaam voor, wat verwarrend kan zijn. Informatieve afbeeldingen zoals logo’s moeten altijd een alt-tekst hebben die de volledige tekst bevat die in het logo te zien is, zodat bezoekers die het plaatje niet kunnen zien ook weten wat er staat. Voeg een alt-tekst toe met de volledige tekst van het logo.

Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer.html onder het kopje “Meer doen met de computer” staat een decoratief pijlpictogram dat is toegevoegd via CSS met het ::before pseudo-element en de content: 'before' regel. Dit pictogram wordt hierdoor onbedoeld toegankelijk voor schermlezers en wordt voorgelezen als “before”, wat voor verwarring kan zorgen. Decoratieve afbeeldingen geven geen extra informatie en moeten daarom verborgen worden voor schermlezers.
Ditzelfde probleem doet zich voor op pagina https://www.bibliotheekalmelo.nl/post-footer/tarieven.html onder de kop “Tarieven” en op pagina https://www.bibliotheekalmelo.nl/klantenservice/veel-gestelde-vragen.html onder de kop “Veel gestelde vragen”. Verberg deze decoratieve pictogrammen voor schermlezers door de juiste aria-attributen of CSS-oplossingen toe te passen.

In het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf ontbreken tekstalternatieven voor informatieve afbeeldingen op pagina 1. Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen, zodat schermlezers deze kunnen voorlezen en gebruikers die niet kunnen zien de volledige inhoud kunnen begrijpen. Voeg daarom alt-teksten toe aan deze informatieve afbeeldingen om te voorkomen dat schermlezers alleen “afbeelding” voorlezen, wat voor blinde bezoekers kan voelen alsof ze informatie missen.
In hetzelfde PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf zijn op pagina’s 10, 11, 13 en andere decoratieve afbeeldingen ten onrechte getagd als afbeeldingen, via de Figure-tag. De Figure-tag is uitsluitend bedoeld voor informatieve afbeeldingen die een beschrijving nodig hebben. Markeer deze decoratieve afbeeldingen als artefacten, zodat ze worden genegeerd door schermlezers en geen onnodige verwarring veroorzaken.

Het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf bevat ook informatieve afbeeldingen met tekstalternatieven die onleesbare tekens bevatten, zoals streepjes, underscores of andere symbolen. Dit komt bijvoorbeeld voor op pagina 5, waar een afbeelding een tekstalternatief heeft met de inhoud “Staatscourant 2020, 57290 | Overheid.nl > Officiële bekendmakingen”. Tekstalternatieven mogen geen symbolen bevatten die de leesbaarheid belemmeren. Verwijder deze niet-leesbare karakters en herschrijf de tekst zodat deze duidelijk en begrijpelijk is voor alle gebruikers.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html wordt een video gepresenteerd onder de titel “Hoe kunnen we je helpen?”. In deze video worden op verschillende momenten teksten en logo’s getoond, bijvoorbeeld rond 0:04 en 1:08. Deze visuele informatie is niet toegankelijk voor bezoekers die blind of slechtziend zijn. Om te voldoen aan succescriterium 1.2.5 moet er een audiobeschrijving worden toegevoegd die deze visuele elementen beschrijft, zoals namen, functies, logo’s en teksten. Dit zorgt ervoor dat alle bezoekers, ongeacht hun visuele mogelijkheden, de volledige inhoud van de video kunnen begrijpen. Als aanvulling kan er ook een geschreven tekst (media-alternatief) worden geplaatst om dezelfde informatie tekstueel over te brengen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html voldoet niet aan criterium 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: In de header van de website https://www.bibliotheekalmelo.nl/ staat een groep keuzerondjes voorafgegaan door de tekst “Zoeken in”. Hoewel deze elementen visueel als een groep worden gepresenteerd, is deze relatie niet programmatisch vastgelegd in de HTML. Om de toegankelijkheid te verbeteren, moeten deze elementen worden opgenomen in een fieldset-element, zodat de relatie tussen de keuzerondjes en de bijbehorende tekst correct wordt aangegeven. Het fieldset-element moet een naam hebben, die kan worden ingesteld met een legend-element. Plaats de tekst “Zoeken in” in dit legend-element om ervoor te zorgen dat deze relatie voor alle gebruikers, inclusief gebruikers van schermlezers, duidelijk is.

In de header op https://www.bibliotheekalmelo.nl/ wordt de tekst “Zoeken in” toegevoegd via CSS met een ::before pseudo-element. Omdat deze tekst een functioneel label is voor de keuzerondjes, moet deze niet alleen visueel zichtbaar zijn, maar ook programmatisch beschikbaar zijn in de HTML-code. Inhoud die essentieel is voor de gebruikerservaring moet altijd direct in de HTML aanwezig zijn om ervoor te zorgen dat schermlezers en andere hulpsoftware deze informatie correct kunnen voorlezen. Voeg de tekst “Zoeken in” direct toe aan de HTML om dit probleem te verhelpen.

Op pagina https://www.bibliotheekalmelo.nl/klantenservice.html volgt de rubriek van niveau 3 “Formulieren voor aanpassingen lidmaatschap” direct op een andere rubriek van hetzelfde niveau, namelijk “Adreswijziging”. Dit kan verwarring veroorzaken voor gebruikers van schermlezers, omdat er geen inhoud tussen de koppen staat om de relatie duidelijk te maken.
Hetzelfde probleem doet zich voor op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html, waar de koppen “Websites van de overheid” en “Belastingdienst” direct op elkaar volgen zonder inhoud ertussen. Voeg inhoud of een inleidende tekst toe tussen deze koppen om de structuur duidelijker te maken.

Op pagina https://www.bibliotheekalmelo.nl/klantenservice.html, onder het kopje “Formulieren voor aanpassingen lidmaatschap”, zijn links met afbeeldingen verkeerd opgenomen in een h3-element. Koppen zijn bedoeld om structuur te geven aan de pagina-inhoud en mogen alleen tekst bevatten die de sectie beschrijft. Omdat deze links geen deel uitmaken van de kop zelf, moeten ze buiten het h3-element worden geplaatst om de semantische structuur van de pagina duidelijk te houden voor gebruikers van schermlezers.

Op pagina https://www.bibliotheekalmelo.nl/post-footer/digitale-toegankelijkheid.html zijn de teksten “Huidige status” en “Contact” niet gemarkeerd als koppen, hoewel ze wel als (tussen)koppen fungeren. Dit kan verwarrend zijn voor gebruikers van hulpsoftware, omdat deze teksten dan niet worden opgenomen in de lijst van koppen die voor navigatie wordt gebruikt. Markeer deze teksten correct als koppen (h1-h6) om de structuur en navigatie van de pagina te verbeteren.
Hetzelfde probleem wordt waargenomen op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html met tekst “Informatiepunt Digitale Overheid” en “Openingstijden:”, op pagina https://www.bibliotheekalmelo.nl/klantenservice/veel-gestelde-vragen.html met teksten “Verlengen op onze website”, “Standaardabonnement” en “Topabonnement” in de secties met verborgen inhoud onder de kop “Meest gestelde vragen”.

Op pagina https://www.bibliotheekalmelo.nl/post-footer/tarieven.html staat een tabel onder de kop "Tarieven per 1 januari 2023". De gegevenscellen (td) zijn ten onrechte gemarkeerd als tabelkopcellen (th). Dit is niet correct. Gebruik voor cellen met gegevens het td-element. Hetzelfde probleem wordt waargenomen op deze pagina met andere tabellen.

Op pagina https://weblocal.bibliotheekalmelo.nl/agenda staat onder het kopje "Open Lab middag" een gegevenstabel. De juiste mark-up ontbreekt. Een gegevenstabel heeft een kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th-elementen en de gegevens in td-elementen. Hetzelfde probleem wordt ook waargenomen bij de tabellen in andere secties.

Op pagina https://www.bibliotheekalmelo.nl/klantenservice/Adreswijziging.html staat in het formulier een groep invoervelden, voorafgegaan door de tekst "Naam van meeverhuizende huisgenoten:". Hoewel de groep visueel is gegroepeerd, is deze relatie niet programmatisch gedefinieerd in de HTML. 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 “Naam van meeverhuizende huisgenoten:”.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything wordt er in de paginanavigatie knoppen gebruikt in plaats van links. Dit is semantisch niet correct. Knoppen dienen voor acties van een gebruikers (versturen formulier, bijvoorbeeld). Als je naar een nieuwe pagina gaat, dienen er links gebruikt te worden. Vervang de knoppen door links.

In het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf zijn verschillende koppen niet correct gemarkeerd als koppen. Bijvoorbeeld, teksten zoals “Meerjarenbeleidsplan 2023-2026”, “Inhoudsopgave”, “Voorwoord” en “1.4 Lokaal beleid” zijn niet als koppen getagd. Dit veroorzaakt een mismatch tussen de visuele structuur en de tag-structuur van het document, wat verwarrend kan zijn voor gebruikers van schermlezers. Vervang de P-tags door de juiste H-tags, zodat de koppen correct worden geïdentificeerd.

In het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf zijn teksten zoals “1 Context” en “1.1 Landelijke ontwikkelingen bibliotheeksector” op pagina 4, “2 Stichting Openbare Bibliotheek Almelo en Theater Hof 88” op pagina 8, “3. Speerpunten Meerjarenbeleidsplan 2023-2026” op pagina 10 en “4 Tot slot” op pagina 18 ten onrechte gemarkeerd met L-tags in plaats van H-tags. Dit zorgt ervoor dat de koppen niet correct worden herkend als sectietitels, wat de navigatie voor gebruikers van schermlezers bemoeilijkt. Vervang de L-tags door de juiste H-tags om de documentstructuur te verbeteren.

In het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf staat op pagina 8 een lijst met vijf items, waarbij de tekst “stichting bevordert.” onterecht is gemarkeerd met een aparte P-tag, terwijl deze bij het lijstitem onder “E” hoort. Dit verbreekt de samenhang van de lijst, waardoor schermlezers de relatie tussen de onderdelen niet correct kunnen voorlezen. Verplaats deze tekst naar dezelfde lijststructuur om de samenhang te herstellen.
Op pagina 2 van het PDF-document staat een tabel, maar de relatie tussen de kopcellen en de bijbehorende gegevenscellen is niet correct aangegeven in de tags. Hierdoor kunnen schermlezers niet duidelijk overbrengen welk paginanummer bij welk item hoort. Markeer de tabel correct met TH- en TD-tags, en zorg ervoor dat de relaties tussen koppen en gegevenscellen goed worden ingesteld.
Op pagina 10 van hetzelfde document staat onder de tekst “Belangrijke uitgangspunten om dit te bereiken zijn:” een ongeordende lijst met twee items. Deze items zijn echter in de tags als twee afzonderlijke lijsten gemarkeerd, waarbij de tekst bij elk item in een aparte P-tag staat. Dit verstoort de structuur van de lijst, waardoor schermlezers de inhoud als losse elementen voorlezen in plaats van als een doorlopende lijst. Combineer de L-tags van deze twee lijsten tot één enkele lijst om dit probleem op te lossen.
Ditzelfde probleem doet zich voor op meerdere pagina’s, zoals pagina’s 11-13 onder de tekst “We pakken dit als volgt aan:” en “Andere mogelijkheden om de toegankelijkheid te vergroten zijn:”.

Het PDF-document op https://www.bibliotheekalmelo.nl/dam/diversen/bib240002-progr-a5-voorjaar-2025scherm–1-.pdf bevat geen structuurcodes, waardoor de inhoud niet toegankelijk is voor schermlezers. Hierdoor ontbreken essentiële semantische markeringen zoals koppen, lijsten en alternatieve teksten voor afbeeldingen. Dit maakt een volledige toegankelijkheidscontrole momenteel niet mogelijk. Voeg structuurcodes toe aan dit document om de basis voor een toegankelijke leeservaring te creëren. Houd er rekening mee dat na het toevoegen van deze codes mogelijk nieuwe toegankelijkheidsproblemen aan het licht komen.

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf is de leesvolgorde in de tags niet logisch. Op pagina 4 staat de tekst “1.1 Landelijke ontwikkelingen bibliotheeksector” onder de tekst “1 Context” in de tag-structuur, terwijl deze visueel juist als een subsectie is gepresenteerd. Dit zorgt voor verwarring bij gebruikers van schermlezers, omdat de inhoud niet in de juiste volgorde wordt voorgelezen. Pas de volgorde van de tags aan, zodat deze overeenkomt met de visuele hiërarchie en logische structuur van het document. Hetzelfde probleem doet zich voor in de tabel op pagina 2. De relatie tussen de kopcellen en de bijbehorende gegevenscellen is niet correct ingesteld, waardoor schermlezers moeite hebben om de inhoud van de tabel correct te interpreteren. Zorg ervoor dat de tabellen in het document een logische tag-structuur hebben, zodat alle informatie in de juiste volgorde wordt voorgelezen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/klantenservice/contact/opmerkingen–klachten-en-of-suggesties.html ontbreekt bij de invoervelden voor persoonlijke gegevens, zoals naam, e-mailadres en telefoonnummer, het autocomplete-attribuut. Dit attribuut is essentieel voor de toegankelijkheid, omdat het browsers en hulpsoftware in staat stelt automatisch persoonlijke informatie in te vullen, wat de gebruiksvriendelijkheid aanzienlijk verhoogt. Voeg voor elk relevant invoerveld een autocomplete-attribuut toe, zoals autocomplete="name" voor de naam, autocomplete="email" voor het e-mailadres en autocomplete="tel" voor het telefoonnummer. Dit helpt bezoekers om formulieren sneller en met minder fouten in te vullen.
Hetzelfde probleem is aanwezig op pagina https://www.bibliotheekalmelo.nl/klantenservice/Adreswijziging.html en https://www.bibliotheekalmelo.nl/klantenservice/Wijziging-abonnement.html. Ook hier moeten alle invoervelden voor persoonlijke informatie voorzien worden van het juiste autocomplete-attribuut. Voor meer informatie over de juiste waarden voor dit attribuut, zie de richtlijnen op https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/zoekresultaten.website.html?q= onder de kop “Verfijnen op resultaten” hebben de knoppen “Type” en “Trefwoorden” onvoldoende contrast wanneer deze de toetsenbordfocus krijgen. De oranje tekst (HEX #FF7320) op een witte achtergrond heeft een contrastverhouding van 2,7:1, terwijl de minimale vereiste verhouding 4,5:1 is. Pas de kleur van de tekst aan naar een donkerdere tint oranje of wijzig de achtergrondkleur om aan de contrastvereisten te voldoen.
Een vergelijkbaar probleem doet zich voor op pagina https://www.bibliotheekalmelo.nl/klantenservice/veel-gestelde-vragen.html. Hier verandert de tekstkleur van de knoppen onder “Meest gestelde vragen” naar oranje bij toetsenbordfocus, ook zonder voldoende contrast. Pas ook hier de kleur aan om de leesbaarheid te verbeteren.
Zie ook alle pagina’s op het domein https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=*%20%20&scope=anything.

Op pagina https://www.bibliotheekalmelo.nl/zoekresultaten.website.html?q= hebben de filteropties onder “Verfijnen op resultaten” grijze cijfers (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED), met een contrastverhouding van 3,9:1. Voor teksten kleiner dan 19px is een minimale contrastverhouding van 4,5:1 vereist. Verhoog het contrast door een donkerdere tint grijs voor de tekst te gebruiken of de achtergrondkleur lichter te maken.

Op pagina https://www.bibliotheekalmelo.nl/onze-vestigingen/vestiging.196612.html onder het kopje “Openingstijden” staat grijze tekst (HEX #757575) op een lichtoranje achtergrond (HEX #FDE5CF) met een contrastverhouding van 3,8:1. Ook hier moet het contrast minimaal 4,5:1 zijn voor kleinere tekst. Pas de tekstkleur of de achtergrondkleur aan om de zichtbaarheid te verbeteren.

Op pagina https://weblocal.bibliotheekalmelo.nl/agenda, in het invoerveld onder “Agenda|Wat is er in de Bibliotheek te doen?”, heeft de grijze placeholder-tekst “Zoek op trefwoord” (HEX #A1A1A1) op een witte achtergrond een contrastverhouding van 2,6:1. Voor een goede leesbaarheid moet deze verhouding minstens 4,5:1 zijn. Verander de kleur van de placeholder-tekst naar een donkerdere tint om aan de toegankelijkheidseisen te voldoen.

Wanneer een zoekopdracht op https://weblocal.bibliotheekalmelo.nl/agenda geen resultaten oplevert, verschijnt de blauwe tekst “Geen evenementen aanwezig” (HEX #0DCAF0) tegen een witte achtergrond met een contrastverhouding van slechts 2,0:1. Ook hier moet de tekstkleur worden aangepast om een minimale verhouding van 4,5:1 te bereiken, zodat de melding goed leesbaar is voor alle bezoekers.

In het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st--obath88-publieksversie.pdf staat op pagina 4 een afbeelding met ingesloten tekst. De lichtblauwe (HEX #1290FF) tekst op de blauwe (HEX #1290FF) achtergrond heeft een contrastratio van 2,9:1. Tekst die kleiner is dan 18pt moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 18pt of 14pt vetgedrukt is dit minimaal 3,0:1. Hetzelfde probleem wordt waargenomen in deze pdf op pagina 5, 15.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als de pagina https://weblocal.bibliotheekalmelo.nl/agenda wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en er wordt ingezoomd tot 400%, is de keuzelijst met zichtbare tekst “Alle locaties” slechts gedeeltelijk zichtbaar en is de keuzelijst met zichtbare tekst “Welke dag of periode” volledig verborgen. Dit probleem kan optreden als elementen vaste breedtes hebben of niet correct reageren op veranderingen in de schermgrootte. Zorg ervoor dat de keuzelijsten (select-elementen) correct schalen bij hogere zoomniveaus door flexibele breedtes te gebruiken en de containers aan te passen met bijvoorbeeld flexbox of CSS grid. Gebruik percentages of flex-eenheden in plaats van vaste pixels voor de breedtes van deze elementen om te voorkomen dat ze buiten het zicht vallen bij hoge zoomniveaus.

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner op de website wordt de toetsenbordfocus voor de knoppen “Akkoord” en “Niet akkoord” weergegeven met een oranje rand (HEX #FF7320) tegen een witte achtergrond. Deze combinatie heeft een contrastverhouding van 2,7:1, wat lager is dan de minimale vereiste van 3,0:1 voor focusindicatoren. Dit maakt het voor mensen met een visuele beperking of kleurenblindheid moeilijk om te zien welke knop momenteel is gefocust. Pas de kleur van de focusrand aan naar een donkerdere tint oranje of gebruik een andere combinatie met voldoende contrast om dit probleem op te lossen.
Dit probleem doet zich ook voor in de carrousel met links op de dia’s op pagina https://www.bibliotheekalmelo.nl/, bij de knop “Verstuur” op https://www.bibliotheekalmelo.nl/klantenservice/contact/opmerkingen–klachten-en-of-suggesties.html, en bij de knop “Ga” op https://www.bibliotheekalmelo.nl/zoekresultaten.website.html?q=.

In de footer van de website https://www.bibliotheekalmelo.nl/ heeft de knop “Trek je toestemming in” een oranje (HEX #FF7320) focusrand op een lichtoranje (HEX #FDE5D0) achtergrond. Deze combinatie heeft een contrastverhouding van slechts 2,2:1, wat lager is dan de vereiste 3,0:1. Pas de kleur van de focusrand aan om de zichtbaarheid voor bezoekers met een visuele beperking te verbeteren.

Op pagina https://www.bibliotheekalmelo.nl/ onder de header staat een carrousel met knoppen die worden weergegeven als grijze stippen (HEX #999999) tegen een witte achtergrond. Deze combinatie heeft een contrastverhouding van slechts 2,8:1. Voor een goede zichtbaarheid moet deze verhouding minimaal 3,0:1 zijn. Pas de kleur van deze knoppen aan om de leesbaarheid te verbeteren.

Op pagina https://weblocal.bibliotheekalmelo.nl/agenda, onder “Agenda|Wat is er in de Bibliotheek te doen?”, is een zoekveld aanwezig waarvan de grijze rand (HEX #CCCCCC) een contrastverhouding van slechts 1,6:1 heeft tegen de witte achtergrond. Voor invoervelden moet de rand minimaal een contrast van 3,0:1 hebben om goed zichtbaar te zijn voor alle bezoekers. Verander de kleur van de rand naar een donkerdere tint om aan deze vereiste te voldoen.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything hebben oanje knoppen “Revserveren” en “Mijn lijsten” een oranje focusrand. Dit komt op alle pagina’s van dit domein voor.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything krijgt de knop “Alles” een grijze focusindicator (HEX #D2D1D2). Dit biedt een contrastverhouding van 1,5:1 met de witte achtergrond, waar dit minstens 3,0:1 moet zijn. Zorg dat elementen een focusindicator krijgen die voldoende contrast biedt met het de achtergrond, maar ook met het element dat het omringt. Dit speelt ook op andere pagina’s binnen dit domein.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html wordt de tekst op het logo onder het kopje “Informatiepunt” gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers tekstafstand toepassen zoals beschreven in het succescriterium. Dit probleem ontstaat vaak wanneer de hoogte en breedte van de containers waarin de tekst zich bevindt, niet flexibel genoeg zijn om aanpassingen in letterafstand, regelafstand of woordafstand te ondersteunen. Zorg ervoor dat de containers van de tekst responsief zijn en voldoende ruimte bieden voor grotere tekstafstanden. Dit kan worden bereikt door de breedte en hoogte van deze containers dynamisch te maken, bijvoorbeeld door gebruik te maken van flexbox, CSS grid of automatische marges en padding. Vermijd vaste hoogte-instellingen en zorg ervoor dat de tekst altijd volledig zichtbaar blijft, zelfs bij grotere tekstinstellingen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/klantenservice/contact/opmerkingen--klachten-en-of-suggesties.html wordt in een formulier enkel HTML5-validatie gebruikt om foutmeldingen te tonen. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
Hetzelfde probleem wordt waargenomen in de formulieren op pagina’s https://www.bibliotheekalmelo.nl/klantenservice/Adreswijziging.html en https://www.bibliotheekalmelo.nl/klantenservice/Wijziging-abonnement.html.

Als je niet bent ingelogd op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything en je gebruikt "Mijn Lijst" of "Reserveren", krijg je een boodschap dat je daar ingelogd voor moet zijn en binnen een paar een seconden naar de inlogpagina wordt gestuurd. Mensen met hulpsoftware hebben niet voldoende tijd om deze boodschap te lezen. Zorg dat deze knoppen enkel beschikbaar zijn als je bent ingelogd, of stuur de mensen niet automatisch naar de inlogpagina toe binnen zulke korte tijd. Dit speelt ook op andere pagina’s binnen dit domein.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.bibliotheekalmelo.nl/ is een skiplink aanwezig, maar deze is niet het eerste item dat focus krijgt, waardoor aan het doel van een skiplink voorbijgegaan wordt. Zorg ervoor dat de skiplink het eerste item is dat focus krijgt.

Er is geen skiplink aanwezig op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything. Hierdoor kunnen mensen niet meteen naar de hoofdinhoud springen op de pagina. Voeg een skiplink toe en zorg dat dit het eerste item is op de pagina dat focus krijgt. Dit speelt ook op andere pagina’s binnen dit domein.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/ heeft de titel “Home” geen duidelijke beschrijving van de inhoud van de pagina. Het title-element moet een tekst bevatten die de inhoud van de pagina goed samenvat, bij voorkeur gevolgd door de naam van de organisatie, zoals “De Bibliotheek Almelo - Informatie, Boeken en Evenementen”. Dit helpt bezoekers beter te begrijpen waar de pagina over gaat en maakt navigeren tussen verschillende tabbladen in de browser eenvoudiger.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=*%20%20&scope=anything heeft de titel “Catalogus” hetzelfde probleem. Deze titel geeft niet weer dat de gebruiker zich op de detailpagina van een specifiek boek bevindt. De titel van de pagina moet de naam van het boek en de schrijver bevatten om duidelijk te maken welke inhoud wordt getoond. Dit probleem doet zich voor op meerdere pagina’s binnen dit domein.

Voor het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf is geen titel ingesteld in de bestandseigenschappen. Dit betekent dat de bestandsnaam in plaats van een duidelijke documenttitel bovenaan in de titelbalk van PDF-lezers wordt weergegeven, wat verwarrend kan zijn voor gebruikers. Voeg een duidelijke titel toe in de PDF-metadata, zoals “Meerjarenbeleidsplan 2023-2026 - Bibliotheek Almelo”, om de toegankelijkheid te verbeteren. Hetzelfde probleem is aanwezig in het PDF-document op https://www.bibliotheekalmelo.nl/dam/diversen/bib240002-progr-a5-voorjaar-2025scherm–1-.pdf. Ook hier moet een duidelijke titel worden toegevoegd aan de bestandseigenschappen om de inhoud van het document correct weer te geven.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/, in de carrousel onder de header, bevatten meerdere links de vage tekst “Lees verder”. Deze tekst is onvoldoende beschrijvend, omdat het niet duidelijk maakt naar welke inhoud de link verwijst. Dit kan verwarrend zijn voor gebruikers met cognitieve beperkingen of gebruikers die afhankelijk zijn van schermlezers. Ook de link met de tekst “Meer informatie” op de dia onder “Begin de lente met een goed boek” is te algemeen. Zorg ervoor dat deze links een duidelijkere tekst krijgen, zoals “Lees verder over [onderwerp]” of “Meer informatie over [onderwerp]”. Als visueel al duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden, maar programmatisch wel beschikbaar blijven voor schermlezers.
Dit probleem komt ook voor op pagina https://weblocal.bibliotheekalmelo.nl/agenda, waar links met de tekst “Meer lezen” worden gebruikt.

Op de homepagina functioneren de afbeeldingen onder de kopjes “Lid worden”, “Meer met de computer” en “Nederlands leren” als links, maar hun alt-attributen bevatten alleen een spatie (alt=” “). Dit zorgt ervoor dat deze links geen toegankelijke naam hebben, wat verwarrend is voor gebruikers van schermlezers, omdat de bestemming van de link niet duidelijk is. Voeg een beschrijvende alt-tekst toe aan deze afbeeldingen om het doel van de link duidelijk te maken. Zie ook https://www.bibliotheekalmelo.nl/collectie.html.

Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer.html heeft de link onder het kopje “Meer doen met de computer” de toegankelijke naam “before Home”, wat geen duidelijke beschrijving is van de bestemming van de link.
Ditzelfde probleem doet zich voor op pagina https://www.bibliotheekalmelo.nl/post-footer/tarieven.html onder de kop “Tarieven” en op pagina https://www.bibliotheekalmelo.nl/klantenservice/veel-gestelde-vragen.html onder de kop “Veel gestelde vragen”.

Op pagina https://www.bibliotheekalmelo.nl/zoekresultaten.website.html?q= verschijnt bij het selecteren van de volgende pagina met resultaten in de paginering een link met de zichtbare tekst “Vorige”, maar de toegankelijke naam van deze link is “before Vorige”. Zorg ervoor dat de toegankelijke namen van deze links correct worden ingesteld, zodat ze de bestemming van de link duidelijk beschrijven.

Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer.html staan onder het kopje "Spreekuren" links met afbeeldingen. De toegankelijke namen van deze links beschrijven hun bestemming niet nauwkeurig. Bijvoorbeeld, de link met een computerafbeelding boven het kopje "Belastingspreekuur" heeft de toegankelijke naam: "Icoon dat doorverwijst naar meer informatie over hulp bij het invullen van de belastingaangifte". Dit kan verwarrend zijn, vooral voor bezoekers die schermlezers gebruiken. Voeg tekst toe die de bestemming van de link goed beschrijft.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website https://www.bibliotheekalmelo.nl/ staat de kop “Snel naar”. Deze tekst is te algemeen en beschrijft de inhoud die erop volgt niet adequaat. Koppen zoals “Snel naar”, “Direct naar” en “Ga naar” bieden geen extra context over de inhoud, wat vooral problematisch is voor bezoekers die schermlezers gebruiken. Deze gebruikers vertrouwen op duidelijke koppen om snel door de pagina te navigeren en relevante informatie te vinden. Gebruik een meer specifieke kop die duidelijk maakt wat voor soort inhoud of functionaliteit volgt, zoals “Populaire pagina’s” of “Handige links”, zodat de structuur van de pagina duidelijker wordt.

Op pagina https://www.bibliotheekalmelo.nl/ wordt in de carrousel onder de header een knop met een pijl gebruikt voor navigatie, die de toegankelijke naam “Volgende” heeft. Deze naam is te algemeen en geeft niet genoeg informatie over de functie van de knop. Gebruik in plaats daarvan een naam zoals “Volgende slide” om duidelijk te maken dat de knop naar de volgende dia in de carrousel navigeert.

Op pagina https://www.bibliotheekalmelo.nl/klantenservice/Adreswijziging.html staat een formulier met meerdere invoervelden die hetzelfde label “Initialen en achternaam” hebben. Dit is verwarrend voor bezoekers, omdat het niet duidelijk is welke specifieke informatie in elk veld moet worden ingevoerd. Gebruik unieke, beschrijvende labels voor elk invoerveld, zoals “Afzender: initialen en achternaam” en “Ontvanger: initialen en achternaam”, zodat duidelijk is welke gegevens in welk veld moeten worden ingevuld.

Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer/informatiepunt-digitale-overheid.html is een iframe aanwezig met het titelattribuut “Video”. Dit is onvoldoende beschrijvend, omdat het geen context biedt over de inhoud van de video. Gebruik een meer specifieke en betekenisvolle titel, zoals “Video over het Informatiepunt Digitale Overheid”, zodat gebruikers met schermlezers kunnen beslissen of de inhoud voor hen relevant is.

Op pagina https://www.bibliotheekalmelo.nl/leren/meer-doen-met-de-computer.html staan onder het kopje “Spreekuren” de koppen “Belastingspreekuur” en “Informatiepunt”, die correct zijn gemarkeerd met h-elementen. Deze h3-elementen bevatten echter ook links met afbeeldingen, waardoor schermlezers de volledige inhoud van het h3-element voorlezen, inclusief de afbeelding. Dit kan verwarrend zijn, omdat de betekenis van de kop zelf minder duidelijk wordt. Markeer de afbeeldingen als decoratief, zodat de koppen zelf kort en duidelijk blijven en alleen de eigenlijke koptekst bevatten.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=*%20%20&scope=anything als je een boek toevoegt aan "Mijn Lijsten", opent er een modal. De knop om dat modal te sluiten heeft als label "Modal.Close". Geef deze knop een beter beschrijvend label. Dit speelt ook op andere pagina’s van dit domein.

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner van de website is de toetsenbordfocus niet zichtbaar op de knop “x”. Dit is een belangrijk toegankelijkheidsprobleem, omdat gebruikers die met het toetsenbord navigeren duidelijk moeten kunnen zien welk element momenteel de focus heeft. Zonder een zichtbare focusindicator weten deze gebruikers niet op welk moment ze op Enter moeten drukken om de knop te bedienen. Zorg ervoor dat de focus voor deze knop duidelijk zichtbaar is, bijvoorbeeld door een duidelijke focusrand toe te voegen met een voldoende hoge contrastratio.

De focus is niet zichtbaar in het dialoogvenster voor cookies dat wordt geopend wanneer een bezoeker op de knop “Lees hier meer over cookies” klikt. Hier is de toetsenbordfocus ook niet zichtbaar, wat de gebruiksvriendelijkheid vermindert voor bezoekers die geen muis gebruiken.

De toetsenbordfocus is niet zichtbaar op de keuzerondjes in de header van pagina https://www.bibliotheekalmelo.nl/. Dit probleem is ook aanwezig bij links met afbeeldingen onder de kopjes “Lid worden”, “Meer met de computer” en “Nederlands leren” op dezelfde pagina, bij links zoals “Meer lezen” op pagina https://weblocal.bibliotheekalmelo.nl/agenda, en bij links met afbeeldingen op pagina https://www.bibliotheekalmelo.nl/klantenservice/veel-gestelde-vragen.html, bijvoorbeeld onder de kopjes “Lenen”, “In de Bibliotheek” en “E-books en luisterboeken”. Zorg ervoor dat alle interactieve elementen een duidelijke, zichtbare focusindicator hebben, zodat gebruikers altijd weten welk element momenteel actief is. Dit kan eenvoudig worden toegevoegd via CSS met de :focus pseudo-class of door gebruik te maken van aria-attributen voor betere schermlezerondersteuning.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/title-detail/WISE/39509?qs=*%20%20&scope=anything&filter=mediumTypeCode_is_DVV&titleNavIndex=1&titleNavRouteName=search&titleNavTotal=1830 in het tabblad "recensies" krijgt het "info"-icoon geen zichtbare toetsenbordfocus. Zorg dat deze een zichtbare focusindicator krijgt. Dit speelt ook op andere pagina’s waarop individuele producten worden getoond.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/title-detail/WISE/49726?qs=*%20%20&scope=anything&titleNavIndex=0&titleNavRouteName=search&titleNavTotal=49789 krijgen in de blokken "Eerder bekeken" en "Anderen leenden ook" de knoppen geen zichtbare focusindicator. Zorg dat alle besturingselementen van de sliders een zichtbare focusindicator krijgen. Dit speelt ook op andere pagina’s waarop individuele producten worden getoond.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de domeinen https://www.bibliotheekalmelo.nl/ en https://rijnbrink.hostedwise.nl/ staat linksboven het logo met de tekst "de Bibliotheek Almelo". Dit logo is ook een link en de naam van deze link komt van de alt-tekst in de afbeelding: "Bibliotheek Almelo". Hierin ontbreekt het woord "de", wat betekent dat de zichtbare tekst niet gebruikt kan worden met spraakbedieningssoftware. Wijzig deze alt-tekst daarom naar “de Bibliotheek Almelo”.

In de header van de website https://www.bibliotheekalmelo.nl/ is de placeholder-tekst van de zoekbalk “Waar ben je naar op zoek?”, terwijl de toegankelijke naam van het invoerelement “Zoekopdracht” is. Dit kan problemen veroorzaken voor bezoekers die gebruikmaken van spraaksoftware, omdat zij vaak de zichtbare tekst uitspreken om een element te bedienen. Als de toegankelijke naam niet overeenkomt met de zichtbare tekst, zal het spraakcommando niet werken. Zorg ervoor dat de toegankelijke naam van het invoerveld overeenkomt met de zichtbare tekst, bijvoorbeeld door de naam “Waar ben je naar op zoek?” te gebruiken in plaats van “Zoekopdracht”.

Op pagina https://weblocal.bibliotheekalmelo.nl/agenda staan onder “Agenda|Wat is er in de Bibliotheek te doen?” verschillende select-elementen, zoals die met de zichtbare tekst “Voor welke leeftijd”. Deze elementen hebben geen zichtbaar label en gebruiken de eerste optie als pseudo-label. Dit pseudo-label verdwijnt echter wanneer een andere optie wordt geselecteerd, waardoor de toegankelijke naam van het element verdwijnt en bezoekers die spraaksoftware gebruiken het element niet langer kunnen bedienen. Om dit te verbeteren, moet elk select-element een permanent zichtbaar label hebben dat ook wordt opgenomen in de toegankelijke naam van het element. Dit kan bijvoorbeeld door een label-element te gebruiken dat programmatisch is gekoppeld aan het select-element met het for-attribuut. Hiermee blijft de zichtbare tekst altijd beschikbaar voor zowel visuele gebruikers als gebruikers van spraaksoftware.

Als je een boek reserveert op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=*%20%20&scope=anything opent er een modal. Als men op de link "Stel een start- en stopdatum in" klikt, klapt een blok met verdere info en functionaliteit open. Er verschijnen twee datumvelden. Beide datumvelden hebben door het aria-label attribuut het label: "Kies datum", wat het eigenlijke label (dat ook visueel zichtbaar is) overschrijft. Verwijder het aria-label attribuut. Dit komt op alle pagina’s van dit domein voor.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/ is het lang-attribuut in de HTML onjuist ingesteld op “nl_NL” (met een underscore tussen de primaire en secundaire taalcode). Dit moet aangepast worden naar lang="nl" of lang="nl-NL", zodat schermlezers de juiste uitspraakregels kunnen toepassen. Schermlezers gebruiken deze code om te bepalen welke uitspraakregels ze moeten gebruiken voor de inhoud van de pagina. Een onjuiste taalinstelling kan ervoor zorgen dat teksten op een verkeerde manier worden uitgesproken, wat verwarrend kan zijn voor blinde of slechtziende bezoekers. Pas dit attribuut aan om de leeservaring voor alle bezoekers te verbeteren.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=*%20%20&scope=anything is de taal niet correct aangegeven: "nl_NL" (met een underscore tussen de primaire en secundaire taalcode) is geen correcte waarde voor het lang-attribuut. Pas de waarde aan naar "nl" of "nl-NL". Dit speelt ook op alle pagina’s van dit domein.

In de metagegevens van het PDF-document op https://www.bibliotheekalmelo.nl/dam/overons/mjb-2023-2026-st–obath88-publieksversie.pdf is de taal ingesteld op “en” (Engels), terwijl de inhoud van het document in het Nederlands is geschreven. Dit betekent dat schermlezers de tekst nu voorlezen met de uitspraakregels voor Engels, wat de inhoud onbegrijpelijk kan maken voor Nederlandstalige gebruikers. Pas de taalinstelling aan naar Nederlands in de documenteigenschappen, zodat de tekst correct wordt voorgelezen.

Uitkomst: Onvoldoende

Bevindingen: Pagina https://weblocal.bibliotheekalmelo.nl/agenda bevat een skiplink met tekst in het Engels: “Skip to main content”. Deze tekst wordt voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal deze tekst naar het Nederlands.

Het label van de zoekknop op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything is "SEARCH.SEARCH". Verzorg een Nederlandstalig label voor de zoekknop. Dit speelt ook op alle pagina’s van dit domein.

De alternatieve tekst voor de beoordeling van de boeken op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything is steeds in het Engels, bijv. "Rating: 4 out of 5 stars". Vertaal dit naar het Nederlands. Dit komt voor op alle pagina’s van dit domein.
Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything is de paginering in het Engels: bijvoorbeeld "Page 6". Vertaal dit naar het Nederlands.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://weblocal.bibliotheekalmelo.nl/agenda wordt bij het selecteren van een element onder de tekst “Wat is er in de Bibliotheek te doen?” de pagina automatisch opnieuw geladen, waarbij de toetsenbordfocus terugkeert naar het begin van de pagina. Dit kan verwarrend en frustrerend zijn voor gebruikers, vooral voor mensen die afhankelijk zijn van toetsenbordnavigatie of schermlezers, omdat zij hun positie op de pagina kwijtraken. Dit probleem kan worden opgelost door een duidelijke waarschuwing toe te voegen die aangeeft dat de pagina zal worden herladen bij het maken van een selectie. Een betere oplossing is om de automatische herlaadfunctie te verwijderen en een aparte knop toe te voegen waarmee de gebruiker de selectie kan bevestigen. Hiermee blijft de toetsenbordfocus behouden, waardoor de gebruikservaring voor alle bezoekers wordt verbeterd.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekalmelo.nl/klantenservice/contact/opmerkingen–klachten-en-of-suggesties.html wordt in een formulier de standaard HTML5-validatie gebruikt voor lege of onjuiste gegevens. Deze standaardberichten zijn niet altijd goed toegankelijk. Ze worden niet door alle browsers en schermlezers consistent ondersteund en kunnen kortaf of onvolledig zijn, waardoor bezoekers niet altijd begrijpen wat er fout is. Voor een betere toegankelijkheid is het belangrijk om zelf foutmeldingen toe te voegen die duidelijk en specifiek zijn, zodat alle bezoekers begrijpen welke velden correct moeten worden ingevuld. Deze foutmeldingen moeten visueel duidelijk zijn, maar ook programmatisch beschikbaar voor schermlezers. Dit kan bijvoorbeeld door gebruik te maken van aria-live en aria-describedby om de foutmeldingen aan de invoervelden te koppelen.
Hetzelfde probleem komt voor in de formulieren op pagina’s https://www.bibliotheekalmelo.nl/klantenservice/Adreswijziging.html en https://www.bibliotheekalmelo.nl/klantenservice/Wijziging-abonnement.html. Controleer alle formulieren op de website om ervoor te zorgen dat de foutmeldingen overal op een consistente en toegankelijke manier worden weergegeven.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://weblocal.bibliotheekalmelo.nl/agenda, onder “Agenda|Wat is er in de Bibliotheek te doen?”, heeft het invoerveld met de placeholder “Zoek op trefwoord” geen permanent label. Dit kan voor verwarring zorgen, omdat de placeholder-tekst verdwijnt zodra een bezoeker begint te typen, waardoor de context van het invoerveld verloren gaat. Voeg een permanent zichtbaar label toe aan dit invoerveld, bijvoorbeeld door gebruik te maken van een label-element dat programmatisch is gekoppeld aan het invoerveld met het for-attribuut. Dit zorgt ervoor dat de functie van het invoerveld altijd duidelijk is voor alle bezoekers, inclusief gebruikers van schermlezers. Hetzelfde probleem doet zich voor bij de select-elementen op dezelfde pagina. Deze elementen gebruiken de eerste optie als een soort pseudo-label, maar deze verdwijnt zodra een andere optie wordt geselecteerd. Dit betekent dat bezoekers niet altijd weten waar de keuzelijst over gaat, vooral als de beschikbare opties niet zelfverklarend zijn. Zorg ervoor dat ook deze elementen een permanent zichtbaar label hebben dat duidelijk beschrijft waar de selectie betrekking op heeft, zoals “Selecteer een categorie” of “Kies een locatie”.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner opent de knop “Lees hier meer over cookies” een dialoogvenster zonder ARIA-rol en zonder toegankelijke naam. Dit betekent dat schermlezers niet kunnen herkennen dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan eenvoudig worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud, zoals aria-label="Cookie-instellingen" en het attribuut role="dialog" om aan te geven dat het om een dialoogvenster gaat. Hiermee wordt de toegankelijkheid voor gebruikers van schermlezers aanzienlijk verbeterd.

In de cookiebanner heeft de knop “Lees hier meer over cookies” zelf ook geen indicatie dat het een dialoogvenster opent. Dit kan worden opgelost door het attribuut aria-haspopup="dialog" toe te voegen aan de knop. Hiermee wordt aangegeven dat er een dialoogvenster wordt geopend wanneer op deze knop wordt geklikt. De status van het dialoogvenster kan worden bijgehouden met het attribuut aria-expanded, dat de waarde true of false moet krijgen, afhankelijk van of het venster geopend of gesloten is. Zorg ervoor dat dit attribuut correct wordt bijgewerkt wanneer de dialoog wordt geopend of gesloten.

De zoekknop in het bovenste menu op pagina https://www.bibliotheekalmelo.nl/ heeft ook geen toegankelijke naam, waardoor gebruikers van schermlezers niet weten wat de functie van de knop is. Geef deze knop een toegankelijke naam, bijvoorbeeld met een aria-label="Zoeken", zodat duidelijk is dat de knop dient om een zoekopdracht te starten. Zie ook https://www.bibliotheekalmelo.nl/collectie.html.

Op de homepagina staan onder de kopjes “Lid worden”, “Meer met de computer” en “Nederlands leren” afbeeldingen die als links fungeren, maar geen toegankelijke namen hebben. Hierdoor is het doel van de link niet duidelijk voor gebruikers van schermlezers. Voeg een toegankelijke naam toe aan deze links, bijvoorbeeld met aria-label-attributen die beschrijven waar de link naartoe leidt, zoals aria-label="Lid worden", aria-label="Meer met de computer" en aria-label="Nederlands leren".

Op pagina https://weblocal.bibliotheekalmelo.nl/agenda onder “Agenda|Wat is er in de Bibliotheek te doen?” ontbreken de toegankelijke namen voor de select-elementen, zoals bij het select-element met de zichtbare tekst “Voor welke leeftijd”. Voeg voor elk select-element een label toe met een duidelijke beschrijving van de functie van de selectie, bijvoorbeeld door gebruik te maken van het label-element of een aria-label met een passende beschrijving.

Als je een boek reserveert op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=concept&scope=anything opent er een modal. Als men op de link "Stel een start- en stopdatum in" klikt, klapt een blok met verdere info en functionaliteit open. In de code is niet aangegeven dat dit uitklapt, waardoor deze informatie verloren gaat voor hulpsoftware. Voeg het attribuut aria-expanded toe.

Uitkomst: Onvoldoende

Bevindingen: Als men op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/5490/catalog/search?qs=*%20%20&scope=anything een artikel reserveert of toevoegt aan "Mijn Lijsten" is de melding dat de reservering of het toevoegen is gelukt niet beschikbaar voor hulpsoftware. Gebruik een live-region om dit op te lossen, bijvoorbeeld aria-live="polite". Dit speelt ook op andere pagina’s van dit domein.