Rapport:
Audit digitale toegankelijkheid website bibliotheek Barneveld

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/ staat in de header een logo. De alt-tekst van dit logo is “Bibliotheek Barnveld”. Deze alt-tekst is niet voldoende. Omdat het logo in een link staat en er geen zichtbare linktekst is, wordt de alt-tekst ook als linktekst gebruikt. Daarom moet in de alt-tekst worden vermeld dat het om een logo gaat en dat de link naar de homepagina verwijst. Dit probleem komt voor op alle pagina’s van de website en op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/.

Op pagina https://www.bibliotheekbarneveld.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 worden aangegeven wat de functie van de knop is. Het is niet voldoende om alleen te beschrijven wat er te zien is. Als deze informatie ontbreekt, is de functie van de knop niet duidelijk voor hulpsoftware. 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 hulpsoftware.

Op pagina https://www.bibliotheekbarneveld.nl/ staan onder de kop “In de Bibliotheek” drie decoratieve afbeeldingen. Eén afbeelding heeft als alt-tekst “Kopiëren & printen”, wat een herhaling is van een onderliggende kop. De andere twee afbeeldingen gebruiken een spatie als waarde van het alt-attribuut: alt=” “. Daardoor worden deze afbeeldingen niet verborgen voor hulpsoftware. Een decoratieve afbeelding geeft geen extra informatie en moet worden verborgen voor hulpsoftware. Voor afbeeldingen in een img-element kan hiervoor een leeg alt-attribuut worden gebruikt: alt="". Omdat deze afbeeldingen ook als link fungeren, moet op een andere manier een toegankelijke naam worden aangeboden. Op pagina https://www.bibliotheekbarneveld.nl/ komt een vergelijkbaar probleem voor bij afbeeldingen onder de koppen “Computercursussen”, “Lid worden” en “Taalcursussen”. Deze afbeeldingen zijn decoratief, maar worden niet verborgen voor hulpsoftware. Omdat ze ook als link dienen, moet er een alternatieve manier worden gebruikt om een toegankelijke naam aan de link te geven.

Op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html staat naast de kop “Minima; Voor mensen met een minimuminkomen” een logo van de gemeente Barneveld met een leeg alt-attribuut. Als het alt-attribuut leeg is (alt=""), negeren schermlezers de afbeelding. Een lege alt-tekst betekent dat de afbeelding puur decoratief is en geen informatie geeft. Informatieve afbeeldingen moeten altijd een alt-tekst krijgen. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Als het logo geen link is, moet het woord ‘Logo’ worden toegevoegd aan de alt-tekst.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html staat onder de kop “Jeugd | 0-6 jaar” een pijl-icoon naast de link “Jeugd & Educatie”. Dit icoon is toegevoegd met CSS via een ::before pseudo-element en wordt door schermlezers aangekondigd als “before”. Een decoratieve afbeelding geeft geen extra informatie en moet worden verborgen voor hulpsoftware. Dit probleem komt ook voor op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html bij de link “Informatiepunt”, op pagina https://www.bibliotheekbarneveld.nl/over-ons/jaarverslag.html bij de link “Terug naar Over ons” en op enkele andere pagina’s.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html staan onder de kop “Jeugd | 0-6 jaar” afbeeldingen met alt-tekst die als decoratief kunnen worden aangemerkt. Deze afbeeldingen moeten een leeg alt-attribuut krijgen. Daarna moet van deze links een card worden gemaakt. Alleen de tekst “Ga naar de boekentips op onderwerp” mag een link zijn. Door middel van JavaScript moet de hele card (afbeelding en tekst samen) klikbaar worden gemaakt.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html komt een vergelijkbaar probleem voor bij aanklikbare afbeeldingen onder de knop “Bekijk ook de boeken op onderwerp”. Dit probleem doet zich ook voor op pagina https://www.bibliotheekbarneveld.nl/collectie/inspiratie.html onder de koppen “Speciaal voor jeugd & jongeren”, “Digitale bronnen” en “Wat vind je van deze pagina’s?”. Deze afbeeldingen moeten als decoratief worden gemarkeerd met een leeg alt-attribuut en via JavaScript moet de hele card klikbaar worden gemaakt, waarbij alleen de linktekst een link is.

Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html staan onder de kop “Websites van de overheid” verschillende logo’s. Voor de meeste logo’s is de zichtbare tekst gelijk aan de bijbehorende kop, wat kan worden gezien als een toegankelijke alternatieve tekst. Sommige logo’s bevatten echter meer informatie dan in de kop staat. In die gevallen moet alle tekst uit het logo worden opgenomen in het tekstalternatief. Dit geldt voor de logo’s “Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid”, “Dienst Uitvoering Onderwijs Ministerie van Onderwijs, Cultuur en Wetenschap”, “LBIO Landelijk Bureau Inning Onderhoudsbijdragen” en “Logius Ministerie van Binnenlandse Zaken en Koninkrijksrelaties”.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ hebben de afbeeldingen bij de evenementen alt-tekst die de kop van evenementen herhaalt. Een blinde bezoeker hoort dezelfde informatie twee keer. Dit kan worden opgelost door twee links samen te voegen.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ staat bovenaan een slider met dia’s die bestaan uit een afbeelding en een tekst. De afbeeldingen hebben alt-teksten die de bijbehorende kopteksten herhalen, zoals “Zomerspeurtocht | Zomer voor alle prentenboeken!”. Omdat deze afbeeldingen geen extra informatie geven die niet al in de koppen staat, kunnen ze als decoratief worden beschouwd. De alt-attributen van deze afbeeldingen moeten daarom leeg zijn (alt=""), zodat gebruikers van hulpsoftware geen overbodige informatie te horen krijgen.

Op pagina https://www.bibliotheekbarneveld.nl/collectie/inspiratie.html staan onder de kop “Nog meer boekentips” twee afbeeldingen die functioneren als link. De alt-attributen van deze afbeeldingen zijn leeg (alt=""), waardoor ze verborgen zijn voor hulpsoftware. Deze afbeeldingen zijn interactief, maar er is geen tekstalternatief aanwezig. Daardoor hebben de links geen inhoud. Om deze links toegankelijk te maken, moet een tekstalternatief aan de afbeeldingen worden toegevoegd dat het linkdoel beschrijft. Zo wordt duidelijk waar de links naartoe leiden voor bezoekers die hulpsoftware gebruiken.

