Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website huisstijlportaal.kb.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website huisstijlportaal.kb.nl
Datum 30 april 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • De inlogpagina en alle pagina's achter de inlog op huisstijlportaal.kb.nl
  • Alle PDF's op huisstijlportaal.kb.nl
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 68

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op meerdere pagina's, bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1, staat bovenaan de pagina een afbeelding van het logo in een link naar de homepagina. Deze afbeelding heeft als alternatieve tekst 'Home' gekregen. Dit beschrijft de afbeelding en het linkdoel onvoldoende. Bezoekers die niet kunnen zien weten nu niet dat hier het logo te zien is. Pas de tekst aan, bijvoorbeeld naar 'Logo KB Nationale Bibliotheek, ga naar homepagina'. Ditzelfde komt voor bij het logo in de footer van de pagina's.

Bevinding 2: Op pagina https://huisstijlportaal.kb.nl/video/promotiefilm-voor-kb-events-en-tentoonstellingen staat tussen de kop 'Promotiefilm voor KB events en tentoonstellingen' en de video, de visueel verborgen tekst 'Filmbestand'. Deze tekst beschrijft de video onvoldoende en geeft geen aanvullende informatie. De kop is voldoende beschrijvend, dus de visueel verborgen tekst kan worden verwijderd.

Bevinding 3: Op pagina https://huisstijlportaal.kb.nl/handleiding-huisstijlportaal hebben de eerste twee afbeeldingen onder de kop 'De editor' geen alternatieve tekst maar zijn ook niet verborgen voor hulpsoftware. Hierdoor is 'ongelabelde afbeelding' te horen voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader. De afbeeldingen brengen informatie over. Voeg een alt-attribuut met een beschrijving van wat er op de afbeelding te zien is toe.

Bevinding 4: Op pagina https://huisstijlportaal.kb.nl/handleiding-huisstijlportaal komt op verschillende plekken voor dat een afbeelding voor hulpsoftware is verborgen met een leeg alt-attribuut, maar doordat de afbeelding in een div-element met de tekst 'Huisstijl Afbeelding' staat wordt deze tekst alsnog voorgelezen, wat verwarrend kan werken omdat de afbeelding door hulpsoftware genegeerd wordt. Omdat de afbeeldingen informatie overbrengen, is het belangrijk dat deze een beschrijvende alternatieve tekst krijgen.
Een soortgelijk probleem komt ook voor https://huisstijlportaal.kb.nl/ bij afbeeldingen die ook als decoratief beschouwd kunnen worden. Verwijder de tekst uit de code en geef deze afbeeldingen een goede alternatieve tekst (via het alt-attribuut) of verberg ze voor hulpsoftware met een leeg alt-attribuut.

Bevinding 5: Op pagina https://huisstijlportaal.kb.nl/ staat (als de bezoeker niet is ingelogd) een afbeelding waarop de tekst 'Welkom op het KB Huisstijlportaal' te zien is. Deze afbeelding heeft een leeg alt-attribuut en is daarmee verborgen voor hulpsoftware. Omdat de afbeelding wel informatie overbrengt heeft deze een alternatieve tekst nodig. Plaats de tekst op de afbeelding als HTML-tekst op de pagina om ook gelijk de bevinding bij succescriterium 1.4.5 op te lossen.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://huisstijlportaal.kb.nl/video/promotiefilm-voor-kb-events-en-tentoonstellingen staat een video waarin gesproken wordt. Doordat ondertiteling ontbreekt is de gesproken tekst voor bezoekers die niet kunnen horen niet goed te volgen. Voeg ondertiteling toe.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://huisstijlportaal.kb.nl/video/promotiefilm-voor-kb-events-en-tentoonstellingen staat een video waarin op verschillende plaatsen tekst te zien is die niet uitgesproken wordt, bijvoorbeeld op tijdstip 0:03. Ook is in het begin en aan het einde van de video het logo van KB Nationale Bibliotheek te zien. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Daardoor kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals een screenreader niet weten wat er wordt getoond in de video. Zet deze informatie in een transcript om te voldoen aan dit succes criterium. Of maak gebruik van een extra audiospoor om ook te voldoen aan succescriterium 1.2.5.

Bevinding 8: Op pagina https://huisstijlportaal.kb.nl/ons-merk/ons-merkverhaal staat de YouTube-video 'Onze merkfilm'. In deze video komt geen gesproken woord voor, er is alleen achtergrondgeluid. In de beelden die te zien zijn in de video, komt op verschillende plekken tekst in beeld, zoals in het begin 'Onze wereld is gebouwd met woorden'. Voor bezoekers die blind zijn is deze informatie niet beschikbaar. Zorg dat er een alternatief aanwezig is of voeg een geluidsspoor toe waarin alle tekst die in beeld te zien is, wordt uitgesproken.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 9: Op pagina https://huisstijlportaal.kb.nl/video/promotiefilm-voor-kb-events-en-tentoonstellingen staat een video. Bij deze video ontbreekt audiodescriptie, waardoor de informatie die bijvoorbeeld op tijdstip 0:03 in beeld is, niet beschikbaar is voor bezoekers die niet kunnen zien. Audiodescriptie is een (extra) audiospoor waarin verteld wordt wat er in beeld te zien is. Voeg een extra audiospoor toe waarin audiodescriptie te horen is.

