Rapport:
Audit digitale toegankelijkheid website van Bibliotheek Enschede-Haaksbergen

Uitkomst: Onvoldoende

Bevindingen: Op de homepage, https://www.bibliotheekenschede.nl staan onder de kop “Openingstijden vandaag” pictogrammen met de alt-tekst "stoet" en “Press reader”. Deze afbeeldingen zijn de enige inhoud van links en moeten aangeven waar de links naar toe verwijzen. Dit zijn echter betekenisloze teksten. Pas de alt-tekst aan of verwijder de links om deze pictogrammen. Dit probleem hangt ook samen met succescriterium 2.4.4: het doel van de links is niet duidelijk, en met succescriterium 2.5.3: de zichtbare tekst van de link zit niet in de toegankelijke naam, waardoor de link niet met spraak kan worden aangestuurd.

Op pagina https://bibliotheekenschede.op-shop.nl staat onder het zoekveld een carrousel met afbeeldingen. Deze afbeeldingen zijn toegevoegd met een img-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.
Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search, in de zoekresultaten, met zwarte boekpictogrammen, en in de filters, met pijltjes naar beneden; op pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc -0050568697e6#recordId=2.2270151 met zwarte boekpictogrammen en met pijltjes naar beneden.

Op pagina https://www.bibliotheekenschede.nl/collectie.html staat onder de kop “Toptitels” een afbeelding waarvan het alt-attribuut een spatie bevat, alt=" ". Daardoor wordt deze afbeelding niet verborgen voor de schermlezer en wordt deze toch voorgelezen. Dit is niet de bedoeling. Laat het alt-attribuut leeg door de spatie te verwijderen (alt=""). Als de andere afbeeldingen in de buurt decoratief zijn, moet ook bij die afbeeldingen het alt-attribuut leeg blijven.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/bibliotheek_enschede-algemenevoorwaarden-aug2024.pdf staat op alle pagina's een logo dat als artefact is toegevoegd. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft. Een alternatief kan zijn om "de Bibliotheek Enschede" toe te voegen aan de zichtbare titel "Algemene voorwaarden".
Let op: een alt-tekst is alleen nodig voor het logo op de eerste pagina, want op vervolgpagina's is het alleen maar herhaling en kan het de leesvolgorde juist verstoren als het daar wordt voorgelezen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekenschede.nl/overons.html staat onder de kop "Samen Lezen, Samen Leven" een video. In de video zijn op verschillende momenten teksten en logo’s te zien, bijvoorbeeld rond 0:03. Er is geen media-alternatief of audiobeschrijving beschikbaar. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekenschede.nl/overons.html voldoet de video niet aan succescriterium 1.2.5, dat vereist dat er een audiobeschrijving beschikbaar is. Een audiobeschrijving is nodig, omdat er voldoende ruimte is binnen het bestaande audiospel. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bibliotheekenschede.nl staat een groep keuzerondjes, voorafgegaan door de tekst “Zoeken in”. Visueel vormen deze elementen een groep, maar deze relatie is in de HTML niet programmatisch vastgelegd. 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. De tekst “Zoeken in” kan daarin worden geplaatst.

Een ander probleem hier is dat de tekst “Zoeken in” wordt toegevoegd via CSS: de content van het ::before pseudo-element. Dit is geen betrouwbare methode om toegankelijke informatie te bieden, omdat pseudo-elementen niet consistent worden ondersteund door alle browsers en hulpsoftware. CSS-gegeneerde content is bedoeld voor decoratieve doeleinden, niet voor het aanbieden van essentiële informatie. De betekenisvolle tekst moet in de HTML aanwezig zijn en niet via CSS worden geïnjecteerd.
Een vergelijkbaar probleem doet zich voor bij de keuzerondjes naast het zoekveld. De input-elementen bevatten de teksten “Zoeken in de catalogus” en “Zoeken binnen de site”. Deze tekst is echter verborgen met display:none. Daardoor worden de toegankelijke namen van de keuzerondjes uitsluitend geleverd door de content van het ::after pseudo-element. Zie pagina https://www.bibliotheekenschede.nl.

