Rapport:
Audit digitale toegankelijkheid website Bibliotheek Borne

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/ staat in de header een knop met een vergrootglasicoon. Dit icoon is een informatieve afbeelding die is toegevoegd met een CSS-pseudo-element. Er is geen tekstalternatief beschikbaar. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst aangeven wat de functie van de knop is. Het is niet voldoende om te beschrijven wat er te zien is. Als deze informatie ontbreekt, is de functie van de knop niet duidelijk voor schermlezers. De beschrijving moet worden toegevoegd via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is, maar wel toegankelijk is voor schermlezers.

Op pagina https://www.bibliotheekborne.nl/ verschijnt bij weergave op een klein scherm een sticky menu. In dit menu opent het item met de tekst “Zoeken” een submenu waarin twee knoppen met zoekiconen staan. Ook deze iconen hebben geen alternatieve tekst. Gebruik een van de eerder genoemde methoden om duidelijk te maken wat de functie van deze knoppen is voor gebruikers van hulpsoftware.

Op pagina https://www.bibliotheekborne.nl/ heeft het logo als alt-tekst enkel “Bibliotheek Borne”. Deze tekst is niet voldoende. Omdat het logo in een link staat en er geen zichtbare linktekst aanwezig is, doet de alt-tekst ook dienst als linktekst. Daarom moet de alt-tekst vermelden dat het om een logo gaat en dat het linkdoel het terugkeren naar de homepagina is.

Op pagina https://www.bibliotheekborne.nl/ staat in de header de tekst “Zoeken in”. Deze tekst is niet opgenomen in de HTML-structuur, maar enkel met CSS zichtbaar gemaakt. Hierdoor is de informatie niet beschikbaar voor hulpsoftware zoals schermlezers. De tekst “Zoeken in” moet rechtstreeks in de HTML-code worden geplaatst, zodat ook bezoekers die geen visuele weergave gebruiken toegang hebben tot deze informatie.

Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html staat naast de link “Cursussen” onder de kop “Oefenen.nl” een pijltje dat is toegevoegd met een ::before-pseudo-element via CSS. Schermlezers spreken dit uit als “before”, terwijl het icoon decoratief is en geen inhoudelijke informatie toevoegt. Dit soort iconen moet worden verborgen voor schermlezers om verwarring te voorkomen.

Op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html komt hetzelfde probleem voor bij de link “Raad & Daad”. Ook hier is een decoratief icoon met een ::before-pseudo-element toegevoegd dat onnodig wordt uitgesproken door schermlezers. Omdat het geen betekenis toevoegt, moet het verborgen worden voor hulpsoftware.

Op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staat bij de link “Jeugd | 6-12 jaar” een decoratief pijltje dat op dezelfde manier met CSS is toegevoegd. Ook dit icoon wordt ten onrechte uitgesproken door schermlezers en moet onzichtbaar gemaakt worden voor hulpsoftware.

Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html staat onder de kop “Toegang is gratis” een decoratieve afbeelding met als alt-tekst “Toegang”. Omdat decoratieve afbeeldingen geen extra betekenis of informatie geven, moeten ze onzichtbaar zijn voor schermlezers. Gebruik hiervoor een leeg alt-attribuut: alt="".

Op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html staan onder de kop “Websites van de overheid” meerdere logo’s. Bij de meeste logo’s komt de zichtbare tekst overeen met de bijbehorende koppen en kan dit als toegankelijke alternatieve tekst worden gebruikt. Voor vier logo’s is dit echter niet voldoende en moet alle zichtbare tekst uit het logo worden opgenomen in de alt-tekst. Het gaat om: “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.bibliotheekborne.nl/jeugd-en-onderwijs/taalhuis.html staan verschillende logo’s die als link functioneren. Bij sommige logo’s komt de tekst in het logo echter niet overeen met de tekst van de link. Het gaat om de logo’s van “Oefenen.nl We leren altijd”, “NPO Kennis”, “De Voorleeshoek” en “Ad Appel taaltrainingen”. In deze gevallen moet alle zichtbare tekst uit het logo worden toegevoegd aan de alt-tekst.

Op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staan onder de kop “Aan de slag met mediawijze thema’s” afbeeldingen met alt-teksten. Deze afbeeldingen geven echter geen extra informatie en kunnen als decoratief worden aangemerkt. Daarom moeten ze worden voorzien van een leeg alt-attribuut: alt="". Vervolgens moet de opmaak aangepast worden, zodat niet alleen de tekst “Ga naar de boekentips op onderwerp” als link fungeert, maar de hele card – afbeelding en tekst samen – klikbaar is. Dit kan gerealiseerd worden met JavaScript, zodat de volledige card als een toegankelijke interactieve eenheid werkt. Ditzelfde probleem doet zich ook voor bij andere vergelijkbare klikbare afbeeldingen op deze pagina.

In het PDF-document op https://www.bibliotheekborne.nl/dam/bestanden/uitleenreglement-bibliotheek-bornejuni2023.pdf, op pagina 1, staat een logo van “de Bibliotheek” dat is opgenomen als informatieve afbeelding binnen een figure-element. Deze afbeelding heeft geen alt-tekst. Wanneer een afbeelding in een figure-element staat, is dat een signaal dat de afbeelding informatief is. In dat geval moet er altijd een beschrijving worden toegevoegd in de vorm van een alt-tekst. Zonder alt-tekst leest een schermlezer alleen “afbeelding” voor, waardoor blinde bezoekers belangrijke context kunnen missen. Voorzie dit logo daarom van een passende tekstalternatief.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything toont het logo bovenaan de pagina de volledige tekst “de Bibliotheek Borne”, en de alt-tekst is “Bibliotheek Borne”. 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). Zie ook succescriteria 2.4.4.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat boven de ratingsterren een afbeelding met als alt-tekst “Sprookjes”. Deze afbeelding is een duplicatie van de tekst ernaast. Omdat deze afbeelding geen extra informatie biedt ten opzichte van de nabijgelegen tekst, kan deze als decoratief worden beschouwd. Het alt-attribuut van deze afbeelding moet daarom leeg zijn (alt=””) om dubbele informatie voor schermlezergebruikers te voorkomen.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=%20%20&scope=anything op een klein scherm wordt bekeken, verschijnt er een “?”-icoon naast “Resultaten voor ’’ in ‘Alles’” dat functioneert als een link. Dit icoon is verborgen met aria-hidden=“true” en het tekstalternatief ontbreekt, waardoor de link ontoegankelijk is. De afbeelding is dus interactief. Er is geen tekstalternatief. Daardoor heeft de link geen inhoud (zie ook succescriterium 2.4.4 en 4.1.2). Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html staan twee video’s waarin gesproken wordt. Hoewel beide video’s ondertiteling bevatten, is deze automatisch gegenereerd. Automatisch gegenereerde ondertiteling is niet betrouwbaar, omdat er fouten in kunnen staan en interpunctie ontbreekt. Voor bezoekers die de video niet of niet goed kunnen horen, moet de ondertiteling exact weergeven wat er wordt gezegd. Daarom is het noodzakelijk dat beide video’s handmatig gemaakte en correcte ondertiteling krijgen.