Op pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation staan boven de zoekresultaten drie afbeeldingen voor de weergave-opties die functioneren als links. De alternatieve tekst ontbreekt, waardoor deze links niet toegankelijk zijn. De afbeeldingen zijn dus interactief. Er zijn geen tekstalternatieven. Daardoor hebben de links geen inhoud (zie ook succescriteria 2.4.4 en 4.1.2). Om deze links toegankelijk te maken, moeten de afbeeldingen tekstalternatieven krijgen die het linkdoel beschrijven. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden.
Op pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation staan onder de kop “Verfijn op” de secties met verborgen inhoud. De pijlpictogrammen zijn toegevoegd als img-elementen en geven de aanwezigheid van de verborgen inhoud aan, maar hebben geen tekstalternatief. Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Deze informatie is niet aanwezig in de vorm van een aria-expanded-attribuut of een verborgen tekst.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.1260005 zijn afbeeldingen toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Zie twee afbeeldingen onder de tekst “Nederlands” in de secties “Titelinformatie” en “Uitgebreide titelinformatie”, en twee puntjes in de tabel onder de sectie “Details objecten”. 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. Afbeeldingen onder de tekst 'Nederlands' fungeren ook als links, waardoor ook succescriteria 2.4.4 en 4.1.2 worden afgekeurd.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf staan decoratieve afbeeldingen die onterecht zijn getagd als figures zonder beschrijving. Dit komt onder andere voor op pagina’s 1, 3, 4 en meerdere andere pagina’s. De figure-tag is bedoeld voor informatieve afbeeldingen en moet altijd een beschrijving bevatten. Deze afbeeldingen moeten worden gemarkeerd als artefact, zodat ze worden verborgen voor schermlezers.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf is een logo opgenomen als figure, maar zonder tekstalternatief. Dit komt voor op pagina’s 1 en 30. Afbeeldingen die met de figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Er moeten alt-teksten worden toegevoegd aan deze informatieve afbeeldingen.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/infographic_jaarverslag2024-hr.pdf is op pagina 1 een decoratieve afbeelding onterecht getagd als figure zonder beschrijving. De figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Deze afbeelding moet worden gemarkeerd als artefact, zodat ze wordt verborgen voor schermlezers.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html staat onder de kop “Voorleesfilmpjes” een video met een voice-over. De video bevat ondertiteling, maar deze is automatisch gegenereerd en daardoor onnauwkeurig. Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.

Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html is hetzelfde probleem aanwezig bij de video. Deze video bevat automatisch gegenereerde ondertiteling, die niet nauwkeurig is. Ook hier moet correcte ondertiteling worden toegevoegd die overeenkomt met de gesproken tekst.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html staat onder de kop “Voorleesfilmpjes” een video. Aan het einde van de video, vanaf 0:53, wordt het logo van “De Voorleeshoek” getoond. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Het beste is om een audiobeschrijving toe te voegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het plaatsen van een geschreven tekst (een media-alternatief). Maar om te voldoen aan succescriterium 1.2.5 moet er in ieder geval een audiobeschrijving aanwezig zijn.

Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html staat onder de kop “Hoe kunnen we je helpen?” een video. Aan het begin van de video, tussen 0:02 en 0:05, wordt de tekst “Heeft u vragen over de overheid?” getoond, samen met het logo van “de Bibliotheek informatiepunt Digitale Overheid”. Aan het einde van de video, vanaf 1:08, wordt hetzelfde logo opnieuw weergegeven.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html voldoet de video niet aan succescriterium 1.2.5 omdat audiodescriptie ontbreekt. Voor deze video is een audiobeschrijving verplicht (niveau AA), omdat er voldoende ruimte is binnen het bestaande audiotrack om de visuele informatie te beschrijven. Een media-alternatief is in dit geval niet meer toegestaan als oplossing. Dit is belangrijk voor mensen die de video’s niet (goed) kunnen zien. Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html komt hetzelfde probleem voor bij de video. Ook hier moet een audiobeschrijving worden toegevoegd, omdat een media-alternatief niet meer voldoet aan de eisen van succescriterium 1.2.5.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, bijvoorbeeld op pagina https://www.bibliotheekbarneveld.nl/, staat in de header een groep van twee keuzerondjes (“Catalogus” en “Site”), voorafgegaan door de tekst “Zoeken in”. Visueel vormen deze elementen een groep, maar die 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 “Zoeken in”.

Op pagina https://www.bibliotheekbarneveld.nl/ staat onderaan een carrousel grijze stippen die aangeven hoeveel slides er zijn en welke slide actief is. De actieve slide wordt visueel onderscheiden, maar deze informatie ontbreekt in de HTML. Hierdoor weten bezoekers die hulpsoftware gebruiken niet welke slide actief is. Deze informatie moet beschikbaar worden gemaakt met behulp van ARIA-technieken of een tekst die visueel verborgen is maar toegankelijk voor hulpsoftware.

Op pagina https://www.bibliotheekbarneveld.nl/ volgt een kop van niveau 3 direct op een andere kop van hetzelfde niveau, namelijk “In de Bibliotheek” en “Kopiëren & printen”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Pas de tekst aan, zodat de kopregelniveaus de structuur van de tekst correct weergeven.

Op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html staan de koppen “Kies uit deze abonnementen” en “BoekStart & Jeugd t/m 17 jaar” direct onder elkaar zonder inhoud ertussen. Hierdoor wordt de structuur van de pagina niet correct weergegeven. De kopniveaus moeten worden aangepast, zodat ze aansluiten op de inhoudsstructuur.

Op pagina https://www.bibliotheekbarneveld.nl/over-ons.html staan de koppen “Vestigingen” en “Barneveld - Hoofdvestiging”, en ook de koppen “Bestuur en Personeel” en “Raad van Toezicht” direct onder elkaar zonder tussenliggende inhoud. De structuur van de pagina moet worden aangepast door het juiste kopniveau toe te passen, zodat duidelijk is welke onderdelen bij elkaar horen.

Op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html staan onder de kop “Kies uit deze abonnementen” twee ul-elementen direct achter elkaar, terwijl ze samen één lijst vormen. Door de lijst op te splitsen in twee afzonderlijke ul-elementen, wordt de inhoud voor hulpsoftware als twee losse lijsten gepresenteerd. Dit kan tot verwarring leiden. Deze items moeten in één ul-element worden geplaatst. Op pagina https://www.bibliotheekbarneveld.nl/404.html komt een vergelijkbaar probleem voor, waarbij meerdere ul-elementen direct na elkaar staan terwijl ze visueel en inhoudelijk één lijst vormen. Ook hier moeten de items worden samengevoegd in één ul-element, zodat de structuur van de lijst voor hulpsoftware duidelijk en logisch is.

Op pagina https://www.bibliotheekbarneveld.nl/over-ons.html staat onder de kop “ANBI” een tekstblok dat visueel bestaat uit twee alinea’s, gescheiden door witruimte. In de code is dit echter als één p-element opgemaakt. Deze visuele structuur moet correct worden weergegeven in de HTML. Elke alinea moet in een apart p-element worden geplaatst, zodat het aantal visuele alinea’s gelijk is aan het aantal p-elementen.