Bevinding 10: Op pagina https://huisstijlportaal.kb.nl/ons-merk/ons-merkverhaal staat de YouTube-video 'Onze merkfilm'. In deze video komt geen gesproken woord voor, er is alleen achtergrondgeluid. In de beelden die te zien zijn in de video, komt op verschillende plekken tekst in beeld, zoals in het begin 'Onze wereld is gebouwd met woorden'. Voor bezoekers die blind zijn is deze informatie niet beschikbaar. Voeg een geluidsspoor toe met audiodescriptie, waarin alle tekst die in beeld te zien is, wordt uitgesproken.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/typografie staat onder de kop 'Typografie online' een tabel waarin visueel koppen te herkennen zijn, maar deze zijn niet als zodanig opgemaakt. De koppen zijn opgemaakt met het strong-element, maar in plaats daarvan moeten deze worden opgemaakt het met het th-element. Verbind deze kopcellen aan de onderliggende cellen zodat de relatie tussen de cellen goed kan worden voorgelezen door hulpsoftware zoals een screenreader. Gebruik hier bijvoorbeeld het scope-attribuut voor in het th-element. Omdat de eerste kopcel geen content bevat mag deze opgemaakt worden met het td-element.

Bevinding 12: De PDF https://huisstijlportaal.kb.nl/sites/default/files/sitemedia/downloads/Stappenplan_Beeldtaal.pdf bevat een codelaag, maar deze bevat veel lege tags. Ook heeft de content van het document niet de juiste tags gekregen. Zorg ervoor dat de koppen, de opsomming van stappen, en het schema de juiste tags krijgen en dat lege tags verwijderd worden. Let ook goed op de volgorde van de tags. Om het bestand begrijpelijk te maken voor gebruikers van hulpsoftware moet de volgorde van de tag in de codelaag overeenkomen met een leesvolgorde.

Bevinding 13: Advies: Op verschillende pagina's wordt niet op de juiste manier gebruik gemaakt van een koppenstructuur. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is een kopstructuur belangrijk, omdat een lijst van koppen opgevraagd kan worden en op die manier genavigeerd kan worden. Het wordt niet op toegankelijkheid afgekeurd als de koppenstructuur niet goed is opgebouwd, maar het verbeteren hiervan zorgt dat de structuur van de content beter geïnterpreteerd kan worden. Zorg voor een goede koppenstructuur, die begint bij een kopniveau h1 voor de titel van de pagina, kopniveau h2 voor de koppen, kopniveau h3 voor de tussenkoppen, etcetera. Sla hierbij geen koppen over.

Een aantal voorbeelden van een onjuiste koppenstructuur zijn:

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 14: Op de homepagina https://huisstijlportaal.kb.nl/?check_logged_in=1 staan blokken met een afbeelding, een kop, tekst en link. Bijvoorbeeld bij de kop 'Ons verhaal'. Als de blokken achter elkaar worden voorgelezen door hulpsoftware zoals een screenreader, is het niet duidelijk bij welke kop de afbeelding (met alternatieve tekst 'Voorbeeld flyers') hoort. Plaatst content in de code op een manier waarbij de koppen worden opgevolgd door bijbehorende content; eerst de kop en dan de bijhorende afbeelding en tekst. Visueel mag deze indeling wel aangehouden worden.

Bevinding 15: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/kleur kan de bezoeker via de links onder 'Direct naar' naar een ander deel van de pagina springen. Bezoekers die kunnen zien en via de muis navigeren, vinden deze links bovenaan de pagina en kunnen op deze manier snel navigeren. Bezoekers die navigeren via het toetsenbord, vinden deze links in de focusvolgorde achteraan in de content van de pagina. Dit geldt ook bezoekers die de pagina op een kleiner scherm of ingezoomd bekijken. Hierdoor moeten zij eerst door de hele pagina heen navigeren voor zij van deze links gebruik kunnen maken, en verliezen de links hun functie. Verplaats om dit op te lossen de links in HTML, zodat deze op een logische plek in de content van de pagina komen te staan, bijvoorbeeld voor de hoofdcontent op de pagina. Ditzelfde komt op meer pagina's voor, bijvoorbeeld https://huisstijlportaal.kb.nl/bouwstenen/typografie en https://huisstijlportaal.kb.nl/handleiding-huisstijlportaal.

