Rapport: toegankelijkheid van Openbare overheidsdocumenten

Onderzocht door
Hidde de Vries
In opdracht van
Ask Atticus BV
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
22 december 2021

Samenvatting

De website open-pilot.overheid.nl voldoet grotendeels aan de WCAG 2.1 A + AA succescriteria. Er is een aantal problemen geconstateerd en in dit rapport toegelicht. Op een enkele uitzondering na, zijn de meeste issues geclassificeerd met complexiteit “Laag” en ernst “Hoog”.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 17 uit 20
Bedienbaar 16 uit 17
Begrijpelijk 10 uit 10
Robuust 2 uit 3
Totaal 45 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. Geen tekstalternatief voor aanduiding externe link (1.1.1)
  2. Tekstalternatief logo niet gelijkwaardig (1.1.1)
  3. Categorieën bij filteropties niet met opties geassocieerd (1.3.1)
  4. Focus heeft onvoldoende contrast (1.4.11)
  5. Knop volgende zoekresultaten beschrijft linkdoel niet voldoende (1.4.11)
  6. Paginatitels onvoldoende beschrijvend (2.4.2)
  7. Jaarkeuze in datepicker mist label (4.1.2)

link Rijksoverheid met erachter icoon externe link

link Datum met erachter icoon pijl naar beneden

Probleem

In sommige content staan externe links, die zijn aangeduid met een icoon. Deze aanduiding is niet beschikbaar voor mensen die niet kunnen zien, er is namelijk geen alternatieve tekst beschikbaar.

Bij de sortering op de zoekresultatenpagina is ditzelfde probleem gevonden, maar dan bij de pijl die aangeeft of de sortering naar oplopend of aflopend zal worden aangepast.

Mogelijke oplossing

Voeg visueel verborgen tekst toe om aan te geven dat het om een externe link gaat, bijvoorbeeld:

<a href="">
Linktekst
<span class="visually-hidden"> (externe link)</span>
</a>

En in het geval van de sortering, zorg dat de linktekst beschrijft wat er gaat gebeuren als je erop klikt:

<a href="">
Datum
<span class="visually-hidden"> (sorteer oplopend)</span>
</a>
WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end ontwikkelaar

Tekstalternatief logo niet gelijkwaardig

logo overheid.nl

Probleem

Bovenaan elke pagina staat het logo van Overheid.nl, dat tevens de enige inhoud is van de link naar de homepage. Het tekstalternatief is logo.svg. Dat beschrijft het logo niet, en is ook niet geschikt als linktekst voor de link naar de homepage.

Mogelijke oplossing

Gebruik een alternatief dat het logo goed beschrijft en ook als linktekst kan dienen, bijvoorbeeld “homepage, logo overheid.nl”.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end

Categorieën bij filteropties niet met opties geassocieerd

kop cultuur en recreatie met lijst opties

Probleem

Wie uitgebreid zoekt kan een Documentsoort, Thema of Organisatie uit een lijst kiezen. Er opent dan een overlay waar de keuze kan worden gemaakt, met checkboxes die in verschillende categorieën zijn onderverdeeld.

Deze categorieën zijn als volgt opgemaakt (ingekort voor overzichtelijkheid):

<li>
<strong>Cultuur en recreatie</strong>
<fieldset>
<legend></legend>
<ul>
<li>
<div>
<input type="checkbox">
<label>Cultureel erfgoed (1.379)</label>
</div>

</fieldset>
</li>

De categorie staat in een strong-element en is zo niet geassocieerd met de opties.

Mogelijke oplossing

Plaats het label in het legend-element, dat nu leeg is. Eventueel zou dit legend-element visueel kunnen worden verborgen, en de tekst in de strong met aria-hidden="true" kunnen worden verborgen, zodat de tekst in de strong visueel gebruikt kan worden en dezelfde tekst ook aanwezig is voor hulptechnologieën. Dat is echter een beetje houwtje-touwtje; de voorkeur zou hebben om de legend te stylen zoals nodig, en de strong te verwijderen.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end

Focus heeft onvoldoende contrast

Button “zoek documenten” met gouden rand

Probleem

