Rapport:
Audit digitale toegankelijkheid website Bibliotheek Dinkelland

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website, bijvoorbeeld op pagina https://www.bibliotheekdinkelland.nl/home.html, staat in de header een logo. De alt-tekst daarvan is "Bibliotheek Dinkelland". 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). Dit komt ook op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything en https://bibliotheekdinkelland.op-shop.nl/.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html staat naast de link “Jeugd & Jongeren” onder de kop “Jeugd | 0-6 jaar” een pijltje. Dit icoon is toegevoegd met CSS via een ::before-pseudo-element en wordt door schermlezers uitgesproken als “before”. Aangezien het om een decoratief icoon gaat dat geen extra informatie geeft, moet dit verborgen worden voor schermlezers. Ook op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html is hetzelfde probleem aanwezig bij de link “Jeugd | 6-12 jaar”. Dit komt ook op pagina https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html voor bij de link “Raad & Daad”. Zie ook pagina https://www.bibliotheekdinkelland.nl/contact/veelgestelde-vragen.html bij de link “Contact”.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html, onder de kop "Jeugd | 0-6 jaar", hebben de afbeeldingen alt-tekst, maar deze kunnen als decoratief worden aangeduid. Zorg dat ze lege alt-attributen hebben. Men moet daarna wel een link om de hele inhoud van het kaartje maken. Hetzelfde probleem staat op pagina https://www.bibliotheekdinkelland.nl/activiteiten.html met afbeeldingen boven "Activiteiten", "Cursussen" en "Raad & Daad", op pagina https://www.bibliotheekdinkelland.nl/collectie.html met afbeeldingen boven "Zoek je iets?", "Inspiratie nodig?", "Toptitels", op pagina https://www.bibliotheekdinkelland.nl/contact/veelgestelde-vragen.html met soortgelijke afbeeldingen.

De afbeeldingen bij de evenementen op https://bibliotheekdinkelland.op-shop.nl/ hebben alt-tekst. De alt-tekst is echter de titel van het evenement, en beschrijft niet de afbeelding. Dat is niet correct. We raden het alt-attribuut leeg te laten, zodat de afbeelding als decoratief wordt gemarkeerd, en om de link om de afbeelding te verwijderen. Mocht men graag de afbeelding klikbaar houden, is het aan te raden elk evenement op te maken als een card. De titel van het evenement is de enige link in de card, maar de hele card is wel klikbaar door middel van JavaScript.

Op pagina https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html staan onder de kop “Websites van de overheid” veel logo’s. De zichtbare tekst bij de meeste logo’s komt overeen met de koppen 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. Het gaat om de volgende logo’s: “Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid”, “Dienst Uitvoering Onderwijs Ministerie van Onderwijs, Cultuur en Wetenschap”, “LBIO Landelijk Bureau Inning Onderhoudsbijdragen” en “Logius Ministerie van Binnenlandse Zaken en Koninkrijksrelaties”.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/taalhuis.html onder de kop “Zelf vanuit huis oefenen” staan verschillende logo’s. De alternatieve teksten worden geleverd door de tekst van de bijbehorende links onder de logo’s. In de meeste gevallen bevat de linktekst alle zichtbare tekst uit het logo. Sommige logo’s bevatten echter meer informatie dan in de linktekst staat. In die gevallen moet alle tekst uit het logo worden toegevoegd aan de alternatieve tekst van de link. Dit geldt bijvoorbeeld voor de logo’s “Oefenen.nl We leren altijd” en “De Voorleeshoek”.

Op pagina https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html onder de kop “Cursussen voor de computer” staan drie logo’s zonder alternatieve tekst. Als het alt-attribuut van een afbeelding leeg is (alt=""), wordt de afbeelding genegeerd door schermlezers. Een lege alt-tekst geeft aan dat de afbeelding decoratief is en geen informatie bevat. Er wordt dan niets voorgelezen. Omdat het hier om informatieve logo’s gaat, moeten alt-teksten worden toegevoegd die de volledige tekst uit de logo’s bevatten. Als de logo’s geen links zijn, moet ook het woord ‘Logo’ worden toegevoegd aan de alternatieve teksten.

Op pagina https://www.bibliotheekdinkelland.nl/collectie.html staat onder de kop “Muziek” een decoratieve afbeelding. De alt-tekst van deze afbeelding bevat alleen een spatie: alt=” “. Hierdoor wordt de afbeelding niet verborgen voor schermlezers. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan door een leeg alt-attribuut toe te passen, bijvoorbeeld alt=””.

