Rapport: toegankelijkheid van Tuchtrecht (overheid.nl)

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
28 oktober 2020

Samenvatting

De website tuchtrecht.overheid.nl voldoet grotendeels aan WCAG 2.1 A + AA succescriteria, met enkele kleine bevindingen die eenvoudig kunnen worden opgelost.

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. Icoon in link mist tekstalternatief (1.1.1)
  2. Button om selectie te maken geen button (1.3.1)
  3. Tooltip voldoet niet aan alle toegankelijkheidscriteria (1.4.13)
  4. Focus niet zichtbaar op sluitknop (2.4.7)
  5. Veld “Zoekterm” mist label (4.1.2)

knop instanties in tuchtrecht, met icoon voor externe link

Probleem

De links naar externe pagina's, zoals “Instanties in tuchtrecht” hebben een icoon dat duidelijk maakt dat deze links extern zijn. Deze informatie is echter niet terug te vinden in de naam van de link.

Mogelijke oplossing

Voeg “ (extern)” toe aan de linknaam van deze links, bijvoorbeeld door die tekst als visueel verborgen tekst in de link op te nemen.

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

Button om selectie te maken geen button

kop zoek binnen domein, knop selecteer domein

Probleem

Bij zoekresultaten kunnen filters worden gekozen. Soms moet daar een selectie voor woorden gemaakt. De knop om te selecteren is niet opgemaakt als knop.

Dit is de opmaak voor de knop:

<a 
href=""
id="id-ss-domein"
data-handler="open-modal"
data-modal="modal-ss-domein"
class="subselection__trigger icon icon--edit"
>
Selecteer domein
</a>

Met een lege href en geen verandering van locatie is dit semantisch gezien eigenlijk geen link.

Mogelijke oplossing

Gebruik een button-element, en koppel styling en gedrag daaraan.

Herhaling

Dit probleem komt ook op een aantal andere plekken voor, waaronder:

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
zoekresultaat
Verantwoordelijkheid:
Componentenbibliotheek

Tooltip voldoet niet aan alle toegankelijkheidscriteria

veld met placeholder zoekterm of verdragsnummer

Probleem

Op de pagina Uitgebreid Zoeken is er bij sommige velden een tooltip aanwezig die extra informatie biedt. Deze tooltip is goed bereikbaar met muis en toetsenbord, maar voldoet niet aan alle eisen die WCAG 2.1 stelt aan dit soort content.

Mogelijke oplossing

Zorg ervoor dat de tooltip ook kan worden gesloten met toetsenbord, bijvoorbeeld met ESC-toets. Zorg er ook voor dat het mogelijk is om over de tooltip-inhoud te hoveren, zonder dat deze verdwijnt.

WCAG criterium:
1.4.13: Content bij hover of focus (externe link)
Complexiteit:
Hoog
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Componentenbibliotheek

Focus niet zichtbaar op sluitknop

donkere, doorzichtige achtergrond met bovenop een venster waarin staat 'selecteer partijen'

Probleem

Op de pagina “Uitgebreid zoeken” wordt voor het instellen van sommige parameters een “modal overlay” getoond met daarin een de mogelijkheid een seletie te maken uit een grote hoeveelheid criteria. Wanneer de gebruiker met het toetsenbord op de sluitknop van deze overlay staat, is niet zichtbaar dat deze focus heeft.

Mogelijke oplossing

Zorg in CSS dat de :focus status van deze knop duidelijk verschilt van de reguliere status. Deze bestaat al voor veel andere elementen, en zou hier kunnen worden hergebruikt.

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Componentenbibliotheek

Veld “Zoekterm” mist label

veld met placeholder zoekterm of verdragsnummer

Probleem

Het veld “Zoekterm of verdragsnummer” is niet gekoppeld aan een label. Daardoor kunnen sommige gebruikers dit element niet (goed) gebruiken.

Mogelijke oplossing

De huidige code is:

<input 
type="text"
name="title"
class="input-text input-text--searchmedium"
placeholder="Zoekterm of verdragsnummer"
>

Het veld kan worden gelabeled door toevoeging van een id, waarnaar wordt verwezen in een <label>-element. Dit element kan eventueel visueel worden verborgen.

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

Tips

  1. Kalendericoon verwijst naar niet-bestaande beschrijving
  2. Link “verwijderen” biedt onvoldoende context
  3. Vorige/volgende links hebben geen duidelijke naam

Kalendericoon verwijst naar niet-bestaande beschrijving

veld met rechts een kalendericoon

In datumvelden staat rechts een kalender-icoon. Dit is opgemaakt als knop, met daarop een aria-describedby-attribuut. Dit attribuut dient om een ander element als beschrijving toe te voegen aan deze knop. Het id waarnaar wordt verwezen, bestaat echter niet, dus de beschrijving wordt niet toegevoegd.

Dit heeft waarschijnlijk weinig impact op de gebruiker. Aan knoppen kan zowel een “naam” als een “beschrijving” worden toegevoegd. De knop heeft al wel een naam, dus het gebrek aan beschrijving is geen probleem.

Complexiteit:
Laag
Ernst:
Geen
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

verwijderen

Om filters uit te zetten, moet de gebruiker klikken op een link met een kruisje als icoon, met als linktekst “verwijderen”.

Hier zou het beter zijn als de linktekst ook bevat wat er verwijderd wordt, zodat er meer context is. Bijvoorbeeld, bij het verwijderen van het filter “Domein: Advocaten”, is de linktekst “verwijderen”. Hier zou “Verwijder filter Domein: Advocaten” meer context bieden.

Herhaling

Ditzelfde probleem komt ook voor op andere plekken, zoals:

Complexiteit:
Laag
Ernst:
Medium
Sample:
zoekresultaten
Verantwoordelijkheid:
Implementatie

Links naar pagina 1, 2, 3, et cetera te gaan en icoon om naar volgende pagina te gaan

De links in de paginatie om naar de vorige of volgende pagina te gaan hebben als naam alleen een pijltje naar links of rechts. Beter zou zijn om een tekst toe voegen, bijvoorbeeld “Vorige resultaten”, “Volgende resultaten”.

Complexiteit:
Laag
Ernst:
Medium
Sample:
zoekresultaten
Verantwoordelijkheid:
Implementatie