Rapport: toegankelijkheid van 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
8 november 2020

Samenvatting

De website data.overheid.nl nog niet aan alle succescriteria in WCAG 2.1 A + AA. In dit rapport is een aantal suggesties toegevoegd om de belangrijkste punten op te lossen.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 12 uit 20
Bedienbaar 13 uit 17
Begrijpelijk 8 uit 10
Robuust 1 uit 3
Totaal 34 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. Alternatieve tekst logo niet in Nederlands (1.1.1)
  2. Staafdiagrammen hebben onvoldoende alternatief (1.1.1)
  3. Lijst niet opgemaakt als lijst (1.3.1)
  4. Toelichting grafiek gaat uit van vormen (1.3.3)
  5. Links zijn alleen te onderscheiden door kleur (1.4.1)
  6. De focusstijl heeft in sommige browsers onvoldoende contrast (1.4.11)
  7. Tooltip voldoet niet aan eisen (1.4.13)
  8. Tekst in blok “Visueel jaarverslag” heeft onvoldoende contrast op sommige schermbreedtes (1.4.3)
  9. Tekst overlapt als deze vergroot wordt (1.4.4)
  10. Het interactieve overzicht agentschappen werkt niet met toetsenbord (2.1.1)
  11. Link “Exporteren” heeft soms geen linktekst (2.4.4)
  12. Er zijn geen labels bij de verschillende dropdowns onder de visuele begroting (2.4.6)
  13. Op sommige elementen is focus niet zichtbaar (2.4.7)
  14. Engelstalige pagina als Nederlandstalig gemarkeerd (3.1.1)
  15. Link naar Engelse versie niet als Engelstalig gemarkeerd (3.1.2)
  16. Element met id “edit-submit” komt twee keer voor (4.1.1)
  17. Checkboxes hebben geen label (4.1.2)

Alternatieve tekst logo niet in Nederlands

Nog niet opgelost op 17-02-2021: Nog steeds engelstalige alt-tekst

Probleem

Het logo bovenaan de pagina, dat een link is naar de homepage, heeft als alternatieve tekst “Government logo | to homepage”. Dat is op zich goed, maar in de verkeerde taal.

Mogelijke oplossing

Maak op de Nederlandstalige pagina's gebruik van Nederlandstalige alternatieve teksten. Het zou ook beter zijn in plaats van | een komma te gebruiken. Gebruik bijvoorbeeld “logo Rijksoverheid, homepage”.

Herhaling

Op meer plekken zijn er problemen met tekstalternatieven:

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
premies-fiscaal
Verantwoordelijkheid:
Front-end

Staafdiagrammen hebben onvoldoende alternatief

Nog niet opgelost op 17-02-2021: Nog steeds geen alt-teksten

Probleem

Er is voor blinde gebruikers geen toegankelijk alternatief voor de staafdiagrammen op de pagina “Premies en fiscaal”. Hoewel de data beschikaar is als export, is dit niet voldoende of gelijkwaardig.

Mogelijke oplossing

Voeg onder elke kop een korte samenvatting in tekst toe, die dezelfde informatie bevat als de staafdiagrammen, bijvoorbeeld “6 miljard begroting, 10 miljard fiscaal, nul premie”.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
premies-fiscaal
Verantwoordelijkheid:
Front-end

Lijst niet opgemaakt als lijst

Opgelost per 17-02-2021: De lijsten zijn nu opgemaakt als ul met li-items.

tekst Deze visual laat zien, met daaronder een opsomning van twee punten, met een streepje voor elk punt

Probleem

In de uitleg bij de visuele begroting staan twee punten opgesomd, maar die zijn in de HTML niet als opsomming opgemaakt.

Dit is de huidige HTML:

<p>-hoe de inkomsten en uitgaven per hoofdstuk opgebouwd zijn</p>
<p>-hoe deze zaken met andere jaren te vergelijken zijn,&nbsp;en
waar meer of minder geld naar toe gaat</p>

Daardoor wordt deze in hulpsoftware niet als lijst aangekondigd, en zijn de streepjes mogelijk verwarrend.

Mogelijke oplossing

Maak deze opsomming op als lijst:

<ul>
<li>hoe de inkomsten en uitgaven per hoofdstuk opgebouwd zijn</li>
<li>hoe deze zaken met andere jaren te vergelijken zijn,&nbsp;en waar meer
of minder geld naar toe gaat</li>
</ul>

