Rapport: toegankelijkheid van PUC (substijlen)

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-29 februari 2021

Samenvatting

De substijlen van PUC voldoen grotendeels aan de WCAG 2.1 A + AA succescriteria, met uitzondering van een aantal issues met betrekking tot kleurcontrast en meertaligheid.

Er is onderzoek gedaan naar toegankelijkheidsproblemen die specifiek zijn voor op de in de scope genoemde varianten op puc.overheid.nl. Problemen die op elk van de sites voorkomen zijn opgenomen in het generieke onderzoek van puc.overheid.nl.

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. Logo's hebben onvoldoende alternatieve tekst (1.1.1)
  2. Kleurcontrast in link “Thema's” onvoldoende (Natuurvergunningen) (1.4.3)
  3. Kleurcontrast in link “Alle hoofdtaken” onvoldoende (NSI) (1.4.3)
  4. Kleurcontrast in links menu onvoldoende (NZA) (1.4.3)
  5. Kleurcontrast in links menu onvoldoende (SVB Beleidsregels) (1.4.3)
  6. Cover MRT is een afbeelding van tekst (1.4.5)
  7. Engelstalige content is niet als Engelstalig gemarkeerd (MRT) (3.1.2)
  8. Engelstalige content is niet als Engelstalig gemarkeerd (NSI) (3.1.2)
  9. Engelstalige content is niet als Engelstalig gemarkeerd (Rijkswaterstaat) (3.1.2)

Logo's hebben onvoldoende alternatieve tekst

logo NZA

Probleem

Op de subsites waar het logo 1 afbeelding is, wordt als alternatieve tekst “logo” gebruikt. Daardoor mist de inhoud van het logo, die vaak ook tekst bevat, en is niet duidelijk wiens logo is afgebeeld.

Dit probleems is geconstateerd in de subsites van:

Mogelijke oplossing

Breid de alternatieve tekst uit met in ieder geval de tekst uit het logo of de naam van de organisatie.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
Alle pagina's
Verantwoordelijkheid:
Implementatie

tabje Thema's met witte tekst op lichtblauwe achtergrond

link met tekst Maak PDF, lichtgrijs op lichtgrijs

Probleem

De link “Thema's” in het hoofdmenu is bij mouseover witte tekst op een lichtblauwe achtergrond. De gebruikte kleuren hebben een contrast van 2.97 : 1. Dit zou minimaal 4.5 : 1 moeten zijn.

Herhaling

Dit probleem zit ook in:

Mogelijke oplossing

Zorg voor een donkerdere achtergrondkleur of een donkerdere voorgrondkleur.

Meer informatie

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
natuurvergunningen
Verantwoordelijkheid:
Implementatie

oranje knop met witte tekst 'alle hoofdtaken'

tabje Home dat is geselecteerd, zwarte tekst op lichtblauwe achtergrond

link Inspectie Leefomgeving en Transport, lichtblauw op grijs

link Koopvaardij / Merchant shipping

icoon extern met getal

Probleem

De link “Alle hoofdtaken” heeft witte tekst op een oranje achtergrond. De gebruikte kleuren hebben een contrast van 3.22 : 1. Dit zou minimaal 4.5 : 1 moeten zijn.

Mogelijke oplossing

Zorg voor een donkerdere achtergrondkleur of een donkerdere voorgrondkleur.

Herhaling

Dit probleem zit ook in:

Meer informatie

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
nsi-home
Verantwoordelijkheid:
Implementatie

tabje Home met witte tekst op zalmkleurige achtergrond

blauwe links op zalmkleurige achtergrond

Probleem

De actieve links in het hoofdmenu zijn wit op een zalmkleurige achtergrond. De gebruikte kleuren hebben een contrast van 1.98 : 1. Dit zou minimaal 4.5 : 1 moeten zijn.

Herhaling

Dit probleem zit ook in:

Mogelijke oplossing

Zorg voor een donkerdere achtergrondkleur of een donkerdere voorgrondkleur.

Meer informatie

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
nza
Verantwoordelijkheid:
Implementatie

tabje Thema's met witte tekst op lichtblauwe achtergrond

tabje Downloads met lichtgroene tekst op lichtgroene achtergrond

Probleem

De niet-actieve links in het hoofdmenu zijn wit op een lichtgroene achtergrond. De gebruikte kleuren hebben een contrast van 1.80 : 1. Dit zou minimaal 4.5 : 1 moeten zijn.

Herhaling

Dit probleem zit ook in:

Mogelijke oplossing

Zorg voor een donkerdere achtergrondkleur of een donkerdere voorgrondkleur.

Meer informatie

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
svb-beleidsregels
Verantwoordelijkheid:
Implementatie

Cover MRT is een afbeelding van tekst

cover van Militair Rechtelijk Tijdschrfit

Probleem

In de eerste kolom staat een link naar de laatste editie van het Militair Rechtelijk Tijdschrift. Naast sucesscriterium 1.4.5, voldoet deze link ook niet aan de volgende criteria:

Mogelijke oplossing

Gebruik CSS om deze link op te maken, met tekst in plaats van de afbeelding.

WCAG criterium:
1.4.5: Afbeeldingen van tekst (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
mrt
Verantwoordelijkheid:
Implementatie

Engelstalige content is niet als Engelstalig gemarkeerd (MRT)

screenshot van pagina English in MRT

Probleem

Op de pagina “English” is een deel van de tekst in het Engels, maar dat is niet als zodanig gemarkeerd. Op het html-element is met lang="nl-NL" aangegeven dat de pagina in het Nederlands is.

Mogelijke oplossing

Voeg op elk element dat Engelstalige content bevat lang="en" toe.

WCAG criterium:
3.1.2: Taal van onderdelen (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
mrt
Verantwoordelijkheid:
Implementatie

Engelstalige content is niet als Engelstalig gemarkeerd (NSI)

heading welcome met introductietekst in het Engels

Probleem

Op de pagina is de meeste tekst in het Engels, maar dat is niet als zodanig gemarkeerd. Op het html-element is met lang="nl-NL" aangegeven dat de pagina in het Nederlands is.

Mogelijke oplossing

Voeg op elk element dat Engelstalige content bevat lang="en" toe, of keer het om: markeer het html-element met lang="en" en voeg op elk element dat Nederlandstalige content bevat lang="nl" toe. Beide manieren zijn afdoende, het is gebruikelijk en het makkelijkst om de meest voorkomende taal op het html-element te markeren.

WCAG criterium:
3.1.2: Taal van onderdelen (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
nsi-home
Verantwoordelijkheid:
Implementatie

Engelstalige content is niet als Engelstalig gemarkeerd (Rijkswaterstaat)

lijst met titels van artikelen met pijlen bij artikelen die in het Engels zijn

Probleem

Op de pagina staat een lijst met artikelen waarvan sommige in het Engels, maar dat is niet als zodanig gemarkeerd. Op het html-element is met lang="nl-NL" aangegeven dat de pagina in het Nederlands is.

Mogelijke oplossing

Voeg op elk element dat Engelstalige content bevat lang="en" toe.

WCAG criterium:
3.1.2: Taal van onderdelen (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
rijkswaterstaat
Verantwoordelijkheid:
Implementatie