Op pagina https://www.bibliotheekbarneveld.nl/home/Toegankelijkheid.html zijn de teksten “Huidige status” en “Contact” visueel vormgegeven als koppen, maar ze zijn niet gemarkeerd als heading-elementen. Bezoekers die hulpsoftware gebruiken kunnen hierdoor deze secties niet herkennen of er direct naartoe navigeren. Deze koppen moeten worden omgezet in heading-elementen om de structuur van de pagina toegankelijk te maken.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Wijziging-abonnement.html is de tekst “Automatische incasso” visueel een kop, maar ontbreekt de markering als heading-element. Ook hier geldt dat deze kop in een heading-element moet worden geplaatst, zodat hulpsoftware de structuur correct kan interpreteren. Op pagina https://www.bibliotheekbarneveld.nl/over-ons.html zijn de teksten “Cultuur daar geef je om!”, “Bezoldiging” en “Inkomen” visueel als koppen gepresenteerd, maar niet als heading gemarkeerd. Deze teksten moeten worden omgezet naar heading-elementen om de inhoud van de pagina toegankelijk te maken voor hulpsoftware.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Adreswijziging.html bevat het formulier een groep van vier invoervelden met het label “Initialen en achternaam”, voorafgegaan door de tekst “Naam van meeverhuizende huisgenoten:”. Visueel vormen deze velden een groep, maar deze relatie is niet vastgelegd in de HTML. De individuele labels geven onvoldoende context over de bedoeling van de groep. Dit kan worden opgelost door een fieldset-element te gebruiken waarin de vier invoervelden zijn opgenomen. Plaats de groepsnaam “Naam van meeverhuizende huisgenoten:” in een legend-element. Zo wordt voor hulpsoftware duidelijk dat deze velden bij elkaar horen.

Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html staat onder de kop “Kom naar de Bibliotheek voor al je vragen over de overheid” een tabel. In deze tabel zijn de cellen met de namen van bibliotheken gemarkeerd met het th-element, terwijl dit gegevenscellen zijn. Dit is niet correct. Gebruik voor cellen met gegevens het td-element, zodat de tabelsemantiek juist blijft en de structuur voor hulpsoftware klopt.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ bevat de zijbalk met filters groepen keuzevakjes onder de labels “Categorie”, “Locatie”, “Tag” en “Wanneer”. Visueel zijn de checkboxen gegroepeerd, maar deze relatie is niet in de code vastgelegd. Hierdoor herkent hulpsoftware niet dat de checkboxen bij het groepslabel horen. De individuele labels worden voorgelezen zonder context. Dit kan worden opgelost door gebruik te maken van fieldset- en legend-elementen. Andere oplossingen zijn ook mogelijk, zolang de relatie tussen de groep en de checkboxen duidelijk is voor hulpsoftware.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie is de tekst “Thomas Borggrefe” gemarkeerd met een strong-element in plaats van een kop-element. Het strong-element is niet bedoeld voor koppen. Koppen zijn bedoeld om de structuur van een tekst aan te geven en moeten altijd worden gemarkeerd met een kop-element, zoals h3. Alleen op die manier begrijpt hulpsoftware de hiërarchie en de betekenis van de tekst. Het strong-element is wel geschikt om nadruk te geven aan een woord of een deel van een zin.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie wordt het em-element verkeerd gebruikt in de tekst die begint met “Theatermaker Thomas Borggrefe laat zich…”. Het em-element heeft een semantische functie: het geeft aan dat een tekstdeel extra nadruk krijgt. Dit element mag niet worden gebruikt voor alleen een visueel effect, zoals cursieve tekst. Gebruik hiervoor CSS.

Op pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation zijn de volgende teksten niet als koppen opgemaakt: “werk : 1-10 uit een totaal van 5213 resultaten”, boektitels, en de tekst “Bibliotheek Barneveld (5213)” onder de kop “Opties”. 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.

Op pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation wordt onder de kop “Opties” het strong-element misbruikt voor stijldoeleinden bij de tekst “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.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600# is de tekst “Voer een zoekterm in” onjuist opgemaakt met strong in plaats van een geschikt k heading-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h3. 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.

Op pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600# verschijnt na het klikken op de knop “Uitgebreid zoeken” een formulier met twee secties. Elke sectie heeft een groepslabel (“Zoek titels met…” en “Maar toon geen titels met…”), maar deze labels zijn niet programmatisch gekoppeld aan hun respectieve groepen. Hierdoor weten bezoekers die een schermlezer gebruiken niet dat er een relatie is tussen de groepslabels en de bijbehorende groepen. Zorg dat de groepslabels in de code gekoppeld zijn aan de groepen. Dit kan worden bereikt door het formulier correct te structureren met fieldset- en legend-elementen, of met aria-labelledby.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf zijn alle koppen niet als headings gemarkeerd. Dit geldt bijvoorbeeld voor “Jaarverslag 2024” op pagina 1, “Inhoud” op pagina 2, “Voorwoord” en “Huis van Ontmoeting” op pagina 3 en vergelijkbare koppen op andere pagina’s in het document. De visuele structuur komt hierdoor niet overeen met de structuur van de tags in het document. Vervang de p-tag door de h-tag, zodat de tagstructuur overeenkomt met de visuele structuur van het document.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/infographic_jaarverslag2024-hr.pdf zijn ook alle koppen visueel als kop weergegeven, maar niet gemarkeerd met heading-tags. De visuele en semantische structuur van het document komen hierdoor niet overeen. De p-tags moeten worden vervangen door h-tags.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf is een inhoudsopgave opgenomen. De links naar de pagina’s in de inhoudsopgave zijn echter niet voorzien van de Reference-tag. Deze tag is noodzakelijk zodat schermlezers de inhoudsopgave correct kunnen interpreteren. De juiste tags voor de inhoudsopgave zijn: TOC, TOCI, Reference en Link. In hetzelfde PDF-document staat onderaan pagina 3 een lijst met drie items. Deze lijst is niet correct gemarkeerd in de tags. Inhoud die visueel is vormgegeven als een lijst, moet ook als lijst worden gemarkeerd in de tagstructuur. Alleen dan krijgen blinde bezoekers dezelfde informatiestructuur aangeboden als ziende bezoekers. De lijst moet worden gemarkeerd met de L- en Li-tags. Op pagina 26 staat onder de kop “Financiële middelen” een lijst die niet correct is gemarkeerd. Ook deze lijst moet worden voorzien van de juiste lijststructuur met L- en Li-tags, zodat de informatie duidelijk en correct toegankelijk is voor hulpsoftware.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf staan op pagina 3 voetnoten die niet zijn voorzien van de vereiste Reference- en Note-tags. Doordat deze tags ontbreken, kan voorleessoftware niet herkennen welke voetnoot bij welke verwijzing in de hoofdtekst hoort. Hierdoor worden de voetnoten als losse tekst voorgelezen, zonder duidelijke koppeling aan de juiste plek in de tekst. Dit kan verwarrend zijn voor mensen die afhankelijk zijn van schermlezers. Een vergelijkbaar probleem komt voor op pagina’s 8 en 18 van hetzelfde document.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf staat op pagina 6 onder de kop “Zomerlezen” een datatabel. In deze tabel ontbreken de th-tags. Bij een datatabel moeten de cellen in de koprij worden gemarkeerd met th-tags, zodat schermlezers de relatie tussen de kop en de onderliggende datacellen begrijpen. De datacellen zelf moeten met td-tags worden gemarkeerd. Dit probleem komt ook voor bij alle andere tabellen in het document, vanaf pagina 18 en verder.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/infographic_jaarverslag2024-hr.pdf zijn meerdere infographic-achtige elementen opgenomen waarin gegevens visueel worden gepresenteerd via opmaak, iconen en kleur. In de tagstructuur zijn deze infographics echter niet goed weergegeven. Belangrijke informatie is vaak opgesplitst in losse span-elementen zonder duidelijke semantische samenhang. Hierdoor ontvangen schermlezergebruikers gefragmenteerde inhoud, zonder inzicht in de relaties tussen getallen, labels of visuele groeperingen. Dit belemmert het begrip van de informatie en maakt het document ontoegankelijk. Voor infographic-inhoud moeten logische gegevensblokken semantisch worden gegroepeerd met passende tags, zoals table, list of duidelijk gestructureerde div- of section-containers. Voeg beschrijvende koppen of bijschriften toe waar nodig en zorg dat de visuele relaties behouden blijven in de leesvolgorde. Zo wordt de informatie begrijpelijk voor gebruikers van hulpsoftware en voldoet het document aan de toegankelijkheidsnormen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ is de volgorde van HTML-elementen binnen de event-artikelen niet correct. In de huidige code staat eerst een afbeelding met link, gevolgd door de datum, de kop en daarna overige tekst. 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. De visuele vormgeving mag wel afwijken van de volgorde in de code.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf is de leesvolgorde niet logisch. De tabel op pagina 6 is in de tags pas toegevoegd na de inhoud van pagina 9. Schermlezers lezen een PDF-document in de volgorde van de tags. Als die volgorde niet logisch is, wordt het document moeilijk te volgen voor bezoekers die gebruik maken van hulpsoftware. De tagstructuur moet worden aangepast zodat de leesvolgorde overeenkomt met de visuele en inhoudelijke volgorde. Een vergelijkbaar probleem doet zich voor met de tekst die begint met “Voor mij was de geschiedenis…” op pagina 15. In de tags is deze tekst pas na de inhoud van pagina 16 opgenomen, wat verwarrend is.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/infographic_jaarverslag2024-hr.pdf presenteert de visuele opmaak de informatie in een duidelijke en logische volgorde (via infographics), maar de volgorde van de tags volgt deze structuur niet. Hierdoor krijgen gebruikers van hulpsoftware de inhoud in een verwarrende of onlogische volgorde te horen, wat het begrip belemmert. De volgorde van de tags moet overeenkomen met de visuele en logische leesvolgorde, zodat de informatie op een begrijpelijke manier wordt gepresenteerd aan gebruikers van hulpsoftware.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/contactformulier.html bevat het formulier invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres en telefoonnummer. Deze velden missen het autocomplete-attribuut. Invoervelden voor persoonlijke informatie moeten het autocomplete-attribuut hebben, zodat browsers en hulpsoftware kunnen helpen bij het invullen. Bijvoorbeeld door velden automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waarin persoonlijke informatie wordt gevraagd. Meer informatie over het gebruik van autocomplete en verplichte waardes is te vinden op: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Adreswijziging.html ontbreekt het autocomplete-attribuut eveneens bij de invoervelden voor persoonlijke gegevens. Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Wijziging-abonnement.html komt hetzelfde probleem voor. De persoonlijke invoervelden in dit formulier missen het autocomplete-attribuut. Ook deze velden moeten worden voorzien van het juiste attribuut zodat hulpsoftware en browsers de gebruikers kunnen ondersteunen.

