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.
| Principe | Resultaten per principe |
|---|---|
| Waarneembaar | 17 uit 20 |
| Bedienbaar | 17 uit 17 |
| Begrijpelijk | 9 uit 10 |
| Robuust | 3 uit 3 |
| Totaal | 46 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:
Engelstalige pagina
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.
Voeg visueel verborgen tekst toe om aan te geven dat het om een externe link gaat.
Op de pagina “Europese overheidsinformatie” staat een tabel met daarboven headers. Deze zijn niet opgemaakt als headers.
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.
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.
Gebruik for="zoekterm"/for="postcode" om het label te koppelen aan het juiste invoerveld.
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.
Zorg ervoor dat lange woorden, zoals “Samenlevingscontract” afbreken. Dit kan bijvoorbeeld door het karakter ­ toe te voegen, of in HTML het <wbr>-element te gebruiken. Dit voegt een “hyphenation opportunity” toe.
De pagina “English” is aan het Engels, maar is in de code gemarkeerd als Nederlandstalig:
<html lang="nl">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" />In de pagina's zitten twee “skiplinks”, eentje naar de content en eentje naar ”zoeken”. Deze laatste verwijst naar een niet-bestaand element.
Verwijder de skiplink naar “Zoeken”.
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.
Verander “Overdesite” in “Over de site” of “Over deze website”.