In de header van de website https://www.bibliotheekenschede.nl staat een knop met een vergrootglas-icoon. De inhoud van de knop is de tekst “Vind”, maar deze tekst is visueel verborgen én ook voor schermlezers onzichtbaar gemaakt met display:none. De CSS-code display:none zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen. Dit probleem is gerelateerd aan succescriterium 4.1.2, omdat de knop hierdoor geen toegankelijke naam heeft. Wanneer de pagina’s op een klein scherm worden bekeken, komt hetzelfde probleem ook voor in het submenu “Zoeken” in het sticky navigatiemenu onderaan. Daar gaat het om twee knoppen met een vergrootglas-icoon.
Hetzelfde probleem doet zich voor op de pagina https://bibliotheekenschede.op-shop.nl.

Op de homepage, https://www.bibliotheekenschede.nl, staan onder de carrousel stip-icoontjes die alleen visueel informatie geven over het aantal dia’s en de huidige dia. Deze informatie is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit probleem kan worden opgelost door visueel verborgen tekst toe te voegen.
Hetzelfde probleem doet zich voor op de pagina https://bibliotheekenschede.op-shop.nl, onder de carrousel met stipknoppen.

Op pagina https://www.bibliotheekenschede.nl/klantenservice/contact.html zijn de teksten “Telefonisch” en “Contactformulier” niet opgemaakt als koppen. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er visueel 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. Dat werkt alleen als de kop ook daadwerkelijk 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 af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste niveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS, waardoor de juiste HTML-code automatisch wordt toegepast.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/de_iguana_bibliotheek_app.html met de tekst “Iguana: de handige app waarmee je gemakkelijk boeken verlengt of reserveert” en in de sectie met verborgen inhoud “Hoe kan ik verlengen in de app?”, de tekst “Verlengen via de app”; op de pagina https://www.bibliotheekenschede.nl/activiteiten.html met “Hulp nodig?”; op de pagina https://www.bibliotheekenschede.nl/word-lid-van-de-bibliotheek.html met “Gratis abonnement”, “Hulp nodig?”; en op andere pagina’s.

Op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we wordt in de paginering onder de zoekresultaten het huidige paginanummer visueel onderscheiden, maar deze informatie is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit kan worden opgelost door een verborgen tekst aan de link toe te voegen, of door het aria-current-attribuut te gebruiken.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/nieuws.html, op de pagina https://www.bibliotheekenschede.nl/activiteiten.html, op de pagina https://bibliotheekenschede.op-shop.nl, en op andere pagina’s.

Op de homepage https://bibliotheekenschede.op-shop.nl staat onderaan de carrousel een lijst met stipknoppen. Dit lijst­element heeft directe child-items die niet zijn toegestaan: role=button. In een ol/ul zijn alleen li-elementen toegestaan. Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Op pagina https://bibliotheekenschede.op-shop.nl staan onder het hoofdmenu knoppen die extra inhoud met filters openen. Deze filters bevatten groepen selectievakjes en keuzerondjes, voorafgegaan door tekst zoals “Categorie”. Visueel vormen deze elementen een groep, maar deze relatie is niet vastgelegd in de HTML. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Categorie”.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staat een link “Uitgebreid zoeken” die extra inhoud opent. In deze extra inhoud zijn de teksten “Zoek titels met...” en “Maar toon geen titels met…” niet opgemaakt als koppen.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search wordt, nadat de zoekopdracht is gestart, in de filters onder de kop “Opties” het strong-element oneigenlijk gebruikt voor opmaak, bijvoorbeeld bij “Aantal titels:”. 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 (vetgedrukte tekst). Gebruik hiervoor CSS.
Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc-0050568697e6#recordId=2.2270151, bijvoorbeeld bij “In bestelling”.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/bibliotheek_enschede-algemenevoorwaarden-aug2024.pdf zijn alle koppen niet gemarkeerd als koppen. Op pagina 1 zijn bijvoorbeeld “Algemene voorwaarden”, “Artikel 1 Gebruik” en andere teksten visueel als kop gemarkeerd, maar in de tagstructuur zijn ze als paragraaf gemarkeerd. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tag door een h-tag, zodat de tagstructuur overeenkomt met de visuele structuur.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/bibliotheek_enschede-algemenevoorwaarden-aug2024.pdf is slechts een deel van het document getagd. Onderaan elke pagina is de volgende inhoud niet getagd: “Algemene Voorwaarden – versie: augustus 2024”. Dit is daarom niet beschikbaar voor bezoekers die hulpsoftware gebruiken, zoals voorleessoftware. Het gaat hierbij vooral om het deel "versie: augustus 2024", omdat "Algemene Voorwaarden" ook al bovenaan op pagina 1. Zorg ervoor dat deze content getagd wordt of zet dit elders in het document waar het wel getagd is.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/de-bibliotheek-enschede-app---handleiding.pdf ontbreken structurele codes, waardoor de inhoud niet toegankelijk is voor schermlezers. Bovendien kan het document hierdoor niet volledig worden onderzocht. Het gaat om alle succescriteria die betrekking hebben op de pdf-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit probleem wordt opgelost, is het mogelijk dat er nieuwe toegankelijkheidsproblemen aan het licht komen die nu nog niet zichtbaar zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekenschede.nl/klantenservice/contact.html ontbreekt bij een formulier met invoervelden voor persoonlijke informatie het attribuut autocomplete, zoals bij “Voornaam”, "Achternaam" en meer. Invoervelden voor persoonlijke informatie zoals naam, e-mailadres en telefoonnummer moeten het attribuut autocomplete hebben. Hierdoor kunnen browsers en hulpsoftware ondersteunen bij het invullen van deze velden, bijvoorbeeld door ze automatisch in te vullen. Gebruik het attribuut autocomplete voor alle velden waarin persoonlijke informatie moet worden ingevoerd. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website https://www.bibliotheekenschede.nl op een klein scherm wordt bekeken, is onderaan de pagina’s een vast menu aanwezig. De onderdelen van dit menu gebruiken een aangepaste toetsenbordfocus-indicator die uitsluitend gebaseerd is op een kleurverandering. Het gebruik van alleen kleur om de focus aan te geven is hier echter niet voldoende, omdat de contrastverhouding tussen de kleuren in de gefocuste en ongefocuste staat minder dan 3,0:1 bedraagt. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

