Rapport: toegankelijkheid van Overheid.nl (2021)

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
21 December 2021

Samenvatting

De website overheid.nl voldoet deels aan de WCAG 2.1 A + AA succescriteria. In dit rapport is opgesomd op welke punten nog niet wordt voldaan, met daarbij een oplossingsrichting.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 17 uit 20
Bedienbaar 17 uit 17
Begrijpelijk 9 uit 10
Robuust 3 uit 3
Totaal 46 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. Tabelheaders niet als ehadersheaders opgemaakt (1.3.1)
  3. Zoekvelden en labels zijn niet gekoppeld (1.3.1)
  4. Koppen overlappen bij inzoomen (1.4.4)
  5. Taal niet goed aangegeven op Engelstalige pagina (3.1.2)

link Rijksoverheid met erachter icoon externe link

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.

Mogelijke oplossing

Voeg visueel verborgen tekst toe om aan te geven dat het om een externe link gaat.

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

Tabelheaders niet als ehadersheaders opgemaakt

tabel met koppen naam en link en omschrijving

Probleem

Op de pagina “Europese overheidsinformatie” staat een tabel met daarboven headers. Deze zijn niet opgemaakt als headers.

Mogelijke oplossing

Plaats de headers van de tabel in een thead-element, met daarin voor elke header een th als cel. Zorg ook dat er een scope-attribuut staat op de th-elementen, waarmee je aangeeft of de header van toepassing is op de kolom of de rij (in dit geval: kolom).

Verderop in de tabel staat ook de kop “Raad van Europa” binnen de tabel, haal deze eruit en start daarna een nieuwe tabel.

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

Zoekvelden en labels zijn niet gekoppeld

twee velden met erboven een labeltekst, zoekterm en postcode; in de velden staan ook placeholders

Probleem

Boven de velden “Zoekterm” en “Postcode” staat visueel een label, maar dit label is in de code niet gekoppeld aan de bijbehorende inputs.

Het label verwijst namelijk naar een element met het ID “edit-zoekterm”, terwijl er alleen een element met het ID “zoekterm” is.

<div class="form__row">
<label for="edit-zoekterm">Zoekterm</label>
<input id="zoekterm">
</div>

(ingekort) Iets soortgelijks geldt bij het postcodeveld.

Mogelijke oplossing

Gebruik for="zoekterm"/for="postcode" om het label te koppelen aan het juiste invoerveld.

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

Koppen overlappen bij inzoomen

Twee koppen met tekst eronder, eerste Samenlevingscontract, tweede geregistreerd partnerschap, ze overlappen een paar karakters waardoor de teksten lastig leesbaar zijn

Probleem

Op de pagina “Levensgebeurtenissen” staan een aantal koppen met daaronder tekst, uitgelijnd in verschillende kolommen. Wanneer de gebruiker inzoomt op 110% overlappen soms kopen uit de ene kolom met koppen uit de andere kolom.

Mogelijke oplossing

Zorg ervoor dat lange woorden, zoals “Samenlevingscontract” afbreken. Dit kan bijvoorbeeld door het karakter &shy; toe te voegen, of in HTML het <wbr>-element te gebruiken. Dit voegt een “hyphenation opportunity” toe.

WCAG criterium:
1.4.4: Herschalen van tekst (externe link)
Complexiteit:
Medium
Ernst:
Laag
Sample:
leven
Verantwoordelijkheid:
Front-end ontwikkelaar

Taal niet goed aangegeven op Engelstalige pagina

Probleem

De pagina “English” is aan het Engels, maar is in de code gemarkeerd als Nederlandstalig:

<html lang="nl">

Mogelijke oplossing

Markeer de Engelstalige content als Engelstalige. Gezien de hele pagina in het Engels is en alleen de “main content” Engelstalig, kan het beste de content-div worden gemarkeerd:

<div id="content" lang="en" />
WCAG criterium:
3.1.2: Taal van onderdelen (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
english
Verantwoordelijkheid:
Front-end ontwikkelaar

Tips

  1. Skiplink “Zoeken” gaat naar niet-bestaande content
  2. In kruimelpad staat “over deze website” aan elkaar

Probleem

In de pagina's zitten twee “skiplinks”, eentje naar de content en eentje naar ”zoeken”. Deze laatste verwijst naar een niet-bestaand element.

Mogelijke oplossing

Verwijder de skiplink naar “Zoeken”.

Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end ontwikkelaar

In kruimelpad staat “over deze website” aan elkaar

Probleem

Boven de pagina's staat een kruimelpad. Op de pagina “Over deze website” staat in dit kruimelpad als huidige pagina “Overdesite”, aan elkaar dus. Dit wordt mogelijk onduidelijk voorgelezen.

Mogelijke oplossing

Verander “Overdesite” in “Over de site” of “Over deze website”.

Complexiteit:
Laag
Ernst:
Medium
Sample:
over
Verantwoordelijkheid:
Content