Audit toegankelijkheid bkwi.nl

Rapport auteur: Rian Rietveld van Level Level, 20 mei 2021
Evaluatie opdrachtgever: BKWI

Samenvatting Evaluatieresultaten

Er is zorg besteed aan de toegankelijkheid van bkwi.nl.

Het belangrijkste verbeterpunt: de website is niet responsive voor verschillende weergaven op tablet en mobiel. Hierdoor is ook inzoomen en herschalen van tekst niet goed afgevangen en wordt de website moeilijker te lezen en te bedienen.

Scope van de evaluatie

Website naam bkwi.nl
Scope van de website

Alle pagina's op https://www.bkwi.nl.

Conformiteitsdoel WCAG 2.1 Niveau AA
Verdere evaluatievereisten

Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de steekproef om zo een goede indruk te krijgen van de toegankelijkheid.

Basisniveau van toegankelijkheid ondersteund

Gangbare browsers en hulpsoftware.

Technologieën waarop gesteund wordt

Overzicht toetsresultaten

Resultaat voor Niveau A en AA
Principe Successcreteria Niveau A Successcreteria Niveau AA
1. Waarneembaar 6 van 9 7 van 11
2. Bedienbaar 13 van 14 3 van 3
3. Begrijpelijk 5 van 5 5 van 5
4. Robuust 1 van 2 1 van 1
Totaal 25 van 30 17 van 20

Uitgebreide toetsresultaten

Principe 1 Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.

Hoe te voldoen aan 1.1.1.

Uitkomst 1.1.1: Voldoende

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen): (Niveau A)

Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:

Hoe te voldoen aan 1.2.1.

Uitkomst 1.2.1: Niet van toepassing

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

Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Hoe te voldoen aan 1.2.2.

Uitkomst 1.2.2: Niet van toepassing

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

Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Hoe te voldoen aan 1.2.3.

Uitkomst 1.2.3: Niet van toepassing

1.2.4 Ondertitels voor doven en slechthorenden (live): (Niveau AA)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.

Hoe te voldoen aan 1.2.4.

Uitkomst 1.2.4: Niet van toepassing

1.2.5 Audiodescriptie (vooraf opgenomen): (Niveau AA)

Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.

Hoe te voldoen aan 1.2.5.

Uitkomst 1.2.5: Niet van toepassing

1.3 Aanpasbaar

1.3.1 Info en relaties: (Niveau A)

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Hoe te voldoen aan 1.3.1.

Uitkomst 1.3.1: Onvoldoende

Bevindingen:
De toegankelijke naam voor links in de cards zijn gedefineerd met een aria-labelledby attribuut dat wijst naar de ID van de H2 heading. De ID hiervoor moet uniek zijn. Nu weet de browser niet naar welke ID deze moet refereren voor de linktekst. Dubbele ID’s zijn ook een parsing fout (zie 4.1.1).

De link "Ik meld me aan" op https://www.bkwi.nl/over-bkwi/bkwi-klantenpanel/ heeft alleen een title attribuut en als inhoud een plaats zonder alt tekst. Bovendien komt de inhoud van het title attribuut niet overeen met de tekst op de afbeelding. Een title attribuut geeft de link geen betrouwbare toegankelijke naam. Beter is om het title attribuut weg te halen en het alt attribuut van de afbeelding te vullen met de tekst op het plaatje.

1.3.2 Betekenisvolle volgorde: (Niveau A)

Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.

Hoe te voldoen aan 1.3.2.

Uitkomst 1.3.2: Voldoende

1.3.3 Zintuiglijke eigenschappen: (Niveau A)

Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.

Hoe te voldoen aan 1.3.3.

Uitkomst 1.3.3: Onvoldoende

Bevindingen:
De links zijn rood van kleur. Er is geen andere aanduiding dan het verschil in kleur voor links in teksten. Geef bijvoorbeeld ook een onderstreping mee, zodat ook kleurenblinde bezoekers de links in de teksten kunnen herkennen.

Een oplossing zou kunnen zijn de focus/hover stijl en de normale stijl om te wisselen. Zie ook 1.4.1.

Op de pagina "Producten" staat in de tekst een verwijzing naar "het menu links". Iemand die blind is en de website van boven naar beneden voorgelezen krijgt weet niet waar dat is.

1.3.4 Weergavestand: (Niveau AA)

De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Hoe te voldoen aan 1.3.4.

Uitkomst 1.3.4: Voldoende

1.3.5 Identificeer het doel van de input: (Niveau AA)

Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:

Hoe te voldoen aan 1.3.5.

Uitkomst 1.3.5: Niet van toepassing

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur: (Niveau A)

Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.

Hoe te voldoen aan 1.4.1.

