Rapport: toegankelijkheid van Wetgevingskalender

Onderzocht door
Peter van Grieken
In opdracht van
KOOP
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
11 november 2020

Samenvatting

De website wetgevingskalender.overheid.nl voldoet ...

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 16 uit 20
Bedienbaar 14 uit 17
Begrijpelijk 9 uit 10
Robuust 1 uit 3
Totaal 40 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. Icoon externe link (1.1.1)
  2. Onjuist gebruik van <label> element (1.3.1)
  3. Titel op kleine schermformaten (1.4.10)
  4. Pagina heeft horizontale en verticale scrollbars (in Firefox) (1.4.10)
  5. Inputvelden hebben onvoldoende kleurcontrat (1.4.11)
  6. Focusindicator menu heeft onvoldoende contrast (1.4.11)
  7. Skiplinks verwijzen naar niet bestaand elementen (2.4.1)
  8. Kalender heeft extra interactief element (2.4.3)
  9. Navigatiemenu ontvangt focus op mobiel (2.4.3)
  10. Doel van links in paginering niet duidelijk (2.4.4)
  11. Group radiobuttons mist beschrijving (3.3.2)
  12. Ongeldige nesting bij tabbladen (4.1.1)
  13. Volgnummer bij “Nummer” missen labels (4.1.2)
  14. Velden bij “andere periode” missen labels (4.1.2)
  15. Onjuist gebruik van `<a>` in paginering (4.1.2)
  16. Veld “Zoekterm” mist label (4.1.2)

Link naar contactformulier op Rijksoverheid.nl met een icoon dat aangeeft dat de link naar een andere website verwijst.

Probleem

Er wordt een icoon gebruikt om aan te geven dat een link naar een andere website leidt. Dit icoon heeft geen alternatieve tekst.

Mogelijke oplossing

Plaats een onzichtbare tekst die aangeeft dat de link naar een andere website verwijst.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Implementatie

Onjuist gebruik van <label> element

veld met placeholder Zoekterm voor wet, amvb

Probleem

Het woord “Zoeken” suggereert (visueel) een label voor het inputveld. Voor dit element is <legend> gebruikt.

Mogelijke oplossing

Dit hangt samen met het issue Veld “Zoekterm” mist label. Wanneer het andere issue is opgelost, kan voor dit element een kop (<h*>-element) gebruikt worden.

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

Titel op kleine schermformaten

Een kalender

Probleem

Wanneer het scherm te smal is (320 pixels), valt een deel van de titel buiten het kader. Sommige letters kunnen daardoor moeilijk leesbaar worden.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Laag
Ernst:
Low
Sample:
homepage
Verantwoordelijkheid:
Implementatie

Pagina heeft horizontale en verticale scrollbars (in Firefox)

Probleem

Op alle pagina's zijn zowel horizontaal als verticaal scrollbars. Dit maakt de inhoud moeilijker leesbaar voor lezers met een visuele beperking.

Dit probleem is specifiek geconstateerd in Firefox 83 (Mac).

Oplossing

Ga na of er elementen in de pagina staan die groter zijn dan de viewport en ervoor zorgen dat er horizontale scrollbars zijn.

Zorg dat er alleen verticaal een scrollbar is, en tekst die horizontaal niet past op de volgende regel valt.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Hoog
Ernst:
Laag
Sample:
homepage
Verantwoordelijkheid:
Implementatie

Inputvelden hebben onvoldoende kleurcontrat

Inputvelden Achternaam en emailadres

Probleem

De randen van de inputvelden op de website hebben de kleur #b4b4b4. Deze kleur heeft onvoldoende kleurcontrast op een witte achtergrond (2,07 : 1).

Mogelijke oplossing

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

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

Focusindicator menu heeft onvoldoende contrast

deel van navigatie met Uitgebreid zoeken omlijnd, gele omlijning op blauwe achtergrond

Probleem

Er wordt een gele outline gebruikt als focusindicator. Deze heeft onvoldoende contrast op zowel de blauwe achtergrond van de menubalk (2.78 : 1), als op de witte achtergrond (1.78:1).

Mogelijke oplossing

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

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

Probleem

Er zijn twee skiplinks aanwezig, ze verwijzen naar de id‘s #content" en #search , beide elementen komt niet voor op de pagina‘s.

Oplossing

De skiplinks laten verwijzen naar bestaande id‘s, zoals die van het zoekformulier en de hoofdcontent.

WCAG criterium:
2.4.1: Blokken omzeilen (externe link)
Complexiteit:
Laag
Ernst:
Groot
Sample:
homepage
Verantwoordelijkheid:
Implementatie

Kalender heeft extra interactief element

Twee inputvelden, beiden zonder label

Probleem

Het datum invoerveld heeft een <button> om een kalender te tonen. Daarnaast staat er een (verborgen) <a> dat met het toetsenbord benaderd kan worden. Wanneer op dit element geklikt wordt, opent een grote versie van de kalender onderaan de pagina.

Mogelijke oplossing

Verwijder dit element. Als dat niet mogelijk is, voeg het attribuut tabindex="-1" toe, zodat het uit de toetsenbordvolgorde verwijderd wordt.

