De website tuchtrecht.overheid.nl voldoet grotendeels aan WCAG 2.1 A + AA succescriteria, met enkele kleine bevindingen die eenvoudig kunnen worden opgelost.
| Principe | Resultaten per principe |
|---|---|
| Waarneembaar | 17 uit 20 |
| Bedienbaar | 16 uit 17 |
| Begrijpelijk | 10 uit 10 |
| Robuust | 2 uit 3 |
| Totaal | 45 uit 50 |
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.
Dit rapport is samengesteld met behulp van de WCAG EM methodologie.
Het volgende proces is daarbij gebruikt:
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.
Komt voor op:
Niet in scope:
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
De onderzochte maakt gebruik van de volgende technologieën:
Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:
Portaal tuchtrecht.overheid.nl
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.
Voeg “ (extern)” toe aan de linknaam van deze links, bijvoorbeeld door die tekst als visueel verborgen tekst in de link op te nemen.
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.
Gebruik een button-element, en koppel styling en gedrag daaraan.
Dit probleem komt ook op een aantal andere plekken voor, waaronder:
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.
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.
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.
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.
Het veld “Zoekterm of verdragsnummer” is niet gekoppeld aan een label. Daardoor kunnen sommige gebruikers dit element niet (goed) gebruiken.
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"
>
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.
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.
Ditzelfde probleem komt ook voor op andere plekken, zoals:
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”.