Op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html wordt in de video ook gesproken. De ondertiteling bij deze video is automatisch gegenereerd en daardoor onnauwkeurig. Voor goede toegankelijkheid moet de ondertiteling handmatig worden aangepast zodat deze volledig en correct overeenkomt met het gesproken woord.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html worden twee video’s getoond. In de video onder de kop “Introductie Oefenen.nl” is vanaf 2:01 het logo “Oefenen.nl” zichtbaar. In de video onder de kop “Uitleg Oefenen.nl” verschijnt aan het begin de tekst “Inloggen op Oefenen.nl” en vanaf 1:14 het logo “Oefenen.nl” samen met de tekst “We leren altij”. Bezoekers die blind of slechtziend zijn, krijgen deze visuele informatie niet mee. Om aan succescriterium 1.2.3 te voldoen, kan een geschreven tekst worden toegevoegd als media-alternatief. Voor volledige toegankelijkheid volgens succescriterium 1.2.5 moet er echter een audiobeschrijving worden toegevoegd waarin visuele elementen zoals logo’s en teksten worden benoemd.

Op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/taalhuis.html bevat een video aan het eind, vanaf 1:35, het logo “NOS”. Ook hier geldt dat deze visuele informatie niet beschikbaar is voor bezoekers die niet kunnen zien. De beste oplossing is het toevoegen van een audiobeschrijving die namen, functies, logo’s en teksten beschrijft. Een geschreven media-alternatief is mogelijk, maar voor naleving van succescriterium 1.2.5 is een audiobeschrijving verplicht.

Op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html wordt onder de kop “Hoe kunnen we je helpen?” een video getoond waarin tussen 0:02 en 0:05 de tekst “Heeft u vragen over de overheid?” en het logo van “de Bibliotheek informatiepunt Digitale Overheid” in beeld verschijnen. Dit logo is aan het einde van de video opnieuw zichtbaar vanaf 1:08. Deze visuele informatie is niet toegankelijk voor bezoekers die blind of slechtziend zijn. Daarom moet er een audiobeschrijving worden toegevoegd die deze elementen beschrijft, zodat alle bezoekers de inhoud van de video volledig kunnen begrijpen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html voldoen de video’s niet aan succescriterium 1.2.5. Dit criterium vereist dat er een audiobeschrijving aanwezig is bij video’s met belangrijke visuele informatie. In deze video’s is er voldoende ruimte binnen het bestaande audiokanaal om extra informatie toe te voegen. Daarom is het aanbieden van een media-alternatief hier niet toegestaan als oplossing. Een audiobeschrijving is noodzakelijk om de video’s toegankelijk te maken voor bezoekers die de visuele inhoud niet of niet goed kunnen zien.

Op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/taalhuis.html ontbreekt bij de video eveneens een audiobeschrijving. Ook in deze video is er voldoende ruimte in het bestaande audiokanaal om aanvullende audio toe te voegen. Volgens succescriterium 1.2.5 is een media-alternatief niet toegestaan als oplossing in dit geval. Een audiobeschrijving is verplicht om de video begrijpelijk te maken voor bezoekers met een visuele beperking.

Op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html is hetzelfde probleem aanwezig. De video bevat belangrijke visuele informatie, maar er is geen audiobeschrijving toegevoegd. Aangezien er voldoende ruimte is binnen het originele audiokanaal om extra audio op te nemen, voldoet de video niet aan succescriterium 1.2.5. Het toevoegen van een audiobeschrijving is noodzakelijk om deze video volledig toegankelijk te maken.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekborne.nl/ staat een groep radioknoppen, voorafgegaan door de tekst “Zoeken in”. Visueel vormen deze knoppen een samenhangende groep, maar deze relatie is niet vastgelegd in de HTML-code. Dit zorgt ervoor dat hulpsoftware de samenhang niet kan herkennen. Om dit op te lossen moeten de radioknoppen in een fieldset-element worden geplaatst. Gebruik het legend-element om de groep een naam te geven en zet daarin de tekst “Zoeken in”.

Op pagina https://www.bibliotheekborne.nl/ staat onder andere de kop “Kom langs en ontdek de bieb!” direct gevolgd door een andere kop van hetzelfde niveau, namelijk “Doe”. Ook “Maak jij al gebruik van onze app?” wordt meteen gevolgd door “Download de app”. Wanneer twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, is dat een onjuiste toepassing van kopstructuur. Hetzelfde probleem komt voor op pagina https://www.bibliotheekborne.nl/contact.html bij de koppen “Geen antwoord op je vraag gevonden? Neem contact met ons op via:” en “Telefoon”. Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html staan de koppen “Thema’s” en “Taal” ook direct onder elkaar zonder inhoud. Dit zorgt voor een verwarrende structuur voor bezoekers die hulpsoftware gebruiken. Controleer ook andere pagina’s op vergelijkbare kopstructuurfouten.

Op pagina https://www.bibliotheekborne.nl/ staat onder de kop “Kom langs en ontdek de bieb!” twee ul-elementen direct achter elkaar, terwijl ze samen één visuele en semantische lijst vormen. Door de lijst op te splitsen in twee afzonderlijke ul-elementen, wordt de inhoud voor schermlezers als twee losse lijsten gepresenteerd. Dit verstoort de logische structuur van de pagina en kan tot verwarring leiden. Deze items moeten in één ul-element worden geplaatst om de semantische samenhang te behouden.

Op pagina https://www.bibliotheekborne.nl/contact/digitale-toegankelijkheid.html zijn de teksten “Huidige status:” en “Contact” visueel als kop opgemaakt, maar niet als kop gemarkeerd in de HTML. Daardoor zijn deze teksten niet als kop herkenbaar voor hulpsoftware. Dit belemmert bezoekers die hulpsoftware gebruiken bij het scannen of navigeren door de inhoud. De oplossing is om deze teksten te markeren met het juiste HTML-element voor koppen, zoals h2 of h3, afhankelijk van de hiërarchie op de pagina. Zo komt de visuele structuur overeen met de structuur in de code.

Op pagina https://www.bibliotheekborne.nl/privacy-statement.html staat onder de kop “Doorgifte aan derden” bij de tekst “Landelijke inlogsysteem” een lijst met vier items. Deze opsomming is visueel herkenbaar als lijst, maar in de HTML ontbreekt de juiste markering. Tekst die eruitziet als een lijst, moet ook als zodanig worden gemarkeerd in de code met ul- of ol-elementen. Dit helpt bezoekers die hulpsoftware gebruiken, doordat de lijst als groep wordt aangekondigd en de gebruiker weet hoeveel items volgen.
Op dezelfde pagina ontbreekt bij de opsomming na “De volgende gegevens worden met de KB gedeeld:” ook de juiste HTML-markering. De inhoud ziet eruit als een lijst, maar is niet als zodanig gecodeerd. Hierdoor is de structuur onduidelijk voor schermlezers. De tekst moet worden opgemaakt met ul- of ol-elementen, zodat de structuur overeenkomt met de visuele weergave.
Op dezelfde pagina is er een vergelijkbaar probleem onder de tekst “Hiervoor worden de volgende gegevens door de KB met de Bibliotheek Borne gedeeld:”. Ook hier is sprake van een visuele lijst die in de HTML niet als zodanig is gemarkeerd. Gebruik ul- of ol-elementen om deze opsomming semantisch correct te maken, zodat hulpsoftware deze informatie op een toegankelijke manier kan overbrengen.

