Rapport: toegankelijkheid van data.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
23 november 2020

Samenvatting

De website puc.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 13 uit 20
Bedienbaar 15 uit 17
Begrijpelijk 9 uit 10
Robuust 2 uit 3
Totaal 39 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. Op sommige plekken is alternatieve tekst dubbelop (1.1.1)
  2. Icoon externe link heeft geen alternatieve tekst (1.1.1)
  3. Headings niet opgemaakt als headings (1.3.1)
  4. Lijst van thema's opgemaakt als headings (1.3.1)
  5. De metadata is niet semantisch opgemaakt (1.3.1)
  6. Velden voor persoonsgegevens missen autocomplete attributen (1.3.5)
  7. Bij foutieve invoer is fout gemarkeerd met alleen kleur (1.4.1)
  8. Focusindicator menu heeft onvoldoende contrast (1.4.11)
  9. Sommige links hebben onvoldoende contrast in hover state (1.4.3)
  10. Bij inzoomen gaat tekst door elkaar (1.4.4)
  11. Tabs werken niet met toetsenbord (2.1.1)
  12. Tooltips zitten niet in tabvolgorde (2.1.1)
  13. Skiplink naar zoeken werkt niet (2.4.1)
  14. Taal van metadata niet in code aangegeven (3.1.2)
  15. Zoekveld heeft geen label (4.1.2)

Op sommige plekken is alternatieve tekst dubbelop

kop organisaties, met eronder tekst en een links uitgelijnd icoon

Figuur 1, alternatieve tekst: “Onderwijs”

kop onderwijsdata, met eronder een foto en tekst

Figuur 2, alternatieve tekst: “Organisaties”

Probleem

Soms is alternatieve tekst essentieel voor eindgebruikers om de pagina te kunnen bedienen, maar soms zit het in de weg. De alternatieve tekst die gebruikt wordt bij decoratieve iconen (Figuur 1) en foto's (Figuur 2) is dubbelop en biedt geen teogevoegde waarde. Als de alternatieve tekst leeg wordt gelaten (alt=""), maakt dit geen inbreuk op de gebruikerservaring.

Mogelijke oplossing

Gebruik een lege alternatieve tekst (alt=""). Let op: het attribuut kan niet worden weggelaten. Het is verplicht en daarnaast kan weglaten er in sommige hulpsoftware voor zorgen dat de URL van de afbeelding in het geheel wordt voorgelezen.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
dataset
Verantwoordelijkheid:
Front-end

link bij titel licentie, linktekst ccc-0 (1.0) met icoon externe link

Probleem

Bij externe links staat een icoon dat duidelijk maakt dat de link extern is. Er wordt in de broncode geen tekstalternatief geboden voor dit icoon, waardoor bijvoorbeeld blinde mensen niet zullen kunnen vaststellen dat het om een externe (versus een reguliere) link gaat.

Mogelijke oplossing

