Rapport: toegankelijkheid van RBV Rijksfinanciën

Onderzocht door
Hidde de Vries
In opdracht van
KOOP
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
1 maart 2021

Samenvatting

De website rbv.rijksfinanciën.nl voldoet grotendeels aan de WCAG 2.1 A + AA succescriteria.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 17 uit 20
Bedienbaar 17 uit 17
Begrijpelijk 10 uit 10
Robuust 2 uit 3
Totaal 46 uit 50

Toelichting bij dit rapport

Doel van dit rapport

Met dit rapport krijgt u inzicht in de toegankelijkheid van uw website- of applicatie. We vinden het belangrijk dat onze rapporten niet alleen de problemen beschrijven, maar ook richting geven bij het verbeteren daarvan.

Testproces

Dit rapport is samengesteld met behulp van de WCAG EM methodologie.

Het volgende proces is daarbij gebruikt:

  1. vaststellen wat binnen en buiten scope valt
  2. vaststellen gebruikte technologieën
  3. samenstellen sample (steekproef)
  4. onderzoek van de sample
  5. beschrijven van gevonden issues

Het onderzoek omvat alle 50 eisen uit de Europese toegankelijkheidsnorm EN 301 549 (= de WCAG 2.1 niveau A + AA succescriteria).

Het grootste deel van het onderzoek is een handmatig proces. Voor een deel van de criteria wordt ter ondersteuning gebruik gemaakt van automatische tools, zoals axe-core en Firefox Developer Tools.

Kleine letters

Komt voor op

Pagina's

Komt voor op:

Niet in scope:

Ondersteuning

De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:

Gebruikte technologieën

De onderzochte maakt gebruik van de volgende technologieën:

Sample

Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:

Bevindingen

  1. Koppen niet opgemaakt als koppen (1.3.1)
  2. Printknop is geen knop (1.3.1)
  3. Richting van tabelkoppen niet aangegeven (1.3.1)
  4. Fasen in tijdschema alleen met kleur onderscheiden (1.4.1)
  5. Maandaanduiding heeft onvoldoende contrast (1.4.3)
  6. Knop om tijdschema entry uit te klappen heeft geen naam (4.1.2)

Koppen niet opgemaakt als koppen

screenshot pagina wijzigingen

Probleem

Op de pagina wijzigingen staat een aantal koppen, maar die zijn niet als koppen opgemaakt.

De kop “Begrippenlijst” heeft bijvoorbeeld deze markup:

<p><strong>Begrippenlijst </strong></p>

Doordat geen kop is gebruikt kunnen gebruikers van hulpsoftware niet gemakkelijk naar deze secties navigeren.

Mogelijke oplossing

Gebruik voor koppen de elementen h1 t/m h6.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
wijzigingen
Verantwoordelijkheid:
Front-end

Printknop is geen knop

printericoon

Probleem

Bovenin de meeste pagina's staat een printknop.

Deze is als volgt opgemaakt:

<span 
class="action icon-print"
onclick="window.print()"
>
</span>

Met deze markup wordt niet duidelijk dat het een knop is en kan de knop niet worden benaderd met het toetsenbord.

Mogelijke oplossing

Gebruik voor knoppen het button-element, zodat ze bereikbaar zijn met het toetsenbord.

Herhaling

Dit probleem bestaat ook op de volgende plekken:

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Richting van tabelkoppen niet aangegeven

tabel met koppen

Probleem

Bij de modellen wordt een tabel weergegeven. Bij de headers is geen gebruik gemaakt van het scope-attribuut. Daardoor is het voor sommige gebruikers lastig vast te stellen of de header hoort bij de kolom of bij de rij.

Mogelijke oplossing

Voeg op de headers het scope attribuut toe, scope="column" voor headers die de kolom beschrijven, scope="row" voor headers die de rij beschrijven.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
model
Verantwoordelijkheid:
Front-end

Fasen in tijdschema alleen met kleur onderscheiden

Items in het tijdschema met elk een balk aan de bovenkant in een andere kleur

Probleem

Op de pagina Tijdschema wordt met kleur per item aangegeven in welke fase het valt. Er is geen tekst beschikbaar die dit onderscheid maakt, het onderscheid is dus alleen met kleur te maken. Dat kan voor sommige gebruikers niet goed werken, bijvoorbeeld gebruikers met kleurenblindheid.

Mogelijke oplossing

Maak ook op een tweede manier onderscheid tussen de fases, bijvoorbeeld met tekst of met een andere structuur in de rand aan de bovenkant.

WCAG criterium:
1.4.1: Gebruik van kleur (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
tijdschema
Verantwoordelijkheid:
Front-end

Maandaanduiding heeft onvoldoende contrast

aanduiding 12 maart, waarbij maart in lichtgrijs staat, en contrastinformatie  met roodrode waarschuwingsicoon

Probleem

Op de pagina Tijdschema worden de maanden weergegeven in grijs op wit. Deze kleuren hebben een contrast van 2.55 : 1 en dat is onvoldoende.

Mogelijke oplossing

Gebruik voor de maandaanduiding een kleur die minimaal een contrast van 4.5 : 1 met de achtergrond heeft.

Herhaling

Dit probleem is ook geconstateerd bij:

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
tijdschema
Verantwoordelijkheid:
Front-end

Knop om tijdschema entry uit te klappen heeft geen naam

item Indienen saldibalans februari met aan rechterkant dat is uitgeklapt

Probleem

Op de pagina Tijdschema staat bij elk item een plusje waarop kan worden geklikt om het uit te klappen. Dit plusje is als volgt opgemaakt:

<span 
class="timetable-toggle"
data-id="729">

</span>

Er is geen tekst aanwezig en daarmee heeft deze knop geen naam.

Mogelijke oplossing

Voeg tekst toe binnen de knop die duidelijk maakt wat de actie is, bijvoorbeeld “Indienen saldibalans februari uitklappen”.

Herhaling

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
tijdschema
Verantwoordelijkheid:
Front-end