In het PDF-document op https://www.bibliotheekborne.nl/dam/bestanden/uitleenreglement-bibliotheek-bornejuni2023.pdf is op pagina 1 de tekst “Artikel 1 Algemeen” visueel als kop opgemaakt, maar in de tagstructuur als paragraaf gemarkeerd. Hierdoor komt de structuur in de code niet overeen met de visuele structuur. De p-tag moet worden vervangen door een h-tag, zodat schermlezers de tekst correct als kop kunnen herkennen en gebruikers eenvoudig kunnen navigeren.

In het PDF-document op https://www.bibliotheekborne.nl/dam/bestanden/uitleenreglement-bibliotheek-bornejuni2023.pdf staat op pagina 2 onder “Artikel 6: Beëindiging lidmaatschap” een lijst met vijf items. Deze lijst is in de tags weergegeven met vijf afzonderlijke L-tags, zonder correcte lijststructuur. Lijsten moeten worden opgebouwd met de juiste combinatie van L- en LI-tags, zodat schermlezers het aantal items aankondigen en de structuur duidelijk is voor blinde bezoekers.
In hetzelfde document komt op pagina 4 en 5 een visuele lijst voor met negen items. Deze lijst is in de tagstructuur verkeerd gemarkeerd, namelijk met slechts vier L-tags. Ook hier ontbreekt de correcte lijststructuur, waardoor de inhoud niet toegankelijk wordt gepresenteerd. De lijst moet worden hersteld met een volledige en correcte markering met L- en LI-tags.

In het PDF-document op https://www.bibliotheekborne.nl/dam/bestanden/formulier_ik_willerentaalhuis-borne-web.pdf ontbreekt een semantische codelaag volledig. Hierdoor is de inhoud ontoegankelijk voor schermlezers. Er kunnen geen koppen of afbeeldingen worden herkend, wat inhoudt dat de structuur en betekenis van de inhoud verloren gaan voor bezoekers die hulpsoftware gebruiken. Omdat de codelaag ontbreekt, kan het document niet volledig worden onderzocht. Zodra dit is opgelost, kunnen er mogelijk aanvullende toegankelijkheidsproblemen aan het licht komen.

Op alle pagina’s van het domein https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything staat naast het zoekveld een selectorelement. Visueel bevat de dropdown 5 opties. Maar in de code is het een lijst die niet-interactieve elementen bevat – het label “Zoek in” en een horizontale scheidingslijn. Deze elementen zijn niet verborgen voor ondersteunende technologieën, waardoor de schermlezer ze meetelt als onderdeel van de lijst en 7 items aankondigt, wat meer is dan er daadwerkelijk beschikbaar zijn. Verberg niet-interactieve elementen voor ondersteunende technologieën met role=“presentation” of aria-hidden=“true”, of gebruik passende rollen zoals role=“separator” voor scheidingslijnen. Hierdoor kondigt de schermlezer alleen de echte menu-opties aan.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything bevat een zijbalk met filters groepslabels zoals “Materiaal”, “Inhoud”, “Auteur” en andere, die niet gekoppeld zijn aan hun groepen keuzevakjes. Hierdoor ziet de schermlezer niet dat er een relatie is tussen het groepslabel en de keuzevakjes (checkboxes). De individuele labels van elk keuzevakje worden voorgelezen zonder het groepslabel. Dit kan worden opgelost door gebruik te maken van fieldset- en legend-elementen. Andere oplossingen zijn ook mogelijk.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything staat boven de zoekresultaten een sorteerknop. Afhankelijk van de geselecteerde waarde in de bijbehorende combobox en de sorteervolgorde verandert het uiterlijk van de knop. Maar dit wordt niet weerspiegeld in de code. Voeg een korte tekstbeschrijving van de sorteerrichting toe — bijvoorbeeld met aria-label of aria-live — om aan te geven of de lijst oplopend of aflopend gesorteerd is.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything wordt in elke boekkaart het strong-element misbruikt voor stijldoeleinden in de auteursnaam. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken. Gebruik hiervoor CSS.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&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.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 zijn de volgende teksten niet als koppen opgemaakt: “Onderwerp”, “Inhoud” en “Serie”. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Hetzelfde probleem is aanwezig op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/NBC_PLUS/PPN:444483756?qs=%20%20&scope=anything&src=921&filterAvailableTitles=false&filter=&titleNavIndex=3&titleNavRouteName=search&titleNavTotal=49017 met dezelfde teksten.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op het tabblad “Recensies” een knop met een “?”-icoon die een dialoogvenster opent. In de dialoog onder de kop “Recensies” is een tekstblok met meerdere alinea’s onjuist opgemaakt als één div-element. Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code. Hetzelfde probleem doet zich voor op dezelfde pagina bij de tekst in het dialoogvenster dat geopend wordt vanuit de “?”-knop op het tabblad “Tags”.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op het tabblad “Recensies” een knop met een “?”-icoon die een dialoogvenster opent. In de dialoog zijn de volgende teksten onjuist opgemaakt met strong in plaats van met echte kop-elementen: “Meld je aan en zorg voor een nickname”, “Recensie schrijven”, en “Recensies van anderen ‘liken’”. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel. Hetzelfde probleem doet zich voor op dezelfde pagina bij de kop “Tags toevoegen” in het dialoogvenster dat geopend wordt vanuit de “?”-knop op het tabblad “Tags”.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474 staat een groep radioknoppen (“Tags” en “Nickname”), voorafgegaan door de tekst “Zoek”. Hoewel deze elementen visueel een groep vormen, is deze relatie niet programmatisch vastgelegd in de HTML. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de 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 “Zoek op”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything is de volgorde van HTML-elementen binnen de boekkaarten onjuist: de afbeeldingen staan boven de koppen. De huidige volgorde is afbeelding-link, tekst (naam auteur), kop (boektitel), overige tekst en knoppen. Dit komt doordat de koppen zich niet bovenaan de code van elke boekkaart bevinden. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/contact/contactformulier.html bevat het formulier invoervelden voor persoonlijke gegevens, zoals achternaam, e-mailadres en telefoonnummer. Deze velden missen het autocomplete-attribuut. Voor velden waarin persoonlijke informatie wordt ingevuld, is het belangrijk om dit attribuut toe te voegen. Hiermee kunnen browsers en hulpsoftware ondersteuning bieden bij het invullen, bijvoorbeeld door eerder gebruikte gegevens automatisch in te vullen. Voeg daarom het autocomplete-attribuut toe aan alle relevante velden in dit formulier. Op https://www.w3.org/Translations/WCAG22-nl/#input-purposes staat welke waardes verplicht zijn voor correcte toepassing van dit attribuut.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website https://www.bibliotheekborne.nl/ op een klein scherm wordt bekeken, verschijnt in de footer een navigatiemenu. De opties “Home”, “Menu” en “Zoeken” veranderen bij toetsenbordfocus alleen van kleur: het icoon en de tekst worden dan oranje in plaats van wit. Deze kleurverandering is de enige visuele aanduiding van focus. Voor bezoekers met een visuele beperking of kleurenblindheid is dat onvoldoende. Er moet een duidelijke focusindicator worden toegevoegd, zoals een onderstreping, een dikkere rand of een verandering van de achtergrondkleur met voldoende contrastratio, zodat ook toetsenbordgebruikers goed kunnen zien waar de focus zich bevindt.