Op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we wordt onder de zoekresultaten bij de paginering kleur gebruikt als enige visuele indicator van de huidige pagina. Dit visuele onderscheid ontbreekt, waardoor het ontoegankelijk is voor bezoekers met een lichte visuele beperking. Hierdoor kan een bezoeker die de kleur niet kan waarnemen deze informatie niet begrijpen. Dit kan worden opgelost door een andere visuele aanwijzing toe te voegen.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/nieuws.html; op de pagina https://www.bibliotheekenschede.nl/activiteiten.html; en op de pagina https://bibliotheekenschede.op-shop.nl onder de carrousel met stipknoppen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we verandert de tekstkleur van de knoppen “Type” en “Trefwoorden” naar oranje (HEX #FF7320) op een witte achtergrond wanneer deze knoppen toetsenbordfocus krijgen. De contrastratio van deze tekst is 2,7:1. Zorg dat het kleurcontrast niet lager is dan 4,5:1. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook wanneer het element toetsenbordfocus krijgt of wanneer er met de muiscursor over het element wordt bewogen.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/de_iguana_bibliotheek_app.html met secties met verborgen inhoud.

Op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we staat in de filters grijze tekst (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED), zoals bijvoorbeeld “368”. De contrastratio is te laag: 3,9:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.

Op pagina https://www.bibliotheekenschede.nl/activiteiten.html staat rode tekst (HEX #FF0000) op een witte achtergrond, zoals bijvoorbeeld “Er zijn geen plaatsen meer beschikbaar”. De contrastratio is te laag: 4,0:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.