Uitkomst 1.4.1: Onvoldoende

Bevindingen:
De links zijn rood van kleur. Er is geen andere aanduiding dan het verschil in kleur voor links in teksten.. Geef ook bijvoorbeeld ook een onderstreping mee, zodat ook kleurenblinde bezoekers de links in de teksten kunnen herkennen.

Een oplossing zou kunnen zijn de focus/hover stijl en de normale stijl om te wisselen. Zie ook 1.3.3

1.4.2 Geluidsbediening: (Niveau A)

Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.

Hoe te voldoen aan 1.4.2.

Uitkomst 1.4.2: Niet van toepassing

1.4.3 Contrast (minimum): (Niveau AA)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

Hoe te voldoen aan 1.4.3.

Uitkomst 1.4.3: Voldoende

1.4.4 Herschalen van tekst: (Niveau AA)

Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.

Hoe te voldoen aan 1.4.4.

Uitkomst 1.4.4: Onvoldoende

Bevindingen:
Alle pagina's: De tekst in het menu loopt in elkaar over en wordt onleesbaar.

Zie op: https://www.bkwi.nl/veilig-suwinet/hulpmiddelen-voor-bewustwordingsprogramma-s/

De tekst van de kop loopt door de andere elementen heen en wordt slecht leesbaar (ook in het submenu).

1.4.5 Afbeeldingen van tekst: (Niveau AA)

Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:

Hoe te voldoen aan 1.4.5.

Uitkomst 1.4.5: Voldoende

1.4.10 Reflow: (Niveau AA)

Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:

Hoe te voldoen aan 1.4.10.

Uitkomst 1.4.10: Onvoldoende

Bevindingen:
Bij het inzoomen tot 400% verschijnen twee scrollbars, ook de weergave op mobiel geeft 2 scrollbars. De website is niet responsive.