Bevinding 16: De PDF op pagina https://huisstijlportaal.kb.nl/sites/default/files/sitemedia/downloads/Stappenplan_Beeldtaal.pdf bevat een codelaag waarin niet alle codes in de correcte volgorde zijn geplaatst. Hierdoor kunnen bezoekers die gebruikmaken van hulpsoftware moeite hebben met het begrijpen van dit document. Zorg ervoor dat de volgorde van tags in de codelaag de leesvolgorde aanhoudt.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://huisstijlportaal.kb.nl/veelgestelde-vragen staat onder de kop 'Kan ik selecties van beelden maken en die met collega's delen?' beschreven waar bepaalde onderdelen te zien zijn. Hierbij wordt gebruik gemaakt van zintuiglijke eigenschappen, zoals 'rechts bovenaan een blauw plusje', 'de balk rechtsboven', 'in de linker kolom rechtsboven drie puntjes'. Bezoekers die niet kunnen zien kunnen deze instructies niet opvolgen. Zorg ervoor dat er niet alleen zintuiglijke informatie wordt gebruikt bij het beschrijven waar bepaalde onderdelen te vinden zijn. Los dit bijvoorbeeld op door de toegankelijke naam van de elementen ook te benoemen.

Bevinding 18: Op pagina https://huisstijlportaal.kb.nl/handleiding-huisstijlportaal staat onder de kop 'Digital content' beschreven dat informatie over de digitale huisstijl te herkennen is aan het volgende: 'Het begint met een muis-icoontje en heeft een lichtblauwe achtergrond'. Elders op de website komen deze kenmerken regelmatig voor, waardoor visueel te herkennen is welke informatie overgebracht wordt. Het muis-icoontje is voor hulpsoftware verborgen en is net als de blauwe achtergrondkleur niet zichtbaar voor bezoekers die niet kunnen zien. Zorg ervoor dat deze onderdelen niet alleen door zintuiglijke informatie herkenbaar zijn. Een idee voor een oplossing zou zijn om het muis-icoontje zichtbaar te maken voor hulpsoftware en van een alternatieve tekst te voorzien.

Bevinding 19: Op pagina https://huisstijlportaal.kb.nl/handleiding-huisstijlportaal wordt onder 'Instellen 2 Factor authentication' wordt naar een link verwezen met de volgende zin: 'Gebruik hiervoor de link onderaan het scherm'. Via deze beschrijving is de juiste link lastig te vinden voor bezoekers die niet kunnen zien. Los dit bijvoorbeeld op door de naam van de link te benoemen.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 20: Op pagina https://huisstijlportaal.kb.nl/user/100/edit kan de bezoeker een e-mailadres invullen in het invoerveld 'E-mailadres'. Hier staat het reeds bekende e-mailadres al ingevuld, maar omdat de bezoeker hier ook een ander e-mailadres kan invullen moet het doel van deze en een aantal andere velden programmatisch kunnen worden bepaald. Zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Los dit op door de waarde van het autocomplete-attribuut te wijzigen van 'off' naar 'email'.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 21: Als de pagina's (bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) op een kleiner scherm of in ingezoomde weergave worden bekeken, kan het menu worden uitgevouwen. De menu-items krijgen een roze (HEX #C02B45) kleur als de muisaanwijzer hier naartoe wordt gebracht. Deze kleur heeft onvoldoende contrast met de gele (HEX #CBA052) achtergrond. De contrastverhouding is 2.3:1 waar deze minimaal 3:1 moet zijn.