Uitkomst: Onvoldoende

Bevindingen: Bij weergave van de website op een klein scherm verschijnt het mobiele navigatiemenu in de footer. Wanneer de opties “Home”, “Menu” of “Zoeken” via het toetsenbord focus krijgen, verandert de kleur van het icoon en de tekst van wit naar oranje. Deze kleurverandering is het enige visuele verschil ten opzichte van de niet-geselecteerde staat. Voor bezoekers met een visuele beperking of kleurenblindheid is deze verandering niet duidelijk zichtbaar. Er moet een extra visuele focusindicator worden toegevoegd, zoals een dikkere rand, een onderstreping of een verandering van de achtergrondkleur met voldoende contrast.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/contactformulier.html wordt bij het invoerveld “Wil je een bijlage meesturen?” een aangepaste focusindicator gebruikt die alleen zichtbaar is via een achtergrondkleurverandering. Het gebruik van alleen kleur om focus aan te geven is niet voldoende, omdat de contrastratio tussen de gefocuste en niet-gefocuste toestand van de achtergrondkleur minder dan 3,0:1 is. Voor bezoekers met een visuele beperking of kleurenblindheid is deze subtiele verandering vaak niet zichtbaar. Ook voor toetsenbordgebruikers moet duidelijk zijn waar de focus zich bevindt. Er moet een extra visuele aanduiding worden toegevoegd, zoals een dikkere rand of onderstreping.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Adreswijziging.html vertoont het invoerveld “Deze ADRESWIJZIGING gaat in per” hetzelfde probleem. De focusindicator is alleen gebaseerd op een verandering in achtergrondkleur met te weinig contrast. Ook hier moet een extra visueel kenmerk worden toegevoegd, zoals een duidelijke rand of onderstreping, zodat het veld goed zichtbaar is tijdens toetsenbordnavigatie.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Wijziging-abonnement.html komt dit probleem voor bij meerdere invoervelden en bij het keuzevakje “Machtiging”. De focus is alleen te herkennen aan een lichte kleurverandering, met onvoldoende contrast. Er moet een extra visueel kenmerk worden toegevoegd om de focus zichtbaar te maken voor toetsenbordgebruikers.

Op pagina https://www.bibliotheekbarneveld.nl/collectie/zoeken-in-de-catalogus.html heeft de combobox naast het label “Sorteer op:” een focusindicator die alleen werkt via kleurverandering. De contrastratio tussen de gefocuste en niet-gefocuste toestand voldoet niet aan de minimale eis van 3,0:1. Onderaan dezelfde pagina vertoont de combobox naast “Spring direct naar pagina:” hetzelfde gedrag. Voor beide comboboxen moet een duidelijkere focusindicator worden toegevoegd, zoals een rand of visueel kenmerk dat voldoet aan de contrastvereisten.

Op pagina https://www.bibliotheekbarneveld.nl/collectie/zoeken-in-de-catalogus.html wordt in de paginering onder de zoekresultaten kleur als enige visuele indicator gebruikt om de actieve pagina aan te duiden. De achtergrond van de actieve pagina is oranje, maar het onderscheid met de andere pagina’s is minimaal. Deze informatie is daardoor niet duidelijk voor bezoekers met een visuele beperking. Voeg een extra visueel kenmerk toe, zoals een onderstreping of achtergrond met voldoende contrast, om de actieve pagina herkenbaar te maken.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ staan bovenaan vier filters. Wanneer deze worden geopend (nu alleen met een muisklik), tonen de checkboxen en keuzerondjes daarin een aangepaste focusindicator die alleen berust op achtergrondkleur. Het kleurcontrast tussen de gefocuste en niet-gefocuste toestand is te laag (minder dan 3,0:1), waardoor de focus onvoldoende zichtbaar is voor bezoekers met een visuele beperking en voor toetsenbordgebruikers. Voeg een duidelijke focusindicator toe, zoals een rand, een onderstreping of een achtergrondkleur met voldoende contrast.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website is een zoekveld aanwezig. Wanneer dit veld in hover-toestand is, heeft de grijze placeholdertekst (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED) een contrastratio van 3,9:1. In focus-toestand heeft dezelfde placeholdertekst op een oranje achtergrond (HEX #FDE5D0) een contrastratio van 3,8:1. Deze contrastverhoudingen zijn te laag. Zorg dat de placeholdertekst een contrastratio van minimaal 4,5:1 ten opzichte van de achtergrond heeft. Een vergelijkbaar probleem doet zich voor bij mobiele weergave van de website, wanneer het menu “Zoeken” wordt geselecteerd voor de velden “Zoeken in de collectie” en “Zoeken binnen de website”.

