Rapport: toegankelijkheid van Internetconsultatie

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

Samenvatting

De website internetconsultatie.nl voldoet grotendeels aan WCAG 2.1 A + AA succescriteria, met enkele relatief kleine bevindingen die eenvoudig kunnen worden opgelost.

Specifiek noemen we nog graag 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 18 uit 20
Bedienbaar 16 uit 17
Begrijpelijk 10 uit 10
Robuust 2 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. Externe link icoon mist alternatieve tekst (1.1.1)
  2. Focusstijl heeft onvoldoende contrast (1.4.11)
  3. Bestandsuploadknop heeft geen focusstijl (2.4.7)
  4. PDF niet opgeslagen als 'tagged document' (4.1.2)

link naar mijn overheid met externe link icoon erachter

Probleem

Bij links die naar een externe site gaan, wordt dit met een icoon verduidelijkt. De betekenis van dit icoon zit echter niet in de broncode, waardoor mensen met een visuele beperking deze nuance missen.

Oplossing

Voeg verborgen tekst toe met dezelfde betekenis als het icoon, bijvoorbeeld “externe site”.

Herhaling

Dit geldt voor alle externe links op de site.

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

Focusstijl heeft onvoldoende contrast

link naar mijn overheid met gouden kader eromheen

Probleem

Wanneer een element focus heeft, verschijnt een gouden omlijning. Deze kleur heeft onvoldoende contrast wanneer gebruikt op wit (1.75 : 1) of lichtblauw (1.52 : 1). Hiermee voldoet deze focusstijl niet aan de richtlijn.

Oplossing

Kies een kleur die een groter contrast heeft met wit en de blauwe overheidskleuren. Eventueel kunnen dit ook meerdere kleuren zijn, bijvoorbeeld eentje voor op een witte achtergrond en eentje voor op een donkerblauwe achtergrond.

Herhaling

Dit geldt voor alle interactieve elementen op internetconsultatie.nl, met uitzondering van formulierelementen, die een lichtblauwe omlijning krijgen.

WCAG criterium:
1.4.11: Contrast van niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Componentenbibliotheek

Bestandsuploadknop heeft geen focusstijl

sectie reageren op consultatie, onderin knop sleep een bestand om te upload of selecteer een bestand

Probleem

Op de pagina om te reageren op een consultatie is het mogelijk een bijlage te uploaden. Deze kan op de worden gesleept, of worden toegevoegd door te klikken op ‘Selecteer een bestand’. Dit werkt ook met het toetsenbord, wanneer deze knop focus heeft, maar dat is niet goed zichtbaar, omdat er geen focusstijl is gedefinieerd voor deze knop.

Oplossing

Voeg een zichtbare focusstijl toe aan het veld, wanneer de input om te uploaden gefocused is. De input zelf is onzichtbaar gemaakt, dus het is waarschijnlijk niet mogelijk om dit in CSS met input:focus/.box__file:focus te doen. Het zou eventueel kunnen worden gedaan door de :focus-within pseudo-selector in CSS toe te passen om het omliggende veld (.input-dragbox):

.input-dragbox:focus-within {
outline: 2px solid;
}

Let op, :focus-within werkt niet in Internet Explorer 11.

Een andere, iets bewerkelijkere, optie is om het label na de input te plaatsen, en dan de stijl toe te passen middels een ::after pseudo-element toe te passen op input:focus + label:

.input-dragbox {
position: relative;
}
.box__file:focus + label::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
outline: 2px solid;
}
WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Componentenbibliotheek

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:
pdf1
Verantwoordelijkheid:
Implementatie