Op pagina https://www.bibliotheekdinkelland.nl/collectie.html staan onder de koppen “Wetenschappelijke boeken” en “Digitale bronnen” decoratieve afbeeldingen. De alternatieve teksten van deze afbeeldingen herhalen de koppen “wetenschappelijke boeken” en “digitale bronnen”. Omdat de afbeeldingen geen extra informatie geven die niet al in de koppen staat, worden ze als decoratief beschouwd. Om te voorkomen dat gebruikers van hulpsoftware dubbele informatie krijgen, moet het alt-attribuut van deze afbeeldingen leeg zijn: alt=””.

Op pagina https://bibliotheekdinkelland.op-shop.nl/ staat in de caroussel een afbeelding met de alt-tekst die de kop “Informatiepunt Digitale Overheid (IDO)” herhaalt. Deze afbeelding geeft geen extra informatie en is daardoor decoratief. Omdat de afbeelding geen aanvullende betekenis heeft, moet het alt-attribuut leeg zijn: alt=””.

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf staat op alle pagina’s het logo “de Bibliotheek Dinkelland”, 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.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf zijn op pagina’s 3, 6, 7, 8, 9 en 11 decoratieve afbeeldingen 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.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf zijn 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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html staat onder de kop “Voorleesfilmpjes” een video met een voice-over. 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.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html is hetzelfde probleem aanwezig. Ook hier wordt in de video gesproken, maar de ondertiteling is automatisch gegenereerd en daardoor onnauwkeurig. Voor goede toegankelijkheid is handmatig gecontroleerde en correcte ondertiteling noodzakelijk.

Op pagina https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html is een video te vinden met gesproken tekst en automatisch gegenereerde ondertiteling. Omdat deze ondertiteling niet altijd klopt en geen juiste interpunctie bevat, voldoet deze niet aan de toegankelijkheidseisen. Ook hier moet de ondertiteling gelijk zijn aan de gesproken tekst.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html wordt onder de kop “Voorleesfilmpjes” een video getoond. Aan het einde van deze video, vanaf 0:53, verschijnt het logo van “De Voorleeshoek” in beeld. Bezoekers die blind of slechtziend zijn, krijgen deze visuele informatie niet mee. De beste oplossing is het toevoegen van een audiobeschrijving die visuele elementen zoals namen, functies, logo’s en teksten beschrijft. Ook het aanbieden van een geschreven tekst als media-alternatief is een optie, maar om te voldoen aan succescriterium 1.2.5 moet er sowieso een audiobeschrijving worden toegevoegd.

Op pagina https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html wordt onder de kop “Hoe kunnen we je helpen?” een video getoond. Aan het begin van deze video, van 0:02 tot 0:05, wordt de tekst “Heeft u vragen over de overheid?” en het logo van “de Bibliotheek informatiepunt Digitale Overheid” in beeld getoond. Aan het einde van de video, vanaf 1:08, verschijnt dit logo opnieuw. Voor deze visuele informatie moet een audiobeschrijving worden toegevoegd, zodat ook bezoekers die niet kunnen zien de inhoud volledig kunnen begrijpen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html voldoet de video niet aan succescriterium 1.2.5, dat vereist dat er een audiobeschrijving aanwezig is bij video’s. In deze video is er voldoende ruimte binnen het bestaande audiokanaal om extra informatie toe te voegen. Daarom is een media-alternatief hier niet toegestaan als oplossing. Een audiobeschrijving is noodzakelijk om de video toegankelijk te maken voor bezoekers die de visuele inhoud niet of niet goed kunnen waarnemen.

Op pagina https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html geldt hetzelfde probleem. Ook hier ontbreekt een audiobeschrijving terwijl er voldoende ruimte is om deze binnen de bestaande audio toe te voegen. Om te voldoen aan succescriterium 1.2.5 is het toevoegen van een audiobeschrijving verplicht.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, zoals op https://www.bibliotheekdinkelland.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 alle pagina’s van de website, zoals op https://www.bibliotheekdinkelland.nl/, staat in de header een groep van twee keuzerondjes: “Catalogus” en “Site”, voorafgegaan door de tekst “Zoeken in”. Elk keuzerondje staat in een label. Het label is echter verborgen door display:none in de CSS, waardoor deze in de accessibility tree niet herkend wordt. Hoewel er via de after: pseudoclass een label wordt toegekend, raden we die methode niet aan. Pas de CSS aan zodat de tekst niet meer verwijderd wordt uit de DOM en accessiblity tree.