Op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html staan onder de kop “Veelgestelde vragen over abonnementen” accordeons. Wanneer deze accordeons toetsenbordfocus krijgen, verandert de tekstkleur van de koppen van zwart naar oranje (HEX #FF7320). Deze oranje tekst op een witte achtergrond heeft een contrastratio van 2,7:1. Omdat de tekst kleiner is dan 24px en niet vetgedrukt, moet de minimale contrastratio 4,5:1 zijn. Eenzelfde probleem komt voor op pagina https://www.bibliotheekbarneveld.nl/collectie/zoeken-in-de-catalogus.html bij de accordeons onder de kop “Verfijnen op resultaten” en op pagina https://www.bibliotheekbarneveld.nl/klantenservice/website-en-apps1.html.

Op pagina https://www.bibliotheekbarneveld.nl/collectie/zoeken-in-de-catalogus.html staan in de zijbalkfilters aantallen resultaten voor bepaalde categorieën of woorden. Deze aantallen zijn weergegeven in donkergrijze tekst (HEX #757575) op een lichtgrijze achtergrond (HEX #EDEDED), met een contrastratio van 3,9:1. Deze waarde is lager dan de vereiste minimale contrastratio van 4,5:1 voor kleine tekst.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ staat in de beschrijving van het evenement “Bieb Escape Game” de tekst “nog 10 beschikbaar” in groen (HEX #468847) op een witte achtergrond. Deze combinatie heeft een contrastratio van 4,3:1. Omdat het om kleine tekst gaat, is dit onvoldoende. Voor kleine tekst is een minimale contrastratio van 4,5:1 vereist.

Op alle pagina’s van het domein wordt de combinatie oranje (HEX #F47921) op een witte achtergrond gebruikt. De kleurcontrastverhouding is 2,8:1, wat onvoldoende is voor zowel kleine als grote tekst. Zie bijvoorbeeld de volgende elementen op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk: het woord “Book” in de boekkaarten, het nummer van de huidige pagina in de paginering, links onder “Opties” en “Verfijn op” wanneer ze worden gehoverd, en andere elementen; op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.1260005 de links “bewaren”, “printen”, “meer info”, “reserveren”. Dit komt ook op andere pagina’s voor.
De contrastverhouding voor tekst tot een lettergrootte van 24 px moet minimaal 4,5:1 zijn.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.1260005 staat groene tekst (HEX #00CC00) op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1.
Deze tekst is kleiner dan 24 px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Hetzelfde probleem is aanwezig op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.2383951 en andere productpagina’s.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/2025/jaarverslag-2024-definitief.pdf komt op meerdere pagina’s oranje tekst (HEX #EE7203) op een witte achtergrond voor en andersom. De contrastratio is 2,98:1, wat te laag is. Voor grote tekst is minimaal 3,0:1 vereist en voor kleine tekst 4,5:1. Voorbeelden hiervan zijn de koppen “Inhoud”, “Voorwoord” op pagina 2, “Voorwoord” en “Huis van Ontmoeting” op pagina 3 en alle oranje teksten vanaf pagina 17 tot het einde van het document.
Op pagina 2 staat de groene tekst (HEX #569B62) “Leven lang leren” op een witte achtergrond, met een contrastratio van 3,4:1. Dit is te laag voor kleine tekst. Vergelijkbare teksten in dezelfde kleur staan op pagina 14 (“Activiteiten”), en op pagina 16 (“Leven lang leren”, “Cursusaanbod” en “Digitaal Burgerschap”). Ook deze teksten voldoen niet aan de vereiste minimale contrastratio van 4,5:1 voor kleine tekst.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/infographic_jaarverslag2024-hr.pdf komt veel oranje tekst (HEX #EE7203) voor op een lichtoranje achtergrond (HEX #FDE6D1). Deze combinatie heeft een contrastratio van 2,5:1. Dit is te laag, zowel voor kleine tekst (minimum 4,5:1) als voor grote tekst (minimum 3,0:1). Voorbeelden zijn de teksten “Vestigingen, collectie en abonnementen”, “Verdeling totaal aantal leden”, “14.229” en andere. Er is ook groene tekst (HEX #599B62) te zien op een lichtgroene achtergrond (HEX #E2EADF), met een contrastratio van 2,7:1. Ook dit is onvoldoende. Teksten zoals “Leven lang leren”, “Activiteiten in en om de Bibliotheek”, “186” en andere voldoen niet aan de minimale contrastvereisten.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ zijn bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% de links in de header zoals “Activiteiten”, “Cursussen”, “Collectie” en drie andere niet zichtbaar en niet bedienbaar. Als een bezoeker inzoomt, moet alles nog werken. Navigatie-elementen moeten dan nog steeds toegankelijk en bruikbaar zijn voor iedereen, ook voor bezoekers met een visuele beperking die afhankelijk zijn van zoomniveau.

Wanneer een willekeurige pagina van het domein — bijvoorbeeld https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk — bekeken wordt op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, zijn de volgende links in de header niet zichtbaar en niet te bedienen: “Activiteiten”, “Cursussen”, “Collectie” en drie andere.
Als een bezoeker inzoomt, moet alles blijven werken.

Wanneer de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk bekeken wordt op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, overlapt de tekst “Reserveren” in elke boekkaart andere teksten.
Zorg dat alles blijft werken en leesbaar is wanneer een bezoeker tot 200% inzoomt op een scherm van 1280 bij 1024 pixels.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ zijn bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% de links in de header, zoals “Activiteiten”, “Cursussen”, “Collectie” en drie andere, niet zichtbaar en niet bedienbaar. Als een bezoeker inzoomt, moet alles nog werken. Navigatie-elementen moeten ook bij vergroting toegankelijk en bruikbaar blijven.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie zijn bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de teksten in de tabelkoppen niet zichtbaar. Ook is de combobox “Locatie” niet zichtbaar en niet bedienbaar. Wanneer een gebruiker inzoomt, moet de functionaliteit behouden blijven. Alle informatie en interactieve onderdelen moeten dan nog steeds toegankelijk en correct weergegeven worden.

Wanneer een willekeurige pagina van het domein wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt de placeholdertekst in het zoekveld deels verloren.
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Wanneer een willekeurige pagina van het domein — bijvoorbeeld https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk — wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, zijn de volgende links in de header niet zichtbaar en niet te bedienen: “Activiteiten”, “Cursussen”, “Collectie” en drie andere.
Als een bezoeker inzoomt, moet alles nog werken.

Wanneer de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, overlapt de tekst “Reserveren” in elke boekkaart andere teksten.
Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/ staat onder de header een carrousel. In de slides van deze carrousel staan links zoals “Cursusoverzicht”, “Alles over de nieuwe expositie” en andere. Deze links gebruiken een aangepaste toetsenbordfocusindicator in de vorm van een oranje rand (HEX #FF7320) op een witte achtergrond. De contrastratio tussen deze kleuren is 2,7:1, wat lager is dan de vereiste minimale contrastratio van 3,0:1 voor aangepaste focusstijlen. Op de site wordt niet de standaard focusindicator gebruikt, maar een via CSS toegevoegde variant. Voor aangepaste focusindicatoren geldt wel een contrastvereiste. Deze moet minimaal 3,0:1 zijn. Een vergelijkbaar probleem komt voor bij andere links op dezelfde pagina, zoals “Meer spannende boeken”, “Hulp in de Bibliotheek” en “Onze computercursussen”. Ook op pagina https://www.bibliotheekbarneveld.nl/klantenservice/contactformulier.html bij de knop “Verzenden”, op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html en op andere pagina’s van de website komt dit probleem voor.

Op pagina https://www.bibliotheekbarneveld.nl/ staat onder de carrousel een rij met drie grijze stippen (HEX #999999) op een witte achtergrond. Deze geven aan welke slide actief is. De contrastratio tussen de stippen en de achtergrond is 2,8:1. Dit is te laag voor informatieve visuele aanduidingen. Voor dergelijke indicatoren geldt een minimale contrastratio van 3,0:1. Deze moet verhoogd worden zodat alle gebruikers duidelijk kunnen zien welke slide actief is.

Op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html staan onder de kop “Veelgestelde vragen over abonnementen” accordeons. Wanneer deze elementen toetsenbordfocus krijgen, verandert het “+”- of “–”-icoon van zwart naar oranje (HEX #FF7320). Deze oranje icoon op een witte achtergrond heeft een contrastratio van 2,7:1. Dit is lager dan de minimale vereiste contrastratio van 3,0:1 voor informatieve elementen. Een vergelijkbaar probleem komt voor op pagina https://www.bibliotheekbarneveld.nl/collectie/zoeken-in-de-catalogus.html bij de pijltjes naast de accordeons onder de kop “Verfijnen op resultaten” en op pagina https://www.bibliotheekbarneveld.nl/klantenservice/website-en-apps1.html.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html heeft de link “Jeugd & Educatie” onder de kop “Jeugd | 0-6 jaar” een aangepaste toetsenbordfocusindicator in de vorm van een oranje rand (HEX #FF7320) op een lichtoranje achtergrond (HEX #FDE5D0). De contrastratio tussen deze kleuren is 2,2:1. Dit is te laag voor aangepaste focusstijlen, waarvoor een minimale contrastratio van 3,0:1 geldt. Een vergelijkbaar probleem komt voor op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html bij de link “Informatiepunt” en bij mobiele weergave van de website in het “Zoeken”-menu bij de velden “Zoeken in de collectie” en “Zoeken binnen de website”.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ staat bovenaan een slider met witte pijltjes en een navigatie met stippen. Deze elementen hebben onvoldoende contrast tegen de wisselende achtergrond van de slides. Voor interactieve elementen geldt een minimale contrastratio van 3,0:1. De huidige weergave voldoet niet aan deze eis en moet worden aangepast zodat alle gebruikers, ook bij wisselende achtergronden, kunnen zien welke elementen bedienbaar zijn.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation hebben de informatieve iconen voor weergave-selectie boven de zoekresultaten onvoldoende kleurcontrast. De oranje (HEX #F78F1E) iconen op de witte achtergrond hebben een contrastverhouding van 2,4:1, wat lager is dan de vereiste 3,0:1 voor informatieve grafische elementen. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn. Zorg dat de iconen voldoende contrast hebben.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ staan bovenaan vier filters. Deze filters zijn niet toegankelijk via het toetsenbord. Het is niet mogelijk om de comboboxen te openen en te sluiten met alleen het toetsenbord. Zorg dat alle interactieve elementen, waaronder de filters, met het toetsenbord kunnen worden bediend. Alleen dan zijn ze toegankelijk voor bezoekers die geen muis gebruiken.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600# staat onder “Voer een zoekterm in” een keuzelijst met het label “Index”. Dit element is niet toegankelijk via het toetsenbord. Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend. Hetzelfde probleem doet zich voor bij de keuzelijst “Zoekindex”, die verschijnt na een klik op de knop “Uitgebreid zoeken”.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/contactformulier.html maakt het formulier alleen gebruik van HTML5-validatie voor alle invoervelden. De foutmeldingen die daarbij getoond worden, verdwijnen te snel. Er is dus sprake van een tijdslimiet. Daarom moeten foutmeldingen altijd handmatig aan het formulier worden toegevoegd. Zo krijgen bezoekers voldoende tijd om de meldingen te lezen en te begrijpen. Controleer of er nog meer formulieren op de website zijn die ditzelfde probleem hebben. Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Adreswijziging.html komt hetzelfde probleem Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Wijziging-abonnement.html worden foutmeldingen eveneens alleen weergegeven via HTML5-validatie. Deze verdwijnen automatisch en voldoen daardoor niet aan de toegankelijkheidseisen. Ook dit formulier moet worden voorzien van handmatig toegevoegde foutmeldingen zonder tijdslimiet.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ zijn skiplinks aanwezig. Deze links zijn visueel zichtbaar en toegankelijk via het toetsenbord, maar functioneren niet correct. In plaats van de focus naar het bedoelde gedeelte van de pagina te verplaatsen, leiden de skiplinks door naar de homepagina https://www.bibliotheekbarneveld.nl/. Er moet een manier zijn om vaste onderdelen zoals het navigatiemenu over te slaan. Hiervoor wordt een skiplink gebruikt. Een skiplink moet de eerste link op de pagina zijn, mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplinks goed functioneren en dat de focus daadwerkelijk wordt verplaatst naar de juiste content op de pagina.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie is hetzelfde probleem aanwezig. De skiplink is wel zichtbaar en toegankelijk via het toetsenbord, maar verplaatst de focus niet naar het bedoelde onderdeel van de pagina. Ook hier moet de skiplink correct werken en de focus verplaatsen naar het hoofdgedeelte van de pagina.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/word-lid-van-de-bibliotheek.html ontbreekt het title-element. 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. De tekst in het title-element wordt getoond in de tab van de browser en helpt gebruikers bij het navigeren tussen geopende pagina’s. Voeg een title-element toe aan de pagina met een duidelijke beschrijving van de inhoud.

De pagina’s https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.1260005, https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.2383951 en andere hebben dezelfde tekst in het title-element van de pagina: “Bibliotheek - Titelinformatie”. 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.

In het PDF-document op https://www.bibliotheekbarneveld.nl/dam/bestanden/infographic_jaarverslag2024-hr.pdf is geen titel ingesteld in de bestandseigenschappen. Ook als er op de eerste pagina visueel een titel staat, moet in de metadata van het document een titel worden ingesteld. Als een pdf wordt geopend in een pdf-lezer of browser, wordt anders alleen de bestandsnaam getoond. Door een documenttitel in te stellen, wordt het document beter herkenbaar en toegankelijk voor bezoekers met een beperking. De titel kan worden toegevoegd via de bestandseigenschappen van het bronbestand of van het pdf-bestand zelf.

Uitkomst: Onvoldoende

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

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ komt de toetsenbordfocus in de slider twee keer op dezelfde links terecht. Hierdoor belandt de focus soms op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen bezoekers per ongeluk iets activeren wat ze niet kunnen zien of begrijpen.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation openen knoppen met beoordelingssterren een “Waardering”-dialoogvenster. Op dit moment kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen en naar de onderliggende pagina verplaatsen. 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. Hetzelfde probleem doet zich voor op andere pagina’s met dezelfde beoordelingsknop.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/ staat onder de header een carrousel. Twee slides in deze carrousel bevatten links met dezelfde vage linktekst “Lees meer”. Ook onder de kop “Loop je digitaal vast?” staat een link met dezelfde tekst. Deze linkteksten beschrijven niet duidelijk waar de link naartoe leidt, wat voor verwarring kan zorgen, vooral voor bezoekers met cognitieve beperkingen of voor gebruikers van schermlezers. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn, geven geen duidelijke aanwijzing over de bestemming. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door de tekst aan te vullen met de titel van de doelpagina. Als het visueel al duidelijk is bij welk onderdeel de link hoort, kan de aanvullende tekst visueel verborgen worden.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ komen vergelijkbare problemen voor. In de slider staan drie links met de tekst “Meer weten?” en in de evenementenlijst staan meerdere links met de tekst “Meer informatie”. Deze teksten geven geen specifieke informatie over de bestemming van de links. Ook hier moet de linktekst worden aangevuld met beschrijvende informatie, zodat gebruikers weten waar de link naartoe leidt. De aanvullende tekst kan visueel verborgen worden als de context op het scherm al voldoende duidelijk is.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html staat onder de kop “Jeugd | 0-6 jaar” de link “Jeugd & Educatie” met een toegankelijke naam “before Jeugd & Educatie”. Deze naam geeft geen duidelijke beschrijving van de bestemming van de link, waardoor onduidelijkheid ontstaat voor gebruikers van schermlezers of bezoekers met cognitieve beperkingen. Zorg dat de toegankelijke naam van de link duidelijk maakt waar de link naartoe leidt.

Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html staat een soortgelijk probleem bij de link “Informatiepunt”. De toegankelijke naam geeft onvoldoende informatie over het linkdoel. De naam moet verduidelijkt worden.

Op pagina https://www.bibliotheekbarneveld.nl/over-ons/jaarverslag.html is de link “Terug naar Over ons” aanwezig met een ontoereikende toegankelijke naam. Ook hier moet de naam van de link duidelijk aangeven waar de link naartoe leidt. Dit probleem komt op meerdere pagina’s voor en moet op al die plekken worden gecorrigeerd.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk missen de paginalinks bovenaan en onderaan de pagina voldoende context. Voor ziende bezoekers is het duidelijk dat “2”, “3”, “4” enzovoort paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord “pagina”.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation staan boven de zoekresultaten drie afbeeldingen voor de weergave-opties die functioneren als links. Hun tekstalternatief ontbreekt, waardoor de links ontoegankelijk zijn. Hierdoor hebben deze links geen inhoud en is het onduidelijk waar ze naartoe leiden. Dit probleem houdt verband met succescriterium 4.1.2, omdat de links ook geen toegankelijke naam hebben. Dit kan worden opgelost door verborgen tekst aan de links toe te voegen, maar andere oplossingen zijn ook mogelijk. Hetzelfde probleem doet zich voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.1260005 bij de afbeeldingen onder de tekst “Nederlands” in de secties “Titelinformatie” en “Uitgebreide titelinformatie”.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/ staat bovenaan een carrousel met een knop “Volgende” om door de slides te navigeren. Deze naam is te beperkt. De toegankelijke naam van deze knop moet worden aangepast naar “Volgende slide” om duidelijk te maken wat de functie is. Een vergelijkbaar probleem is aanwezig bij de knoppen “Vorige” en “Volgende” in de carrousel naast de kop “Nieuwe boeken” op dezelfde pagina, op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html naast de kop “Nieuwe boeken | 0-6 jaar” en op andere pagina’s met carrousels.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html zijn afbeeldingen en links opgenomen in heading-elementen. Dit belemmert de toegankelijkheid voor bezoekers die schermlezers gebruiken, omdat zij via koppen de structuur van een pagina verkennen. Alleen tekst die daadwerkelijk de functie van een kop vervult, mag binnen een heading-element geplaatst worden. Verwijder alle inhoud zoals afbeeldingen en links uit de h3-elementen en laat enkel de tekst staan die de kop aanduidt, zoals “Homepagina” en “Klantenservice”. Een vergelijkbaar probleem komt voor op pagina https://www.bibliotheekbarneveld.nl/404.html en op pagina https://www.bibliotheekbarneveld.nl/collectie/inspiratie.html onder de kop “Speciaal voor jeugd & jongeren”.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html bevat de video bedieningsknoppen met foutieve informatie over toetsenbordbediening. De afspeelknop heeft bijvoorbeeld als toegankelijke naam “Afspelen sneltoets k”, terwijl deze sneltoets niet beschikbaar is. Dit kan verwarrend zijn voor bezoekers die afhankelijk zijn van hulpsoftware. Verwijder of corrigeer verwijzingen naar niet-bestaande sneltoetsen in de toegankelijke namen van de videobediening. Een vergelijkbaar probleem komt voor bij de video op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html.

Op pagina https://www.bibliotheekbarneveld.nl/Informatiepunt/informatiepunt-digitale-overheid.html staat onder de kop “Hoe kunnen we je helpen?” een iframe met de titel “Video”. Iframes moeten een goede beschrijving hebben, die meestal wordt toegevoegd via het title-attribuut. De huidige titel geeft alleen het type inhoud aan, maar niet waar de video over gaat. De beschrijving moet uniek en betekenisvol zijn, zodat blinde bezoekers kunnen bepalen of de inhoud relevant is. De titel van het iframe moet daarom worden aangepast om de inhoud van de video duidelijk te beschrijven.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website voor het eerst wordt bezocht, verschijnt er een cookiebanner bovenaan de pagina. Na het klikken op de knop “Lees hier meer over cookies” wordt een dialoogvenster geopend. In dit venster is de toetsenbordfocus niet zichtbaar op de “X”-knop. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar de focus zich bevindt, zodat zij weten wanneer ze op Enter moeten drukken om een knop of link te activeren.

Op alle pagina’s van de website, bijvoorbeeld op pagina https://www.bibliotheekbarneveld.nl/, is in de header de toetsenbordfocus niet zichtbaar op de twee keuzerondjes “Catalogus” en “Site”. Interactieve elementen moeten altijd een zichtbare focusindicator hebben, met voldoende contrast ten opzichte van de achtergrond en omliggende elementen.

Op pagina https://www.bibliotheekbarneveld.nl/jeugd-en-educatie/0-6.html zijn onder de knop “Bekijk ook de boeken op onderwerp” afbeeldingen aanwezig die als links fungeren en focusbaar zijn. De toetsenbordfocus is hier echter niet zichtbaar. Zorg ervoor dat alle interactieve elementen, waaronder deze afbeeldingslinks, een duidelijke en zichtbare focusindicator hebben. Een vergelijkbaar probleem doet zich voor op pagina https://www.bibliotheekbarneveld.nl/over-ons.html bij de afbeeldingslinks onder de koppen “Jaarverslagen” en “Beleidsplan 2021-2024”.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ is de toetsenbordfocus niet zichtbaar op de links in de paginering. Ook hier moet een zichtbare focusindicator worden toegevoegd, zodat gebruikers die met het toetsenbord navigeren kunnen zien welk element de focus heeft.

Op het hele domein is de toetsenbordfocus niet zichtbaar op alle interactieve elementen. Zie bijvoorbeeld de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#searchterm=werk. 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 ze zich op de pagina bevinden. Anders weten ze niet wanneer ze op Enter moeten drukken om een knop of link te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website is een zoekveld aanwezig met de placeholdertekst “Waar ben je naar op zoek?”. De toegankelijke naam van dit invoerveld is echter “Zoekopdracht”. Omdat de toegankelijke naam niet overeenkomt met de zichtbare tekst, kunnen bezoekers die gebruikmaken van spraaksoftware het veld niet bedienen. Zij geven opdrachten op basis van de zichtbare tekst. Als deze tekst niet voorkomt in de toegankelijke naam, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin van de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie bevat de tabel een select-element zonder zichtbaar label. De eerste optie “Locatie” fungeert als een pseudo-label, maar verdwijnt zodra een andere waarde wordt gekozen. Hierdoor kunnen bezoekers die gebruikmaken van spraaksoftware het element niet correct bedienen. Het label moet altijd zichtbaar blijven en opgenomen zijn in de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, werkt het stemcommando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin. De toegankelijke naam mag ook exact gelijk zijn aan de zichtbare tekst.

De pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600# bevat een invoerveld en een selectievak met de zichtbare labels “Zoek naar” en “Index”. Hun toegankelijke namen zijn echter leeg.
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 de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/ is de waarde van het lang-attribuut onjuist ingesteld als “nl_NL”. De correcte waarde voor het lang-attribuut is “nl-NL”, met een koppelteken in plaats van een underscore. Dit is belangrijk zodat hulpsoftware, zoals schermlezers, de juiste uitspraakregels voor Nederlandse inhoud kan toepassen. Pas het lang-attribuut aan naar “nl-NL” op deze pagina.

Uitkomst: Onvoldoende

Bevindingen: De slider op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/ bevat navigatiepijlen en stipknoppen met toegankelijke namen in het Engels, zoals “previous slide / item”, “next slide / item”, “slide item 1” enzovoort. Deze teksten worden door schermlezers uitgesproken volgens de uitspraakregels van de hoofdtaal van de pagina, die in dit geval Nederlands is. Hierdoor klinken de Engelse teksten onnatuurlijk of onbegrijpelijk. Vertaal de toegankelijke namen naar het Nederlands, zodat schermlezers ze correct uitspreken en gebruikers begrijpen wat de functie van elk element is.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie staat in de tabel een select-element met het label “Locatie”. Wanneer een andere optie wordt geselecteerd, wordt de pagina direct opnieuw geladen. Dit mag niet onverwacht gebeuren. Bezoekers moeten van tevoren gewaarschuwd worden dat het selecteren van een andere optie een herlaadactie veroorzaakt. Een alternatieve oplossing is om een knop toe te voegen waarmee de bezoeker de selectie bevestigt, zodat de actie pas wordt uitgevoerd nadat daar bewust voor is gekozen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/contactformulier.html maakt het formulier gebruik van HTML5-validatie. Wanneer het formulier met onjuiste of onvolledige gegevens wordt verzonden, verschijnen standaard HTML5-foutmeldingen. Deze foutmeldingen worden niet door alle browsers en schermlezers op een toegankelijke en consistente manier ondersteund. In sommige browsers zijn de meldingen kortaf of onvolledig, wat verwarrend kan zijn voor gebruikers. Voeg daarom altijd zelf foutmeldingen toe aan het formulier, zodat deze duidelijk en toegankelijk zijn. Controleer of er nog meer formulieren zijn die dit probleem hebben. Een vergelijkbaar probleem komt voor op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Adreswijziging.html. Ook hier worden standaard HTML5-foutmeldingen gebruikt, die in toegankelijkheid en duidelijkheid tekortschieten. Voeg handmatige foutmeldingen toe aan het formulier om dit op te lossen. Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/wijzigingen-lidmaatschap/Wijziging-abonnement.html is hetzelfde probleem aanwezig. De standaard foutmeldingen moeten worden vervangen of aangevuld met toegankelijke foutmeldingen die voor iedereen begrijpelijk zijn.

Op pagina https://www.bibliotheekbarneveld.nl/klantenservice/contactformulier.html zijn meerdere verplichte velden aangeduid met een asterisk (*). Als hiervoor gekozen wordt, is het belangrijk om boven het formulier een instructie te plaatsen, zoals “Velden met een * zijn verplicht”. Zo wordt het voor alle bezoekers duidelijk wat het sterretje betekent. Dit is een best practice voor toegankelijke formulieren.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website voor het eerst wordt bezocht, verschijnt er bovenaan een cookiebanner. Na het klikken op de knop “Lees hier meer over cookies” wordt een dialoogvenster geopend. Dit dialoogvenster heeft geen juiste ARIA-rol en geen toegankelijke naam. Hierdoor kunnen schermlezers niet aangeven dat het om een dialoogvenster gaat en ook niet wat de inhoud ervan is. Dit kan worden opgelost door het dialoogvenster het attribuut role="dialog" te geven en een toegankelijke naam toe te voegen via bijvoorbeeld aria-label="Beschrijving van de inhoud".

Op alle pagina’s van de website heeft de zoekbalk in het bovenste menu een zoekknop zonder toegankelijke naam. Daardoor is het voor bezoekers die gebruikmaken van schermlezers niet duidelijk wat de knop doet. De knop moet een toegankelijke naam krijgen, bijvoorbeeld met aria-label="Zoeken". Een vergelijkbaar probleem doet zich voor op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/. Ook daar ontbreekt een toegankelijke naam bij de zoekknop. Voeg hier eveneens een toegankelijke naam toe aan de knop, zodat schermlezersgebruikers begrijpen wat de functie is.
Wanneer de website op een klein scherm wordt bekeken en de optie “Zoeken” in het hoofdmenu wordt geopend, verschijnt er een submenu met invoervelden voor “Zoeken in de collectie” en “Zoeken binnen de website”. De knoppen naast deze velden hebben geen toegankelijke naam. Voeg een toegankelijke naam toe aan beide knoppen, bijvoorbeeld met aria-label="Zoeken in de collectie" en aria-label="Zoeken binnen de website", zodat duidelijk is welke actie de knop uitvoert voor gebruikers van schermlezers.

Op kleine schermen worden het hamburgermenu en de zoekoptie weergegeven als interactieve elementen. Deze zijn echter foutief gecodeerd als invoerelementen met role="checkbox". Hierdoor wordt de functie niet juist doorgegeven aan hulpsoftware. De knop voor het openen en sluiten van het menu moet als knop worden herkend. Gebruik hiervoor een echt button-element of voeg het attribuut role="button" toe. Geef de status van het menu aan met bijvoorbeeld aria-expanded="true" of aria-expanded="false", zodat schermlezers kunnen aangeven of het menu open of gesloten is. Pas deze elementen aan zodat ze correct functioneren voor bezoekers die niet visueel kunnen waarnemen of het menu geopend is.

Op pagina https://barneveld-kootwijkerbroek-voorthuizen.op-shop.nl/327/helderman-voorstelling-over-dementie staat in de tabel een select-element met het label “Locatie”. Dit element heeft geen toegankelijke naam. Daardoor is het niet toegankelijk voor bezoekers die hulpsoftware gebruiken. Geef het select-element een toegankelijke naam die overeenkomt met het zichtbare label, bijvoorbeeld door gebruik te maken van een label-element of het attribuut aria-label.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation openen knoppen met beoordelingssterren een “Waardering”-dialoogvenster. In dit dialoogvenster mist het invoerveld onder “Geef je mening” een toegankelijke naam.
Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij moeten invullen. 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. Hetzelfde probleem doet zich voor op andere pagina’s met dezelfde beoordelingsknop.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation staan onder de kop “Verfijn op” secties met verborgen inhoud. Hoewel de geopende of gesloten staat visueel duidelijk is, wordt deze niet programmatisch doorgegeven aan schermlezers. Voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dit niet duidelijk. Dit kan worden opgelost door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties worden in- en uitgeklapt, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600# missen het invoerveld “Zoek naar” en de keuzelijst “Index” toegankelijke namen. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij moeten invullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef deze elementen dus een toegankelijke naam, bijvoorbeeld door een label-element te koppelen.

Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation staan boven de zoekresultaten drie afbeeldingen die functioneren als links voor weergave-opties. Deze links hebben geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de functie of bestemming van de links is. Geef deze links toegankelijke namen die het doel van de link beschrijven. Zie ook succescriteria 1.1.1 en 2.4.4. Hetzelfde probleem komt voor op de pagina https://www.sambis.nl/iguana/www.main.cls?surl=search&p=b3ffb134-c1b9-11e4-9f2d-50569b526600#recordId=2.1260005 bij de afbeeldingen onder de tekst “Nederlands” in de secties “Titelinformatie” en “Uitgebreide titelinformatie”.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.sambis.nl/iguana/www.main.cls?sUrl=BNV_SearchHF#navigation passen de filters in de sectie “Opties” de zoekresultaten aan, waarna een melding zoals “1-10 uit een totaal van 166 resultaten” verschijnt zonder dat de pagina opnieuw wordt geladen. Deze melding is een statusbericht, maar wordt niet aangekondigd door schermlezers omdat het geen toetsenbordfocus krijgt. Dat zou wel moeten gebeuren. 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 worden opgelost door een aria-live-attribuut aan de melding toe te voegen.