Rapport: toegankelijkheid van Almanak

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
30 november 2020

Samenvatting

De website almanak.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 17 uit 20
Bedienbaar 15 uit 17
Begrijpelijk 10 uit 10
Robuust 3 uit 3
Totaal 45 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. Het icoon om een filter te verwijderen mist alternatief (1.1.1)
  2. Foutmelding zoekresultaat is geen lijst, wel als zodanig opgemaakt (1.3.1)
  3. Focusindicator heeft onvoldoende contrast (1.4.11)
  4. “Toon meer” werkt niet met enkel toetsenbord (2.1.1)
  5. Sluitknop modal heeft in sommige browsers geen zichtbare focus (2.4.7)

Het icoon om een filter te verwijderen mist alternatief

Filters classificatie, type met achter elk filter een prullenbak-icoon

Probleem

Naast actieve filters staat een prullenbak-icoon, waarmee het filter kan worden verwijdert. Er is in de broncode geen tekstalternatief aanwezig. Daardoor zal iemand die niet kan zien niet kunnen vaststellen dat hier een filter kan worden verwijderd.

Mogelijke oplossing

Plaats de tekst “Verwijder filter ” als verborgen tekst voor de naam van het filter, zodat de volledige naam van de knop iets wordt als “Verwijder filter Classificatie” of “Verwijder filter Type”.

Herhaling

Dit probleem is ook geconstateerd bij:

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

Foutmelding zoekresultaat is geen lijst, wel als zodanig opgemaakt

screenshot met tekst:  Uw zoekvraag heeft geen resultaten opgeleverd. Suggesties voor meer zoekresultaten: Probeer met andere trefwoorden te zoeken; kijk of uw trefwoord(en) goed gespeld zijn; pas uw zoekopties aan

Probleem

Wanneer een zoekopdracht geen resultaten geeft, wordt de tekst “Uw zoekvraag heeft geen resultaten opgeleverd” weergegeven. Deze tekst is opgemaakt als item in een lijst (<li>), terwijl het geen lijst is. Dit kan verwarrend zijn voor bijvoorbeeld gebruikers van hulptechnologieën als screenreaders, voor wie deze tekst ten onrechte als lijst zal worden aangemerkt.

Mogelijke oplossing

Verwijder de <ul> en <li> die om deze tekst staan. De opsomming (“Probeer met andere trefwo…” enzovoort) zou wel een lijst moeten blijven, maar de twee paragrafen erboven niet.

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

Focusindicator 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:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

“Toon meer” werkt niet met enkel toetsenbord

Probleem

Bij de filters op de resultatenpagina staat als er veel keuzes zijn een knop “Toon meer”. Deze knop is niet bereikbaar of bruikbaar met enkel het toetsenbord.

Oplossing

De huidige code voor de “Toon meer”-knop is:

<li class="expand">
<span><em class="fa fa-plus-square-o"></em> Toon meer</span>
</li>

Er zijn meerdere manieren om dit werkend te maken met toetsenbord, waaronder het toevoegen van click handlers en tabindex aan het span element dat om de knoptekst staat.

De makkelijkste manier is echter het gebruik maken van een <button>-element:

<li class="expand">
<button type="button">
<em class="fa fa-plus-square-o"></em>
Toon meer
</button>
</li>

Voeg vervolgens het uitklapgedrag toe aan de dit nieuwe <button>-element.

Herhaling

Ditzelfde probleem is ook gevonden in:

WCAG criterium:
2.1.1: Toetsenbord (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
resultaten
Verantwoordelijkheid:
Implementatie

Sluitknop modal heeft in sommige browsers geen zichtbare focus

overlay over pagina Amstel Gooi en Vecht, met tekst: Op 23-07-2020 heeft de organisatie voor het laatst aangegeven dat de gegevens correct zijn. De organisatie is gevraagd om de gegevens te controleren. De laatste wijziging is op 23-07-2020 doorgevoerd.

Probleem

Wanneer de sluitknop van de modal overlay focus heeft, is dit in Firefox niet te zien. In Chrome, Edge en Safari is dit wel zichtbaar.

Mogelijke oplossing

Voeg een expliciete focusstijl toe, met :focus in CSS.

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
zoekresultaat
Verantwoordelijkheid:
Front-end

Tips

  1. Op de homepage wordt een headingniveau overgeslagen

Op de homepage wordt een headingniveau overgeslagen

Heading “zie ook” met daaronder een lijst links met de tekst “Organisaties buiten de Nederlandse overheid”

Probleem

Op de homepage is de heading “Zie ook” een h3, terwijl de laatste heading een h1 is. Het tweede niveau (h2) is dus overgeslagen.

Mogelijke oplossing

Gebruik een h2-element in plaats van een h3-element voor de heading “Zie ook”.

Complexiteit:
Laag
Ernst:
Laag
Sample:
homepage
Verantwoordelijkheid:
Front-end