Rapport in PDF

Deelonderzoek content almere.webshop.parkeer.nl

Inleiding

Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?

Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.

Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.

De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).

Over deze evaluatie

Rapport auteur
Janita Top
Evaluatie opdrachtgever
Gemeente Almere
Evaluatiedatum
18 september 2024

Managementsamenvatting

Dit rapport bevat het deelonderzoek content. In combinatie met een deelonderzoek techniek vormt dit een volledig toegankelijkheidsonderzoek van de website. Uit dit onderzoek blijkt dat wordt voldaan aan 17 van de 23 content-specifieke criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat invoervelden duidelijke labels hebben en dat er een consistente identificatie aanwezig is.

Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:

  • Onjuiste of missende alt-teksten bij afbeeldingen
  • Onjuist opgemaakte koppen
  • Te laag contrast van tekst

Scope van de evaluatie

Website naam
almere.webshop.parkeer.nl
Scope van de website
Alle pagina's op almere.webshop.parkeer.nl.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Dit rapport bevat het deelonderzoek content. In combinatie met een deelonderzoek techniek vormt dit een volledig toegankelijkheidsonderzoek van de website.

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 23 van 55 WCAG 2.2 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Startpagina

Het logo van de gemeente Almere heeft als alt-tekst ‘banner’. Dit is geen goede beschrijving van wat er op de afbeelding te zien is. Geef de afbeelding een goede alt-tekst, zoals ‘Logo Gemeente Almere’

Inloggen

Het logo van DigiD heeft geen alt-attribuut. Screenreader gebruikers krijgen nu de bestandsnaam te horen. Voeg een alt-attribuut toe met een alt-tekst als ‘Logo DigiD’.

1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample

Uitkomst: Niet van toepassing

1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

QR-code fietsenstalling Almere Stad aanvragen (proces)

Uitkomst: Voldoende

PDF factuur

Uitkomst: Onvoldoende

Postvak in

Uitkomst: Onvoldoende

QR-code fietsenstalling Almere Stad aanvragen (proces)

Opmerking: de tekst van de invoer van de stalling wordt afgesneden. Zie screenshot 4.

PDF factuur

De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is. NB: de PDF-factuur bevat extra informatie die niet in de webversie beschikbaar is, zoals hoe het bedrag handmatig over te maken. Daarom kan dit niet gezien worden als extra (ontoegankelijk) print-alternatief.

Postvak in

De berichten staan in tabellen met alleen een table head. Alle teksten die initieel zichtbaar zijn, staan in th-elementen. Dit is geen logische opmaak van tabellen. Als headers kun je toevoegen ‘Datum’ en ‘Onderwerp’. De knop om te openen heeft nu geen naam (zie 4.1.2).

Binnen de berichten zijn kopjes die niet als kop zijn opgemaakt, maar met het strong-element. Dit element is bedoeld om één of enkele woorden uit te lichten in een paragraaf, niet om kopjes aan te geven. Screenreadergebruikers die navigeren via koppen missen deze kopjes nu. Maak hier kopelementen van zoals h2.

1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Niet getoetst

1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Voldoende

1.3.4: Weergavestand
Hele sample

Uitkomst: Niet getoetst

1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Niet getoetst

1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur
Hele sample

Uitkomst: Voldoende

1.4.2: Geluidsbediening
Hele sample

Uitkomst: Niet getoetst

1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Onvoldoende

Account aanmaken

Uitkomst: Onvoldoende

Mantelzorgvergunning aanvragen (proces)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

De links in de header zoals ‘Nieuwe aanvraag’ op hover en op focus (groen/wit, 2.8:1).

Account aanmaken

De asterisk die aangeeft dat een veld verplicht is (groen/grijs, 2.4:1). Zie screenshot 1.

Mantelzorgvergunning aanvragen (proces)
  • De knop ‘Product aanvragen’ op hover en op focus (groen/grijs, 2.4:1). Zie screenshot 2. Dit komt op veel knoppen voor.
  • De tekst van het kenteken (groen/geel, 1.5:1). Zie screenshot 6.
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Niet getoetst

1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Voldoende

1.4.10: Reflow
Hele sample

Uitkomst: Niet getoetst

1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Account

Uitkomst: Onvoldoende

Mantelzorgvergunning aanvragen (proces)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

Account

De focusrand om de tabs (lichtblauw, 1,4:1). Zie screenshot 5.

Mantelzorgvergunning aanvragen (proces)

De knop om het kenteken te verwijderen op focus en hover (groen/wit, 2.9:1 op gele achtergrond). Zie screenshot 3.

1.4.12: Tekstafstand
Hele sample

Uitkomst: Niet getoetst

1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Niet getoetst

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Niet getoetst

Facturen

Uitkomst: Niet getoetst

Facturen

Technische bevinding: de factuurregels in de tabel werken met de muis als link om de factuur te openen en te kunnen betalen. Met het toetsenbord werkt dit niet.

2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Niet getoetst

