Rapport:
Audit digitale toegankelijkheid van website kb.nl en galerij.kb.nl

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website https://www.kb.nl/, dat ook een link is, geeft de volledige tekst "KB nationale bibliotheek" weer, maar het tekstalternatief is alleen "KB-logo". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander het tekstalternatief zodat het woord 'logo' en alle tekst die in het logo te zien is hierin terugkomt. Hetzelfde probleem wordt waargenomen in de footer. Een soortgelijk probleem is waargenomen op andere pagina's. Op pagina https://webloket.kb.nl/login met het logo bovenaan. Het logo toont de volledige tekst "KB nationale bibliotheek", maar de alt-tekst is alleen "Ga naar www.kb.nl". Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 op het zijpaneel staat een knop met een logo. De tekst op het logo is "KB". De alternatieve tekst is "Meer informatie" en komt van het aria-label.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk onder het kopje "Heldendaad" staat een informatieve afbeelding met een leeg alt-attribuut. Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alternatieve tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker. Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut. Zie hetzelfde probleem met dezelfde afbeelding in de carrousel die kan worden geopend door te klikken op de knop met het pictogram voor volledig scherm aan de rechterkant van de afbeelding.
Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026 met afbeelding onder de kop “Why do we have a Research Agenda?”.

In de footer op pagina https://galerij.kb.nl/ fungeren pictogrammen van sociale media onder het kopje "Volg ons op" als links, maar het tekstalternatief ontbreekt, waardoor de links niet toegankelijk zijn. De afbeeldingen zijn dus interactief. Er zijn geen tekstalternatieven. Daardoor hebben de links geen inhoud (zie ook succescriterium 2.4.4 en 4.1.2). Om de links toegankelijk te maken, moeten de afbeeldingen tekstalternatieven krijgen die het linkdoel beschrijven. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden. Bovendien worden deze pictogrammen verborgen voor schermlezers met aria-hidden="true". Schermlezers negeren inhoud met het attribuut aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Verwijder deze attributen zodat een blinde bezoeker dezelfde informatie krijgt als een ziende bezoeker.

Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 bevat elke slide meerdere afbeeldingselementen met hetzelfde tekstalternatief. Op de slide met pagina 1 staan bijvoorbeeld zes afbeeldingen met alt-tekst: “tegel van afbeelding van pagina('s)”.

Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 opent de knop met het deelpictogram in het zijpaneel de sectie met links. Deze links bevatten decoratieve afbeeldingen met tekstalternatieven die de tekst in de knopelementen dupliceren. Hierdoor wordt dezelfde tekst twee keer aangekondigd, bijvoorbeeld "Embed Embed". Zorg ervoor dat de decoratieve afbeeldingen verborgen zijn voor schermlezers.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/onderzoeksagenda_2023-2026_in_opmaak_eng.pdf zijn decoratieve afbeeldingen aanwezig, ten onrechte getagd met figure-tags zonder beschrijvingen. Zie de eerste pagina en pagina 11. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/onderzoeksagenda_2023-2026_in_opmaak_eng.pdf staat op de eerste pagina een logo met de volgende Alt-tekst: "Logo Koninklijke Bibliotheek (kb)". De zichtbare tekst in het logo is echter "KB nationale bibliotheek". Zorg ervoor dat de alternatieve tekst het woord 'logo' bevat en alle tekst die in het logo te zien is.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk bevat een video met een voice-over. Er zijn ondertitels aanwezig, maar deze worden automatisch gegenereerd en zijn daarom 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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staat een video. De video bevat op verschillende punten tekst en logo's (bijvoorbeeld rond 0:15 en 2:29). Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Het beste kan een audiobeschrijving toegevoegd worden 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 ook te voldoen aan succescriterium 1.2.5 moet er sowieso een audiobeschrijving zijn.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk voldoet niet aan succescriterium 1.2.5, dat audiobeschrijving voor video's vereist. Specifiek voor deze video is audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: Als in de footer van de website https://www.kb.nl/ op de knop "Aanmelden" wordt geklikt, wordt een dialoogvenster geopend. In dit dialoogvenster is de volgende tekst niet gemarkeerd als een kop: "Dank voor je aanmelding". Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/zoeken/content met tekst “880 resultaten” gelegen boven de zoekresultaten.

Op pagina https://www.kb.nl/contact onder "Stel je vraag of geef ons je mening" wordt een blok tekst met twee alinea's ten onrechte gemarkeerd als een enkel <p>-element. Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code. Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/bezoek-lidmaatschap/wegwijzer in de sectie met verborgen inhoud die wordt geopend door de knop “Leeszaal Bijzondere Collecties: 2e verdieping”.

Op pagina https://www.kb.nl/contact, onder het kopje "Hulp nodig bij het inloggen?" zijn twee teksten onjuist gemarkeerd als koppen: “Veelgestelde vragen voor KB-leden” en “Veelgestelde vragen voor leden van openbare bibliotheken of online bibliotheek”. Het kop-element (h) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Hetzelfde probleem wordt waargenomen op pagina https://galerij.kb.nl/ met de tekst "Menu" die is gemarkeerd als <h2> maar er geen inhoud onder heeft.

Op pagina https://www.kb.nl/zoeken/content geeft de broodkruimelnavigatie visueel de huidige pagina aan, maar deze informatie is niet aanwezig in de code.
Deze informatie is niet in de code vastgelegd. Hierdoor is deze informatie niet beschikbaar voor bezoekers die een schermlezer gebruiken. Zorg dat ook in de code is vastgelegd welke link van de huidige pagina is.

Op pagina https://www.kb.nl/zoeken/content wordt de paginering onder de zoekresultaten aangegeven met het <ul>-element, wat correct is voor een groep pagina links. Dit <ul> element bevat echter het element met de ARIA role="presentation", wat niet is toegestaan. Dit is niet toegestaan omdat lijstitems in <ul> hun rol moeten behouden om de lijststructuur te behouden voor gebruikers van schermlezers. Het wijzigen of verwijderen van deze rol kan de verwachte navigatie en het begrip van de lijst doorbreken. Zorg ervoor dat deze lijst met <ul>-elementen alleen <li>-elementen bevat.

Op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee onder het kopje "Verstilde landschappen en stadsgezichten" staat een carrousel. De slide's in deze carrousel zijn gecodeerd met li-elementen. Deze li-elementen worden echter niet in een parent-element geplaatst zoals <ul> of <ol>. Dit is niet correct, omdat li-elementen altijd deel moeten uitmaken van een lijststructuur. Zorg ervoor dat li-elementen binnen <ul>- of <ol>-elementen staan. Elementen uit lijstitems moeten altijd deel uitmaken van een correcte lijststructuur, zodat schermlezers de bezoeker kunnen vertellen dat ze een lijst horen.

Op pagina https://www.kb.nl/over-deze-site/toegankelijkheid wordt in de navigatiebalk in de koptekst de tekst "EN" weergegeven met een horizontale streep erdoorheen, wat duidt op een doorgehaalde tekst. Deze visuele informatie is niet beschikbaar voor gebruikers van schermlezers omdat deze niet is opgenomen in de HTML. Om deze informatie toegankelijk te maken, gebruik je een aria-label of visueel verborgen tekst om aan te geven dat de taaloptie "EN" niet actief of niet beschikbaar is. Op deze manier krijgen bezoekers die schermlezers gebruiken dezelfde informatie als ziende bezoekers.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk, het strong-element wordt niet op de juiste manier gebruikt, namelijk alleen voor stylingdoeleinden. De hele alinea tekst die begint met “"Dan liever de lucht in!" Dat zou volgens …” is verpakt in een strong-element om de tekst vet te maken. 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 andere pagina's. Op pagina https://www.kb.nl/nieuws/kb-in-2024-grote-stappen-in-leesbevordering-en-data-onderzoek met de tekst die begint met “In 2024 heeft de KB nationale bibliotheek ...”. Op pagina https://www.kb.nl/bezoek-lidmaatschap/boek-reserveren-lenen-inzien-verlengen onder de kop “Boeken ophalen” het strong- element wordt gebruikt voor de teksten in de tabelkopcellen. Op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee met de tekst die begint met “Na een carrière van 34 jaar gaat ...”. Op pagina https://www.kb.nl/onze-organisatie het strong-element wordt gebruikt op teksten als “Bestuurs- & Organisatiezaken”, “Netwerkmanager openbare bibliotheken”, “Lezen & digitale geletterdheid”, “Algemeen directeur”, en anderen.
Zie ook andere pagina's.

Op pagina https://www.kb.nl/werken-bij/senior-informatiespecialis worden de volgende teksten ten onrechte gemarkeerd met strong in plaats van met de juiste heading-elementen: "Maak jij het mogelijk?", "Over de KB en het team", "Ben jij het talent dat wij zoeken?", en anderen. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/boek-reserveren-lenen-inzien-verlengen staat onder het kopje "Boeken ophalen" een gegevenstabel. De juiste opmaak ontbreekt. De volgende cellen zijn gemarkeerd met td-element: “Dag van aanvraag”, “Tijd van aanvraag” en “Boeken afhalen”. Een gegevenstabel heeft een rij met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th-elementen en de gegevens in td-elementen.

Op pagina https://www.kb.nl/onze-organisatie wordt onder het kopje "Algemeen Bestuurscollege" het em-element verkeerd gebruikt voor stylingdoeleinden. Zie de tekst “Wet op het hoger onderwijs en wetenschappelijk onderzoek”. Het em-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 (cursieve tekst). Gebruik hiervoor CSS.

Op pagina https://www.kb.nl/onze-organisatie staan teksten die visueel aan elkaar gerelateerd zijn als term-definitie paren, bijvoorbeeld onder het kopje "Onze afdelingen" waar de tekst "Bestuurs- & Organisatiezaken" wordt weergegeven als term en "Anouk Janssen" als definitie. Deze relatie wordt echter niet correct aangegeven in de HTML-code. Zonder de juiste markup kunnen screenreaders deze teksten niet als verbonden herkennen.

Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 op het zijpaneel staan knoppen met het pictogram "+" en "-". Als de afbeeldingen op de slides volledig zijn in- of uitgezoomd, worden deze knoppen inactief. Dit wordt visueel weergegeven door een verandering in de kleur van de knop. Deze toestandsverandering wordt echter niet aangegeven in de HTML-code. Daardoor kunnen schermlezers en andere hulpsoftware niet zien dat de knoppen zijn uitgeschakeld.

Op pagina https://webloket.kb.nl/aanmelden is een formulier aanwezig. In dit formulier hebben de keuzerondjes een groepslabel "Soort publicatie", maar dit label is niet programmatisch gekoppeld aan deze groep keuzerondjes. Dit gebrek aan link betekent dat gebruikers van schermlezers niet op de hoogte zijn van de relatie tussen het groepslabel en de formulierelementen die het beschrijft. De groepslabels moeten expliciet gekoppeld worden aan de bijbehorende groepen van formulierelementen. Dit kan door het formulier goed te structureren met <fieldset> en <legend> elementen. Andere oplossingen zijn mogelijk. Bovendien zijn de label-elementen met de teksten naast de keuzerondjes niet expliciet gekoppeld aan de betreffende knoppen. Momenteel gebruiken alle keuzerondjes hetzelfde id-attribuut dat verwijst naar het label "Soort publicatie". Als een <label> element wordt gebruikt, moet het gekoppeld zijn aan het bijbehorende invoerveld in de HTML. De aanbevolen aanpak is om het for-attribuut op het <label>-element te gebruiken, met verwijzing naar het id-attribuut van het invoerveld. Deze associatie zorgt ervoor dat gebruikers van schermlezers onmiddellijk op de hoogte zijn van het doel van het invoerveld als ze er rechtstreeks naartoe navigeren.

Op pagina https://webloket.kb.nl/aanmelden staat een formulier. Als de bezoeker het formulier verzendt met onjuiste gegevens, bijvoorbeeld met onjuiste "Wachtwoord" en "Herhaal wachtwoord", worden de foutmeldingen onder de velden weergegeven. Schermlezers in de "formulier"-modus slaan echter vaak inhoud tussen invoervelden over, waardoor de foutmelding mogelijk niet wordt weergegeven. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf staan verschillende koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld op pagina 1 "Jaarverslag 2024", op pagina 2 "Leeswijzer", op pagina 50 "Toelichting balans", en andere. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur. Dezelfde kwestie staat in het PDF-document op https://www.kb.nl/sites/default/files/documents/onderzoeksagenda_2023-2026_in_opmaak_eng.pdf op pagina 1 met de teksten "Colofon", "Uitgever", "Redactioneel", "Illustraties", en andere.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf op pagina 10 - 11 is de alinea die begint met "Wat we het afgelopen jaar per doel hebben ..." gemarkeerd met twee P-tags, hoewel het één alinea is. Hetzelfde geldt voor pagina's 13 - 14 met de tekst die begint met "De KB is verantwoordelijk voor ...", op pagina's 21 - 22 met de tekst die begint met "In 2024 hebben we - tegelijkertijd ..." en andere pagina's.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf staan op pagina 19 twee gegevenstabellen. De juiste opmaak ontbreekt. De cellen met de teksten "Bereik onder sociale wetenschappers" en "Bereik onder geesteswetenschappers" in de eerste tabel en de cel met de tekst "2023" in de tweede tabel zijn gemarkeerd als gegevenscellen (TD). Bij een datatabel moeten speciale tags toegevoegd worden voor de tabelkoppen. Dan begrijpen schermlezers de relatie tussen de kop en onderliggende datacellen. Markeer de cellen in de koprij van de tabel met `TH`-tags en de datacellen met `TD`-tags. Zie hetzelfde probleem ook in de tabellen op andere pagina's.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf, op pagina 36, zijn de grafiek en de tekst ernaast toegevoegd als artefacten. Dit betekent dat ze niet beschikbaar zijn voor schermlezers, waardoor de informatie die ze overbrengen niet toegankelijk is voor blinde of slechtziende bezoekers. Hetzelfde probleem wordt waargenomen op pagina 90 - 98.

Advies. Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staat een carrousel die kan worden geopend door te klikken op de knop met het pictogram voor volledig scherm rechts van de afbeeldingen onder de kopjes "Heldendaad", "Restanten in de KB", "Hoe is de KB aan deze objecten gekomen?" en "Meer weten?". De slide's in de carrousel gebruiken role="group" en aria-roledescription="slide", waardoor gebruikers van schermlezers begrijpen dat elk item deel uitmaakt van een slidevoorstelling. Er is echter geen informatie over de positie van elke slide in de set, zoals "slide 1 van 3". Zonder deze context weten gebruikers van schermlezers mogelijk niet hoeveel slide's er zijn of waar ze zich in de reeks bevinden. Dit kan de navigatie verwarrend maken.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.kb.nl/zoeken/content is de volgorde van HTML-elementen binnen sommige zoekresultaten onjuist, waarbij teksten boven koppen staan. Zie bijvoorbeeld het zoekresultaat onder de kop "KB-diensten uitzonderlijk veel gebruikt voor wetenschappelijk onderzoek". De huidige volgorde is teksten "Nieuws" en "25 april 2024", dan kop, tekst, link en afbeelding. Hetzelfde probleem doet zich ook voor bij de volgorde van HTML-elementen onder de kop "De Stijl keert terug". Zie ook andere zoekresultaten. Dit komt omdat de koppen bij sommige zoekresultaten niet bovenaan staan. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken, als zij door de verschillende zoekresultaten gaan is het onduidelijk welke gegevens bij welke koppen horen. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website https://www.kb.nl/ staat een invoerveld voor persoonlijke gegevens: "E-mailadres". Dit invoerveld mist het attribuut voor automatisch aanvullen. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes. Hetzelfde probleem wordt waargenomen in het formulier op pagina https://www.kb.nl/contact en in de formulieren op pagina https://webloket.kb.nl/login en https://webloket.kb.nl/aanmelden.

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf staan op pagina 35 en 36 grafieken. Kleur wordt gebruikt om informatie te geven. Zie de legenda en de balken in de grafieken. Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee staat onder het kopje "Verstilde landschappen en stadsgezichten" een carrousel. Er zijn knoppen met stippen om naar een bepaalde slide te gaan. De kleur van de inactieve stippen is grijs. Wanneer deze knoppen toetsenbordfocus krijgen of met de muis worden aangeklikt, verandert de kleur van de stippen in oranje. Deze stippen gebruiken een aangepaste indicator voor toetsenbordfocus die alleen vertrouwt op een kleurverandering. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende, omdat de contrastverhouding tussen de gefocuste en niet-gefocuste staat van de achtergrondkleur/randkleur minder dan 3,0:1 is. 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 op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.kb.nl/, in het hoofdnavigatiemenu, opent de link "Onderzoeken & vinden" een submenu. In dit submenu hebben de teksten van de links onder de kopjes "Voor de professionele onderzoeker" en "Zoek direct in ..." onvoldoende kleurcontrast wanneer ze toetsenbordfocus krijgen. De tekst van de links is blauw (HEX #2B4B9A) op de rode (HEX #EF6079) achtergrond. De contrastverhouding is 2,6:1. Zorg dat de kleur van de link bij toetsenbordfocus minimaal een contrast van 4,5:1 met de achtergrond heeft.

In de footer van de website https://www.kb.nl/ heeft de foutmelding met tekst "Het veld E-mailadres is verplicht." onder het invoerveld een rode (HEX #A5112B) kleur op de zwarte (HEX #101111) achtergrond. De contrastverhouding is 2,4:1. Dit moet minstens 4,5:1 zijn.

In het PDF-document bij https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf op pagina 90 staat а witte tekst die begint met "Risico van een afwijking van materieel ..." op de blauwe (HEX #00B8F5) achtergrond. De kleurcontrastverhouding is te laag: 2,3:1. Zorg dat het contrast minimaal 4,5:1 is.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina's van de website https://www.kb.nl/ worden bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, wordt het logo bovenaan vervangen door een vereenvoudigd logo. Hierdoor ontbreekt de tekst "nationale bibliotheek". Door deze versimpeling gaat er informatie verloren, en dat is niet toegestaan. Als tekst in een logo niet op een klein scherm past, zet die dan als gewone tekst op de pagina.

Wanneer de homepage https://www.kb.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, valt onder het kopje "Publicaties uit en over de LHBTIQ+-gemeenschap in Nederland" de tekst weg die begint met "Collectiespecialist Channa Hoogervorst werpt ...". Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Wanneer de pagina https://webloket.kb.nl/aanmelden wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, en de bezoeker met de muisaanwijzer over de pictogrammen met de “i” beweegt waardoor tooltips worden geactiveerd, komt de tekst in de tooltips buiten de rechterrand van het viewport. Hierdoor wordt de tekst afgesneden.

Wanneer de pagina https://galerij.kb.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, en de bezoeker met de muisaanwijzer op de links "Home" en "Galerij" gaat staan, worden de submenu's niet weergegeven. Als gevolg hiervan zijn de submenulinks niet zichtbaar en niet bedienbaar.

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf, op pagina 89, staat een afbeelding met ingesloten tekst. Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de startpagina https://www.kb.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, is het volgende interactieve element niet zichtbaar en bruikbaar: de link "Over ons". Deze link wordt overlapt door de sectie "Onderzoekers". Als een bezoeker inzoomt, moet alles nog werken.

Wanneer de pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, zijn de links en een knop aan de rechterkant van de afbeelding onder het kopje "Heldendaad" niet zichtbaar en bruikbaar. Hetzelfde probleem wordt waargenomen op pagina's https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee onder “Foto's van mensen en boeken”, “Als alles samenvalt”, “Verstilde landschappen en stadsgezichten” en https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026 onder “Why do we have a Research Agenda?”.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.kb.nl/, in het navigatiemenu bovenaan, gebruiken de links "Zoeken", "Werken bij" en "Contact" een aangepaste toetsenbordfocus-indicator. Dit is een oranje (HEX #CC8500) rand op een lichtbeige (HEX #ECDCC8) achtergrond. De contrastverhouding is 2,3:1, wat onder het vereiste minimum van 3,0:1 ligt. Ook wanneer deze links toetsenbordfocus krijgen, verandert de kleur van de tekst van de links van zwart (HEX #101111) naar blauw (HEX #2B4B9A). De contrastverhouding is 2,3:1. Op deze website wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een (gekleurde) rand. Die aanpassing is met CSS toegevoegd. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Dit moet ten minste 3,0:1 zijn. Deze aangepaste toetsenbordfocus-indicator in de vorm van een oranje rand wordt toegepast op de interactieve elementen op de pagina's van de website https://www.kb.nl/ en heeft een onvoldoende contrastverhouding ten opzichte van de achtergrond. Hieronder worden voorbeelden gegeven. Ze zijn echter niet volledig. Dit probleem wordt waargenomen in het submenu dat wordt geopend door de link "Onderzoeken & vinden". Wanneer de links onder de kopjes "Voor de professionele onderzoeker" en "Zoek direct in ..." toetsenbordfocus krijgen, heeft de oranje rand op een rode (HEX #EF6079) achtergrond een contrast van 1,0:1. De tekst van de links verandert ook van zwart naar blauw. De tekst van de links verandert ook van kleur, van zwart naar blauw. In de header in het bovenste navigatiemenu is er een knop "Catalogus" die een paneel opent met een zoekveld. In dit paneel bevindt zich een "X"-knop die een oranje rand heeft op de lichtbeige achtergrond wanneer deze de focus van het toetsenbord krijgt.

Op de startpagina https://www.kb.nl/ onder het kopje "Lid worden" heeft de link "Kies je lidmaatschap" een oranje focusrand op de blauwe (HEX #96BDED) achtergrond. De contrastverhouding is 1,6:1.

Op pagina https://www.kb.nl/contact wordt, wanneer een bezoeker een bestand uploadt onder "Bestanden", het selectievakje weergegeven met de link naar het geüploade bestand. De contrastverhouding tussen de grijze (HEX #C7C7C7) rand van het selectievakje en de witte achtergrond van de pagina is 1,7:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee staat onder het kopje "Verstilde landschappen en stadsgezichten" een carrousel. Er zijn knoppen met stippen om naar een bepaalde slide te gaan. De grijze (HEX #BFBFBF) kleur van de inactieve stippen heeft een contrastverhouding van 1,8:1 tegen de witte achtergrond. Wanneer deze knoppen toetsenbordfocus krijgen of met de muis worden aangeklikt, is de kleur van de stippen oranje (HEX #FFA500) op de witte achtergrond. De contrastverhouding is 2,0:1. Een soortgelijk probleem wordt waargenomen bij pijlknoppen die worden gebruikt om tussen de slides te navigeren. Als deze knoppen toetsenbordfocus krijgen of met de muis worden aangeklikt, is de kleur van de pijlen oranje (HEX #FFA500) op de witte achtergrond met een contrastverhouding van 2,0:1. In al deze gevallen moet de contrastverhouding ten minste 3,0:1 zijn.

Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875, in het zijpaneel, staan knoppen met de pictogrammen "+" en "-". Als de afbeeldingen op de slides volledig zijn in- of uitgezoomd, hebben deze pictogrammen een grijze kleur (HEX #4A5054) op een donkergrijze achtergrond (HEX #2B3338). De contrastverhouding is 1,6:1. Dit moet minstens 3,0:1 zijn.

Wanneer op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 de knoppen op het zijpaneel zijn geselecteerd, wordt dit aangegeven door de donkergrijze (HEX #262D30) achtergrondkleur van de knoppen. Zie knoppen zoals de knop met een deelpictogram, de knoppen met de pictogrammen "+" en "-" en andere. De contrastverhouding tussen de geselecteerde en niet-geselecteerde toestanden is 1,1:1. Dit moet minstens 3,0:1 zijn.

In het PDF-document op https://www.kb.nl/sites/default/files/documents/TGA%20-%20KB_Jaarverslag2024_DEFINITIEF%20.pdf staat op pagina 36 een grafiek. De contrastverhouding tussen de lijnen in de grafiek en de achtergrond is onvoldoende. De lichtblauwe (HEX #B2DDDF) lijnen en stippen tegen de witte achtergrond hebben een contrast van 1,5:1. De lichtbruine (HEX #D89F41) lijnen en stippen tegen de witte achtergrond hebben een contrast van 2,3:1. De lichtbeige (HEX #F3DFC2) lijnen van het grafiekraster tegen de witte achtergrond hebben een contrast van 1,3:1. Dit moet minstens 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium, worden er meerdere problemen waargenomen op de pagina's van de website. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Op de startpagina https://www.kb.nl/ overlappen onder de kopjes "Cultuurliefhebbers", "Belanghebbenden en partners" en "Informatie voor..." de pijlpictogrammen de tekst. De link "Kies je lidmaatschap" onder het kopje "Lid worden" is niet zichtbaar. De link "Naar het blog" onder het kopje "Publicaties uit en over de LHBTIQ+-gemeenschap in Nederland" overlapt een deel van de tekst.

Op pagina https://www.kb.nl/contact overlapt onder het kopje “Hulp nodig bij het inloggen?” het pijlpictogram de tekst “Veelgestelde vragen voor leden van openbare bibliotheken of online bibliotheek”. Bovendien is deze tekst “Veelgestelde vragen voor leden van openbare bibliotheken of online bibliotheek” is gesneden.

Op pagina https://www.kb.nl/over-ons overlappen de pijlpictogrammen de teksten onder "Onze organisatie" en "Beleid en kerncijfers". Zorg dat content elkaar niet overlapt als de tekstafstand aangepast wordt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://galerij.kb.nl/, wanneer een bezoeker met de muis over de link "Home" gaat in de broodkruimels en het submenu verschijnt, overlapt dit submenu de pagina-inhoud. De bezoeker moet deze content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina. Zorg ervoor dat de content met de Escape-toets gesloten kan worden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webloket.kb.nl/login is de knop met de tekst "Inloggen" niet toegankelijk via het toetsenbord. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden. Hetzelfde probleem wordt waargenomen op pagina https://webloket.kb.nl/aanmelden met de knop "Verstuur gegevens".
Wanneer bezoekers op pagina https://webloket.kb.nl/login het formulier verzenden met de login en het wachtwoord die niet bestaan, worden ze doorgestuurd naar de pagina met de knop "Uitloggen" die ook niet toegankelijk is via het toetsenbord.

Op pagina https://webloket.kb.nl/aanmelden staan "i"-pictogrammen naast het veld "Wachtwoord", bij de groep keuzerondjes onder "Soort publicatie" en bij het selectievakje "Ik ga akkoord met de voorwaarden". Als een bezoeker met de muis over deze icoontjes beweegt, wordt er een tooltip geopend. Dit gebeurt niet bij focus op het toetsenbord. Hierdoor kunnen bezoekers die alleen met het toetsenbord navigeren de tooltip niet zien. De informatie in de tooltip is voor hen dus niet toegankelijk. Zorg dat de tooltips ook openen als ze toetsenbordfocus krijgen.

Op pagina https://galerij.kb.nl/ verschijnen de submenu's wanneer een bezoeker met de muis over de links "Home" en "Galerij" beweegt in de broodkruimels. Dit gebeurt echter niet bij toetsenbordfocus. Zorg dat deze functionaliteit ook via het toetsenbord beschikbaar is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

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

Uitkomst: Onvoldoende

Bevindingen: De titel van de pagina https://www.kb.nl/zoeken/content is "Inhoud | KB, de nationale bibliotheek" en dat is geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Deze tekst wordt bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina, die de inhoud van de pagina beschrijft. Hetzelfde probleem wordt waargenomen op de pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.687. De titel "Digitaal topstuk" is geen goede beschrijving van de inhoud van de pagina.

De pagina's https://webloket.kb.nl/login en https://webloket.kb.nl/aanmelden hebben dezelfde tekst in het title-element van de pagina: "Webloket". 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 elke pagina een unieke title-tekst heeft die de inhoud van de pagina nauwkeurig beschrijft.

Voor het PDF-document https://www.kb.nl/sites/default/files/documents/onderzoeksagenda_2023-2026_in_opmaak_eng.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.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.kb.nl/ staat in het navigatiemenu bovenaan een knop "Catalogus" waarmee een paneel met een zoekveld wordt geopend. Momenteel gaat de toetsenbordfocus naar de andere elementen voordat deze het geopende paneel bereikt. Dit is geen logische focusvolgorde. De toetsenbordfocus moet direct naar het paneel gaan. Bovendien kunnen bezoekers uit het paneel navigeren met het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het paneel open blijft staan. Bij dit soort paneel moet de toetsenbordfocus goed worden ingesteld. Zorg ervoor dat de toetsenbordfocus direct naar het paneel verplaatst op het moment dat een paneel is geopend. Zolang het paneel geopend is, moet de focus in het paneel blijven en niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het paneel te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het paneel automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Bovenaan de website https://www.kb.nl/ staat, als de website op een klein scherm wordt bekeken, een link "Menu" waarmee het navigatiemenu wordt geopend. Op dit moment kunnen bezoekers uit dit menu navigeren met behulp van het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan. Zorg ervoor dat de toetsenbordfocus in het menu blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het paneel automatisch te sluiten zodra de toetsenbordfocus verdwijnt.

Op de pagina's van de website https://www.kb.nl/ komt bij weergave op een klein scherm na de link "Menu" de toetsenbordfocus terecht op onzichtbare interactieve elementen.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/boek-reserveren-lenen-inzien-verlengen onder "Inhoudsopgave" staan links die naar verschillende gedeelten van dezelfde pagina gaan. Als een bezoeker op een van deze links klikt, scrollt de pagina naar de juiste sectie. Schermlezers lezen echter niet automatisch de inhoud van de sectie na de sprong. Dit gebeurt omdat de focus op de link blijft liggen en de hulpsoftware zoals schermlezers niet weten dat er nu nieuwe inhoud in beeld is. Om dit te verhelpen, moet de focus worden verplaatst naar de kop of het eerste element van de doelsectie. Hierdoor weten gebruikers van schermlezers dat de inhoud is gewijzigd en wat er nu wordt weergegeven. Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/bezoek-lidmaatschap/adres-openingstijden-route.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/wegwijzer hebben secties met verborgen inhoud een probleem met de focusvolgorde. Elementen binnen samengevouwen blokken krijgen nog steeds toetsenbordfocus, ook is de samengevouwen inhoud niet zichtbaar. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren maar wel kunnen zien, dus daarbij naar het scherm kijken. Zij weten dan niet waar zij zich bevinden op de pagina. Zorg dat elementen die niet zichtbaar zijn geen toetsenbordfocus krijgen.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staat een carrousel die kan worden geopend door te klikken op de knop met het pictogram voor volledig scherm rechts van de afbeeldingen, bijvoorbeeld onder het kopje "Heldendaad". Na het navigeren door de pijltjestoetsen verschuift de toetsenbordfocus naar de adresbalk van de browser en na de adresbalk landt de toetsenbordfocus op onzichtbare elementen. Als de toetsenbordfocus op onzichtbare elementen terechtkomt, kan de bezoeker bovendien niet terugnavigeren met Tab + Shift.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen. Hetzelfde probleem wordt waargenomen op andere pagina's die afbeeldingen bevatten met links om ze op volledig scherm te openen: https://www.kb.nl/bezoek-lidmaatschap/wegwijzer, https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk, en anderen.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/boek-reserveren-lenen-inzien-verlengen onder "Inhoudsopgave" staan in-page links. Als een bezoeker op een van deze links klikt, scrollt de pagina naar het corresponderende deel van de pagina. De toetsenbordfocus verschuift dan echter niet naar de interactieve elementen in deze sectie. Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/bezoek-lidmaatschap/adres-openingstijden-route.

Op pagina https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026 wordt het navigatiemenu geopend via de link "Menu" wanneer deze wordt weergegeven op een klein scherm. Wanneer een bezoeker het toetsenbord gebruikt om door het menu te navigeren en klikt op de links "Bezoeken & lidmaatschap", "Ontdek & bewonder" en "Over ons", worden de submenu's geopend. De toetsenbordfocus gaat echter naar een onzichtbaar element voordat het het geopende submenu bereikt.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen.

Op pagina https://galerij.kb.nl/ komt de toetsenbordfocus na de skiplink terecht op onzichtbare interactieve elementen. Hetzelfde probleem wordt waargenomen na de links "Home" en "Galerij" in broodkruimels. Zorg dat de focus niet naar elementen kan worden gebracht die op dat moment niet zichtbaar zijn op de pagina.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/adres-openingstijden-route onder het kopje "Inhoudsopgave" na de link "Routes naar de KB" komt de toetsenbordfocus terecht op een onzichtbaar interactief element.

Op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee staat onder het kopje "Verstilde landschappen en stadsgezichten" een carrousel. Er zijn slides die visueel verborgen zijn. Deze slides worden ook verborgen voor schermlezers met aria-hidden="true". Hierdoor worden interactieve elementen (links en knoppen) op deze verborgen slides ook verborgen voor schermlezers. De verborgen klikbare elementen kunnen momenteel echter nog wel toetsenbordfocus ontvangen. Dit veroorzaakt verschillende problemen. Bezoekers kunnen bijvoorbeeld nog steeds naar deze elementen navigeren via het toetsenbord, maar zonder te weten wat deze elementen zijn of wat hun functie is. Zorg ervoor dat elementen die verborgen zijn met aria-hidden zelf geen toetsenbordfocus kunnen ontvangen (en dus niet in de focusvolgorde voorkomen) en geen elementen bevatten die focus kunnen ontvangen.

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website https://www.kb.nl/, dat ook een link is, heeft geen beschrijvende tekst voor de bestemming. De toegankelijke naam van de link is "KB logo" die afkomstig is van het aria-label attribuut. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt. De toegankelijke naam moet duidelijk en beknopt de bestemming van de link weergeven. Werk de toegankelijke naam bij om de bestemming van de link nauwkeurig weer te geven. Merk op dat het aria-label attribuut alle andere manieren om de toegankelijke naam aan het interactieve element te geven overschrijft. Hetzelfde probleem wordt waargenomen in de voettekst met de link naar het logo met de zichtbare tekst "KB nationale bibliotheek". Een soortgelijk probleem wordt waargenomen in de voettekst met de link met het logo: "PublicSpaces". De toegankelijke naam van deze link is "PublicSpaces-logo" die afkomstig is van de alt-tekst van het img-element. Een soortgelijk probleem wordt waargenomen op de pagina's https://webloket.kb.nl/login en https://webloket.kb.nl/aanmelden bovenaan met het logo, dat een link is. De toegankelijke naam van de link is "Ga naar www.kb.nl", wat komt van de alt-tekst van het img-element.

De homepage https://www.kb.nl/ bevat meerdere links met dezelfde zichtbare tekst. Dit zijn de links "Lees meer" onder de kop "Nieuws" en de links "Evenement bekijken" onder de kop "Evenementen". Deze links leiden echter naar verschillende bestemmingen. Dit kan verwarrend zijn voor bezoekers met een schermlezer. Het is niet duidelijk waar de bezoeker terecht komt na het volgen van de link. Zorg dat de tekst het doel van de link duidelijk beschrijft. Visueel is af te leiden waar de link bij hoort en dit maakt het linkdoel duidelijk, maar voor bezoekers die niet kunnen zien en navigeren aan de hand van een linklijst valt deze context weg. Hetzelfde probleem doet zich voor op andere pagina's. Bijvoorbeeld op pagina https://www.kb.nl/zoeken/content onder het kopje "Resultaten verfijnen". Zie de links met de tekst "Toon meer", en ook "Toon minder" als er extra selectievakjes worden weergegeven. Op pagina https://www.kb.nl/over-ons ziet u in de rubriek "Uitgelichte diensten van de KB" de links met de tekst "Lees meer over deze dienst" en in de rubriek "Projecten en netwerken" de links met de tekst "Bekijk ze hier". Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staan de links "Lees meer" onder het kopje "Meer opmerkelijke objecten".

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk onder het kopje "Heldendaad" staat een afbeelding. Aan de rechterkant van de afbeelding staan links met pictogrammen. De link waarmee een schermvullende afbeelding kan worden geopend heeft een toegankelijke naam: "Magnify". De toegankelijke naam van de link met een downloadpictogram is "Download" en het title-attribuut geeft deze link een extra beschrijving: “76d26_15_3d_246.jpg”. Dergelijke teksten beschrijven de functie van deze links niet nauwkeurig. Een blinde bezoeker weet daardoor niet wat deze link precies doet. Voeg tekst toe die deze link goed beschrijft, in een taal die overeenkomt met de taal van de content op de pagina (Nederlands). Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026 onder het kop “Why do we have a Research Agenda?”.

Op pagina https://www.kb.nl/nieuws/kb-in-2024-grote-stappen-in-leesbevordering-en-data-onderzoek onder het kopje "Meer nieuws" staat een link met de tekst "Meer informatie", die de bestemming van de link niet nauwkeurig omschrijft. Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee onder het kopje "Meer blogs".

Op pagina https://www.kb.nl/bezoek-lidmaatschap/adres-openingstijden-route onder het kopje "Inhoudsopgave" staat na de link "Routes naar de KB" een link zonder inhoud. Hierdoor is het doel van de link niet duidelijk. Verwijder deze link, of voeg een linkdoel toe.

In de footer op pagina https://galerij.kb.nl/ fungeren pictogrammen voor sociale media onder het kopje "Volg ons op" als links, maar ze hebben geen tekstalternatief en worden verborgen voor schermlezers met aria-hidden="true".
Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door aria-hidden="true" te verwijderen en een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn ook mogelijk.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.kb.nl/contact bevat de kop "Snel naar" die de inhoud die erop volgt niet voldoende beschrijft. Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staat onder het kopje "Heldendaad" een afbeelding. Rechts van de afbeelding staat een knop met een copyright-icoon. De toegankelijke naam van de knop is "Copyright 76d26_15_3d_246.jpg". Een dergelijke tekst beschrijft de functie van de knop niet nauwkeurig. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft. Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026 onder het kop “Why do we have a Research Agenda?”.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk een carrousel worden geopend die gebruik maakt van knoppen met pijlpictogrammen om tussen de slide's te navigeren. De carrousel kan worden geopend door te klikken op de knoppen op de afbeeldingen onder de kopjes "Heldendaad", "Restanten in de KB", "Hoe is de KB aan deze objecten gekomen?" en "Meer weten?". De toegankelijke namen van de knoppen zijn: "Previous" en "Next". Deze toegankelijke namen geven niet genoeg informatie over de functie van de knoppen. Verander ze bijvoorbeeld in “vorige slide” en “volgende slide”. Zorg ervoor dat de taal overeenkomt met de taal van de pagina, Nederlands. Hetzelfde probleem wordt waargenomen op pagina's met afbeeldingen met links om een carrousel te openen: https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee en https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026.

Op pagina https://www.kb.nl/en/over-ons/onderwerpen/onderzoek-doen/onderzoeksagenda-2023-2026 staat een kop "Read more" die de inhoud die erop volgt niet adequaat beschrijft. Dit soort kopteksten is dus te algemeen en biedt geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. .

Wanneer de bezoekers op de pagina https://webloket.kb.nl/login het formulier indienen met een login en wachtwoord die niet bestaan, worden ze doorgestuurd naar de pagina met de volgende kop van niveau 1: "Wat wilt u gaan doen? Deze tekst beschrijft de inhoud van de pagina niet voldoende. Zorg ervoor dat het h1-element de inhoud van de pagina beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website https://www.kb.nl/ wanneer deze wordt bekeken op een klein scherm, is de toetsenbordfocus niet zichtbaar op de link met het logo "KB". De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op pagina https://www.kb.nl/over-deze-site/toegankelijkheid is de toetsenbordfocus niet zichtbaar op de links met afbeeldingen, zoals bijvoorbeeld met zichtbare tekst "Status toegankelijkheid https://www.kb.nl".

Op pagina https://galerij.kb.nl/ is de toetsenbordfocus niet zichtbaar op de links "Home" en "Galerij". Zorg ervoor dat het altijd zichtbaar is waar de focus zich bevindt, bijvoorbeeld door een focusrand toe te voegen.

In de header van de website https://www.kb.nl/ staat in het navigatiemenu bovenaan een knop "Catalogus" waarmee een paneel met een zoekveld wordt geopend. Dit paneel beslaat interactieve elementen op de onderliggende pagina, bijvoorbeeld de links in het main navigatiemenu "Ontdekken & bewonderen" en "Over ons". Deze elementen kunnen nog steeds toetsenbordfocus krijgen, ook al worden ze bedekt door het paneel en zijn ze daarom onzichtbaar. Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken. Dit kan opgelost worden door de toetsenbordfocus binnen het menu te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Je kunt er ook voor kiezen om het menu automatisch te sluiten op het moment dat de focus eruit gaat. De onderliggende interactieve elementen mogen dus geen toetsenbordfocus krijgen als het mobiele menu is geopend.

Bovenaan de website https://www.kb.nl/ als deze op een klein scherm wordt bekeken, staat een link "Menu" waarmee het navigatiemenu wordt geopend. Dit menu bevat interactieve elementen op de onderliggende pagina. Deze elementen kunnen nog steeds toetsenbordfocus krijgen, ook al worden ze bedekt door het paneel en zijn ze daarom onzichtbaar. De onderliggende interactieve elementen mogen dus geen toetsenbordfocus krijgen als het mobiele menu is geopend.

Op de pagina's van de website https://www.kb.nl/ wordt als deze bekeken worden op een kleiner scherm een deel van de pagina-inhoud verborgen door een sticky header. Terwijl interactieve elementen, bijvoorbeeld de link "Webwinkel" en het invoerveld "E-mailadres" in de voettekst, nog steeds toetsenbordfocus krijgen, worden deze elementen met focus verborgen achter de sticky header. Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt. Zorg ervoor dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de `z-index` aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website https://www.kb.nl/ staat in het logo, dat ook een link is, de tekst: "KB nationale bibliotheek". De toegankelijke naam van deze link is "KB logo" die afkomstig is van het aria-label attribuut. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarbij spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Zie hetzelfde probleem in de voettekst met het logo met zichtbare tekst "KB nationale bibliotheek". Hetzelfde probleem wordt waargenomen op de pagina's https://webloket.kb.nl/login en https://webloket.kb.nl/aanmelden in de voettekst. Er is een link met de zichtbare tekst "Aanmelden". De toegankelijke naam van de link is "ga naar de aanmeldpagina van de KB Nieuwsbrief" en komt van aria-label. Een soortgelijk probleem wordt waargenomen op dezelfde pagina's met het logo bovenaan, dat ook een link is. De zichtbare tekst is "KB nationale bibliotheek" en de toegankelijke naam van de link is "Ga naar www.kb.nl".

Op pagina https://www.kb.nl/zoeken/content bevat elk zoekresultaat een link met tekst die begint met "Bekijk ...". De zichtbare tekst van deze links is echter niet opgenomen in de toegankelijke naam, die wordt geleverd via een aria-label. Bijvoorbeeld, de link met zichtbare tekst "Bekijk Evenement" onder “Why digital heritage does not make us cry yet: de emotionele impact van digitaal erfgoed” een toegankelijke naam heeft: “Show Why digital heritage does not make us cry yet: de emotionele impact van digitaal erfgoed”. 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.

Pagina https://webloket.kb.nl/aanmelden bevat een formulier. Onder "Soort publicatie" staat een groep keuzerondjes. De tekst van de labels naast deze keuzerondjes is niet opgenomen in hun toegankelijke namen. Het label bij het eerste selectievakje is "Monografieën (o.a. boeken en rapporten)", maar de toegankelijke naam is "Soort publicatie * i". De labels naast het tweede en derde selectievakje zijn "Periodieke publicaties (o.a. Tijdschriften, dagbladen, nieuwsbrieven, e-zine, jaarlijks uitgegeven publicaties)" en "Beide", maar hun toegankelijke namen zijn 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 deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 op het zijpaneel staat een knop met het logo "KB". Als deze knop toetsenbordfocus krijgt, wordt de tekst "Meer informatie" weergegeven. De toegankelijke naam van de knop is 'Meer informatie'. Voor bezoekers die hulpsoftware zoals spraaksoftware gebruiken is het lastig om deze knop te bereiken en te bedienen, omdat de toegankelijke naam niet zichtbaar is voordat de focus op de knop valt. Zorg er daarom voor dat de zichtbare naam van de knop terug komt in de toegankelijke naam, het liefst vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de metagegevens van de PDF op https://www.kb.nl/sites/default/files/documents/onderzoeksagenda_2023-2026_in_opmaak_eng.pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.kb.nl/ in het navigatiemenu bovenaan staat een knop "Catalogus" waarmee een paneel met een zoekveld wordt geopend. Dit paneel bevat een knop "X". Deze knop heeft een aria-label attribuut met tekst in het Engels: “Close catalog searchbox”. Dit label is voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal de tekst van de aria-label naar het Nederlands.

Boven aan de website https://www.kb.nl/ staat, als de website op een klein scherm wordt bekeken, een link "Menu" waarmee het navigatiemenu wordt geopend. Wanneer het navigatiemenu wordt geopend, verandert de tekst van de link in "Close". Screenreaders zullen deze Engelse tekst dan uitspreken volgens de uitspraakregels van de primaire taal van de pagina, die in dit geval Nederlands is. Dit kan leiden tot een verkeerde uitspraak. Vertaal de tekst in het Nederlands om ervoor te zorgen dat deze correct wordt uitgesproken door schermlezers.

In de footer van de website https://www.kb.nl/ wordt bij het klikken op de knop "Aanmelden" het dialoogvenster "Dank voor je aanmelding" weergegeven. De knop "X" in dit dialoogvenster heeft ook de toegankelijke naam: "Close".

In de footer van de website https://www.kb.nl/ wordt, wanneer een bezoeker het invoerveld "E-mailadres" met onjuiste gegevens invult, een bericht in het Engels weergegeven: "E-mailadres does not contain a valid email.". De rest van de website is in het Nederlands. Foutmeldingen moeten in dezelfde taal staan als de primaire content van een website. Vertaal de foutmeldingen naar het Nederlands.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staat een "X"-knop in de carrousel die kan worden geopend door te klikken op de knop met het pictogram voor volledig scherm rechts van de afbeeldingen, bijvoorbeeld onder de kopjes "Heldendaad". De toegankelijke naam is "Close" en komt van aria-label. In dezelfde carrousel zie je ook de knoppen met pijlen om tussen de slide's te navigeren. De toegankelijke namen van deze knoppen zijn: "Previous" en "Next". Zie hiervoor ook succescriterium 2.4.6. Een soortgelijk probleem komt voor op pagina https://www.kb.nl/blogs/nu-te-zien-de-kb-als-alles-samenvalt-van-kb-fotograaf-jos-uljee in de carrousel onder het kopje "Verstilde landschappen en stadsgezichten".

Op pagina https://www.kb.nl/zoeken/content bevat elk zoekresultaat een link met tekst die begint met "Bekijk ...". De toegankelijke namen van de links, die worden gegeven via een aria-label, bevatten echter tekst in het Engels. Zie bijvoorbeeld de link met zichtbare tekst "Bekijk Evenement" onder "Tessa Berends" die een toegankelijke naam heeft: "Show Tessa Berends".

Op pagina https://www.kb.nl/zoeken/content bevatten de paginagelinks Engelse tekst in hun toegankelijke namen, bijvoorbeeld "Page 1".

Op pagina https://www.kb.nl/zoeken/content staan zoekresultaten met teksten in een andere taal. Een deel van de tekst "Why digital heritage does not make us cry yet: de emotionele impact van digitaal erfgoed" is bijvoorbeeld in het Engels, hoewel de primaire taal van de pagina Nederlands is. Bovendien is dit deel in het Engels ook opgenomen in de toegankelijke naam van de link "Bekijk Evenement" via het aria-label attribuut. Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staan onder de kopjes "Heldendaad", "Restanten in de KB" EN "Hoe is de KB aan deze objecten gekomen?" afbeeldingen. Rechts van deze afbeeldingen staat een knop met een copyright-icoontje. Deze knop opent extra inhoud met tekst in het Engels: "The general terms and conditions of use of KB.nl apply to this image.”. Geef deze anderstalige inhoud een lokaal lang-attribuut met de juiste waarde.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/wegwijzer heeft de afbeelding boven de kop "Vind je weg in de KB" alt-tekst met tekst in het Engels: "Picture of the reading room in the KB”. Pas deze tekst aan.

Op pagina https://galerij.kb.nl/ staan in breadcrumbs na de links "Home" en "Galerij" onzichtbare links met dezelfde toegankelijke naam in het Engels: "Click here for expanding". Vertaal de tekst naar het Nederlands om ervoor te zorgen dat het correct wordt uitgesproken door schermlezers.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://galerij.kb.nl/, bekeken op een klein scherm, komt de toetsenbordfocus na de link "Home" terecht op onzichtbare interactieve elementen. Wanneer de toetsenbordfocus op een van deze elementen terechtkomt, vindt er een onverwachte verandering plaats: de inhoud van de pagina verdwijnt en de pagina wordt wit. De inhoud van de pagina verandert zodanig, dat de betekenis van de pagina niet meer hetzelfde is als eerst. Dit is verwarrend voor bezoekers die alleen met het toetsenbord navigeren. Als een bezoeker de toetsenbordfocus op een element plaatst, mag dat niet leiden tot een verandering van de betekenis van de pagina.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.kb.nl/zoeken/content onder het zoekveld staan twee select-elementen die ervoor zorgen dat de pagina opnieuw wordt geladen als een optie wordt geselecteerd. De toetsenbordfocus verschuift dan naar het begin van de pagina. Hetzelfde probleem wordt waargenomen wanneer de selectievakjes onder "Resultaten verfijnen" zijn ingeschakeld. Dit mag niet zonder aankondiging gebeuren. Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Een andere oplossing is om een knop toe te voegen waarmee de bezoeker zijn keuze kan bevestigen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website https://www.kb.nl/ wordt in de foutmelding onder het invoerveld "E-mailadres" de tekst weergegeven: “Het veld E-mailadres is verplicht.” Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld." Hetzelfde probleem wordt waargenomen in het formulier op pagina https://www.kb.nl/contact.

Op pagina https://webloket.kb.nl/login in een formulier wordt de HTML5-validatie gebruikt, waarbij standaard HTML5-foutberichten worden weergegeven wanneer het formulier wordt ingediend met lege of onjuiste gegevens. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Bovendien legt dit succescriterium uit dat het niet voldoende is om het formulier gewoon opnieuw te tonen zonder een duidelijke hint te geven dat er iets fout is gegaan. De fout moet in tekst worden weergegeven. Hetzelfde probleem wordt waargenomen op pagina https://webloket.kb.nl/aanmelden .

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.kb.nl/contact heeft het invoerveld "Stel je vraag" een bijbehorende instructie die wordt weergegeven wanneer een bezoeker minder dan 5 tekens in dit veld invoert en het formulier verzendt: "De vraag moet minimaal 5 karakters lang zijn. Deze instructie is echter niet permanent zichtbaar op de pagina; ze verschijnt alleen in een foutmelding. Zorg dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers, niet alleen in foutmeldingen. Verplaats de instructie zodat deze permanent zichtbaar is bij het invoerveld.

Op pagina https://webloket.kb.nl/aanmelden staan "i"-pictogrammen die tooltips activeren. De tooltips naast het veld "Wachtwoord" en bij de groep keuzerondjes bevatten belangrijke instructies die alleen zichtbaar zijn als een bezoeker met de muis over de icoontjes met de "i" beweegt. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.kb.nl/ in het navigatiemenu bovenaan staat een knop "Catalogus" waarmee een paneel met een zoekveld wordt geopend. Deze knop heeft niet de juiste toegankelijke rol. Hierdoor werkt ook het aria-expanded attribuut dat aan het element is toegevoegd niet, waardoor voor bezoekers die hulpsoftware zoals een screenreader gebruiken niet duidelijk is of het element is ingevouwen of uitgevouwen. Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kunnen interpreteren. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Maak de knop op een andere manier op, bijvoorbeeld door het button-element te gebruiken en hier het aria-expanded attribuut aan toe te voegen.

In het menu staat naast elk menu-item een pijlpictogram, hier kan het submenu worden geopend. Dit element is niet op de juiste manier opgemaakt. Het is een span-element waar na het openen van het submenu het aria-expanded attribuut wordt toegevoegd. Omdat het span-element niet de juiste rol heeft, kan het aria-expanded attribuut niet worden geïnterpreteerd door hulpsoftware. Ook hebben deze knoppen geen toegankelijke naam. Voor bezoekers die niet kunnen zien is het niet duidelijk wat deze knoppen doen, en wat de staat (ingevouwen of uitgevouwen) van de elementen is. Los dit bijvoorbeeld op door de elementen op te maken met het button-element, deze een naam te geven die de functie beschrijft en het aria-expanded attribuut toe te voegen.

Pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk bevat een iframe met als titelattribuut "Opmerkelijke Stukken: stukje uniform van Jan van Speijk". De informatie over het type inhoud in het iframe ontbreekt. 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. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

In de header van de website https://www.kb.nl/ in het navigatiemenu bovenaan staat een knop "Catalogus" waarmee een paneel met een zoekveld wordt geopend. In dit paneel bevindt zich een knop "X" waarmee het paneel kan worden gesloten. De aria-expanded="false" is echter onjuist gebruikt op deze sluitknop. Dit attribuut is bedoeld voor elementen die de inhoud openen en sluiten. Omdat deze knop alleen het paneel sluit, moet het aria-expanded attribuut worden verwijderd. Het is in dit geval niet nodig en kan verwarring veroorzaken voor gebruikers van schermlezers.

Op pagina https://www.kb.nl/zoeken/content staat boven de zoekresultaten op een klein scherm een gedeelte met verborgen inhoud "Resultaten verfijnen". Het element dat deze inhoud opent en sluit, is niet correct opgemaakt. Het heeft niet de juiste rol. Momenteel is het gemarkeerd als h2-element, een kop. Om het toegankelijk te maken, moet een button-element worden gebruikt voor de uitklap-/inklapactie, en deze moet worden genest binnen het heading-element, omdat de tekst ook dient als een heading voor die inhoud. Deze aanpak zorgt ervoor dat schermlezers zowel de functie van de knop als de inhoudsstructuur begrijpen. Vermijd het gebruik van role="button" op het kop-element zelf, omdat dit de rol van de kop overschrijft.

Op pagina https://www.kb.nl/ontdekken-bewonderen/opmerkelijke-objecten/stukje-uniform-van-jan-van-speijk staan afbeeldingen met een link met een pictogram voor volledig scherm op een afbeelding, bijvoorbeeld onder het kopje "Heldendaad". Deze link opent een dialoogvenster met een carrousel. Dit dialoogvenster heeft geen toegankelijke naam, waardoor schermlezers de inhoud niet kunnen voorlezen. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

Op pagina https://www.kb.nl/bezoek-lidmaatschap/adres-openingstijden-route onder het kopje "Inhoudsopgave" staat na de link "Routes naar de KB" een link zonder zichtbare tekst en zonder toegankelijke naam. De naam en functie van deze link kan door hulpsoftware niet goed worden geïnterpreteerd. Verwijder deze link.

Op pagina https://webloket.kb.nl/login functioneert het element met de tekst "Inloggen" als een knop, maar het heeft niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Het gevolg is dat alle content die met deze knop kan worden geopend, ook niet toegankelijk is. Zorg dat de knop de juiste toegankelijke rol heeft. Maak bijvoorbeeld gebruik van het button-element om de knop op te maken. Hetzelfde probleem wordt waargenomen op pagina https://webloket.kb.nl/aanmelden met de knop "Verstuur gegevens". Wanneer de bezoekers op pagina https://webloket.kb.nl/login het formulier verzenden met de login en het wachtwoord die niet bestaan, worden ze doorgestuurd naar de pagina met de knop "Uitloggen" die ook niet de juiste toegankelijke rol heeft.

Pagina https://webloket.kb.nl/aanmelden bevat een formulier. Onder "Soort publicatie" staat een groep keuzerondjes. De keuzerondjes met de labels "Periodieke publicaties (o.a. Tijdschriften, dagbladen, nieuwsbrieven, e-zine, jaarlijks uitgegeven publicaties)" en "Beide" hebben geen toegankelijke namen. Dit komt doordat het for- en id attribuut niet op de juiste manier aan elkaar zijn gekoppeld. Zorg ervoor dat de labels aan de keuzerondjes worden gekoppeld.

In de footer op pagina https://galerij.kb.nl/ missen de links naar sociale media onder het kopje "Volg ons op" toegankelijke namen. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de links. Geef deze links een toegankelijke naam die het doel van de links beschrijft.

Op pagina https://galerij.kb.nl/kb.html#/nl/tienhoven1/page/0/zoom/2/lat/-67.87554134672945/lng/-64.6875 in het zijpaneel staan knoppen waarmee het paneel kan worden geopend en gesloten. Bijvoorbeeld de knop met het logo "KB". Hoewel de open of gesloten toestand visueel duidelijk is, wordt deze niet programmatisch gecommuniceerd naar schermlezers. Dit kan opgelost worden door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft. Hetzelfde probleem wordt waargenomen met de knop "Embed" in de sectie die wordt geopend door de knop met het deelpictogram.

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website https://www.kb.nl/ wordt na het klikken op de knop "Aanmelden" een wachtanimatie geactiveerd. Deze animatie, die dient als statusbericht, is niet toegankelijk voor blinde bezoekers. Dit soort berichten moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt. Voeg om dit te bereiken bijvoorbeeld aria-live="polite" of role="status" toe aan het icoon. Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.
Hetzelfde probleem wordt waargenomen op pagina https://www.kb.nl/contact. Wanneer een bezoeker een bestand uploadt onder "Bestanden", wordt een wachtanimatie weergegeven, die echter niet toegankelijk is voor blinde bezoekers.

In de footer van de website https://www.kb.nl/ wordt een foutbericht weergegeven wanneer een bezoeker het veld "E-mailadres" invult met onjuiste gegevens, bijvoorbeeld "test@", en vervolgens naar de knop "Aanmelden" gaat. Dit betekent dat schermlezers de melding waarschijnlijk niet zullen melden aan blinde gebruikers. Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.