Rapport: toegankelijkheid van Lokale regelgeving

Onderzocht door
Hidde de Vries
In opdracht van
Ask Atticus BV
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
21 november 2021

Samenvatting

De website “Lokale wet- en regelgeving” voldoet grotendeels aan de WCAG 2.1 A + AA succescriteria. Voor 7 van de 50 succescriteria zijn issues gevonden, die in sommige gevallen op meerdere plekken voorkwamen. Deze issues zijn grotendeels eenvoudig en in een enkel geval lastig om te lossen.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 16 uit 20
Bedienbaar 16 uit 17
Begrijpelijk 10 uit 10
Robuust 1 uit 3
Totaal 43 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. Alternatieve tekst logo biedt onvoldoende alternatief (1.1.1)
  2. Genummerde lijst opgemaakt als ongenummerde lijst (1.3.1)
  3. Doel invoervelden niet aangegeven (1.3.5)
  4. Subselectie werkt niet goed bij inzoomen (1.4.10)
  5. Paginatitels zijn niet uniek per pagina (2.4.2)
  6. Kalenderknop bevat ongeldige referentie (4.1.1)
  7. Velden op homepage hebben geen of onjuiste toegankelijke naam (4.1.2)

Alternatieve tekst logo biedt onvoldoende alternatief

logo overheid.nl, met daaronder tekst lokale wet- en regelgeving

Probleem

Het logo van de website heeft een alternatieve tekst, maar die is geen goed alternatief voor de afbeelding. De gebruikte tekst is “logo.svg”.

Mogelijke oplossing

Gebruik tekst die de inhoud van de afbeelding beschrijft, eventueel aangevuld met het doel van de link, de homepage.

Bijvoorbeeld:

homepage; logo overheid.nl

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

Genummerde lijst opgemaakt als ongenummerde lijst

lijst van twee items, beginnende met een nummer als opsommingsteken

Probleem

Bij wetteksten staat soms een opsomming met nummers gebruikt als opsommingsteken. Deze zijn in de HTML opgemaakt als ongeordende lijst, terwijl de volgorde hier wel van belang is.

Mogelijke oplossing

Gebruik in plaats van een ul element een ol element.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag (misschien hoog als extern systeem)
Ernst:
Laag
Sample:
wet
Verantwoordelijkheid:
Front-end ontwikkelaar

Doel invoervelden niet aangegeven

invoerveld naam

Probleem

Op de pagina “Reageren op Lokale wet- en regelgeving” is het doel van sommige invoervelden niet aangegeven. Daardoor is het voor hulptechnologieën niet mogelijk om direct te kunnen uitlezen waar velden voor bedoeld zijn, waardoor ze niet makkelijk een betere gebruikersevaring kunnen bieden met bijvoorbeeld autocomplete.

Mogelijke oplossing

Gebruik autocomplete="name" voor het naamveld en autocomplete="email" voor het emailveld.

WCAG criterium:
1.3.5: Identificeer het doel van de input (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
reageren
Verantwoordelijkheid:
Front-end ontwikkelaar

Subselectie werkt niet goed bij inzoomen

ver ingezoomde modal overlay, alleen tekst 'reset formulier' en knop 'kiezen' zichtbaar, tekst erachter niet

Probleem

Wie 400% ingezoomd is in de browser, kan bij het maken van subselecties de tekst niet meer goed zien, omdat de reset- en kiesknoppen over de content vallen en die zodanig bedekken dat die bijna niet meer zichtbaar is, en daarmee niet meer goed bruikbaar.

Mogelijke oplossing

Maak bij een zekere viewport de ruimte voor de buttons flexibel, zodat gebruikers er naartoe moeten scrollen en deze de content erachter niet langer bedekt.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
zoekresultaat
Verantwoordelijkheid:
Front-end ontwikkelaar

Paginatitels zijn niet uniek per pagina

Probleem

Elke pagina heeft als titel “Lokale wet- en regelgeving”. Dat is onvoldoende beschrijvend en dekt niet te lading van wat er uniek is aan die pagina.

Mogelijke oplossing

Gebruik paginatitels die de pagina beschrijven, liefst van specifiek naar generiek, bijvoorbeeld “Uitgebreid zoeken - Lokale wet- en regelgeving - overheid.nl”, waarbij overheid.nl het meest generiek is, en Uitgebreid zoeken het meest specifiek.

WCAG criterium:
2.4.2: Paginatitel (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end ontwikkelaar

Kalenderknop bevat ongeldige referentie

Probleem

Onder de sectie Geldigheid in het Uitgebreid Zoeken formulier zit een knop om een kalender te openen. In de code verwijst deze naar een ander element ter beschrijving:

<button 
type="button"
class="ui-datepicker-trigger"
aria-describedby="datepickerLabel"
>
Toon kalender</button>

Er is geen element in de pagina met het ID datepickerLabel, dus de aria-describedby relatie die hier beschreven wordt kan niet worden gelegd.

Mogelijke oplossing

Verwijder het aria-describedby attribuut, de knop wordt immers al voldoende beschreven door de tekst binnen de knop.

Herhaling

Dit probleem zit ook op de pagina zoekresultaat.

Op de pagina reageren zit hetzelfde probleem, maar dan met de input voor het emailadres:

<input data-drupal-selector="edit-e-mailadres-mail-2" aria-describedby="edit-e-mailadres--description" class="webform-email-confirm required input input-text" type="email" id="edit-e-mailadres-mail-2" name="e_mailadres[mail_2]" value="" maxlength="254" placeholder="Vul nogmaals uw e-mailadres in." required="required" aria-required="true">

Daar bestaat er geen element met ID edit-e-mailadres--description, en kan dit probleem op dezelfde manier worden opgelost.

WCAG criterium:
4.1.1: Parsen (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end developer

Velden op homepage hebben geen of onjuiste toegankelijke naam

zoek op locatie met veld, zoek op zinsdeel met velden

Probleem

Op de homepage staan velden om op locatie (met cijfers van de postcode) te zoeken of op woord- of zinsdeel.

Het veld voor postcode heeft geen toegankelijke naam, de velden voor zoekwoord “in titel” en “in tekst” hebben beide als naam “Zoekwoord”, waardoor ze niet van elkaar te onderscheiden zijn en niet afdoende beschrijven waar het veld voor is.

Mogelijke oplossing

Zorg dat elk invoerveld is geassocieerd met het juiste label. In de code op de hompage staan de juiste labels wel op de pagina, maar zijn ze niet met de inputs geassocieerd. In het geval van de velden voor “Woord- of zinsdeel” zijn de velden geassocieerd met een label dat visueel is verborgen in plaats van met het label dat visueel in beeld staat en beter beschrijft. Ga dus na wat de labels zijn voor deze velden en zorg dat ze afdoende beschrijven waar het veld voor is.

Gebruik hiervoor eventueel de inspector van Chromium (in Microsoft Edge of Google Chrome); als je daarmee een input element selecteer verschijnt in de popup bij ‘name’ de naam van het veld. Dat is de naam die uiteindelijk ook in hulptechnologieën zoals screenreaders terecht komt, en de naam waarop dit succescriterium wordt beoordeeld.

Herhaling

Dit probleem is ook geconstateerd in:

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end ontwikkelaar