Rapport: toegankelijkheid van Verdragenbank

Onderzocht door
Peter van Grieken
In opdracht van
KOOP
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
1 december 2020

Samenvatting

De website verdragenbank.overheid.nl voldoet aan 38 van de 50 succescriteria. Er zijn een hoop bevindingen toe te wijzen aan het onvolledig implementeren van de componentenbibliotheek, en met name de benodigde attributen op elementen.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 15 uit 20
Bedienbaar 14 uit 17
Begrijpelijk 8 uit 10
Robuust 1 uit 3
Totaal 38 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 heeft onjuist alt-attribuut (1.1.1)
  2. Icoon externe link heeft geen alternatieve tekst (1.1.1)
  3. Alternatieve tekst tooltip (1.1.1)
  4. Lege tabelkop (1.3.1)
  5. De skiplinks zijn op kleine scherm niet leesbaar (1.4.10)
  6. Focusindicator menu heeft onvoldoende contrast (1.4.11)
  7. Tooltip kan niet gesloten worden zonder muis te bewegen (1.4.13)
  8. Skiplinks verwijzen naar niet bestaand elementen (2.4.1)
  9. Doel van links in paginering niet duidelijk (2.4.4)
  10. Button om side te openen op mobiel mist focusindicator (2.4.7)
  11. Sluitknop modal mist focusindicator (2.4.7)
  12. lang-attribuut onjuist op Engelse website (3.1.1)
  13. Nederlandstalige content op Engels website (3.1.2)
  14. Ongeldige markup in <h2> (4.1.1)
  15. Invoervelden bij zoekfilters missen labels (4.1.2)

Logo heeft onjuist alt-attribuut

Het logo van Overheid.nl

Probleem

Het alt-attribuut van het Overheid.nl logo heeft de waarde “logo.svg”, dit is geen geldige waarde.

Mogelijke oplossing

Geef het alt-attribuut de waarde “Logo Overheid.nl, Ga naar homepage”.

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

link naar externe website 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.

Dit probleem treedt ook op bij de links naar Rijksoverheid.nl, Ondernemersplein.nl en WerkenBijDeOverheid.nl in de footer.

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:
Verantwoordelijkheid:
Front-end

Alternatieve tekst tooltip

Screenshot van de tooltip trigger naast de tekst “Type verdrag”

Probleem

De alternatieve tekst voor de tooltip trigger (vraagteken-icoon), is “Tooltip”. Dit is geen beschrijvende tekst voor deze knop.

Mogelijke oplossing

Verander de alternatieve (onzichtbare) tekst naar “Open uitleg”

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

Lege tabelkop

Een deel van een tabel, de eerste cel van de tabelkop is leeg

Probleem

In de tabel voor Koninkrijk der Nederlanden staat een lege tabelkop. Het eerste <th> element in de tabel is leeg.

Mogelijke oplossing

Vul de cel met de juiste kolomkop, bijvoorbeeld “Land”.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
haagseconferentie
Verantwoordelijkheid:
Implementatie

De skiplink op een klein scherm. Alle letters staan onder elkaar en er vallen andere elementen overheen.

Probleem

Op kleine schermen (320px breed), zijn de skiplinks erg slecht zichtbaar. Ze lijnen uit aan de rechterkant van het scherm en de afzonderlijke letters staan onder elkaar.

Oplossing

Pas de css van de skiplinks aan voor kleine schermen: left: 0; en z-index: 9;.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Laag
Ernst:
Groot
Sample:
alle
Verantwoordelijkheid:
Implementatie

Focusindicator menu heeft onvoldoende contrast

deel van navigatie met Uitgebreid zoeken omlijnd, gele omlijning op blauwe 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

Tooltip kan niet gesloten worden zonder muis te bewegen

Een tooltip met daarin de tekst partijgegevens.

Probleem

Wanneer je met de muis over het tooltip icoon gaat, dan verschijnt er een tooltip. Deze kan niet gesloten worden met zonder de muis weer van het icoon af te verplaatsen.

Mogelijke oplossing

Zorg dat de tooltip gesloten kan worden door op Esc te drukken.

WCAG criterium:
1.4.13: Content bij hover of focus (externe link)
Complexiteit:
Laag
Ernst:
Groot
Sample:
alle
Verantwoordelijkheid:
Implementatie

Probleem

Er zijn twee skiplinks aanwezig, ze verwijzen naar de id‘s #content" en #search , beide elementen komt niet voor op de pagina‘s.

Oplossing

De skiplinks laten verwijzen naar bestaande id‘s, zoals die van het zoekformulier en de hoofdcontent.

WCAG criterium:
2.4.1: Blokken omzeilen (externe link)
Complexiteit:
Laag
Ernst:
Groot
Sample:
alle
Verantwoordelijkheid:
Implementatie

Een paginering met 2 pagina‘s, de eerste is actief

Probleem

De linktekst van de afzonderlijke links in de paginering is ‘1’, ‘2’, etc. Zonder context is niet duidelijk waar deze links naar toe gaan.

Mogelijke oplossing

Voeg een koptekst met de tekst “Ga naar pagina” toe. Deze tekst mag verborgen zijn.

WCAG criterium:
2.4.4: Linkdoel (in context) (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie

Button om side te openen op mobiel mist focusindicator

Een knop om de sidebar te opene.

Probleem

Op kleine schermen verschijnt een sticky knop om de sidebar te openen. Deze knop heeft geen focusincator.

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Laag
Ernst:
Groot
Sample:
alle
Verantwoordelijkheid:
Implementatie

Sluitknop modal mist focusindicator

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

Probleem

De sluitknop in modal vensters mist een focusindicator.

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

lang-attribuut onjuist op Engelse website

Probleem

Op de Engelstalige website staat een verkeerde lang-attribuut op het <html> element. Het attribuut heeft de waarde "nl", terwijl de content Engels is.

Oplossing

Pas de waarde aan naar "en".

WCAG criterium:
3.1.1: Taal van de pagina (externe link)
Complexiteit:
Laag
Ernst:
Groot
Sample:
engels
Verantwoordelijkheid:
Implementatie

Nederlandstalige content op Engels website

Nederlandstalige skiplink op verder Engelstalige pagina

Probleem

Op de Engelstalige website staan Skip Links met Nederlandstalige teksten. De linkteksten zijn “Direct naar content” en “Direct zoeken”.

Oplossing

Pas de tekst van deze links aan.

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

Ongeldige markup in <h2>

Probleem

In de resultatenlijst wordt ongeldige HTML markup gebruikt. Iedere <h2> kop bevat een dcterms:title-element met metadate. Het gebruik van dit element is niet toegestaan.

WCAG criterium:
4.1.1: Parsen (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
haagseconferentie
Verantwoordelijkheid:
Implementatie

Invoervelden bij zoekfilters missen labels

Drie inputvelden, allen zonder label

Probleem

De invoervelden bij de filters missen de <label>s. Er zijn wel zichtbare labels geplaatst, maar deze missen het for-attribuut om te verwijzen naar het bijbehorende <input>-veld. Daardoor zijn deze velden niet gelabeld.

Bij andere velden (zoals “Plaats”) is een zichtbaar <label> zonder for-attribuut, en een onzichtbaar label met dezelfde tekst en het juiste for-attribuut.

Mogelijke oplossing

Voeg for attributen toe aan de <label> elementen. Waar al een zichtbaar <label> aanwezig is, verwijder het onzichtbare <label>.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
uitgebreidzoeken
Verantwoordelijkheid:
Implementatie