Op pagina https://www.bibliotheekborne.nl/contact/contactformulier.html wordt bij de invoervelden “Onderwerp” en “Wil je een bijlage meesturen?” een aangepaste focusindicator gebruikt. Deze bestaat enkel uit een verandering van de achtergrondkleur. De contrastratio tussen de normale en de gefocuste toestand is lager dan 3,0:1. Hierdoor is de focus vaak niet zichtbaar voor bezoekers met een visuele beperking of kleurenblindheid. Ook toetsenbordgebruikers kunnen zo niet goed zien welk element actief is. Voeg een extra visuele aanduiding toe, zoals een duidelijke rand of onderstreping, om de focus goed zichtbaar te maken.

Op pagina https://www.bibliotheekborne.nl/collectie/inspiratie/literatuur/meer-boeken.html heeft de combobox naast het label “Sorteer op:” een focusindicator die alleen werkt via kleurverandering. Onderaan dezelfde pagina vertoont de combobox naast “Spring direct naar pagina:” hetzelfde gedrag. De contrastratio tussen de gefocuste en niet-gefocuste toestand is te laag en voldoet niet aan de minimale eis van 3,0:1. De focus moet beter zichtbaar worden gemaakt met een extra visueel kenmerk.

Op pagina https://www.bibliotheekborne.nl/collectie/inspiratie/films/alle-films.html komt dit probleem ook voor. De toetsenbordfocus bij de comboboxen is alleen te zien aan de verandering van kleur en moet worden aangepast met een duidelijkere focusindicator, zodat alle bezoekers kunnen zien welk element op dat moment actief is.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website is een zoekveld aanwezig. Wanneer dit veld de hover-staat krijgt, verschijnt de placeholdertekst in grijs (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED). Dit levert een contrastratio op van 3,9:1. In de focus-status is de achtergrondkleur lichtoranje (HEX #FDE5D0) met dezelfde grijze placeholdertekst, wat resulteert in een contrastratio van 3,8:1. Beide situaties voldoen niet aan de minimale eis van 4,5:1 voor kleine tekst. De placeholdertekst moet daarom een kleur krijgen met voldoende contrast ten opzichte van de achtergrond. Dit probleem doet zich ook voor op kleine schermen wanneer het zoekmenu “Zoeken” is geopend.

Op pagina https://www.bibliotheekborne.nl/zoekresultaten.website.html?q=borne worden in de zijbalk onder de filtersectie aantallen weergegeven die het aantal zoekresultaten tonen per type of trefwoord. Deze cijfers staan in donkergrijs (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED), met een contrastratio van 3,9:1. Omdat het hier om kleine tekst gaat, voldoet dit niet aan de vereiste contrastratio van minimaal 4,5:1. Pas de kleur van de cijfers of van de achtergrond aan om voldoende contrast te bieden.

Op pagina https://www.bibliotheekborne.nl/zoekresultaten.website.html?q=borne staan in de zijbalk onder de kop “Verfijnen op resultaten” accordeons met de titels “Type” en “Trefwoorden”. Wanneer deze titels toetsenbordfocus krijgen, verandert de tekstkleur 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 is, moet de contrastratio minimaal 4,5:1 zijn. De kleur van de gefocuste tekst of de achtergrond moet worden aangepast om dit contrastniveau te behalen.

Op pagina https://www.bibliotheekborne.nl/contact/onze-vestigingen/vestiging.12161505.html/bibliotheek-borne/ staat onder de kop “Openingstijden” tekst in grijs (HEX #757575), zoals “maandag” en “Personeel aanwezig van 13:30 tot 17:30 uur”, op een oranje achtergrond (HEX #FDE5D0). De contrastratio bedraagt 3,8:1. Omdat het hier gaat om tekst kleiner dan 19px, is dit onvoldoende. De minimale vereiste contrastratio is 4,5:1. De tekst- of achtergrondkleur moet worden aangepast om aan deze eis te voldoen en de leesbaarheid voor bezoekers met een visuele beperking te waarborgen.