Op pagina https://bibliotheekenschede.op-shop.nl staat in de paginering grijze tekst (HEX #CCCCCC) op een witte achtergrond, zoals bijvoorbeeld “Vorige”. De contrastratio is te laag: 1,6:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.
Hetzelfde probleem doet zich voor bij andere grijze (HEX #AAAAAA) tekst op een witte achtergrond, bijvoorbeeld "1". De kleurcontrastverhouding is te laag: 2,3:1.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staat in de cookiebanner oranje tekst (HEX #FF7320) op een zwarte achtergrond (HEX #3B3646), zoals bijvoorbeeld “Cookies & Privacy”. De contrastratio is te laag: 4,3:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staat in de cookiebanner witte tekst op een oranje achtergrond (HEX #FF7320), zoals bijvoorbeeld “Cookies niet toestaan”. De contrastratio is te laag: 2,7:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.
Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc -0050568697e6#recordId=2.2270151, bijvoorbeeld 'Reserveren'.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staat in de zoekresultaten lichtgrijze tekst (HEX #959595) op een witte achtergrond, zoals bijvoorbeeld “Boek | Nederlands.” De contrastratio is te laag: 3:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.
Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc -0050568697e6#recordId=2.2270151.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/de-bibliotheek-enschede-app---handleiding.pdf staat witte tekst op een oranje achtergrond of omgekeerd. De oranje achtergrondkleur varieert van lichtoranje (HEX #E6813B) tot donkeroranje (HEX #E57016). De contrastratio is respectievelijk 2,8:1 en 3,2:1. Voor normale tekst en tekst die niet vetgedrukt is, moet de contrastratio minimaal 4,5:1 zijn. Voor grote tekst moet de contrastratio minimaal 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc-0050568697e6#recordId=2.2270151 wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de volgende tekst deels uit beeld: “Onderwerp”. Zorg ervoor dat alle inhoud blijft werken en leesbaar is wanneer er wordt ingezoomd tot 400% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s van de website https://www.bibliotheekenschede.nl/ wordt de oranje kleur (HEX #FF7320) gebruikt, maar deze heeft een te lage contrastverhouding ten opzichte van de achtergrond. Een voorbeeld hiervan is in de header van de website: wanneer de links in het hoofdmenu toetsenbordfocus krijgen, wordt dit aangegeven met een oranje focusrand. De contrastratio tussen deze oranje focusrand en de witte achtergrond bedraagt 2,7:1. Dit geldt onder andere voor de links “Collectie”, “Activiteiten” en andere. Dit moet minimaal 3,0:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.
Hetzelfde probleem doet zich voor op de pagina https://bibliotheekenschede.op-shop.nl.

Wanneer de website https://www.bibliotheekenschede.nl op een klein scherm wordt bekeken, is onderaan de pagina’s een vast menu aanwezig. Het menu-item “Zoeken” heeft een submenu. In dit submenu staan twee knoppen met een vergrootglas-icoon. Wanneer deze knoppen toetsenbordfocus krijgen, verandert de kleur van het icoon en de rand van de knop naar oranje. De achtergrond is beige (HEX #FDE5D0). De contrastratio bedraagt 2,2:1. Dit moet minimaal 3,0:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.

Op pagina https://bibliotheekenschede.op-shop.nl staat onder het zoekveld een carrousel met knoppen met pijltjesiconen. Deze iconen zijn lichtgrijs (HEX #F0ECE4) en staan op verschillende achtergronden, bijvoorbeeld grijs (HEX #E6E0D2). De contrastratio is 1,1:1. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn. Zorg dat de iconen voldoende contrast hebben. Hetzelfde probleem doet zich verder beneden voor bij de stipknoppen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekenschede.op-shop.nl staan onder het hoofdmenu knoppen die extra inhoud met filters openen, zoals “Categorie.” Deze knoppen zijn niet met het toetsenbord te bedienen. Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staan, nadat de zoekopdracht is gestart, in de filters onder de heading “Verfijn op” elementen met pijliconen, bijvoorbeeld “Locatie”. Deze elementen zijn niet met het toetsenbord te bedienen. Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.
Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc -0050568697e6#recordId=2.2270151 met de elementen "Plaats in de kast", "Meer informatie".

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.bibliotheekenschede.nl/klantenservice/contact.html gebruikt een formulier alleen HTML5-validatie voor alle invoervelden. Deze foutmeldingen verdwijnen te snel. Er is dus een tijdslimiet ingesteld. 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://bibliotheekenschede.op-shop.nl staat een carrousel die automatisch om de paar seconden een nieuw artikel toont. Deze carrousel kan niet worden gestopt, gepauzeerd of verborgen. Bewegende content kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding tijdens het lezen van de tekst op de pagina. Daarom moet een mogelijkheid worden aangeboden om de beweging te stoppen, pauzeren of verbergen. Dit is van toepassing op alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijkertijd met andere informatie wordt getoond, automatisch start en langer dan 5 seconden afspeelt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekenschede.op-shop.nl is een skiplink aanwezig, maar deze functioneert niet correct. De link is wel zichtbaar en via het toetsenbord te bereiken, maar verplaatst de focus niet naar de bedoelde bestemming. In plaats daarvan leidt de link naar een andere pagina. 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 waarmee vaste blokken met herhalende inhoud kunnen worden overgeslagen. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplink werkt zoals hierboven is beschreven, en dat de focus naar de juiste content wordt verplaatst.

Uitkomst: Onvoldoende

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

Op pagina https://www.bibliotheekenschede.nl/word-lid-van-de-bibliotheek.html is het title-element 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 kan makkelijker worden genavigeerd tussen verschillende pagina’s. Plaats een tekst in het title-element die de inhoud van de pagina beschrijft.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/bibliotheek_enschede-algemenevoorwaarden-aug2024.pdf is 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.
Hetzelfde probleem doet zich voor op de pagina op dezelfde pagina https://www.bibliotheekenschede.nl/dam/bestanden/de-bibliotheek-enschede-app---handleiding.pdf.

Uitkomst: Onvoldoende

Bevindingen: Wanneer een bezoeker voor het eerst de website https://www.bibliotheekenschede.nl opent, verschijnt het cookie-dialoogvenster. De toetsenbordfocus komt hierbij correct binnen dit dialoogvenster te staan. Het is echter mogelijk om met het toetsenbord buiten het dialoogvenster te navigeren, terwijl het dialoogvenster zichtbaar blijft. Dit zorgt voor een onlogische focusvolgorde. Zorg ervoor dat de toetsenbordfocus binnen het dialoogvenster blijft, totdat de bezoeker het venster sluit.

Wanneer de website https://www.bibliotheekenschede.nl op een klein scherm wordt bekeken, verschijnt het sticky menu met de hoofd­ navigatielinks onderaan de pagina. Deze menu-items krijgen pas als laatste de toetsenbordfocus. Daardoor is de focusvolgorde niet logisch. De focusvolgorde moet zo worden aangepast dat bezoekers de primaire navigatie vóór andere elementen van de pagina met het toetsenbord kunnen bereiken.

Wanneer de website https://www.bibliotheekenschede.nl op een klein scherm wordt bekeken, verschijnt het sticky menu onderaan de pagina. In dit menu hebben de items “Menu” en “Zoeken” een submenu. Het probleem is dat bezoekers die met het toetsenbord navigeren, buiten deze submenu’s kunnen gaan. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu geopend blijft. Zorg ervoor dat de toetsenbordfocus binnen het geopende submenu blijft, totdat de bezoeker het submenu sluit. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Op pagina https://bibliotheekenschede.op-shop.nl komt de toetsenbordfocus in de cookiebanner na de knop “Akkoord” terecht op een onzichtbare knop. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals knoppen, links of formuliervelden. Als dat wel gebeurt, kunnen deze elementen onbedoeld worden geactiveerd.

Advies: op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we zijn er filters aanwezig, maar de elementen van deze filters krijgen pas als laatste toetsenbordfocus. Het zou gebruiksvriendelijker zijn als deze filters de toetsenbordfocus krijgen vóór de zoekresultaten, bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina, https://www.bibliotheekenschede.nl staan onder de heading “Openingstijden vandaag” links met iconen. De toegankelijke namen "stoet" en “Press reader” beschrijven het doel van de link niet voldoende. Dit kan opgelost worden door de alt-tekst van de afbeeldingen te wijzigen naar een betekenisvolle tekst, of door het alt-attribuut leeg te laten maar de zichtbare tekst van de headings op de pagina in de link op te nemen, bijvoorbeeld “Lunchroom Stoet” en andere.

Op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we missen de pagineringslinks voldoende context. Voor ziende bezoekers is het duidelijk dat "1", "2", "3" en andere cijfers paginanummers aanduiden, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken is dit niet altijd duidelijk. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/nieuws.html; op pagina https://www.bibliotheekenschede.nl/activiteiten.html; op pagina https://bibliotheekenschede.op-shop.nl; en op andere pagina's.

Op pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we staat in de paginering een link met de tekst “Volgende”. Deze tekst beschrijft de bestemming van de link niet duidelijk, wat voor verwarring kan zorgen, vooral voor bezoekers met cognitieve beperkingen of bezoekers die een schermlezer gebruiken. Links die geen duidelijke betekenis overbrengen, zoals “Volgende”, geven bezoekers geen helder inzicht in het doel ervan. Zorg dat de richting van de link duidelijk is, bijvoorbeeld door het woord “pagina” toe te voegen aan de tekst “Volgende”.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/nieuws.html; op pagina https://www.bibliotheekenschede.nl/activiteiten.html; op pagina https://bibliotheekenschede.op-shop.nl; en op andere pagina's.

Op pagina https://bibliotheekenschede.op-shop.nl bevatten meerdere links de vage tekst “Meer weten?”. Deze tekst beschrijft de bestemming van de link niet duidelijk, wat verwarring kan veroorzaken, vooral voor bezoekers met cognitieve beperkingen of bezoekers die een schermlezer gebruiken. Linkteksten die meerdere keren op een pagina voorkomen of geen betekenisvolle informatie geven, zoals “Meer weten?”, bieden geen duidelijke aanwijzing over het doel van de link. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door de tekst “Meer weten?” aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.
Hetzelfde probleem doet zich voor bij de link "Meer informatie" en op de pagina https://www.bibliotheekenschede.nl/collectie.html met de links "Meer informatie".

Op pagina https://www.bibliotheekenschede.nl/word-lid-van-de-bibliotheek.html staat onder de kop “Gratis abonnement” een link met de tekst “Meer info”. Deze tekst beschrijft de bestemming van de link niet duidelijk, wat verwarring kan veroorzaken, vooral voor bezoekers met cognitieve beperkingen of bezoekers die een schermlezer gebruiken. Zorg dat de bestemming van de link duidelijk is, bijvoorbeeld door de paginanaam toe te voegen aan de tekst “Meer info”.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepage, https://www.bibliotheekenschede.nl, staat een carrousel met een knop met een pijltjesicoon. De toegankelijke naam “Volgende” beschrijft de functie van deze knop niet nauwkeurig. Een blinde bezoeker weet daardoor niet precies wat deze knop doet. Voeg daarom tekst toe die de functie van de knop duidelijk beschrijft.
Hetzelfde probleem doet zich voor op de pagina https://www.bibliotheekenschede.nl/zoekresultaten.website.html?q=we, bij de paginering, met de knop “ga”; en op de pagina https://www.bibliotheekenschede.nl/nieuws.html
met dezelfde knop.

Op pagina https://www.bibliotheekenschede.nl/overons.html staat een iframe met een video. Het title-attribuut hiervan is “Video”. Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.bibliotheekenschede.nl, naast “Zoeken in”, is het toetsenbordfocus niet zichtbaar op de radioknoppen wanneer deze geselecteerd zijn. 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 waar op 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://bibliotheekenschede.op-shop.nl is de toetsenbordfocus niet zichtbaar op alle links in de paginering. 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. Zonder zichtbare focus is niet duidelijk op welk moment op Enter gedrukt moet worden om een knop of link te bedienen.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search is de standaardstijl voor toetsenbordfocus verwijderd van alle interactieve elementen. Dit geldt bijvoorbeeld voor de link met het logo, links in het hoofdmenu, links op de pagina en andere interactieve onderdelen. Er is geen eigen focusindicator toegevoegd als alternatief. 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. Zonder zichtbare focus is niet duidelijk op welk moment op Enter gedrukt moet worden om een knop of link te bedienen. Verwijder outline:none of voeg een toegankelijke eigen focusindicator toe.
Hetzelfde probleem doet zich voor op de pagina op dezelfde pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc-0050568697e6#recordId=2.2270151.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://www.bibliotheekenschede.nl, https://bibliotheekenschede.op-shop.nl/ en https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staat linksboven het logo met de zichtbare tekst "de Bibliotheek Enschede-Haaksbergen". De toegankelijke naam van deze link is "Bibliotheek Enschede-Haaksbergen", waar het woordje "de" ontbreekt. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de ontbrekende tekst toe te voegen aan de toegankelijke naam.

Op de homepage, https://www.bibliotheekenschede.nl, onder de kop “Openingstijden vandaag”, staan links met pictogrammen. De zichtbare teksten “Lunchroom Stoet” en “Kranten en tijdschriften” zijn niet opgenomen in hun toegankelijke namen, die respectievelijk “stoet” en “Press reader” zijn. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De primaire taal van alle pagina’s op de website https://www.bibliotheekenschede.nl is Nederlands, maar het lang-attribuut is onjuist ingesteld als lang="nl_NL". Gebruik hiervoor de correcte waarde lang="nl". Zorg dat de primaire taal van de pagina aangegeven is met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen. Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.

In het PDF-document op https://www.bibliotheekenschede.nl/dam/bestanden/de-bibliotheek-enschede-app---handleiding.pdf is de taal niet ingesteld in de metadata. 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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekenschede.op-shop.nl is onder het zoekveld een carrousel te vinden met knoppen met pijltjes-icoon. De toegankelijke namen zijn in het Engels, zoals “previous slide/item”, en deze worden aangeboden via een aria-label. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina, die in dit geval Nederlands is. Vertaal de teksten van de aria-labels naar het Nederlands. Een andere optie is om in de code aan te geven dat er een taalwisseling is, door in een omliggend HTML-element lang="en" toe te voegen.
Hetzelfde probleem doet zich voor onder de carrousel, met knoppen met puntpictogrammen.

Op pagina https://www.bibliotheekenschede.nl/collectie.html staat onder de kop “Lezen in een andere taal” een reeks van drie links in verschillende talen, maar zonder taalcode. De linktekst “English books” is bijvoorbeeld in het Engels geschreven. Deze tekst wordt momenteel uitgesproken volgens de uitspraakregels van de primaire taal van de pagina, die via het attribuut lang="nl" op het html-element is ingesteld. Een schermlezer hoort in dit geval echter over te schakelen naar de taal van de zin. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Als de tekst bijvoorbeeld in het Engels is, voeg dan lang="en" toe aan het element.

Advies: in de header van de websites https://www.bibliotheekenschede.nl en https://bibliotheekenschede.op-shop.nl/ staat een link met de tekst “Translate”. Deze tekst is in een andere taal, maar zonder dat hiervoor een taalcodering is toegevoegd. 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”. Het zou goed zijn om voor dit woord lang="en" toe te voegen, maar omdat het slechts één woord is, wordt dit niet afgekeurd.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekenschede.nl/klantenservice/contact.html wordt in een formulier gebruikgemaakt van HTML5-validatie, waarbij standaard HTML5-foutmeldingen worden weergegeven wanneer het formulier wordt verzonden met lege of onjuiste gegevens. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen op een andere manier, 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: Wanneer de website https://www.bibliotheekenschede.nl op een klein scherm wordt bekeken, staat onderaan de pagina’s een vast menu. Het menu-item “Zoeken” heeft een submenu. In dit submenu staan twee invoervelden met placeholder teksten: “Titel, auteur, etc.” en “Bijv. openingstijden, printer”. Deze teksten bevatten instructies. De instructies zijn echter niet permanent zichtbaar op de pagina, omdat de placeholder tekst verdwijnt zodra een bezoeker begint te typen. Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De eerste keer dat een bezoeker de website https://www.bibliotheekenschede.nl opent, verschijnt er een cookiedialoogvenster. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
Hetzelfde probleem doet zich voor op de pagina https://bibliotheekenschede.op-shop.nl; op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search.

In de header van de website https://www.bibliotheekenschede.nl staat een knop met een vergrootglas-icoon. Deze knop heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie van de knop is. Geef deze knop daarom een toegankelijke naam die het doel van de knop beschrijft. Wanneer de pagina’s op een klein scherm worden bekeken, doet hetzelfde probleem zich voor in het submenu “Zoeken” in het vaste navigatiemenu onderaan. Dit betreft twee knoppen met een vergrootglas-icoon.
Hetzelfde probleem komt ook voor op de pagina https://bibliotheekenschede.op-shop.nl, onder het hoofdmenu.

Wanneer de website https://www.bibliotheekenschede.nl op een klein scherm wordt bekeken, staat onderaan de pagina’s een vast menu dat is geïmplementeerd met het ARIA Menubar Pattern. De implementatie hiervan is echter onjuist. Het element met de rol menubar heeft geen toegankelijke naam, waardoor het voor schermlezers moeilijk is het doel ervan te begrijpen. De menu-items met de tekst “Menu” en “Zoeken” hebben niet de juiste rol menuitem. Deze items sturen submenu’s aan, maar missen de noodzakelijke ARIA-attributen. Het attribuut aria-haspopup moet worden gebruikt om aan te geven dat er een submenu aanwezig is en aria-expanded om de status van het submenu (open of gesloten) weer te geven. Daarnaast is het toetsenbordfocus niet correct geïmplementeerd, omdat de submenu-items onder “Menu” en “Zoeken” niet met de pijltjestoetsen genavigeerd kunnen worden, terwijl dit vereist gedrag is voor ARIA menubars. Voor meer details zie: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/.
Let op: het is ook te overwegen om role="menubar" te wijzigen in role"nav", want het is eigenlijk geen 'menubar'. Lees daarvoor de introductie in de bovengenoemde pagina met details.

Op pagina https://bibliotheekenschede.op-shop.nl is een zoekveld aanwezig. Dit zoekveld heeft geen toegankelijke naam. Hierdoor is voor bezoekers die een schermlezer gebruiken niet duidelijk wat er in dit veld moet worden ingevuld. Geef een toegankelijke naam aan het invoerveld (input-element).

Op pagina https://bibliotheekenschede.op-shop.nl staan onder het hoofdmenu knoppen die extra inhoud met filters openen, zoals “Categorie.” Deze knoppen hebben niet de juiste toegankelijke rol, naam en toestand (open of gesloten). Elk HTML-element heeft standaard een rol, waarmee hulpsoftware kan bepalen welke functie het element heeft. Zonder de juiste rol kan een schermlezer niet correct aangeven wat de knop doet. Zorg dat de knop de juiste toegankelijke rol heeft, bijvoorbeeld door er een button-element van te maken. Let op: alleen het toevoegen van role="button" maakt de knop nog niet toetsenbordtoegankelijk, zie succescriterium 2.1.1.
Geef de knop ook een toegankelijke naam, bijvoorbeeld door beschrijvende knoptekst te gebruiken, of met een aria-label of een andere geschikte techniek. De toestand van de knop kan duidelijk worden gemaakt door het attribuut aria-expanded aan de knop toe te voegen of door visueel verborgen tekst toe te voegen.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staan invoervelden zonder toegankelijke naam, zoals “Vul een zoekterm in” en “Zoek op auteur, onderwerp, titel, of kies voor alles”. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat in deze velden moet worden ingevuld. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staat een combobox (select-element) met de tekst “Zoek op auteur, onderwerp, titel, of kies voor alles”. Dit element mist de verplichte attributen aria-expanded en aria-controls. Deze attributen zijn nodig om de toestand (open of gesloten) aan te geven en om de relatie tussen de combobox en de bijbehorende selectiemogelijkheden over te brengen.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=BE_Search staan na het starten van een zoekopdracht in de filters onder de kop “Verfijn op” knoppen met pijltjesiconen, zoals “Locatie”. Deze knoppen hebben niet de juiste toegankelijke rol en geven de toestand (open of gesloten) niet aan. Elk HTML-element heeft standaard een rol, waarmee hulpsoftware kan bepalen welke functie het element heeft. Zonder de juiste rol kan een schermlezer niet correct aangeven wat de knop doet. Zorg dat de knop de juiste toegankelijke rol heeft. , bijvoorbeeld door er een button-element van te maken. Let op: alleen het toevoegen van role="button" maakt de knop nog niet toetsenbordtoegankelijk, zie succescriterium 2.1.1.
De toestand van de knop kan duidelijk worden gemaakt door het attribuut aria-expanded aan de knop toe te voegen of door visueel verborgen tekst toe te voegen.
Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=91f83f8c-9882-11ec-85dc -0050568697e6#recordId=2.2270151 met “Plaats in de kast”, “Meer informatie”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bibliotheekenschede.op-shop.nl staan onder het hoofdmenu knoppen die extra inhoud met filters openen, zoals “Categorie.” Wanneer filters worden geselecteerd, verschijnt er een telling van het aantal geselecteerde filters naast de knop. Deze telling is een statusbericht dat automatisch moet worden voorgelezen door schermlezers zodra het verandert. De benodigde code om dit mogelijk te maken ontbreekt. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. Voeg hiervoor het aria-live-attribuut aan de melding toe. Zorg dat de tekst duidelijk is, bijvoorbeeld “[AANTAL] filters geselecteerd”.