Op pagina https://www.bibliotheekdinkelland.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.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html staan de koppen “Websites van de overheid” en “Belastingdienst” direct onder elkaar. Beide koppen hebben hetzelfde niveau zonder tussenliggende inhoud. Dit duidt op een onjuiste toepassing van kopniveaus. Pas de markering aan zodat de hiërarchie duidelijk wordt en bezoekers met hulpsoftware de inhoud beter kunnen begrijpen. Ook op pagina https://www.bibliotheekdinkelland.nl/contact/word-lid-van-de-bibliotheek.html komt hetzelfde probleem voor. Ook hier staan twee koppen van hetzelfde niveau direct onder elkaar zonder bijbehorende inhoud. De kopstructuur moet aangepast worden zodat deze aansluit op de logische structuur van de informatie op de pagina.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html komen meerdere gevallen voor van koppen die direct onder elkaar staan zonder begeleidende inhoud. Dit geldt voor de combinaties: “Aan de slag met mediawijze thema’s” en “HoeZoMediawijs?”, “Schermtijd en mediagebruik” en “Niet alle schermtijd is hetzelfde”, “Spelletjes” en “DataDetox Game”, “Video’s over media” en “AI Studio - Het Klokhuis”, “Werkstukken en spreekbeurten” en “Je werkstuk of spreekbeurt houden over ‘De Online Wereld’”. In al deze gevallen moet de structuur van de koppen worden aangepast zodat het kopniveau overeenkomt met de logische opbouw van de inhoud.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staat onder de kop “Niet alle schermtijd is hetzelfde” een blok tekst dat visueel uit twee alinea’s bestaat. In de HTML is deze tekst echter opgenomen in één p-element. Visueel is duidelijk te zien dat er witruimte tussen de twee tekstblokken zit, wat aangeeft dat het om aparte alinea’s gaat. Deze structuur moet ook correct worden weergegeven in de code. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal visueel weergegeven alinea’s moet gelijk zijn aan het aantal p-elementen in de HTML.

Op pagina https://www.bibliotheekdinkelland.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://bibliotheekdinkelland.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 https://bibliotheekdinkelland.op-shop.nl/ is er boven de lijst met evenementen een slider te zien. In de code heeft het tweede lijstitem in de slider altijd de ARIA-rol van button. Hierdoor staat er een knop binnen de lijst, wat niet is toegestaan volgens de HTML-standaard. Verwijder de rol en los dit op door een knop te nesten in het <li>-element.

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/formulier_ik_willerentaalhuisdinkelland-tijdelijk.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.

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf is de tagstructuur slechts gedeeltelijk aanwezig. Op pagina 9, waar de kop “Onze cijfers van 2022” staat, is helemaal geen tagstructuur toegevoegd. Ook de voetnoten op alle pagina’s zijn niet getagd. Door het ontbreken van deze informatie in de codelaag kan dit gedeelte van het document niet onderzocht worden op toegankelijkheid. Dit betreft alle succescriteria die afhankelijk zijn van de PDF-tagstructuur, zoals semantische opbouw en alternatieve teksten. Als deze onderdelen alsnog correct getagd worden, kunnen er nieuwe toegankelijkheidsproblemen aan het licht komen.

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf zijn op meerdere pagina’s koppen aanwezig die niet gemarkeerd zijn als kop in de tagstructuur. Op pagina 5 gaat het bijvoorbeeld om “Nationale Voorleesdagen”, “Mediawijsheid” en “BoekStart”. Ook op de pagina’s 6, 7, 8 en 9 komt dit probleem voor. Door deze fout wijkt de visuele structuur af van de structuur in de tags. Hierdoor kunnen bezoekers die hulpsoftware gebruiken de inhoud niet goed overzien. Vervang daarom de P-tags van deze koppen door H-tags die het juiste niveau aangeven, zodat de structuur van het document in de code overeenkomt met de visuele structuur.

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf staan op pagina 4 twee koppen van niveau 2 direct onder elkaar: “Wat opviel in 2022” en “Ontwikkelingen in grote lijnen”. Er staat geen inhoud tussen deze koppen. Als een kop wordt voorgelezen zonder dat daar informatie op volgt, kan dit verwarring veroorzaken bij blinde bezoekers. Pas het niveau van de kop aan of gebruik een andere tag, zodat duidelijk is wat de structuur en bedoeling van de tekst is.