Wanneer elementen op de pagina, zoals links, knoppen en formuliervelden, “focus” krijgen, verschijnt een gouden rand. Deze heeft onvoldoende contrast met de achtergrond: 1.52 : 1 (zie Contast Ratio).

Mogelijke oplossing

Gebruik voor de focusindicator een kleur die meer contrast heeft met de achtergrond, met een ratio van minimaal 3 : 1.

WCAG criterium:
1.4.11: Contrast van niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
homepage
Verantwoordelijkheid:
Front-end

Knop volgende zoekresultaten beschrijft linkdoel niet voldoende

paginatie met links naar specifieke pagina's en pijl naar rechts als laatste item

Probleem

Op de zoekresultatenpagina staat als er veel pagina's zijn een link naar de volgende resultatenpagina. Het doel van deze link is niet op te maken uit de naam van de link of de context.

<a href="(…)page=2">
<span>»</span>
</a>

De naam van de link is “»”.

Mogelijke oplossing

Gebruik als linktekst iets als “Volgende pagina” of voeg iets als ”Volgende pagina” toe in een aria-label-attribuut op het a-element.

WCAG criterium:
1.4.11: Contrast van niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
zoekresultaten
Verantwoordelijkheid:
Front-end

Paginatitels onvoldoende beschrijvend

Probleem

Op alle onderzochte pagina's is de paginatitel (inhoud title-element) “Overheid.nl | Overheidsdocumenten”. Dat beschrijft onvoldoende wat er op de pagina te doen is, zeker als het gaat om bijvoorbeeld de zoekresultatenpagina.

Mogelijke oplossing

Maak de paginatitels uniek per pagina, en zorg dat ze specifiek beschrijven wat er op de huidige pagina te zien is en hoe dat verschilt van de andere pagina's.

Het werkt daarbij het beste om van specifiek naar generiek te werken, dus Overheid.nl als laatste en bv “Uitgebreid zoeken” als eerste.

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

Jaarkeuze in datepicker mist label

veld Einddatum met uitgeklapte datepicker

Probleem

Wanneer bij “Uitgebreid zoeken” als datum gekozen wordt voor ”Zelf een periode kiezen” verschijnen twee datumvelden met een datepicker. Binnen de datepicker kan het jaar worden gekozen met een dropdown/select-element. Deze dropdown is niet gelabeled.

Mogelijke oplossing

Voeg een label toe aan de datepicker, bijvoorbeeld met een label-element met een for-attribuut dat verwijst naar het select-element, of met een aria-label-attribuut op het select-element dat gelijk de naam bevat.

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

Tips

  1. Bij geen resultaten verschijnt heading zonder content
  2. Datepicker-knop verwijst naar niet-bestaande beschrijving

Bij geen resultaten verschijnt heading zonder content

heading Filter resultaten

Probleem

Als er geen zoekresultaat is staat er wel een heading “Filter resultaten”. Onder deze heading staat nu geen content, waardoor iemand die er met bijvoorbeeld hulpsoftware naartoe navigeert eigenlijk naar niets navigeert.

Mogelijke oplossing

Overweeg om een tekst als “Er zijn geen filters van toepassing” te plaatsen onder de heading “Filter resultaten” of verwijder de heading als er geen resultaten zijn.

Complexiteit:
Laag
Ernst:
Laag
Sample:
zoekresultaten
Verantwoordelijkheid:
Front-end

Datepicker-knop verwijst naar niet-bestaande beschrijving

veld Einddatum met uitgeklapte datepicker

Probleem

Wanneer bij “Uitgebreid zoeken” als datum gekozen wordt voor ”Zelf een periode kiezen” verschijnen twee datumvelden met een datepicker. de knop om de datepicker te openen heeft een aria-describedby-attribuut dat verwijst naar een element met het ID datepickerLabel, maar er bestaat geen element met dat ID.

Mogelijke oplossing

Verwijder aria-describedby van de buttons die de datepickers openen. Ze doen nu niets, en zijn ook niet nodig, omdat de knoppen ook tekst bevatten, en daarmee al een label hebben.

Complexiteit:
Laag
Ernst:
Laag
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end