WCAG criterium:
2.4.3: Focus volgorde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Front-end

Probleem

De mobiele navigatie heeft een tabindex-attribuut, de waarde van dit attribuut is 0 waardoor het met het toetsenbord benaderd kan worden. Dit is niet nodig.

Mogelijke oplossing

Verander de waarde van het tabindex-attribuut in -1

WCAG criterium:
2.4.3: Focus volgorde (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Een paginering met 2 pagina‘s, de eerste is actief

Probleem

De linktekst van de afzonderlijke links in de paginering is ‘1’, ‘2’, etc. Zonder context is niet duidelijk waar deze links naar toe gaan.

Mogelijke oplossing

Voeg een koptekst met de tekst “Ga naar pagina” toe. Deze tekst mag verborgen zijn.

WCAG criterium:
2.4.4: Linkdoel (in context) (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

Group radiobuttons mist beschrijving

Een groep van 3 radiobuttons

Probleem

De status radiobuttons zijn onderdeel van een radiogroup, maar missen de juiste labeling. De afzonderlijke radiobuttons zijn juist gekoppeld aan een label, maar voor de gehele groep staat het woord “Status” in een <label> element.

Beide velden zijn niet gelabeld.

Mogelijke oplossing

Zet de hele radiogroup in een <fieldset> element en maak van het woord “Status” een <legend>.

WCAG criterium:
3.3.2: Labels of instructies (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

Ongeldige nesting bij tabbladen

Drie tabbladen naast elkaar

Probleem

De tabblad-navigatie is opgebouwd als een <ul> met daarin 3 <li>‘s. Deze <li> hebben het role-attribuur met de waarde presentation. Hoewel het technisch juist is dat <li> de children zijn van de <ul>, is het door het role attribuut in feite alsof er <div>-elementen gebruikt zijn.

Mogelijke oplossing

Verwijder het role-attribuut.

WCAG criterium:
4.1.1: Parsen (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

Volgnummer bij “Nummer” missen labels

Twee inputvelden, beiden zonder label

Probleem

Bij de “Nummer”-invoer worden twee velden getoond: jaartal en volgnummer.

Alleen het veld voor jaartal heeft een bijbehorend <label>.

Mogelijke oplossing

Voeg <label> elementen toe aan het veld voor volgnummer. Deze kan eventueel visueel worden verborgen.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
uitgebreidzoekeneu
Verantwoordelijkheid:
Implementatie

Velden bij “andere periode” missen labels

Twee inputvelden, beiden zonder label

Probleem

Bij het kiezen van een periode worden twee velden getoond: een <select> met de optie voor, na en tussen, en een datumselectie.

Beide velden zijn niet gelabeld.

Mogelijke oplossing

Voeg <label> elementen toe aan beide velden. Deze kunnen eventueel visueel worden verborgen.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

Onjuist gebruik van `<a>` in paginering

Een paginering met 2 pagina‘s, de eerste is actief

Probleem

Voor de links naar andere pagina’s in de paginering wordt het <a>-element gebruikt. Het href attribuut bevat niet een link naar een andere pagina, maar voert Javascript uit om een formulier te submitten.

Dit is onjuist gebruik van het <a>-element, deze zijn bedoeld om de bezoeker naar een andere url te sturen.

Mogelijke oplossing

Gebruik het <button>-element om een actie op de pagina uit te voeren.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

Veld “Zoekterm” mist label

veld met placeholder Zoekterm voor wet, amvb

Probleem

Het veld “Zoekterm voor wet, amvb” is niet gekoppeld aan een label. Daardoor kunnen sommige gebruikers dit element niet (goed) gebruiken. Wanneer Javascript uitgeschakeld is, is er wel een label aanwezig.

Zonder Javascript is het veld daarnaast gevuld met de tekst “Zoekterm voor wet, amvb“, deze waarde wordt door Javascript verwijderd en vervangen door een placeholder attribuut met dezelfde tekst.

Mogelijke oplossing

De huidige code is:

<input 
type="text"
id="tb_zoeken"
name="tb_zoeken"
class=" inactive"
title=""
>

Het veld is juist gelabeled wanneer Javascript is uitgeschakeld. Dit kan opgelost worden door de huidige Javascript functionaliteit te verwijderen van dit veld. Het <label> element kan eventueel visueel worden verborgen.

<!-- toegevoegd: label met for-element -->
<label for="zoekterm-of-verdragsnummer">
Zoekterm of verdragsnummer
</label>
<input
type="text"
id="tb_zoeken"
name="tb_zoeken"
class=" inactive"
title=""
>
WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Implementatie

Tips

  1. Kalender op kleine schermformaten

Kalender op kleine schermformaten

Een kalender

Probleem

Op kleine schermformaten verandert de kalender. Wanneer het scherm te smal is (320 pixels), valt de rechter pijl om om naar de volgende maand te gaan, over de jaar selectbox heen. Hierdoor is deze niet meer goed zichtbaar.

Complexiteit:
Laag
Ernst:
Low
Sample:
Alle pagina's
Verantwoordelijkheid:
Implementatie