Op pagina https://www.bibliotheekborne.nl/contact/veelgestelde-vragen/in-de-bibliotheek.html staan onder het kopje “Naar de Bibliotheek” accordeons. Wanneer deze elementen toetsenbordfocus krijgen, verandert de tekstkleur van zwart naar oranje (HEX #FF7320) tegen een witte achtergrond. Deze combinatie levert een contrastratio op van 2,7:1. Omdat de tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn. Pas de tekstkleur of de achtergrondkleur aan om het vereiste contrastniveau te bereiken.

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

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekborne.nl/ wordt in de cookiebanner een knop getoond met de tekst “Lees hier meer over cookies”. Deze knop opent een dialoogvenster met de knoppen “Akkoord” en “Niet akkoord”. Beide knoppen gebruiken een aangepaste focusindicator met een oranje rand (HEX #FF7320) op een witte achtergrond. De contrastratio tussen deze kleuren is 2,7:1. Omdat de standaard focusindicator hier is vervangen door een met CSS aangepaste versie, geldt een minimale contrastratio van 3,0:1. De huidige aanduiding voldoet hier niet aan en moet worden aangepast voor voldoende zichtbaarheid bij toetsenbordgebruik.

Op pagina https://www.bibliotheekborne.nl/ wordt een carrousel gebruikt waarin kleine grijze stippen (HEX #9A9A9A) op een witte achtergrond aangeven hoeveel slides er zijn en welke slide actief is. De contrastratio tussen de stippen en de achtergrond is 2,8:1. Omdat het hier gaat om actieve gebruikersinterface-elementen die betekenis overbrengen, moet de contrastratio minimaal 3,0:1 zijn. Pas de kleur van de stippen aan om dit contrastniveau te bereiken.

Op pagina https://www.bibliotheekborne.nl/ verandert bij toetsenbordfocus de kleur van sommige links van zwart naar oranje (HEX #FF7320), zoals bij “Kom naar het Informatiepunt Digitale Overheid”, “Breng me naar Facebook” en “Ik ben 18-”. De oranje rand tegen een witte achtergrond heeft een contrastratio van 2,7:1, wat lager is dan de vereiste 3,0:1 voor informatieve elementen. Ditzelfde probleem komt voor op andere pagina’s, zoals https://www.bibliotheekborne.nl/jeugd-en-onderwijs/taalhuis.html, waar links zoals “Alle spreekuren” en “Meer over deze cursus” visueel als knoppen zijn opgemaakt. Ook op pagina https://www.bibliotheekborne.nl/contact/contactformulier.html is de knop “Verzenden” niet voldoende zichtbaar bij toetsenbordfocus. Pas de focuskleur of de achtergrondkleur aan zodat de contrastratio minimaal 3,0:1 bedraagt.
Op pagina https://www.bibliotheekborne.nl/contact/veelgestelde-vragen/in-de-bibliotheek.html staan onder het kopje “Naar de Bibliotheek” accordeons. Wanneer deze elementen toetsenbordfocus krijgen, veranderen de pictogrammen (“+” en “–”) van zwart naar oranje (HEX #FF7320). Deze kleur op een witte achtergrond levert een contrastratio op van 2,7:1. Omdat deze pictogrammen informatieve elementen zijn, geldt een minimale contrastratio van 3,0:1. De kleur van het pictogram of de achtergrond moet worden aangepast om aan deze eis te voldoen.

Op pagina https://www.bibliotheekborne.nl/zoekresultaten.website.html?q=borne, in de zijbalk onder de kop “Verfijnen op resultaten”, bevinden zich de accordeons “Type” en “Trefwoorden”. Wanneer deze accordeons toetsenbordfocus krijgen, veranderen de pijltjesiconen van zwart naar oranje (HEX #FF7320) op een witte achtergrond. Ook hier is de contrastratio 2,7:1. De minimale vereiste contrastratio voor informatieve elementen is 3,0:1. Verhoog het contrast tussen de icoon en de achtergrond om dit toegankelijkheidsprobleem op te lossen.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything hebben sommige interactieve elementen een aangepaste toetsenbordfocus-indicator. Voor de link “Inloggen” in de header is dit een grijze (HEX #A3A2A3) rand op een lichtgrijze (HEX #EFEFEF) achtergrond, waardoor de contrastverhouding tussen deze kleuren 2,2:1 is. Voor de knop “Zoeken”, de knop “Wis alle filters”, de keuzevakjes in de sectie “Filters” en enkele andere elementen is de focus een grijze (HEX #ABAAAB) rand op een witte achtergrond, waardoor de contrastverhouding 2,3:1 is. Beide waarden liggen onder het vereiste minimum van 3,0:1.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 is een soortgelijk probleem aanwezig bij toetsenbordfocus op de tabbladen “Waar is het?”, “Meer info” en andere, op de link “Toon exemplaren elders” en andere elementen. Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474 speelt hetzelfde bij de radioknoppen “Tags” en “Nickname”, het zoekveld, de zoekknop en andere elementen.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything staan in de boeken iconen in verschillende kleuren die categorieën representeren. Sommige van deze iconen hebben onvoldoende contrast. Op pagina 3 heeft het boek “Moet je die Mop zien!” bijvoorbeeld een geel (HEX #FFFF00) icoon (“Communicatie”) op een witte achtergrond, met een contrastverhouding van 1,1:1. Het boek “Stop: het verdriet van een verslaving” heeft een roze (HEX #FF7BFF) icoon (“Lichaam en Gezondheid”) op een witte achtergrond, met een contrastverhouding van 2,2:1. Voor informatieve elementen moet de contrastverhouding minimaal 3,0:1 zijn. Controleer ook de andere iconen bij andere boeken.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 is er een tabnavigatie. Het huidige tabblad heeft een omlijning met onvoldoende kleurcontrast. De grijze omlijning (HEX #EDEDED) op een witte achtergrond heeft een contrastverhouding van 1,2:1, wat lager is dan het aanbevolen minimum van 3,0:1 voor dergelijke visuele aanduidingen. Zorg ervoor dat de omlijningskleur voldoende contrast heeft tegen de achtergrond zodat deze goed waarneembaar is. Hetzelfde probleem doet zich voor bij de vergelijkbare tabbladen op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/contact/contactformulier.html gebruikt een formulier alleen HTML5-validatie als foutmeldingen. Deze foutmeldingen verdwijnen te snel. Er is dus tijdslimiet ingesteld. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything verschijnt er een dialoogvenster wanneer een bezoeker niet is ingelogd en op de knoppen “Reserveren” of “Mijn lijsten” naast een boek klikt. Na enkele seconden wordt de bezoeker automatisch doorgestuurd naar de inlogpagina, zonder voorafgaande waarschuwing. Zorg dat bezoekers de mogelijkheid hebben om deze tijdslimiet uit te zetten, aan te passen of te verlengen. Hetzelfde probleem doet zich voor bij identieke dialogen op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 en op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/NBC_PLUS/PPN:444483756?qs=%20%20&scope=anything&src=921&filterAvailableTitles=false&filter=&titleNavIndex=3&titleNavRouteName=search&titleNavTotal=49017 bij het dialoogvenster dat wordt geopend via de knop “Aanvragen”.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

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

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

Het pdf-document https://www.bibliotheekborne.nl/dam/bestanden/uitleenreglement-bibliotheek-bornejuni2023.pdf heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het pdf-document.

Pagina’s https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=%20%20&scope=anything, https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 en https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/community-list/10673 hebben dezelfde tekst in het title-element van de pagina: “Catalogus”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekwierden.nl/zoekresultaten.website.html?q=boek is de volgorde van de toetsenbordfocus niet logisch. Wanneer de zoekknop in de header wordt geactiveerd, springt de focus direct naar de zoekresultaten. Dit is verwarrend, omdat de filters visueel boven de resultaten in de zijbalk worden weergegeven. De volgorde van de focus moet worden aangepast zodat deze overeenkomt met de visuele structuur van de pagina: eerst de filters, daarna pas de zoekresultaten. Op die manier blijft de navigatie logisch en begrijpelijk voor bezoekers die met het toetsenbord werken.

Op alle pagina’s van de website https://www.bibliotheekborne.nl/ opent de knop “Lees hier meer over cookies” in de cookiebanner een dialoogvenster. Momenteel kan de toetsenbordfocus uit dit venster ontsnappen en terechtkomen op de onderliggende inhoud van de pagina. Bij dialoogvensters moet de focus binnen het venster blijven zolang het actief is. Dit voorkomt verwarring en zorgt dat gebruikers met het toetsenbord correct kunnen navigeren. De focus moet vastgezet worden binnen het dialoogvenster totdat de bezoeker het venster sluit via de sluitknop of met de ESC-toets. Een andere oplossing is om het venster automatisch te sluiten wanneer de focus het venster verlaat.

Wanneer de website op een klein scherm wordt bekeken, verschijnt onderaan de pagina een hamburgerknop die een mobiel menu opent. Zodra dit menu is geopend, is het momenteel mogelijk om met het toetsenbord buiten het menu te navigeren, terwijl het menu zichtbaar blijft. Dit veroorzaakt verwarring en kan leiden tot foutieve interactie. Als het menu actief is, moet de toetsenbordfocus binnen het menu blijven. Zorg ervoor dat de focus niet kan ontsnappen totdat het menu wordt gesloten via de sluitknop of de ESC-toets. Als alternatief kan het menu automatisch worden gesloten wanneer de focus het menu verlaat. Zo blijft de bediening consistent en toegankelijk voor alle gebruikers.

Op alle pagina’s van het domein, wanneer een bezoeker begint met het navigeren van een pagina met het toetsenbord, komt de focus direct op een onzichtbaar interactief element in de header terecht. 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://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything is er een sectie “Filter”. In sommige filteropties (bijvoorbeeld “Materiaal” of “Auteur”) staat een knop “Meer…”. Wanneer een bezoeker hierop klikt, worden er extra filteropties toegevoegd. De toetsenbordfocus verplaatst zich niet naar de eerst nieuw toegevoegde optie, maar naar de knop “Minder…” eronder. Wanneer nieuwe filteropties worden geladen, moet de toetsenbordfocus automatisch worden verplaatst naar de eerst nieuw toegevoegde optie.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 zijn er tabbladen die bestaan uit secties met verborgen inhoud, die zichtbaar wordt wanneer een bezoeker op het tabblad klikt. De volgorde van de toetsenbordfocus werkt niet zoals verwacht. Tabbladen bestaan uit tablinks en tabpanelen. Eén van de tabpanelen is zichtbaar, de rest verborgen. Als een bezoeker op een tab klikt of deze activeert met het toetsenbord, verschijnt de inhoud van het bijbehorende tabpaneel. De pijltjestoetsen worden gebruikt om door de tablinks te navigeren. Als de toetsenbordfocus het actieve tabblad bereikt, moet de focus naar de inhoud van het bijbehorende tabpaneel gaan. Dit is de verwachte focusvolgorde. Lees er meer over op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
Hetzelfde probleem doet zich voor bij vergelijkbare tabbladen op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staan twee carrousels. De toetsenbordfocus is hier niet logisch. De focus komt op twee onzichtbare elementen terecht (“Slide 1 of 2” en “Slide 2 of 2”, uitgesproken door schermlezers). Daarnaast gaat de focus eerst door alle boeken in de carrousel en pas daarna naar de navigatieknoppen, wat niet overeenkomt met de visuele volgorde.

Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis. Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks. Hetzelfde probleem doet zich voor bij de carrousel op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/NBC_PLUS/PPN:444483756?qs=%20%20&scope=anything&src=921&filterAvailableTitles=false&filter=&titleNavIndex=3&titleNavRouteName=search&titleNavTotal=49017.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything is ingezoomd, opent de knop “Zoekresultaten verfijnen” de filter-sidebar, die in de code een dialoogvenster is. Op dit moment kan de toetsenbordfocus uit het geopende venster ontsnappen en naar de onderliggende pagina gaan. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden ingesteld. Wanneer het venster actief is, moet de toetsenbordfocus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het venster te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/activiteiten.html staan afbeeldingen met tekstalternatieven, bijvoorbeeld onder de kop “Activiteiten”. De alt-teksten herhalen hier de tekst van de kop in de buurt van de afbeelding. Dat is niet correct. In dit geval moet het alt-attribuut leeg worden gelaten zodat de afbeelding als decoratief wordt gemarkeerd. Ook is het aan te raden om de link rondom de afbeelding te verwijderen. Als het toch gewenst is dat de afbeelding klikbaar blijft, kan het evenement worden opgemaakt als een card. De titel van het evenement fungeert dan als enige link, terwijl de volledige card klikbaar wordt gemaakt met JavaScript.

Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html staat onder de kop “Oefenen.nl” de link “Cursussen” met een toegankelijke naam die door schermlezers wordt uitgesproken als “before Cursussen”. Deze naam is verwarrend en beschrijft niet duidelijk het doel van de link. De toegankelijke naam moet aangepast worden zodat duidelijk is waar de link naartoe leidt.

Op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html komt hetzelfde probleem voor bij de link “Raad & Daad”, en op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html bij de link “Jeugd | 6-12 jaar”. Ook hier worden onduidelijke toegankelijke namen gebruikt. Deze moeten worden aangepast zodat schermlezers een betekenisvolle en begrijpelijke beschrijving kunnen geven van het linkdoel.

Op pagina https://www.bibliotheekborne.nl/contact/word-lid-van-de-bibliotheek.html staan onder de kop “Onze Bibliotheek abonnementen” twee links met dezelfde linktekst: “Word lid!”. Deze tekst maakt niet duidelijk waar de link naartoe leidt en kan verwarrend zijn, vooral voor bezoekers met cognitieve beperkingen of voor schermlezergebruikers. Linkteksten moeten beschrijven wat de bezoeker kan verwachten. Voeg daarom extra context toe aan de linktekst, bijvoorbeeld door te verwijzen naar het type abonnement. Als de context al visueel wordt weergegeven, kan de aanvullende tekst visueel verborgen worden, zodat de zichtbare opmaak bewaard blijft en de link toch toegankelijk is.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything fungeert het logo bovenaan de pagina als een link, maar de toegankelijke naam is niet duidelijk genoeg – “Wise Portal Bibliotheek Borne”. Zorg ervoor dat de linknaam de bestemming goed beschrijft, bijvoorbeeld “Logo de Bibliotheek Borne, ga naar de startpagina”. Zie ook succescriterium 1.1.1.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat onder het zoekveld de tekst “Resultaat 5 van 18436”, met pijltjesiconen die als links functioneren om naar andere resultaten te navigeren. Deze links hebben onvoldoende context. Hoewel ziende gebruikers begrijpen dat “Vorige” en “Volgende” verwijzen naar respectievelijk het vorige en volgende resultaat, is dit niet duidelijk voor slechtziende gebruikers of bezoekers die gebruikmaken van schermlezers. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord ‘resultaat’. Hetzelfde probleem is aanwezig op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/NBC_PLUS/PPN:444483756?qs=%20%20&scope=anything&src=921&filterAvailableTitles=false&filter=&titleNavIndex=3&titleNavRouteName=search&titleNavTotal=49017.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=%20%20&scope=anything wordt bekeken op een klein scherm, verschijnt het “?”-icoon naast “Resultaten voor ’ ’ in ‘Alles’” en functioneert als een link. Dit icoon is verborgen met aria-hidden=“true” en heeft geen tekstalternatief, waardoor de link ontoegankelijk is. Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn mogelijk.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.bibliotheekborne.nl/ staat in de footer een kop met de tekst “Snel naar”. Deze aanduiding is te algemeen en biedt geen inhoudelijke context. Aangezien alle links per definitie leiden naar andere pagina’s, geeft een kop zoals “Snel naar” geen extra informatie voor bezoekers. Voor gebruikers van schermlezers is dit problematisch, omdat zij via koppen de structuur van een pagina verkennen en inschatten waar relevante informatie staat. De kop boven deze set links moet specifieker zijn en aangeven wat voor soort links er volgen, bijvoorbeeld “Populaire pagina’s” of “Belangrijke onderwerpen”.

Op verschillende pagina’s van de website worden carrousels gebruikt met navigatieknoppen die voorzien zijn van de toegankelijke namen “Vorige” en “Volgende”. Deze aanduidingen geven onvoldoende informatie over de functie van de knoppen. Voor bezoekers die hulpsoftware gebruiken, moet het meteen duidelijk zijn dat het om bediening van een carrousel gaat. De toegankelijke namen moeten worden aangepast naar “Vorige slide” en “Volgende slide”. Dit probleem is zichtbaar op de homepage https://www.bibliotheekborne.nl/ onder de carrousel direct onder de header en op pagina https://www.bibliotheekborne.nl/activiteiten.html onder de kop “Inspiratie nodig? Dit zijn onze aanraders”. Controleer ook andere pagina’s waar carrousels worden gebruikt.

Op pagina https://www.bibliotheekborne.nl/activiteiten/cursussen/oefenen.html staan twee iframes met video’s. Beide iframes hebben als title-attribuut de generieke aanduiding “Video”. Deze titel is niet uniek en biedt geen informatie over de inhoud. Iframes moeten een beschrijvende en betekenisvolle titel hebben die aangeeft welk type inhoud wordt getoond en waar de video over gaat. Dit helpt blinde bezoekers bij het beslissen of zij de video willen bekijken. Ditzelfde probleem komt voor op pagina https://www.bibliotheekborne.nl/activiteiten/raad-en-daad/informatiepunt-digitale-overheid.html en op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/taalhuis.html. Ook daar worden iframes met video’s gebruikt met ontoereikende beschrijvingen. Voeg in het title-attribuut van elk iframe een duidelijke beschrijving toe, bijvoorbeeld “Uitlegvideo over Oefenen.nl” of “Voorlichtingsvideo Informatiepunt Digitale Overheid”, zodat de inhoud toegankelijk en begrijpelijk wordt voor alle bezoekers.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything staat naast het zoekveld een selectievakje met “Alles”. Dit is een knop met de toegankelijke naam “SEARCH_SELECT_SCOPE Alles”. Deze naam is niet beschrijvend en bevat bovendien niet-leesbare tekens (underscores). De tekst van links mag geen symbolen bevatten zoals streepjes en underscores. Deze karakters maken het doel van de link onduidelijk. Verwijder de niet-leesbare karakters en herschrijf de tekst. Zorg dat de linktekst duidelijk en beschrijvend is. Zie ook succescriterium 3.1.2.

Op https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/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.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op het tabblad “Lijsten” een tabel. De tabelkoppen waarmee gesorteerd kan worden, zijn niet duidelijk herkenbaar als interactieve elementen. Er is geen visuele of programmatische aanwijzing dat erop klikken de tabel sorteert — de sorteerpijl verschijnt pas nadat de gebruiker ermee interacteert. Daardoor kunnen zowel ziende gebruikers als schermlezergebruikers niet anticiperen op de sorteermogelijkheid. Maak de sorteerbare kolomkoppen duidelijk herkenbaar als interactieve bedieningselementen vóór interactie. Voeg een zichtbaar kenmerk toe (bijvoorbeeld een pijl-icoon of de tekst “sorteerbaar”) en zorg voor een toegankelijke naam of rol zodat gebruikers begrijpen wat de functie van elke kop is. Hetzelfde probleem speelt op het vergelijkbare “Lijsten”-tabblad op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

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” opent een dialoogvenster. In dit venster is de toetsenbordfocus niet zichtbaar op de “X”-knop om het venster te sluiten. De focusindicator op deze knop moet altijd goed zichtbaar zijn, zodat bezoekers die met het toetsenbord navigeren kunnen zien waar ze zich bevinden en weten wanneer ze op Enter moeten drukken. Voeg daarom een duidelijke focusstijl toe met voldoende contrast, bijvoorbeeld een rand, onderstreping of achtergrondkleur.

Op alle pagina’s van de website, zoals op https://www.bibliotheekborne.nl/, bevindt zich in de header een keuzemogelijkheid tussen de radio buttons “Catalogus” en “Site”. Deze radio buttons zijn wel met het toetsenbord te bereiken, maar de focus is visueel niet zichtbaar. Elk interactief element moet voorzien zijn van een goed zichtbare focusindicator, zodat duidelijk is welk element actief is. Pas de opmaak van deze radio buttons aan zodat de focus visueel herkenbaar is, met voldoende contrast ten opzichte van de achtergrond.
Op pagina https://www.bibliotheekborne.nl/jeugd-en-onderwijs/jeugd-en-jongeren/6-12/mediawijsheid.html staan meerdere afbeeldingen die functioneren als links, bijvoorbeeld onder de koppen “Aan de slag met mediawijze thema’s” en “Schermtijd en mediagebruik”. Deze afbeeldingslinks zijn focusbaar, maar de toetsenbordfocus is onzichtbaar. Interactieve elementen moeten altijd een duidelijke visuele focusindicator hebben. Zorg ervoor dat bij toetsenbordnavigatie zichtbaar is welke afbeelding op dat moment is geselecteerd, bijvoorbeeld door een rand, schaduw of andere visuele aanduiding met voldoende contrast.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 is de toetsenbordfocus niet zichtbaar op de knoppen met drie stippen (“Carrousel”) en de knop met negen stippen (“Raster”) naast “Toon als”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 bestaat een vergelijkbaar probleem. De focus is niet zichtbaar op knoppen met “?”-iconen op de tabbladen “Recensies” en “Tags”. Zorg dat de focus zichtbaar is op alle interactieve elementen.

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://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op het tabblad “Lijsten” een zoekveld. De placeholdertekst “Zoek in lijsten” wordt gebruikt als zichtbaar label, maar de toegankelijke naam is “Zoek”. De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat alle zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan. Ditzelfde probleem speelt bij een vergelijkbaar zoekveld op het tabblad “Lijsten” van pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

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

In de metagegevens van de pdf op https://www.bibliotheekborne.nl/dam/bestanden/formulier_ik_willerentaalhuis-borne-web.pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

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

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/collectie/inspiratie/literatuur/meer-boeken.html staan namen van boeken in het Engels, bijvoorbeeld "Dream count", zonder taalcode.
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Als de tekst bijvoorbeeld in het Engels is, voeg je `lang="en"` toe aan het element. Dezelfde kwestie wordt gezien op pagina https://www.bibliotheekborne.nl/collectie/inspiratie/films/alle-films.html met titels van films.

Pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything bevat meerdere elementen met Engelstalige toegankelijke namen: het zoekveld heeft de toegankelijke naam “SEARCH.SEARCH”, de knop naast het zoekveld heeft de toegankelijke naam “SEARCH_SELECT_SCOPE Alles”, de sorteerknop heeft de toegankelijke naam “SEARCH.SORTING”, de beoordelingssterren in de boekkaarten hebben aria-labels in het Engels (bijvoorbeeld “Rating: 4 out of 5 stars”), en in het dialoogvenster “Mijn lijsten” heeft de “x”-knop het aria-label “MODAL.CLOSE”. Deze labels worden door schermlezers uitgesproken volgens de uitspraakregels van de hoofdtaal van de pagina (in dit geval Nederlands). Vertaal de toegankelijke namen naar het Nederlands. Zie ook succescriteria 2.4.6 en 1.3.1. Hetzelfde probleem komt voor bij identieke elementen op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436, en ook bij knoppen voor navigatie in de carrousel die de namen “Previous” en “Next” hebben, op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474 waar de zoekknop de naam “community-search-button” heeft, de paginering op het tabblad “Lijsten” knoppen “Next” en “Previous” bevat, en op andere plaatsen van de website.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/contact/contactformulier.html wordt in het formulier de HTML5-validatie gebruikt en worden standaard HTML5-foutmeldingen weergegeven wanneer het formulier wordt ingediend met lege of onjuiste gegevens. 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 is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekborne.nl/contact/contactformulier.html bevat het formulier meerdere verplichte velden die aangeduid zijn met een asterisk (*). Wanneer een asterisk wordt gebruikt om verplichte velden aan te duiden, moet boven het formulier een duidelijke instructie worden toegevoegd, zoals: “Velden gemarkeerd met * zijn verplicht”. Dit zorgt voor duidelijkheid voor alle bezoekers, inclusief mensen die gebruikmaken van hulpsoftware.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op het tabblad “Lijsten” een zoekveld. Het zoekveld gebruikt placeholdertekst (“Zoek in lijsten”) als label, maar er ontbreekt een permanent, zichtbaar label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholdertekst kan niet als label dienen, omdat deze tekst verdwijnt zodra de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen. Voeg een label toe in de vorm van een tekst of een icoon. Hetzelfde probleem doet zich voor bij een vergelijkbaar zoekveld op het tabblad “Lijsten” van pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

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. Geef de knop een toegankelijke naam, bijvoorbeeld via het attribuut aria-label="Zoeken", zodat gebruikers weten dat hiermee een zoekopdracht wordt uitgevoerd.

Op kleine schermen is op alle pagina’s van https://www.bibliotheekborne.nl/ een menu onderaan de pagina aanwezig. Het menu-item “Zoeken” opent een venster waarin twee zoekbalken staan met knoppen die eveneens geen toegankelijke naam hebben. Ook deze knoppen moeten worden voorzien van een duidelijke toegankelijke naam.

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

Op alle pagina’s van de website https://www.bibliotheekborne.nl/ is op kleine schermen een vast menu aanwezig dat is opgebouwd met een ul-element met role="menubar" en li-elementen met role="menuitem". Deze ARIA-rollen zijn in deze context onnodig en kunnen tot problemen leiden. Daarnaast wordt binnen de submenu’s een geneste ul gebruikt met role="menu", maar de li-elementen hebben role="none" en bevatten links zonder duidelijke rol of semantiek. Hierdoor ontstaat een inconsistente en incorrecte structuur, waarbij de rol menuitem ontbreekt binnen een menurol.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything naast het zoekveld staat een selectievak met een ul-element. De items in deze lijst hebben onjuist de ARIA-rol “menuitem”. Dit zorgt ervoor dat hulpsoftware er juist minder goed mee overweg kan. Elementen met de rol “menuitem” moeten binnen een overkoepelende rol staan, zoals “menu”, “menubar” of “group”. En deze rol ontbreekt. Bovendien hoort bij deze ARIA-rollen een andere toetsenbordbediening. Die kan toegevoegd worden, maar dan moeten ook de juiste toetsenbordfuncties worden ingesteld. Voor dit eenvoudige menu is dit allemaal niet nodig. Het is daarom beter om role=“menubar” en role=“menuitem” achterwege te laten. Die zijn bedoeld voor andere, meer complexe toepassingen en niet voor een standaard menu op een website. Een betere oplossing is om hier gewoon een geneste lijst (ul) te gebruiken. Op https://www.w3.org/WAI/ARIA/apg/patterns/menu/ staat wat er nodig is om een toepassing met role=“menubar” te bouwen.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 is een sectie met content die eruitziet en werkt als tabbladen. Wanneer een bezoeker op de tabkop klikt, verschijnt nieuwe content. De “tab”-elementen hebben de juiste rollen, maar de elementen die het contentpaneel voor elke tab bevatten, missen de vereiste rol “tabpanel”. De attributen “aria-controls” ontbreken ook, waardoor hulpsoftware niet kan bepalen welke tab welk paneel opent. Bovendien heeft het actieve tab-element geen aria-selected-attribuut, waardoor een blinde bezoeker niet weet welk onderdeel momenteel geopend is. Voeg de juiste rollen en attributen toe aan de elementen. Meer hierover is te lezen op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/. Hetzelfde probleem doet zich voor bij vergelijkbare tabbladen op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op “Lijsten” een tabel. De tabelkoppen kunnen sorteren, maar hebben niet de juiste rol. Voorzie de interactieve elementen van een duidelijke toegankelijke rol, bijvoorbeeld “button”. Hetzelfde probleem doet zich voor in de tabel op het tabblad “Lijsten” van pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/title-detail/WISE/1227079?qs=*%20%20&scope=anything&titleNavIndex=4&titleNavRouteName=search&titleNavTotal=18436 staat op het tabblad “Recensies” een knop met een “?”-icoon dat een dialoogvenster opent. Dit dialoogvenster mist een toegankelijke naam. Een blinde bezoeker heeft deze naam nodig om de inhoud van het dialoogvenster te begrijpen. Schermlezers kunnen hierdoor niet doorgeven wat hier staat. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud. Hetzelfde probleem doet zich voor op dezelfde pagina bij het dialoogvenster dat wordt geopend via de “?”-knop op het tabblad “Tags”. Hetzelfde probleem is aanwezig bij vergelijkbare tabbladen op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/community/search?searchType=nickname&termControl=themapas&cWiseUserId=318474.

Op een klein scherm verschijnt er in de header een menuknop om het mobiele menu te openen. De knop geeft geen informatie over de staat van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers. Dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de menuknop. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is.

Wanneer de pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=%20%20&scope=anything op een klein scherm wordt bekeken, verschijnt er een link met een “?”-icoon naast “Resultaten voor ‘ ’ in ‘Alles’”. Deze link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft. Zie ook succescriteria 1.1.1 en 2.4.4.
Wanneer dezelfde pagina op een klein scherm wordt bekeken, opent de knop “Zoekresultaten verfijnen” een zijbalk met filters. Deze zijbalk heeft de rol van dialoog, maar geen toegankelijke naam. Omdat schermlezers de inhoud niet herkennen, is een duidelijk aria-label voor het dialoogvenster nodig.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://rijnbrink.hostedwise.nl/wise-apps/opac/branch/8901/catalog/search?qs=*%20%20&scope=anything passen filters de zoekresultaten aan, en verschijnt er een melding zoals “Resultaten: 1 - 10 (van 11475)” zonder dat de pagina wordt herladen. Deze melding, die een statusbericht is, wordt echter niet door schermlezers aangekondigd omdat deze geen toetsenbordfocus krijgt. Dat zou wel moeten gebeuren. Deze melding is namelijk een statusbericht. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Dit kan opgelost worden door een aria-live-attribuut aan de melding toe te voegen.