Uitkomst: Onvoldoende

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

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/contact/contactformulier.html bevat het formulier invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres en telefoonnummer. Deze velden missen het autocomplete-attribuut. Invoervelden voor persoonlijke gegevens moeten altijd het autocomplete-attribuut bevatten, zodat browsers en hulpsoftware het invullen van de velden kunnen ondersteunen. Dit kan het gebruiksgemak voor bezoekers aanzienlijk verbeteren, bijvoorbeeld doordat persoonlijke gegevens automatisch worden ingevuld. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie gevraagd wordt. Op deze pagina staat welke waardes verplicht zijn: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/contact/contactformulier.html wordt bij de invoervelden “Onderwerp” en “Wil je een bijlage meesturen?” 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://bibliotheekdinkelland.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.

Wanneer de website wordt bekeken op een klein scherm, verschijnt er een navigatiemenu in de footer. De opties “Home”, “Menu” en “Zoeken” veranderen van kleur wanneer zij toetsenbordfocus krijgen: de kleur van het icoon en de tekst verandert dan van wit naar oranje. Deze kleurverandering is de enige visuele aanduiding van focus. Voor bezoekers met een visuele beperking of kleurenblindheid is dit niet voldoende zichtbaar. Om toetsenbordgebruikers te laten zien waar ze zich bevinden, moet een duidelijk zichtbare focusindicator worden toegevoegd. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrondkleur met voldoende contrast.

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.

Op pagina https://www.bibliotheekdinkelland.nl/zoekresultaten.website.html?q=boek, in de zijbalk onder de kop “Verfijnen op resultaten”, bevinden zich accordeons met de titels “Type” en “Trefwoorden”. Wanneer deze elementen toetsenbordfocus krijgen, verandert de kleur van de tekst van zwart naar oranje (HEX #FF7320) tegen een witte achtergrond. De contrastratio is dan 2,7:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het kleurcontrast minimaal 4,5:1 zijn. Pas de kleur van de gefocuste tekst of de achtergrond aan zodat dit contrastniveau wordt gehaald.

Op pagina https://www.bibliotheekdinkelland.nl/zoekresultaten.website.html?q=boek, worden in de zijbalk onder de filtersectie, aantallen getoond die het aantal resultaten aangeven voor een bepaald type of trefwoord. Deze cijfers zijn weergegeven in donkergrijs (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED), met een contrastratio van 3,9:1. Dit voldoet niet aan de vereiste minimale contrastratio van 4,5:1 voor kleine tekst. Pas de kleur van de cijfers of de achtergrond aan zodat het vereiste contrast wordt bereikt.