1.4.11 Contrast van niet-tekstuele content: (Niveau AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Hoe te voldoen aan 1.4.11.

Uitkomst 1.4.11: Voldoende

1.4.12 Tekstafstand: (Niveau AA)

Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:

Hoe te voldoen aan 1.4.12.

Uitkomst 1.4.12: Onvoldoende

Bevindingen:
Omdat de breedte van de menu-onderdelen zo vast staat maakt wijziging van de tekstafstand de teksten onleesbaar.

1.4.13 Content bij hover of focus: (Niveau AA)

Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:

Hoe te voldoen aan 1.4.13.

Uitkomst 1.4.13: Voldoende

Principe 2 Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord: (Niveau A)

Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.

Hoe te voldoen aan 2.1.1.

Uitkomst 2.1.1: Voldoende

2.1.2 Geen toetsenbordval: (Niveau A)

Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.

Hoe te voldoen aan 2.1.2.

Uitkomst 2.1.2: Voldoende

2.1.4 Enkel teken sneltoetsen: (Niveau A)

Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:

Hoe te voldoen aan 2.1.4.

Uitkomst 2.1.4: Voldoende

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar: (Niveau A)

Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:

Hoe te voldoen aan 2.2.1.

Uitkomst 2.2.1: Niet van toepassing

2.2.2 Pauzeren, stoppen, verbergen: (Niveau A)

Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:

Hoe te voldoen aan 2.2.2.

Uitkomst 2.2.2: Niet van toepassing

2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde: (Niveau A)

Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.

Hoe te voldoen aan 2.3.1.

Uitkomst 2.3.1: Niet van toepassing

2.4 Navigeerbaar

2.4.1 Blokken omzeilen: (Niveau A)

Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.

Hoe te voldoen aan 2.4.1.

Uitkomst 2.4.1: Voldoende

2.4.2 Paginatitel: (Niveau A)

Webpagina's hebben titels die het onderwerp of doel beschrijven.

Hoe te voldoen aan 2.4.2.

Uitkomst 2.4.2: Voldoende

2.4.3 Focus volgorde: (Niveau A)

Als in webpagina's sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.

Hoe te voldoen aan 2.4.3.

Uitkomst 2.4.3: Voldoende

2.4.4 Linkdoel (in context): (Niveau A)

Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis kan hebben voor gebruikers in het algemeen.

Hoe te voldoen aan 2.4.4.

Uitkomst 2.4.4: Voldoende

2.4.5 Meerdere manieren: (Niveau AA)

Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.

Hoe te voldoen aan 2.4.5.

Uitkomst 2.4.5: Voldoende

Bevindingen:
Er is een menu, een zoekoptie, een sitemap, uitstekend!

2.4.6 Koppen en labels: (Niveau AA)

Koppen en labels beschrijven het onderwerp of doel.

Hoe te voldoen aan 2.4.6.

Uitkomst 2.4.6: Voldoende

2.4.7 Focus zichtbaar: (Niveau AA)

Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.

Hoe te voldoen aan 2.4.7.

Uitkomst 2.4.7: Voldoende

2.5 Input Modaliteiten

2.5.1 Aanwijzergebaren: (Niveau A)

Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.

Hoe te voldoen aan 2.5.1.

Uitkomst 2.5.1: Niet van toepassing

2.5.2 Aanwijzerannulering: (Niveau A)

Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:

Hoe te voldoen aan 2.5.2.

Uitkomst 2.5.2: Niet van toepassing

2.5.3 Label in naam: (Niveau A)

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

Hoe te voldoen aan 2.5.3.

Uitkomst 2.5.3: Onvoldoende

Bevindingen:
Zie opmerkingen over de linkteksten bij 1.3.1.

2.5.4 Bewegingsactivering: (Niveau A)

Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:

Hoe te voldoen aan 2.5.4.

Uitkomst 2.5.4: Niet van toepassing

Principe 3 Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina: (Niveau A)

De standaard menselijke taal van diverse webpagina's kan door software bepaald worden.

Hoe te voldoen aan 3.1.1.

Uitkomst 3.1.1: Voldoende

3.1.2 Taal van onderdelen: (Niveau AA)

De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.

Hoe te voldoen aan 3.1.2.

Uitkomst 3.1.2: Voldoende

3.2 Voorspelbaar

3.2.1 Bij focus: (Niveau A)

Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.

Hoe te voldoen aan 3.2.1.

Uitkomst 3.2.1: Voldoende

3.2.2 Bij input: (Niveau A)

Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.

Hoe te voldoen aan 3.2.2.

Uitkomst 3.2.2: Voldoende

3.2.3 Consistente navigatie: (Niveau AA)

Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.

Hoe te voldoen aan 3.2.3.

Uitkomst 3.2.3: Voldoende

3.2.4 Consistente identificatie: (Niveau AA)

Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.

Hoe te voldoen aan 3.2.4.

Uitkomst 3.2.4: Voldoende

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie: (Niveau A)

Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.

Hoe te voldoen aan 3.3.1.

Uitkomst 3.3.1: Niet getest

3.3.2 Labels of instructies: (Niveau A)

Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.

Hoe te voldoen aan 3.3.2.

Uitkomst 3.3.2: Niet van toepassing

3.3.3 Foutsuggestie: (Niveau AA)

Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.

Hoe te voldoen aan 3.3.3.

Uitkomst 3.3.3: Niet van toepassing

3.3.4 Foutpreventie (wettelijk, financieel, gegevens): (Niveau AA)

Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door gebruikers bedienbaar gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt ten minste één van de volgende zaken:

Hoe te voldoen aan 3.3.4.

Uitkomst 3.3.4: Niet van toepassing

Principe 4 Robuust

4.1 Compatibel

4.1.1 Parsen: (Niveau A)

In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.

Hoe te voldoen aan 4.1.1.

Uitkomst 4.1.1: Voldoende

4.1.2 Naam, rol, waarde: (Niveau A)

Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.

Hoe te voldoen aan 4.1.2.

Uitkomst 4.1.2: Onvoldoende

Bevindingen:
De pagineringslinks onderaan bijvoorbeeld het nieuwsoverzicht zijn links <a>'s zonder een href attribuut. Maak hier echte links van, met een bestemming. Nu is er de kans dat hulpmiddelen de werking en betekenis niet begrijpen.

4.1.3 Statusberichten: (Niveau AA)

In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.

Hoe te voldoen aan 4.1.3.

Uitkomst 4.1.3: Niet van toepassing

Steekproef met getoetste webpagina's

Sample met random webpagina's

Opmerkingen en aanbevelingen

Onderstaande opmerkingen en aanbevalingen zijn geen onderdeel van de officiële WCAG 2.1 AA audit, maar advies over hoe de website toegankelijk te maken.

Maak essentiële tools en informatie ook toegankelijk

Al valt dit buiten de audit: zorg ervoor de informatie waar naartoe gelinkt wordt en die gebruikers nodig hebben om informatie te begrijpen, of tools die ze nodig hebben, ook toegankelijk zijn.

Title attribuut op links

Gebruik geen title attribuut op een link, zeker niet als dat de enige aanduiding is over wat een element doet. Dit wordt niet consistent ondersteund door browsers en hulpmiddelen

Fontgrootte

De font size in de footer is nu ongeveer 8 pixels. Er zijn geen harde eisen voor de fontgrootte en je kunt inzoomen, maar dit is toch wel een hele kleine letter. Voorstel: tenminste 12 pixels.