Voeg de tekst ” (externe link” (of soortgelijk) toe aan de linktekst. Dit kan ook als visueel verborgen tekst, bijvoorbeeld met de in de code aanwezige CSS class visually-hidden. Als deze tekst in het <a>-element staat, maar met die class, is deze niet zichtbaar op het scherm, maar wel onderdeel van de “accessible name” van de link, en wordt deze bijvoorbeeld als zodanig voorgelezen in schermlezersoftware.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
dataset
Verantwoordelijkheid:
Front-end

Headings niet opgemaakt als headings

Probleem

Op de pagina FAQ staan een aantal tussenkopjes, die niet zijn opgemaakt als kopjes.

Voorbeeld:

<p><b>Zijn jullie een marktpartij?</b></p>

Mogelijke oplossing

Gebruik voor deze kopjes één van de heading-elementen (h1,h2, h3, h4, h5 of h6). Welk element het meest geschikt is, hangt af van wat het bovenliggende kopje is, bijvoorbeeld:

<h1>Veelgestelde vragen</h1>
<h2>Zijn jullie een marktpartij?</h2>
WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
faq
Verantwoordelijkheid:
Front-end

Lijst van thema's opgemaakt als headings

kop Thema's met eronder een aantal thema's

Probleem

Op de homepage staat een lijst van thema's, met daarboven de kop “Thema's”. De individuele thema's zijn in de HTML opgemaakt als koppen (h3-elementen), terwijl ze dat structureel gezien niet zijn. Een kop beschrijft wat er in een sectie staat. Deze links vervullen ten opzichte van de rest van het document een andere rol.

Mogelijke oplossing

De links zijn al opgemaakt in een lijst (ul-element met daarin li-elementen), dat is precies wat je hier zou verwachten. Verwijder de h3-elementen, en vervang ze door bijvoorbeeld div-elementen. Die hebben van zichzelf geen betekenis, en dat is goed, want de betekenis van deze structuur is al goed gevat doordat het als lijst is opgemaakt.

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

De metadata is niet semantisch opgemaakt

links in bold Titel, recht BGT - Themalaag Bronhoudersgrens, links in bold Identifier, rechts een URL

Probleem

Bij een dataset is metadata beschikbaar. Deze is niet semantsich opgemaakt, waardoor de verbanden moeilijk zijn vast te stellen voor mensen die de pagina niet kunnen en/of gebruik maken van hulpsoftware.

De gebruikte HTML is:

<div>
<span>Titel</span>
<span>BGT - Themalaag Bronhoudersgrens</span>
</div>

Mogelijke oplossing

Dit zou op twee manieren kunnen worden opgemaakt:

Deze keuze is afhankelijk van het soort data dat we hier kunnen verwachten. Als het gaat om steeds opnieuw een titel/header met een beschrijving, lijkt een tabel te grof geschut en is een definitielijst waarschijnlijk het best. Als er af en toe ingewikkeldere datastructuren zijn is een tabel te overwegen.

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

Velden voor persoonsgegevens missen autocomplete attributen

velden voor persoonsgegevens: afdeling, adres, algemeen emailadres, algemeen telefoonnummer, naam, functie, emailadres

Probleem

De velden voor persoonsgegevens die verschijnen bij het aanmaken van een nieuw account hebben geen attributen waarmee wordt duidelijk gemaakt wat voor soort gegevens het zijn.

Ze gebruiken steeds input-elementen met type="text", zonder autocomplete attribuut.

Mogelijke oplossing

Maak gebruik van het autocomplete-attribuut om aan te geven wat het doel van is van invoervelden uit de lijst Inputdoelen voor componenten van de gebruikersinterface.

WCAG criterium:
1.3.5: Identificeer het doel van de input (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
account-maken
Verantwoordelijkheid:
Front-end

Bij foutieve invoer is fout gemarkeerd met alleen kleur

inlogscherm met gebruikersnaam en password velden, beide met rood omlijnd

Probleem

Wanneer het inlogformulier wordt verstuurd, maar er is geen gebruikersnaam of wachtwoord ingevuld, worden de invoervelden rood omlijnd. Voor sommige gebruikers kan dit het lastig maken om het verschil te zien tussen correct en foutief ingevoerd.

Mogelijke oplossing

Voeg een tekst toe wanneer deze velden niet (goed) zijn ingevuld, bijvoorbeeld “Gebruikersnaam niet ingevuld”.

WCAG criterium:
1.4.1: Gebruik van kleur (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
homepage
Verantwoordelijkheid:
Front-end

Focusindicator menu heeft onvoldoende contrast

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

Link wetgeving in wording omlijnd, gele omlijning op witte 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

blauw blok met in wit kop Nieuws en links, één link is gehovered en toont in popup contrastwaarde van 2.97 tot 1

Probleem

Wanneer de gebruiker over links hovert in blokken met een blauwe achtergrond, worden deze links lichtblauw. Deze kleur lichtblauw heeft onvoldoende contrast met de blauwe achtergrond.

Mogelijke oplossing

Gebruik voor de hoverstijl van deze links een kleur die een contrast van minimaal 4.5 : 1 met de achtergrond heeft.

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
actueel
Verantwoordelijkheid:
Front-end

Bij inzoomen gaat tekst door elkaar

Kop links, zoekveld rechts, van kop zijn alleen de letters Dataverz zichtbaar

Probleem

Wanneer een gebruiker bij een zoekresultaat inzoomt, bijvoorbeeld op 120%, kan het zoekveld soms over de naam van het soort data vallen, waardoor deze niet leesbaar is.

Mogelijke oplossing

Zorg dat de pagina responsive is, dus dat de tekst onder elkaar valt wanneer deze niet meer naast elkaar past.

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

Tabs werken niet met toetsenbord

tabs Beschrijving, open, en Downloadbare bestanden, Documentatie, Relaties, Metadata

Probleem

De tabs op de pagina van een dataset kunnen niet worden bediend met het toetsenbord.

Mogelijke oplossing

Dit is de huidige code waarmee een tab wordt gemaakt:

<li data-target="panel-description" class="active">Beschrijving</li>

Gebruik binnen het li-element een button om de tabs zelf op te maken, en koppel het gedrag aan dit button-element. Eventueel kan ook een a-element worden gebruikt, dat in de href linkt naar het id van de sectie waarin de tabinhoud staat, zodat dit zonder CSS een lijstje links naar secties is. Zowel button-elementen als a-elementen werken standaard met het toetsenbord.

Herhaling

Dit probleem is ook geconstateerd in:

WCAG criterium:
2.1.1: Toetsenbord (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
dataset
Verantwoordelijkheid:
Front-end

Tooltips zitten niet in tabvolgorde

velden voor gebruikersnaam en wachtwoord, met naast die labels een icoon van een vraagteken

Probleem

Op de inlogpagina is het voor zowel het Gebruikersnaam-veld als het Wachtwoord-veld mogelijk om middels het vraagteken-icoon meer informatie te verkrijgen over het veld. Met het toetsenbord is dit niet mogelijk.

Mogelijke oplossing

Dit is de huidige code waarmee de knop voor een tooltip wordt gemaakt:

<a 
class="question-explanation__link"
href="#edit-name"
id="edit-name-link"
data-handler="toggle-explanation"
tabindex="-1"
>
Explanation</a>

Verwijder het tabindex attribuut, om te zorgen dat dit element ook met toetsenbord kan worden bediend.

WCAG criterium:
2.1.1: Toetsenbord (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
inloggen
Verantwoordelijkheid:
Front-end

Probleem

Bovenin de pagina staat een link “Direct naar zoeken”, maar die linkt naar een niet-bestaand element.

Mogelijke oplossing

De link gaat naar #search, maar er is geen element met het ID search. Voeg dit ID toe aan het zoekveld, of pas de link aan om te zorgen dat die naar een bestaand ID linkt.

WCAG criterium:
2.4.1: Blokken omzeilen (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Taal van metadata niet in code aangegeven

Information about the provider, Data owner, Provincie Utrecht

Probleem

Wanneer de pagina in het Engels wordt bekeken, is de metadata nog steeds in het Nederlands. Dit wordt bovenin de pagina vermeld met “Warning message - The metadata of this dataset is written in Dutch”, maar in de code is geen indicatie gegeven van het taalverschil.

Mogelijke oplossing

Voeg op Nederlandstalige content in Engelstalige pagina's een lang="nl"-attribuut toe. Dit kan op het element geplaatst worden dat Nederlandstalige content bevat.

Herhaling

Dit probleem is ook geconstateerd bij:

WCAG criterium:
3.1.2: Taal van onderdelen (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
dataset
Verantwoordelijkheid:
Front-end

Zoekveld heeft geen label

zoekveld met titel 'Zoek een van de 19347 beschikbare zoekresultaten

Probleem

In de zoekbox op de homepage staat een invoerveld en een knop “Zoeken”. Het invoerveld heeft geen programmatisch geassocieerd label. Daardoor kunnen gebruikers van hulpsoftware dit veld mogelijk lastig of niet gebruiken.

Mogelijke oplossing

Voeg een label-element toe met daarin tekst die beschrijft wat hier moet worden ingevoerd, bijvoorbeeld “Zoekterm”. Eventueel kan dit element visueel worden verborgen, zodat het alleen zichtbaar is voor gebruikers met hulptechnologieën.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
homepage
Verantwoordelijkheid:
Front-end