Herhaling

Op veel meer plekken zijn niet de juist elementen gebruikt, bijvoorbeeld:

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

Toelichting grafiek gaat uit van vormen

Nog niet opgelost op 22-02-2021: Niet opgepakt

Staafdiagrammen met daarboven de titel begroting (balken) en realisatie (lijn) in miljoenen Euro's

Probleem

De toelichting bij de tabellen op de pagina “Meerjarig beeld” verwijst naar vormen in de tabel, zonder op een andere manier duidelijk te maken welke vormen wat voorstellen. Hierdoor is het niet duidelijk voor gebruikers van sommige hulptechnologieën. Blinde mensen zullen bijvoorbeeld het verschil in vorm niet kunnen waarnemen.

Mogelijke oplossing

Plaats labels bij de vormen, zoals bij sommige andere grafieken is gedaan (het woord “realisatie” is daar bij de lijn toegevoegd).

Herhaling

WCAG criterium:
1.3.3: Zintuiglijke eigenschappen (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
begroting-realisatie
Verantwoordelijkheid:
Content, design

Nog niet opgelost op 22-02-2021: Voorl lopende tekst zijn de links onderstreept, maar in alle grafieken nog niet, en ook zijn soms elementen opgemaakt zoals de overige links zijn opgemaakt, maar blijkt het dan geen link te zijn

uitgeklapt tabje met daarin gegevens over Uitvoeringsorganisatie Bedrijfsvoering Rijk, met een opsomming waarvan het laatste item een link met de linktekst link is

Probleem

Links in de lopende tekst, zoals de link “Link” in tabjes op de pagina Verzelstandigingen, zijn te onderscheiden doordat ze een andere kleur hebben dan de rest van de tekst. Er is echter geen andere manier dan kleur om het onderscheid te maken.

Mogelijke oplossing

Onderstreep de links of zorg dat ze op een andere manier opvallen dan alleen door kleur.

Herhaling

Ook op de volgende plekken is kleur het enige onderscheid:

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

De focusstijl heeft in sommige browsers onvoldoende contrast

Nog niet opgelost op 22-02-2021: De rode omlijning is ook niet overal goed. Beter is om alle overwrites van outlines uit te schakelen en het gewoon geheel 'default' te houden, zodat browsers het zelf kunnen interpreteren. Dit moet dan ook worden opgelost voor alle plekken waar de outline is verwijderd.

menu item “contact” omlijnd met stippellijn

Probleem

Er is voor de meeste interactieve elementen geen focusstijl gedefineerd. Daardoor wordt de focusstijl gebruikt die in de browser is ingebouwd. In bijvoorbeeld Firefox is dit een dun stippellijntje. Dit heeft onvoldoende contrast met de achtergrond, waardoor het voor veel gebruikers lastig is om te zien waar ze op dat moment zijn. Met name mensen die alleen hun toetsenbord gebruiken om te navigeren kunnen zo lastig zien waar ze zijn.

Mogelijke oplossing

Gebruik een duidelijke focusstijl die voldoende contrast heeft met de achtergrond.

WCAG criterium:
1.4.11: Contrast van niet-tekstuele content (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Tooltip voldoet niet aan eisen

Nog niet opgelost op 22-02-2021: Niet opgepakt

kop “Budgettaire gevolgen coronacrisis” met eronder een staafdiagram met een tooltip bij één van de staven

(Deze tooltip ligt over de tekst “2020”)

Probleem

De tooltip bij staafdiagrammen voldoet niet aan de eisen voor tooltips in WCAG succescriterium 1.4.13, op de volgende punten:

Mogelijke oplossing

Zorg dat de tooltip kan worden verwijderd met bijvoorbeeld het toetsenbord of een knop. Zorg ook dat het mogelijk is om over de tekst te hoveren.

WCAG criterium:
1.4.13: Content bij hover of focus (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
crisistijd
Verantwoordelijkheid:
Front-end

Tekst in blok “Visueel jaarverslag” heeft onvoldoende contrast op sommige schermbreedtes

Nog niet opgelost op 22-02-2021: Gedeeltelijk opgepakt, maar er zijn nog vele kleurstellingen onvoldoende contrastrijk, zoals geel/wit, oranje/wit, blauw/wit.

blok visueel jaarverslag met zwarte tekst op roze achtergrond, met contrastinformatie 3.67

Probleem

Wie ver inzoomt of op een mobiele telefoon kijkt, ziet het blok “Visueel jaarverslag” met een zwarte tekst op een roze achtergrond. Het contrast tussen zwart en deze kleur roze is 3.67 : 1, en dat is onvoldoende.

Mogelijke oplossing

Gebruik een andere tekstkleur of een andere achtergrondkleur, zodanig dat er minstens een contrast van 4.5 : 1 is.

Lees verder

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Tekst overlapt als deze vergroot wordt

Nog niet opgelost op 22-02-2021: Niet opgepakt

kop “Maatregelen” met eronder een legenda waarin getallen elkaar overlappen

Probleem

Op de pagina Ombuigings- en intensiveringslijst staat een aantal staafdiagrammen. Wanneer de gebruiker op 200% inzoomt, overlappen in sommige van deze diagrammen de getallen in de legenda. Daardoor zijn ze niet goed leesbaar.

Mogelijke oplossing

Zorg dat zowel de staafdiagrammen als de teksten vergroten bij tekstvergroten, zodat de hoeveelheid beschikbare ruimte meegroeit.

WCAG criterium:
1.4.4: Herschalen van tekst (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
visuele-begroting
Verantwoordelijkheid:
Front-end

Het interactieve overzicht agentschappen werkt niet met toetsenbord

Nog niet opgelost op 22-02-2021: Niet opgepakt

lijst met ministeries links, grafische weergave van budgetverdeling rechts Tabel met kop Begrotingshoofdstuk en daaronder een rij voor elk deel van de begroting

Probleem

Op de pagina “Verzelfstandigingen” is per ministerie te bekijken hoe budgetten verdeeld zijn over verschillende agentschappen en organen. Er in meer detail worden gekeken door een specifiek ministerie aan te klikken. Deze interactiviteit werkt niet met enkel een toetsenbord.

Mogelijke oplossing

Dit is nu de HTML voor het kiezen van een detailweergave:

<div class="rijks-treemap-panel-header">
<span class="rijks-treemap-icon rijks-treemap-icon-7001"></span>
<span class="rijks-treemap-label">
<span>Justitie en Veiligheid</span>
<span>€4.315,63 mln.</span>
</span>
</div>

Gebruik in plaats van het buitenste div-element een button-element. Dit kan standaard worden gebruikt met een toetsenbord.

Herhaling

Ook andere onderdelen op de site zijn niet bruikbaar met toetsenbord:

WCAG criterium:
2.1.1: Toetsenbord (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
verzelfstandigingen
Verantwoordelijkheid:
Front-end

Opgelost per 22-02-2021: Opgelost

icoon met pijl naar beneden

Probleem

Wanneer de gebruiker is ingezoomd of een smal scherm heeft, is bij de knop “Exporteer gegevens” geen tekst beschikbaar, alleen het icoon. Daardoor is het voor deze gebruikers niet mogelijk vast te stellen wat deze link doet.

Mogelijke oplossing

De linktekst wordt nu verborgen met de class hidden-md-down, die in CSS display: none toepast. Dat zorgt ervoor dat de tekst in een aantal schermgroottes nergens, ook niet in hulptechnologieën, beschikbaar is. Gebruik een techniek om visueel te verbergen, zie link onder “Lees verder”.

Lees verder

WCAG criterium:
2.4.4: Linkdoel (in context) (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
premies-fiscaal
Verantwoordelijkheid:
Front-end

Er zijn geen labels bij de verschillende dropdowns onder de visuele begroting

Nog niet opgelost op 22-02-2021: Dropdowns op visuele begroting hebben nog steeds geen label-elementen. Vervang de strong door een label-element.

ingeklapte dropdowns, met tekst Jaarverslag, 2019 en Uitgaven

Probleem

Dropdowns/selects “fase”, “jaar”, “uitleg of ontvangsten” op de pagina “Visuele begroting” hebben geen label dat uitlegt waar deze dropdowns voor kunnen worden gebruikt.

Mogelijke oplossing

Voeg labels toe, het liefst zichtbaar op de pagina, maar in ieder geval in de broncode, die duidelijk uitleggen waar elke dropdown voor is.

WCAG criterium:
2.4.6: Koppen en labels (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
visuele-begroting
Verantwoordelijkheid:
Front-end, design

Op sommige elementen is focus niet zichtbaar

Nog niet opgelost op 22-02-2021: Niet opgepakt

zoekveld met knop

Probleem

Bovenaan elke pagina staat een zoekveld. Wanneer de zoekknop focus heeft, is dit niet zichtbaar.

De CSS (dark-blue.css) bevat de volgende code, die de focusstijl onzichtbaar maakt:

.btn:focus, .btn.focus {
outline: 0;
}

Mogelijke oplossing

Verwijder de declaratie outline: 0, zodat de focusstijl niet meer uitgezet is. Zorg ook voor een goede focusstijl, zodat niet de standaardstijl wordt gebruikt.

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Engelstalige pagina als Nederlandstalig gemarkeerd

Nog niet opgelost op 17-02-2021: Nog steeds html lang="nl"

screenshot van Engelstalige pagina

Probleem

De Engelstalige pagina is gemarkeerd als Nederlandstalig, op het <html>-element. Voorbeeld (ingekort):

<html lang="nl">

Mogelijke oplossing

Gebruik en als waarde voor het lang attribuut, op deze manier:

<html lang="en">

Herhaling

Dit geldt ook voor:

WCAG criterium:
3.1.1: Taal van de pagina (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
english
Verantwoordelijkheid:
Front-end

Nog niet opgelost op 22-02-2021: Niet opgepakt

link met naam English

Probleem

In de navigatie is een link naar de Engelstalige website, met als naam “English”. In de HTML is niet aangegeven dat deze link in het Engels is.

Mogelijke oplossing

Voeg de taal van de link toe aan de link, met lang="en" op de link.

Herhaling

WCAG criterium:
3.1.2: Taal van onderdelen (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Element met id “edit-submit” komt twee keer voor

Nog niet opgelost op 22-02-2021: Niet opgepakt

Probleem

Op sommige pagina's, waaronder de homepage, komt twee keer een element voor met het id “edit-submit”. Het lijkt erop dat de eerste button alleen zichtbaar is op desktopbrowsers en de tweede alleen op mobiel. Toch is twee keer hetzelfde id niet toegestaan.

Mogelijke oplossing

Gebruik een ander id voor één van de buttons.

WCAG criterium:
4.1.1: Parsen (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
homepage
Verantwoordelijkheid:
Front-end

Checkboxes hebben geen label

Nog niet opgelost op 22-02-2021: Niet opgepakt

varianten met naast elke variant een rechts uitgelijnd vierkantje

Probleem

Op de pagina's onder “Verkiezingen en formatie 2021” staat naast elke variant een checkbox, waarmee de variant kan worden opgenomen in de selectie. Deze checkboxes zijn de HTML wel aan een label-element gekoppeld, maar dat element heeft geen inhoud. Daarmee hebben de checkboxes geen label.

Mogelijke oplossing

Voeg een uniek label toe dat duidelijk beschrijft wat de gebruiker met de checkbox aan of uit kan zetten.

Lees verder

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

Tips

  1. Links onder departementen hebben geen duidelijke of unieke naam
  2. Getallen links uitgelijnd

uitgeklapt tabje met daarin gegevens over Uitvoeringsorganisatie Bedrijfsvoering Rijk, met een opsomming waarvan het laatste item een link met de linktekst link is

Probleem

Op de pagina “Verzelfstandigingen” is er bij informatie over specifieke instanties een link naar die instantie beschikbaar. Deze link heeft als naam “Link”. Het is daarmee niet duidelijk waar de link naartoe gaat. De link is ook moeilijk te onderscheiden van andere links naar instanties.

Mogelijke oplossing

Gebruik de naam van de instantie als linktekst.

Complexiteit:
Laag
Ernst:
Medium
Sample:
verzelfstandigingen
Verantwoordelijkheid:
Front-end

een aantal bedragen, links uitgelijnd

Probleem

De getallen in de kolom ‘bedragen’ staan links uitgelijnd. Dat maakt het vergelijken van bedragen met verschillende lengten lastig.

Mogelijke oplossing

Lijn de getallen rechts uit, met text-align: right op de cellen met getallen erin. Zo zijn ze makkelijker te vergelijken.

Complexiteit:
Laag
Ernst:
Laag
Sample:
visuele-begroting
Verantwoordelijkheid:
Front-end