Op pagina https://bibliotheekdinkelland.op-shop.nl/ bevatten sommige evenementen groene tekst, zoals “nog 1 beschikbaar”, op een witte achtergrond. De gebruikte kleur groen (HEX #468847) heeft een contrastratio van 4,3:1. Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn. De huidige waarde is dus onvoldoende. Verhoog het contrast door een donkerdere kleur te gebruiken of pas de achtergrond aan.

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.pdf komt op meerdere pagina’s oranje tekst (HEX #ED7D31) voor op een witte achtergrond. De contrastratio is 2,8:1. Dit is te laag, want voor grote tekst moet het minimaal 3,0:1 zijn en voor kleine tekst 4,5:1. Het probleem komt onder andere voor bij de kop “Jaarverslag 2022 Bibliotheek Dinkelland” op pagina 2, “Inhoud” op pagina 3, “Wat opviel in 2022” en “Ontwikkelingen in grote lijnen” op pagina 4, de teksten “Nationale Voorleesdagen” en “Mediawijsheid” op pagina 5 en bij diverse getallen op pagina 10. Pas de tekstkleur of achtergrond aan zodat het contrast voldoet aan de toegestane minimale waarden.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://bibliotheekdinkelland.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://bibliotheekdinkelland.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.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, zoals op https://www.bibliotheekdinkelland.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.bibliotheekdinkelland.nl/ verandert de kleur van sommige links wanneer ze toetsenbordfocus krijgen, zoals bij “Wat is jouw volgende verhaal?”, “Breng me naar Facebook” en “Ik ben 18-”. De tekstkleur verandert daarbij van zwart naar oranje (HEX #FF7320) op een witte achtergrond. 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.

Op pagina https://www.bibliotheekdinkelland.nl/zoekresultaten.website.html?q=boek staan in de zijbalk filters met accordeons “Type” en “Trefwoorden”. Wanneer deze toetsenbordfocus krijgen, verandert de kleur van het pijltje van zwart naar oranje (HEX #FF7320) tegen een witte achtergrond. Deze oranje kleur heeft een contrastratio van 2,7:1, wat te laag is voor informatieve iconen. Voor dergelijke elementen geldt een minimale contrastratio van 3,0:1. Pas de kleur aan zodat de focusstatus beter zichtbaar is.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything heeft de knop “Inloggen” in de header een rand in de focusstatus die donkergrijs is (HEX #C1C1C2) tegen een lichtgrijze achtergrond (HEX #EDEDED). De contrastratio is 1,5:1, wat ver onder de vereiste minimale ratio van 3,0:1 ligt. Verhoog het contrast tussen de rand en de achtergrond zodat de focusstatus goed zichtbaar is voor toetsenbordgebruikers.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://bibliotheekdinkelland.op-shop.nl/ staan vier filters. Deze filters functioneren als uitklapbare comboboxen, maar zijn niet toegankelijk via het toetsenbord. Het is niet mogelijk om deze filters te openen of te sluiten met alleen het toetsenbord. Zorg dat alle interactieve elementen, waaronder de filters, volledig met het toetsenbord bediend kunnen worden. Bezoekers die afhankelijk zijn van toetsenbordnavigatie moeten de filters kunnen bereiken, openen, opties selecteren en weer sluiten zonder gebruik van een muis.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.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 pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything verschijnt er na het klikken op de knoppen “Reserveren” of “Mijn lijsten” een dialoogvenster. Na ongeveer 7–8 seconden wordt de bezoeker automatisch doorgestuurd naar een andere (inlog)pagina. Hierdoor kan het voorkomen dat bezoekers niet genoeg tijd hebben om de informatie in de dialoogvensters te lezen. Er is op dit moment geen mechanisme beschikbaar om deze tijdslimiet uit te schakelen, aan te passen of te verlengen. Zorg dat bezoekers deze tijdslimiet kunnen beheren, zodat iedereen voldoende tijd krijgt om de inhoud van de dialoogvensters te begrijpen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekdinkelland.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.bibliotheekdinkelland.nl/. Er moet een mogelijkheid zijn om vaste onderdelen van een pagina, zoals het navigatiemenu, over te slaan. Dit gebeurt met een skiplink. Een skiplink moet de eerste link op de pagina zijn en mag verborgen zijn zolang die zichtbaar wordt bij toetsenbordfocus. Zorg ervoor dat de skiplink goed werkt: de link moet de focus daadwerkelijk verplaatsen naar het juiste inhoudsdeel op dezelfde pagina. Pas de link aan zodat deze niet leidt tot een paginaverversching of redirect, maar de focus correct verplaatst binnen de huidige pagina.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/contact/word-lid-van-de-bibliotheek.html ontbreekt het title-element. Dit element moet op elke pagina aanwezig zijn en een unieke tekst bevatten die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Deze titel verschijnt in de browsertab en helpt bezoekers om snel te herkennen waar de pagina over gaat, vooral bij het gebruik van meerdere tabbladen of hulpsoftware. Voeg het title-element toe aan de HTML van de pagina en geef het een duidelijke en beschrijvende tekst, zoals bijvoorbeeld: “Lid worden van de bibliotheek – Bibliotheek Dinkelland”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekdinkelland.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.bibliotheekdinkelland.nl/zoekresultaten.website.html?q=boek 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.

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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html onder de kop “Jeugd | 0-6 jaar” heeft de link “Jeugd & Jongeren” de toegankelijke naam “before Jeugd & Jongeren”. Deze toegankelijke naam beschrijft niet duidelijk de bestemming van de link. Dit kan verwarrend zijn voor bezoekers met cognitieve beperkingen of gebruikers van schermlezers. Zorg dat de toegankelijke naam van deze link duidelijk en betekenisvol is, zodat bezoekers begrijpen waar de link naartoe leidt. Een vergelijkbaar probleem komt voor op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html bij de link “Jeugd | 6-12 jaar”, op https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html bij de link “Raad & Daad” en op https://www.bibliotheekdinkelland.nl/contact/veelgestelde-vragen.html bij de link “Contact”. In al deze gevallen geeft de toegankelijke naam geen duidelijke beschrijving van de linkbestemming. Pas de naamgeving aan zodat duidelijk wordt wat de bezoeker kan verwachten na het activeren van de link.

Op pagina https://www.bibliotheekdinkelland.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://bibliotheekdinkelland.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.

De links met afbeeldingen bij de evenementen op https://bibliotheekdinkelland.op-shop.nl/ hebben alt-tekst die het doel van de link niet duidelijk maken. Zie het advies onder succescriterium 1.1.1 waar deze afbeeldingen zijn genoemd.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekdinkelland.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. Hetzelfde probleem komt voor op de pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html onder de kop “Nieuwe boeken | 0-6 jaar”, op de pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html onder de kop “Voor kinderen | boeken over telefoons, schermen, robots en selfies” en op de pagina https://www.bibliotheekdinkelland.nl/collectie.html onder de kop “Nieuwe boeken”. In al deze gevallen moet de toegankelijke naam van de knoppen “Vorige” en “Volgende” worden verduidelijkt naar bijvoorbeeld “Vorige slide” en “Volgende slide”.

Op pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html heeft iframe onder de kop “Voorleesfilmpjes” 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. Een titel zoals “Voorleesfilmpje van De Voorleeshoek” geeft meer context. Dit probleem komt ook voor op de pagina’s https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html, https://www.bibliotheekdinkelland.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html en https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/taalhuis.html. Ook daar moet het title-attribuut van het iframe worden aangepast naar een beschrijvende tekst die past bij de inhoud van de video.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything bevat de knop naast het zoekveld een toegankelijke naam met onduidelijke tekens: “SEARCH_SELECT_SCOPE Alles”. Deze toegankelijke naam moet herschreven worden naar een begrijpelijke en duidelijke beschrijving zodat gebruikers meteen begrijpen wat de knop doet.

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.bibliotheekdinkelland.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 pagina https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staan onder de kop “Aan de slag met mediawijze thema’s” afbeeldingen die als link fungeren. Deze elementen krijgen focus via het toetsenbord, maar er is geen visuele aanduiding van focus. Alle interactieve elementen, inclusief klikbare afbeeldingen, moeten een zichtbare focusindicator hebben. Dit probleem komt ook voor bij andere afbeeldingen op dezelfde pagina en op andere pagina’s, zoals https://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/jeugd-en-jongeren/0-6.html. Voeg voor deze elementen een duidelijke focusstijl toe, bijvoorbeeld een omlijning of verandering van kleur met voldoende contrast.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything is er naast het zoekveld een selectiemenu voor categorieën. Wanneer hier toetsenbordnavigatie wordt gebruikt, is de focus op de opties binnen dit menu niet zichtbaar. Ook hier geldt dat de focusindicator zichtbaar moet zijn, zodat bezoekers weten welke optie op dat moment actief is. Pas de vormgeving van de focusstatus aan zodat de toetsenbordfocus op de keuzemogelijkheden in het selectiemenu goed zichtbaar 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://www.bibliotheekdinkelland.nl/jeugd-en-onderwijs/taalhuis.html onder de kop “Zelf vanuit huis oefenen” staan meerdere logo’s die als links functioneren. Voor de logo’s “Oefenen.nl We leren altijd” en “De Voorleeshoek” komt de zichtbare tekst in het logo niet overeen met de linktekst die als toegankelijke naam fungeert. Dit zorgt ervoor dat deze links niet goed werken met stemgestuurde systemen. Gebruikers spreken de tekst uit die zij zien in het logo, maar als deze niet voorkomt in de toegankelijke naam van de link, wordt de link niet herkend. Zorg dat de tekst die zichtbaar is in het logo ook voorkomt in de toegankelijke naam, het liefst aan het begin van de linktekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekdinkelland.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. Een vergelijkbaar probleem komt voor op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything. Ook daar is de waarde van het lang-attribuut incorrect. Zorg dat ook hier de taal wordt ingesteld op "nl-NL".

In het PDF-document op https://www.bibliotheekdinkelland.nl/dam/bestanden/formulier_ik_willerentaalhuisdinkelland-tijdelijk.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.bibliotheekdinkelland.nl/dam/bestanden/jaarverslag_dinkelland2022.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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything staan verschillende elementen met toegankelijke namen in het Engels. Dit is problematisch, omdat schermlezers de Engelse tekst uitspreken volgens de uitspraakregels van het Nederlands, wat leidt tot onduidelijke of verwarrende voorlezing. De knop met een keuzelijst naast het zoekveld heeft bijvoorbeeld de toegankelijke naam “SEARCH_SELECT_SCOPE Alles”, de zoekknop heeft de naam “SEARCH.SEARCH”, de sorteermogelijkheid heet “SEARCH.SORTING”, de invoervelden in het onderdeel “Publicatiejaar” hebben de namen “SEARCH.FROM” en “SEARCH.THROUGH” en de paginaknoppen hebben toegankelijke namen zoals “Page 1” en “Page 2”. Deze namen moeten worden vertaald naar het Nederlands, zodat ze goed worden uitgesproken en begrepen door Nederlandstalige bezoekers die hulpsoftware gebruiken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

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

Op alle pagina’s van de website ontbreekt bij de zoekknop in het bovenste menu een toegankelijke naam. Hierdoor is het voor schermlezersgebruikers niet duidelijk wat de functie van deze knop is. Ditzelfde probleem komt ook voor op pagina https://bibliotheekdinkelland.op-shop.nl/, waar de zoekknop eveneens geen toegankelijke naam heeft. In allebei de gevallen is het label verwijderd met CSS met behulp van display:none. Dat is niet toegestaan. Gebruik een andere techniek, zoals de cliptechniek, om de tekst niet te verbergen maar buiten beeld te plaatsen.

Bovenaan de pagina https://bibliotheekdinkelland.op-shop.nl/ staan vier filters die gebruikmaken van select-elementen. Deze select-elementen hebben geen toegankelijke naam of rol. Zonder naam kunnen schermlezers de functie van het select-element niet uitleggen aan de gebruiker. Voeg toegankelijke namen toe met behulp van een label of aria-label, zodat elk select-element beschrijvend is en begrijpelijk wordt voor bezoekers die hulpsoftware gebruiken.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8907/catalog/search?qs=*&scope=anything, onder de kop “Resultaten: 1 - 10 (van 19158)”, bevindt zich naast de categoriekeuzelijst een sorteermogelijkheid in de vorm van een knop. Deze knop heeft verschillende toestanden (ingedrukt en niet ingedrukt), maar er is geen programmatische aanduiding van de huidige toestand. Daardoor krijgen blinde bezoekers deze informatie niet door via hun schermlezer. Zorg dat de toestand van deze knop in de code wordt weergegeven, bijvoorbeeld met het attribuut aria-pressed="true" of aria-pressed="false", zodat de status correct wordt doorgegeven aan hulpsoftware.

Wanneer de website op een klein scherm wordt bekeken en de optie “Zoeken” in het hoofdmenu wordt geopend, verschijnt er een submenu met de invoervelden “Zoeken in de collectie” en “Zoeken binnen de website”. Beide velden hebben een zoekknop ernaast, maar deze knoppen hebben geen toegankelijke naam. Daardoor is voor schermlezersgebruikers niet duidelijk wat de functie van de knoppen is. Voeg voor beide knoppen een toegankelijke naam toe, bijvoorbeeld met aria-label="Zoeken in de collectie" en aria-label="Zoeken binnen de website", zodat gebruikers die hulpsoftware gebruiken weten welke actie de knop uitvoert.

Op kleine schermen worden het hamburgermenu en de zoekoptie weergegeven als interactieve elementen, maar deze zijn foutief gecodeerd als invoerelementen met role="checkbox". Hierdoor wordt de functie van deze knoppen niet juist doorgegeven aan hulpsoftware. De knop voor het openen en sluiten van het menu moet als een knop worden herkend, met het juiste roltype. Gebruik hiervoor een echt button-element of voeg het attribuut role="button" toe. Alleen dan kan de schermlezer correct doorgeven dat het om een knop gaat, en kan ook de status (open of gesloten) via bijvoorbeeld aria-expanded worden meegegeven. Pas deze elementen aan zodat ze correct functioneren voor bezoekers die niet visueel kunnen waarnemen of het menu open of gesloten is.

Uitkomst: Voldoende