Rapport: toegankelijkheid van (RPS-BMS) Officiële Bekendmakingen

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
19 oktober 2020

Samenvatting

De website officielebekendmakingen.nl voldoet grotendeels aan WCAG 2.1 A + AA succescriteria, met enkele grotere en een aantal kleine bevindingen die eenvoudig kunnen worden opgelost. Een groot probleem bij deze website zijn met name de pdf-documenten. Deze zijn nu afgekeurd op één succescriterium, maar bevatten meerdere problemen. Die zijn echter niet goed testbaar zolang het bovenliggende probleem niet is opgelost. Als het op termijn tagged documents worden, is het daarna raadzaam een hertest te doen met uitsluitend betrekking op de pdf documenten.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 15 uit 20
Bedienbaar 15 uit 17
Begrijpelijk 10 uit 10
Robuust 1 uit 3
Totaal 41 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. Categorie van banner niet in alternatieve tekst (1.1.1)
  2. Logo Tweede Kamer heeft onjuiste alternatieve tekst (1.1.1)
  3. Knop “Toon filters” niet opgemaakt als knop (1.3.1)
  4. Links soms alleen met kleur onderscheiden (1.4.1)
  5. Pagina heeft horizontale en verticale scrollbars (in Firefox) (1.4.10)
  6. Link “Toon alle publicaties” heeft onvoldoende kleurcontrast (1.4.3)
  7. “Toon meer” werkt niet met enkel toetsenbord (2.1.1)
  8. Bij openen filters is focusvolgorde niet logisch (2.4.3)
  9. Links naar stukken hebben hetzelfde ID (4.1.1)
  10. Link met hulp toegankelijkheid heeft ongeldige beschrijving (4.1.2)
  11. PDF niet opgeslagen als 'tagged document' (4.1.2)

Categorie van banner niet in alternatieve tekst

Deze publicatie is niet beschikbaar als web-versie, bekijk de authentieke versie (PDF)

Probleem

In de banner die soms bovenaan content verschijnt, wordt met een info-icoon aangegeven dat dit gaat om een banner in de categorie “informatie”. Die categorisering is niet beschikbaar als alternatieve tekst. Daardoor zal iemand die het icoon niet kan zien, niet weten in welke categorie deze banner valt.

Oplossing

Voeg als alternatief voor het icoon een visueel verborgen tekst toe die de categorisering duidelijk maakt, bijvoorbeeld “Let op” (of iets anders dat de categorie van deze banners omschrijft). Dit kan zo worden toegevoegd dat het alleen zichtbaar is voor gebruikers van hulptechnologieën, bijvoorbeeld met de sr-only class die in bootstrap.css bestaat.

Huidige code:

<div class="alert alert-info mt-10" role="alert">
<em class="fa fa-info-circle"></em> Deze publicatie is niet beschikbaar als web-versie, bekijk de authentieke versie (PDF)
</div>

Verbeterde versie, met verborgen tekst:

<div class="alert alert-info mt-10" role="alert">
<em class="fa fa-info-circle"></em>
<span class="sr-only">Let op: </span>
Deze publicatie is niet beschikbaar als web-versie, bekijk de authentieke versie (PDF)
</div>
WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
resultaat
Verantwoordelijkheid:
Implementatie

Logo Tweede Kamer heeft onjuiste alternatieve tekst

beeldmerk tweede kamer met kroont bovenin en tekst tweede kamer der staten generaal in ovaal

Probleem

Het logo van de Tweede Kamer, dat wordt weergeven bij documenten uit die bron, heeft als alternatieve tekst: Officielebekendmakingen.

Oplossing

Zorg voor een tekstalternatief dat het logo zou kunnen vervangen, bijvoorbeeld “Logo Tweede Kamer der Statengeneraal”.

Herhaling

Dit probleem komt ook voor bij het logo van andere instanties, bij elke webversie van een document.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
documentweb
Verantwoordelijkheid:
Redactie

Knop “Toon filters” niet opgemaakt als knop

knop toon filters

Probleem

Voor het benaderen van filters op kleinere schermen is er een knop “Toon filters”. Deze knop is opgemaakt als link (<a>-element).

<a 
href="#"
id="showSidebar"
class="col-xs-12 col-sm-3 visible-xs visible-sm btn btn-orange">

<em class="fa fa-list"></em>
<span>Toon filters</span>
</a>

Dit is semantisch gezien geen link, omdat de gebruiker er een actie mee uitvoert, het openen van filters, en niet naar een andere locatie gaat. De code matcht niet met wat het visueel voorstelt, noch met wat het technisch gezien doet.

Oplossing

Gebruik voor de knop een <button>-element.

Herhaling

Ditzelfde probleem is ook geconstateerd bij een aantal andere buttons, waaronder:

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

zwarte tekst uitgebreid zoeken in parlementaire documenten of officiële documenten, waarbij parlementaire documenten en officiële bekendmakingen donkerblauw zijn

Probleem

De links “parlementaire documenten” en “officiële bekendmakingen” worden alleen onderscheiden als links doordat ze een andere kleur hebben. Daardoor zijn ze voor sommige mensen niet te onderscheiden.

Oplossing

Mogelijke oplossingen:

Herhaling

Ditzelfde probleem is ook geconstateerd op een aantal andere plekken, zoals:

WCAG criterium:
1.4.1: Gebruik van kleur (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
homepage
Verantwoordelijkheid:
Ontwerp

Pagina heeft horizontale en verticale scrollbars (in Firefox)

Probleem

Op alle pagina's zijn zowel horizontaal als verticaal scrollbars. Dit maakt de inhoud moeilijker leesbaar voor lezers met een visuele beperking.

Dit probleem is specifiek geconstateerd in Firefox 83 (Mac).

Oplossing

Ga na of er elementen in de pagina staan die groter zijn dan de viewport en ervoor zorgen dat er horizontale scrollbars zijn.

Zorg dat er alleen verticaal een scrollbar is, en tekst die horizontaal niet past op de volgende regel valt.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Hoog
Ernst:
Laag
Sample:
homepage
Verantwoordelijkheid:
Implementatie

op witte achtergrond, een donkerblauwe tekst Kamerdossier 34682, een lichtgrijze tekst toon alle publicaties in het hoofddossier

Probleem

De lichtgrijze tekst “Toon alle publicaties in het hoofddossier” heeft onvoldoende contrast met de achtergrond (2.85 : 1).

Oplossing

Zorg dat de tekst een contrast van minimaal 4.5 : 1 heeft.

Gebruik hiervoor bijvoorbeeld de tool Contrast Ratio.

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
documentweb
Verantwoordelijkheid:
Ontwerp

“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="link link--down">Toon meer (20)</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="link link--down">
<button type="button">
Toon meer (20)
</button>
</li>

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

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

Bij openen filters is focusvolgorde niet logisch

filters met knop Verberg filters

Probleem

Wanneer iemand op een smal scherm de knop “Toon filters” gebruikt, blijft de focus van de pagina op die knop, terwijl er nieuwe content zichtbaar wordt gemaakt. Dit maakt het voor sommige gebruikers lastig om de filters te gebruiken.

Oplossing

Verplaats de focus naar het element met de filters of de knop “Verberg filters”, zodat de gebruiker na het openen gelijk gebruik kan maken van de filters.

WCAG criterium:
2.4.3: Focus volgorde (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
resultaten
Verantwoordelijkheid:
Ontwerp

Probleem

Op een resultaatpagina hebben links steeds hetzelfde id-attribuut:

<li>
<div class="result-item">
<a
id="publicatieHyperLink"
class="result-item-link"
href="/kst-34682-1.html">

Kamerstuk: Brief
</a>
</div>
</li>

Het id is bij al deze links publicatieHyperlink.

Oplossing

Gebruik unieke waarden voor het id op deze link, elk id mag slechts één keer voorkomen per pagina.

WCAG criterium:
4.1.1: Parsen (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
resultaat
Verantwoordelijkheid:
Implementatie

Probleem

Bovenin elke pagina is een link naar meer informatie over toegankelijkheid.

Deze link is als volgt opgemaakt:

<a 
href="https://www.overheid.nl/toegankelijkheid"
aria-label="LocalHelp"
aria-describedby="Toegankelijkheid">

Help: toegankelijkheid
</a>

Hierin wordt met aria-label de tekst (naam) van de link overschreven met “LocalHelp”.

Voor de beschrijving van de link wordt verwezen naar een HTML-element met id “Toegankelijkheid”, maar dit bestaat niet.

Door deze twee attributen heeft de link nu geen duidelijke beschrijving.

Oplossing

Verwijder beide ARIA-attributen. De tekst die in de link staat lijkt goed te omschrijven wat men kan verwachten van deze link. Zonder de ARIA-attributen wordt de naam van deze link “Help: toegankelijkheid”.

Lees meer

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

PDF niet opgeslagen als 'tagged document'

tagged document

Probleem

De PDF-documenten zijn niet correct opgeslagen als een tagged / structured document. Hierdoor heeft het document geen structuur die beschikbaar is voor ondersteunde technologie.

Oplossing

Sla PDF-documenten op, of genereer ze, als tagged-document.

Herhaling

Dit geldt als eis voor alle PDF-documenten zonder toegankelijk alternatief.

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

Tips

  1. Opmaak meta-informatie is tabel
  2. Zoekformulier heeft role “form”
  3. Document heeft twee koppen van niveau 1

Opmaak meta-informatie is tabel

datum publicatie, jaargang en nummer, organisatie

Probleem

Meta-informatie zoals “Datum informatie” is opgemaakt als tabel met tabelheaders. Hoewel dit een semantisch correcte opmaak is voor deze data, is het mogelijk complexer dan nodig.

Oplossing

Het zou kunnen worden overwogen deze informatie op te maken als “description list”:

<dl>
<dt>Datum publicatie</dt>
<dd>19-10-2020</dd>
<dt>Jaargang en nummer</dt>
<dd>Gemeenteblad 2020, 271767</dd>
</dl>
Complexiteit:
Medium
Ernst:
Medium
Sample:
resultaten
Verantwoordelijkheid:
Implementatie

Zoekformulier heeft role “form”

Probleem

Het zoekformulier heeft een role-attribuut met de waarde form. Dit is niet nodig, omdat gebruik van het form-element zelf al hetzelfde doel bereikt.

Oplossing

Verwijder de form-role.

Complexiteit:
Laag
Ernst:
Laag
Sample:
resultaten
Verantwoordelijkheid:
Implementatie

Document heeft twee koppen van niveau 1

Probleem

In de webversie van documenten wordt voor zowel het documenttype (bijvoorbeeld “Kamerstuk”) als de belangrijkste kop in de inhoud van het daadwerkelijke document een <h1>-element gebruikt.

Oplossing

Gebruik het <h1>-element eenmaal per pagina.

Complexiteit:
Laag
Ernst:
Laag
Sample:
documentweb
Verantwoordelijkheid:
Implementatie