2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Niet getoetst

2.2 Genoeg tijd
Success Criterium Uitkomst Bevindingen
2.2.1: Timing aanpasbaar
Hele sample

Uitkomst: Niet getoetst

2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet getoetst

2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample

Uitkomst: Voldoende

2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen
Hele sample

Uitkomst: Niet getoetst

2.4.2: Paginatitel
Hele sample

Uitkomst: Onvoldoende

PDF factuur

Uitkomst: Onvoldoende

PDF factuur

Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.

2.4.3: Focus volgorde
Hele sample

Uitkomst: Niet getoetst

2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Voldoende

2.4.5: Meerdere manieren
Hele sample

Uitkomst: Niet getoetst

2.4.6: Koppen en labels
Hele sample

Uitkomst: Voldoende

2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Niet getoetst

Mantelzorgvergunning aanvragen (proces)

Uitkomst: Niet getoetst

Mantelzorgvergunning aanvragen (proces)

Technische bevinding: de focus op de knop ‘bladeren’ is niet zichtbaar.

2.4.11: Focus Not Obscured (Minimum)
Hele sample

Uitkomst: Niet getoetst

2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren
Hele sample

Uitkomst: Niet getoetst

2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Niet getoetst

2.5.3: Label in naam
Hele sample

Uitkomst: Voldoende

2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet getoetst

2.5.7: Dragging Movements
Hele sample

Uitkomst: Niet getoetst

2.5.8: Target Size (Minimum)
Hele sample

Uitkomst: Niet getoetst

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Onvoldoende

PDF factuur

Uitkomst: Onvoldoende

PDF factuur

Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.

3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Niet van toepassing

3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Niet getoetst

3.2.2: Bij input
Hele sample

Uitkomst: Niet getoetst

3.2.3: Consistente navigatie
Hele sample

Uitkomst: Niet getoetst

3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende

3.2.6: Consistent Help
Hele sample

Uitkomst: Niet getoetst

3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Voldoende

3.3.2: Labels of instructies
Hele sample

Uitkomst: Voldoende

3.3.3: Foutsuggestie
Hele sample

Uitkomst: Voldoende

3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet getoetst

3.3.7: Redundant Entry
Hele sample

Uitkomst: Niet getoetst

3.3.8: Accessible Authentication (Minimum)
Hele sample

Uitkomst: Niet getoetst

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Niet getoetst

Postvak in

Uitkomst: Niet getoetst

Postvak in

Technische bevinding: er zijn knoppen zonder tekst, waar alleen een plus of min icoon in staat. Deze buttons hebben hierdoor geen naam voor hulpsoftware.

4.1.3: Statusberichten
Hele sample

Uitkomst: Niet getoetst

Sample met getoetste webpagina's

  1. Startpagina - https://almere.webshop.parkeer.nl/#/
  2. Account aanmaken - https://almere.webshop.parkeer.nl/#/login/create-account
  3. Inloggen - https://almere.webshop.parkeer.nl/#/login
  4. Account - https://almere.webshop.parkeer.nl/#/account
  5. Dashboard Bewoners (Nieuwe aanvraag > Bewoners) - https://almere.webshop.parkeer.nl/#/products/de17f637-7f54-4cdf-f9b6-08daca84a17a
  6. Mantelzorgvergunning aanvragen (proces) - https://almere.webshop.parkeer.nl/#/products/de17f637-7f54-4cdf-f9b6-08daca84a17a/product/028cc838-2e6a-48e1-cfc9-08daca84a17a
  7. QR-code fietsenstalling Almere Stad aanvragen (proces) - https://almere.webshop.parkeer.nl/#/products/337bf9f0-ddd3-4bcf-aec5-08daca84a18d/product/ae6695b6-90bf-4da6-f747-08daca84a17a
  8. Florida abonnement 7 dagen aanvragen (proces) - https://almere.webshop.parkeer.nl/#/products/337bf9f0-ddd3-4bcf-aec5-08daca84a18d/product/1a36b952-c254-4291-9d1a-08daca84a17a
  9. Facturen - https://almere.webshop.parkeer.nl/#/account/invoices/overview
  10. PDF factuur - Factuur_029202418344.pdf (via Postvak in)
  11. Postvak in - https://almere.webshop.parkeer.nl/#/account/communication

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG,PDF,DOM

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: Chrome 128 en Safari 17.6 met Voiceover op Mac 13.6.9

Screenshots

  1. velden met *
    Figuur 1: de aterisk heeft te laag contrast
  2. knop aanvragen
    Figuur 2: de knop om aan te vragen heeft te laag contrast
  3. kenteken veld
    Figuur 3: de knop om het kenteken te verwijderen heeft te laag contrast
  4. veld afgebroken
    Figuur 4: de tekst van de locatie wordt afgebroken
  5. tab in focus
    Figuur 5: de focusrand om de tab heeft te laag contrast
  6. kenteken veld
    Figuur 6: de tekst van het kenteken heeft te laag contrast