Bevinding 22: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/kleur staat onder 'Secundaire kleuren' de kleur 'Donkergoud'. De tekst die hier te zien is heeft onvoldoende contrast met de achtergrond, waardoor deze niet voor iedereen goed te zien is. De zwarte tekstkleur heeft een contrastverhouding van 4.2:1 met de donkergouden (HEX #8F6A2A) achtergrond. Zorg ervoor dat de contrastverhouding minimaal 4.5:1 is.

Bevinding 23: Op pagina https://huisstijlportaal.kb.nl/search/content?keys=website is boven de zoekresultaten de tekst '1 - 6 van 6 gevonden pagina's' te zien. De grijze (HEX #7A847F) tekstkleur heeft onvoldoende contrast met de witte achtergrond. De contrastverhouding is 3.8:1 waar dit minimaal 4.5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 24: Op pagina https://huisstijlportaal.kb.nl/ staat (als de bezoeker niet is ingelogd) een afbeelding waarop de tekst 'Welkom op het KB Huisstijlportaal' te zien is. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

Bevinding 25: Op de homepagina https://huisstijlportaal.kb.nl/?check_logged_in=1 staat in de header een afbeelding met alternatieve tekst 'Aan de slag!'. Deze afbeelding staat in een div-element met de tekst 'Huisstijl Afbeelding'. Beide teksten worden voorgelezen bij de afbeelding, maar beide teksten beschrijven onvoldoende wat op de afbeelding te zien is. Hierdoor weten bezoekers die niet kunnen zien niet dat de tekst 'Aan de slag met de huisstijl' op de afbeelding staat. Bezoekers die slechtziend zijn kunnen de tekst niet aanpassen om de leesbaarheid te vergroten. Daarom kan dit het beste opgelost worden door de tekst als HTML-tekst op de afbeelding te plaatsten, bijvoorbeeld als kop op kopniveau h1. Verwijder daarnaast de tekst 'Huisstijl Afbeelding' van de afbeelding, en vervang de tekst in het alt-attribuut door een tekst die beschrijft wat er op de afbeelding te zien is of laat het alt-attribuut leeg om de afbeelding voor hulpsoftware te verbergen, zolang de tekst op de afbeelding beschikbaar is als gewone tekst.

Bevinding 26: Op pagina https://huisstijlportaal.kb.nl/huisstijl/beeldtaal staat zowel onder de kop 'Wel doen' als onder de kop 'Niet doen' een afbeelding waarop in tekst verschillende tips te zien zijn. De afbeeldingen hebben als alternatieve tekst 'Huisstijl Afbeelding', hieruit kunnen bezoekers die niet kunnen zien niet afleiden welke tekst er op de afbeelding te zien is. Ook kunnen slechtzienden de tekst niet aanpassen om de leesbaarheid te verhogen. Plaats om dit op te lossen de tekst als HTML-tekst op de pagina. Een soortgelijk probleem doet zich voor op pagina https://huisstijlportaal.kb.nl/bouwstenen/kleur bij de afbeelding onder de kop 'Kleurcombinaties'.

Bevinding 27: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/typografie staat onder de kop 'Titels op wit' een afbeelding waarop alle typografieniveau's zijn weergegeven. Voor bezoekers die niet kunnen zien is deze informatie niet beschikbaar, en omdat bezoekers die slechtziend zijn de tekst niet kunnen aanpassen is de informatie mogelijk lastig of niet leesbaar. Plaats de informatie als HTML-tekst op de pagina. Ditzelfde geldt voor de afbeelding 'Typografische stijlen' onder de kop 'Typografie online'.

Bevinding 28: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/typografie is op de afbeelding onder de kop 'Kleurgebruik' tekst te lezen met informatie over tekstkleur. Voor bezoekers die niet kunnen zien is bijvoorbeeld de 'hoofdregel' en de regels voor titels, tussenkopjes & quotes nu niet beschikbaar. Voor bezoekers die slechtziend zijn is het lastig dat de tekst niet aangepast kan worden. Los dit op door de tekst als HTML-tekst op de pagina te plaatsen. Een soortgelijk probleem komt voor bij de afbeelding waarop de tekst 'Foto bijschrift' en informatie hierover te lezen is.

Bevinding 29: Advies: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/met-partners staat onder 'Beslisschema' een afbeelding waarop tekst staat. Omdat de visuele plaatsing van de tekst op de pagina nodig is om de tekst te begrijpen, valt dit onder een uitzondering voor dit succescriterium en wordt dit niet afgekeurd op toegankelijkheid. Toch kan de toegankelijkheid voor bezoekers met een visuele beperking verbeterd worden door te zorgen dat alle informatie ook als gewone tekst op de pagina te vinden is.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 30: Op pagina https://huisstijlportaal.kb.nl/ staat (als de bezoeker niet is ingelogd) een afbeelding waarop de tekst 'Welkom op het KB Huisstijlportaal' te zien is. Als de pagina op een kleiner scherm (bijvoorbeeld 1280 x 1024 pixels) bekeken wordt of bij deze schermgrootte wordt ingezoomd tot 150%, verdwijnt de tekst deels uit beeld. Zorg ervoor dat alle tekst te lezen is bij inzoomen. Los dit bijvoorbeeld op door de tekst die op de afbeelding te zien is, als HTML tekst op de pagina te plaatsen. Zie ook succescriterium 1.4.5.

Bevinding 31: Als op de pagina's (bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd tot 300%, zijn na het openvouwen van het menu niet alle menu-items in beeld te zien. Het eerste menu-item 'Ons merk' verdwijnt uit beeld, en bij inzoomen tot 400% verdwijnt ook 'Huisstijl' grotendeels uit beeld. Ook als de menu-items worden uitgevouwen vallen deze deels buiten beeld. Zorg dat alle content in beeld blijft bij inzoomen.

Bevinding 32: Op alle pagina's (bijvoorbeeld https://huisstijlportaal.kb.nl/contact) behalve de homepagina wordt de content van de pagina bedekt door de header als bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd tot 400%. Hierdoor is het voor bezoekers die niet goed kunnen zien zonder in te zoomen, onmogelijk om de content van de pagina's te bekijken. Zorg ervoor dat alle content beschikbaar blijft bij inzoomen. Op pagina https://huisstijlportaal.kb.nl/video/promotiefilm-voor-kb-events-en-tentoonstellingen speelt ditzelfde probleem bij inzoomen vanaf 300%.

Bevinding 33: Als op pagina https://huisstijlportaal.kb.nl/mediabank bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 175%, komt een deel van de tekst 'Teamsachtergrond magazijnen' over andere tekst heen te staan. Hierdoor is de tekst lastig leesbaar. Zorg ervoor dat content elkaar niet bedekt bij het inzoomen.

Bevinding 34: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/kleur verdwijnt de link onder 'Kleurcontrast en toegankelijkheid' deels uit beeld als bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 300%. Er verschijnt een horizontale scrollbalk op de pagina, maar dit is geen toegankelijke oplossing. Zorg ervoor dat alle content in beeld blijft zonder dat er een scrollbalk op de pagina verschijnt.

Bevinding 35: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/kleur staat onder 'Direct naar' een lijst met links via welke de bezoeker naar een ander deel van de website kan springen. Deze lijst verdwijnt van de pagina als bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 175%. Zorg ervoor dat alle functionaliteit beschikbaar blijft bij inzoomen. Ditzelfde komt op meer pagina's voor, bijvoorbeeld https://huisstijlportaal.kb.nl/bouwstenen/typografie en https://huisstijlportaal.kb.nl/handleiding-huisstijlportaal.

Bevinding 36: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/typografie staat onder 'Typografie online' een tabel. De content van de tabelcellen komt deels over elkaar heen te staan als bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 300%. Zorg ervoor dat content elkaar niet bedekt bij inzoomen. Bij een tabel mag dit opgelost worden door horizontale een scrollbalk die op de tabel verschijnt (niet op de hele pagina) bij inzoomen.

Bevinding 37: Op pagina https://huisstijlportaal.kb.nl/user/100/edit staan onderaan de pagina de knoppen 'Weergeven', 'Bewerken' en 'Twee-factor authenticatie'. Als op de pagina bij een schermgrootte van 1280 bij 1024 pixels wordt ingezoomd vanaf 300%, komen deze knoppen over de content van de pagina heen te staan. Hierdoor is het lastig de content te lezen en het formulier in te vullen. Zorg ervoor dat alle content beschikbaar blijft bij inzoomen.

Bevinding 38: Op pagina https://huisstijlportaal.kb.nl/mediabank is het mogelijk om een filter in te stellen, bijvoorbeeld door een keuzevakje (checkbox) aan te vinken onder 'Mediatype'. Als de bezoeker inzoomt op de pagina bij een schermgrootte van 1280 bij 1024 pixels, verdwijnt deze functionaliteit van de website. Zorg dat alle functionaliteit op de pagina beschikbaar blijft bij inzoomen.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 39: Achter sommige filteropties op pagina https://huisstijlportaal.kb.nl/mediabank staan tooltips. Als bezoekers hier met de muisaanwijzer overheen gaan verschijnt aanvullende content die weer deels over andere content staat. Als content bij muishover verschijnt moet het aan bepaalde criteria voldoen, zo moet het voor bezoekers mogelijk zijn om deze content weer te laten verdwijnen via het toetsenbord. Dat is hier niet het geval. Zorg ervoor dat er een bepaald mechanisme is waarmee bezoekers de verschenen content weer kunnen verwijderen, bijvoorbeeld via de esc-toets.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 40: Op pagina https://huisstijlportaal.kb.nl/video/promotiefilm-voor-kb-events-en-tentoonstellingen staat onder tabblad 'Downloads' een knop (input-element die door het type="submit" attribuut door hulpsoftware wordt geïnterpreteerd als knop). Bezoekers die navigeren via het toetsenbord kunnen de focus naar deze knop brengen, maar kunnen de knop niet activeren. Zorg dat de functionaliteit van de knop ook beschikbaar is via het toetsenbord met bijvoorbeeld de enter- of spatieknop.

Bevinding 41: Op pagina https://huisstijlportaal.kb.nl/mediabank is het mogelijk om een filter in te stellen door een selectievakje (checkbox) aan te vinken, bijvoorbeeld onder 'Mediatype'. Bij sommige selectievakjes is een blauw icoon met daarop de letter 'i' te zien. Deze functioneert als een tooltip, door de muisaanwijzer hier naartoe te brengen verschijnt meer informatie over de filter-optie. Via het toetsenbord is het niet mogelijk om deze informatie te bekijken. Los dit bijvoorbeeld op door te zorgen dat de focus naar de tooltip gebracht kan worden en op die manier de informatie tevoorschijn te halen.

Bevinding 42: Op pagina https://huisstijlportaal.kb.nl/mediabank zijn een aantal filters onder 'Categorie' uitvouwbaar door met de muis op het label bij het selectievakje te klikken. Bijvoorbeeld 'Evenementen'. Via het toetsenbord is het niet mogelijk om dit filter uit te vouwen, waardoor het niet mogelijk is de onderliggende filters via het toetsenbord te bereiken en selecteren. Zorg dat de uitvouwbare knop bereikbaar en bedienbaar is via het toetsenbord.

Bevinding 43: Op pagina https://huisstijlportaal.kb.nl/bouwstenen/kleur kunnen de eigenschappen van de kleuren (bijvoorbeeld 'HEX: #CBA052' onder 'Goud') gekopieerd worden via een knop die verschijnt als de muisaanwijzer naar deze gegevens wordt gebracht. Deze functionaliteit is niet beschikbaar via het toetsenbord. Zorg ervoor dat alle functionaliteit via het toetsenbord beschikbaar is.

2.1.2 Geen toetsenbordval (Niveau A)

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Onvoldoende

Bevinding 44: Het menu dat op elke pagina (bijvoorbeeld bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) is te vinden, is via het toetsenbord niet goed te bedienen. Via de tab-toets kan de focus naar de menu-items (bijvoorbeeld 'Ons merk') worden verplaatst en na het openvouwen van het submenu kan de focus door de submenu-items heen bewogen worden. Het is echter niet mogelijk via het toetsenbord het submenu weer te verlaten. Hierdoor kunnen bezoekers die navigeren via het toetsenbord de rest van de pagina lastig bereiken. Zorg dat het mogelijk is om de submenu's via het toetsenbord te verlaten. Een mogelijke oplossing voor dit probleem is het anders opmaken van het menu, bijvoorbeeld door knoppen in het menu te plaatsen waarmee de submenu's kunnen worden uitgeklapt. De toetsenbordfocus kan dan gevangen worden binnen dit submenu, zolang de focus over een knop gaat waarmee toetsenbordgebruikers het menu weer kunnen inklappen.
Dezelfde problemen komen voor bij het uitvouwbare menu (hamburgermenu) dat op de pagina te vinden is als deze op een kleiner scherm of in ingezoomde weergave bekeken wordt.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 45: Op de pagina https://huisstijlportaal.kb.nl/ons-merk/ons-merkverhaal wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'disablekb=1'. Met deze aanpassing wordt voldaan aan dit succescriterium.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 46: De pagina's, zoals bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1, bevatten wel een skiplink (een mechanisme om naar een ander deel van de pagina te springen), maar deze werkt niet. Zorg dat bezoekers direct naar de hoofdinhoud van een pagina kunnen springen, zodat zij onderdelen (zoals het menu) die op elke pagina herhaald worden kunnen overslaan.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 47: De PDF https://huisstijlportaal.kb.nl/sites/default/files/sitemedia/downloads/Stappenplan_Beeldtaal.pdf heeft een documenttitel in de eigenschappen maar in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg dat niet de bestandsnaam maar de Documenttitel wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 48: Als de pagina's (bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) op een kleiner scherm of in ingezoomde weergave worden bekeken, wordt het menu ingevouwen onder een knop. Hierbij gaan verschillende dingen mis met de focusvolgorde. De focus springt eerst naar de menu-items en daarna pas naar de knop waarmee het menu uitgevouwen kan worden. Bezoekers die navigeren via het toetsenbord gaan met de focus door alle menu-items, ook als het menu ingevouwen is en deze menu-items op dat moment dus niet zichtbaar zijn. Voor bezoekers die navigeren via het toetsenbord maar die wel kunnen zien, is dit verwarrend. Zij weten niet waar de focus zich bevindt. Zorg dat de focus niet naar elementen kan worden gebracht die niet in beeld zichtbaar zijn, en dat de focus als eerste naar de menuknop gaat en pas daarna naar de menu-items als het menu is uitgevouwen.

Bevinding 49: Als de pagina's (bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) op een kleiner scherm of in ingezoomde weergave worden bekeken, is het menu ingevouwen onder een knop (hamburgermenu). Als het menu uitgevouwen wordt bedekt deze de content van de pagina. Het is mogelijk om de focus via het toetsenbord buiten het menu te plaatsen, het is dan niet zichtbaar waar de focus zich bevindt. Zorg ervoor dat de focus het menu pas kan verlaten nadat deze afgesloten is.

Bevinding 50: Op pagina https://huisstijlportaal.kb.nl/mediabank verschijnt na het aanvinken van zoekresultaat (bijvoorbeeld de afbeelding 'Teamsachtergrond magazijnen') een dialoogvenster in beeld. Hier kan de bezoeker selecteren wat er met de aangevinkte afbeelding moet gebeuren ('Download media'). Bezoekers die navigeren via het toetsenbord, kunnen de focus niet direct naar dit dialoogvenster brengen na het aanvinken van de afbeelding. Zij moeten door de hele pagina heen navigeren voordat zij het dialoogvenster vinden, deze staat in de focusvolgorde na alle filter-opties en vóór de zoekresultaten. Dit maakt het lastig om van deze functionaliteit gebruik te maken. Zorg ervoor dat de focus na het aanvinken van een zoekresultaat direct naar het dialoogvenster kan worden gebracht via het toetsenbord.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 51: Op de homepagina https://huisstijlportaal.kb.nl/?check_logged_in=1 staan verschillende links met de naam 'Huisstijl Afbeelding'. Bijvoorbeeld bij 'Merken'. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader, is het linkdoel niet duidelijk als zij deze naam voorgelezen krijgen. Zorg dat elke link een unieke naam heeft die het linkdoel goed beschrijft, bijvoorbeeld door de tekst te vervangen door tekst die overeenkomt met de koptekst ('Merken'). Omdat er twee links met hetzelfde linkdoel in de content bij deze kop staan, kan er ook voor gekozen worden de eerste link ('Huisstijl Afbeelding') te verwijderen en het klikbare gebied van de tweede link ('Lees verder') via Javascript te vergroten.

Bevinding 52: Op de homepage https://huisstijlportaal.kb.nl/ staat een link met de toegankelijke naam 'Huisstijl Afbeelding Logo Delpher en Logo Online Bibliotheek'. De link krijgt deze toegankelijke naam deels door de visueel verborgen tekst binnen het a-element en deels door de alternatieve tekst van de afbeelding binnen het a-element. Het probleem is hier dat de alternatieve tekst van de afbeelding wel de afbeelding omschrijft, maar niet het linkdoel. Zorg ervoor dat de toegankelijke naam van deze link het linkdoel bevat. dat kan op meerdere manieren, bijvoorbeeld door de tekst 'Huisstijl Afbeelding' te verwijderen en de alternatieve tekst van de afbeelding aan te vullen met het linkdoel.

Bevinding 53: Op pagina https://huisstijlportaal.kb.nl/ons-merk staat onder de kop 'Onze kernwaarden' een visueel verborgen link naar de website 'kb.nl' in de tekst (vlak boven de link 'Lees verder'). Bezoekers die gebruik maken van hulpsoftware zoals een screenreader komen deze link wel tegen, en omdat deze geen naam heeft is het linkdoel onduidelijk. Dit kan opgelost worden door de link te verwijderen als deze hier niet hoort te staan, of als deze hier wel hoort te staan door een naam toe te voegen die het linkdoel beschrijft. Zie ook succescriterium 2.4.7 en 4.1.2.

Bevinding 54: Op pagina https://huisstijlportaal.kb.nl/mediabank staan links die dezelfde naam hebben maar naar verschillende pagina's leiden. Bijvoorbeeld de link 'Masterclass Oude Kranten', die drie keer voor komt. Voor bezoekers die niet kunnen zien zijn de links niet te onderscheiden. Los dit bijvoorbeeld op door de alternatieve tekst van de afbeelding die in de link staat (bij elke link is dit een andere afbeelding) te wijzigen naar een unieke beschrijving.

Bevinding 55: Advies: Op pagina https://huisstijlportaal.kb.nl/ staat (als de bezoeker niet is ingelogd) een logo met een link die naar zichzelf verwijst (inlogpagina). Hiermee heeft de link geen functie. Dat de link verwijst naar de huidige pagina kan verwarrend zijn voor sommige bezoekers. Het is beter om dit logo op deze pagina niet als link op te maken.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 56: Op pagina https://huisstijlportaal.kb.nl/user/100/edit komt de bezoeker die navigeert via het toetsenbord de visueel verborgen kop 'Primaire tabs' tegen. De content die bij deze kop hoort bestaat uit een lijst met drie items, de items bestaan uit links. Deze inhoud wordt door de kop niet duidelijk genoeg omschreven. Wijzig de tekst van de kop om dit op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 57: Op pagina https://huisstijlportaal.kb.nl/mediabank kan een filter ingesteld worden door een selectievakje (checkbox) aan te vinken, bijvoorbeeld onder 'Mediatype'. De selectievakjes hebben geen zichtbare focus, waardoor het voor bezoekers wel kunnen zien en navigeren via het toetsenbord lastig is om te zien waar de focus zich bevindt. Los dit bijvoorbeeld op door een duidelijk zichtbare focusrand toe te voegen aan de selectievakjes, die zichtbaar wordt als de focus hier via het toetsenbord naartoe wordt gebracht.

Bevinding 58: Op pagina https://huisstijlportaal.kb.nl/ons-merk staat onder de kop 'Onze kernwaarden' een visueel verborgen link naar de website 'kb.nl' in de tekst (vlak boven de link 'Lees verder'. Bezoekers die navigeren via het toetsenbord komen deze link wel tegen omdat de focus hierop valt. Dit is echter niet zichtbaar, waardoor dit verwarrend kan werken. Dit kan opgelost worden door de link te verwijderen als deze hier niet hoort te staan, of als deze hier wel hoort te staan door te zorgen dat duidelijk zichtbaar is als de focus hierop staat. Zie ook succescriterium 2.4.4 en 4.1.2.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 59: Op pagina https://huisstijlportaal.kb.nl/mediabank bestaan de zoekresultaten uit media die kan worden gedownload door het bijbehorende selectievakje (checkbox) aan te vinken. Elk selectievakje heeft via een label de toegankelijke naam 'Dit item bijwerken' gekregen. Doordat deze tekst niet uniek is en niet overeenkomt met de visueel zichtbare tekst (bijvoorbeeld 'Teamsachtergrond magazijnen'), is het voor bezoekers die gebruik maken van spraaksoftware lastig om de selectievakjes aan te spreken. Los dit op door elk selectievakje een label te geven waarin de visueel zichtbare tekst voorkomt, het liefst vooraan.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 60: In de eigenschappen van PDF https://huisstijlportaal.kb.nl/sites/default/files/sitemedia/downloads/Stappenplan_Beeldtaal.pdf is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 61: Op pagina https://huisstijlportaal.kb.nl/mediabank kunnen bezoekers filteren, bijvoorbeeld op media type. Zodra een selectievakje aangevinkt is, ververst de pagina direct en komt de focus bovenaan de pagina. Dit is verwarrend en mogelijk desoriënterend voor sommige bezoekers. Maak gebruik van een knop waarmee bezoekers zelf het filteren controleren of gebruik asynchrone JavaScript-functionaliteit die de selectie aanpast. Gebruik bij dit laatste ook een "live-region" waar je aan de bezoeker duidelijk maakt dat er iets is gewijzigd (via hulpsoftware).

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 62: Wanneer bezoekers op pagina https://huisstijlportaal.kb.nl/user/100/edit een foutief e-mailadres invullen, verschijnt er een foutmelding bovenaan de pagina ('het is verplicht om E-mail te wijzigen'). Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld E-mailadres is niet ingevuld’. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3.

Bevinding 63: Op de inlogpagina https://huisstijlportaal.kb.nl/user/login?destination=/ wordt in het formulier gebruik gemaakt van HTML5 foutmeldingen. Deze foutmeldingen zijn nog niet toegankelijk. Ze zijn vaak kortaf, geven niet altijd de gemaakte fout aan en zijn soms in een andere taal. Ook kunnen bezoekers de tekstgrootte niet aanpassen zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 64: Op pagina https://huisstijlportaal.kb.nl/ staat (als de bezoeker niet is ingelogd) een formulier met twee invoervelden. Bij de visuele labels, bijvoorbeeld bij 'Gebruikersnaam', staat een asterisk (*). Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'. Ditzelfde komt voor bij het invoerveld op de pagina die opent via de link 'Wachtwoord vergeten?'

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 65: Op de inlogpagina https://huisstijlportaal.kb.nl/user/login?destination=/ wordt in het formulier gebruik gemaakt van HTML5 foutmeldingen. Deze foutmeldingen zijn nog niet toegankelijk. Ze zijn vaak kortaf, geven niet altijd de gemaakte fout aan en zijn soms in een andere taal. Voor dit succescriterium geven de HTML5 foutmeldingen ook niet een suggestie hoe bezoekers de gemaakte fout kunnen oplossen. Daarnaast kan ook niet de tekstgrootte worden aangepast om de tekst leesbaar te maken voor sommige mensen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 66: Als de pagina's (bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) op een kleiner scherm of in ingezoomde weergave worden bekeken, is het menu ingevouwen onder een knop (hamburgermenu). Als het menu uitgevouwen wordt is een afsluitknop (X) te zien. De naam van deze knop is 'Open menu', dit komt niet overeen met de functionaliteit van de knop. Zorg ervoor dat het voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader duidelijk is welke functionaliteit de knop heeft. Pas de naam van de knop aan, bijvoorbeeld naar 'Sluit menu'.

Bevinding 67: Op elke pagina (bijvoorbeeld https://huisstijlportaal.kb.nl/?check_logged_in=1) is een menu te vinden met verschillende menu-items die bestaan uit uitvouwbare links. Na het activeren van deze links via de enter-toets wordt een submenu uitgevouwen. Deze functionaliteit wordt niet van tevoren aangekondigd door hulpsoftware zoals een screenreader, waardoor bezoekers die hier gebruik van maken pas na het volgen van de link horen dat deze 'uitgevouwen' is (in plaats van dat er een nieuwe pagina is geopend, zoals verwacht kan worden bij een link). Dit komt doordat het aria-expanded="true" attribuut pas op de link verschijnt na het uitvouwen. De verwachting kan ontstaan dat de link ook weer ingevouwen kan worden, maar dit is niet mogelijk. Als de bezoeker nogmaals op de link drukt wordt een andere pagina geopend. Zorg ervoor dat de functionaliteit op juiste wijze kan worden geïnterpreteerd door hulpsoftware, zodat het gedrag van de links voorspelbaar is voor de bezoeker. Los dit bijvoorbeeld op door de link als link op te maken (<a>), en een knop achter elk element te plaatsen waarmee bezoekers het submenu kunnen openen. Ditzelfde probleem komt voor bij het uitvouwbare menu dat op de pagina's te vinden is als deze op een kleiner scherm of in ingezoomde weergave bekeken worden. Zie ook succescriterium 2.1.2.

Bevinding 68: Op pagina https://huisstijlportaal.kb.nl/ons-merk staat onder de kop 'Onze kernwaarden' een visueel verborgen link naar de website 'kb.nl' in de tekst (vlak boven de link 'Lees verder'. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader komen deze link wel tegen, en omdat deze geen toegankelijke naam heeft is het linkdoel onduidelijk. Dit kan opgelost worden door de link te verwijderen als deze hier niet hoort te staan, of als deze hier wel hoort te staan door een naam toe te voegen die het linkdoel beschrijft. Zie ook succescriterium 2.4.4 en 2.4.7.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-01-02 16:36:10 v2.4-011