Rapport in PDF

Deelonderzoek techniek vergoedingen.nijmegen.nl versie 1.2

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
Forus
Evaluatiedatum
14 januari 2025

Managementsamenvatting

Dit is een hertoetsing van het deelonderzoek techniek van 9 november 2023. De onderzochte versie van de software betreft v0.49.0 van het Forus platform. In combinatie met een deelonderzoek content vormt dit een volledig toegankelijkheidsonderzoek van de website.

Uit dit onderzoek blijkt dat wordt voldaan aan 35 van de 43 techniek-specifieke criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

Positief is bijvoorbeeld dat de website goed werkt op mobiel, dat de taal van de pagina's goed is ingesteld en de toetsenbordfocus goed zichtbaar is.

Verbeterpunten zijn er onder andere nog bij de labelling van invoervelden, de benaming van links en buttons en de werking met het toetsenbord van bepaalde onderdelen zoals filters.

Scope van de evaluatie

Website naam
vergoedingen.nijmegen.nl hertoetsing versie 1.2
Scope van de website
Alle pagina's op https://vergoedingen.nijmegen.nl/. Ingelogde pagina's via https://test-vergoedingen.nijmegen.nl/. Niet de pagina's behorende bij het proces 'Aanmelden als aanbieder'. Niet de functionaliteit voor het indienen van declaraties (dit is er uit gehaald bij de hertoetsing van januari 2025).
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 43 van 50 WCAG 2.1 AA Success Criteria.

Alle resultaten

1 Waarneembaar

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

Uitkomst: Onvoldoende

Kickboxing (aanbod)

Uitkomst: Onvoldoende
Kickboxing (aanbod)

Bovenaan de pagina staat het logo van het Kickboxing institute. Het alt-attribuut is leeg. Een logo is echter geen decoratieve afbeelding, maar heeft altijd een alt-tekst nodig met daarin dezelfde tekst als in het logo te zien is. Dit geldt ook voor dezelfde afbeelding onderaan de pagina van Kickboxing institute. NB: dit is content, maar een aanbieder moet wel de mogelijkheid hebben om alt-tekst te plaatsen. Het lijkt alsof dit automatisch wordt ingevuld. Hertoetsing: de alt-tekst is nogal omslachtig en geeft niet aan wat er op staat: ‘Dit is een afbeelding van het aanbod €150 Korting op sporten bij Kickboxing Institute van aanbieder Kickboxing-Institute’. Bij een afbeelding hoef je niet te vermelden dat het een afbeelding is. De omschrijving ‘logo Kickboxing institute’ zou hier voldoende zijn. Dit komt bij meerdere aanbodpagina’s voor, zoals op ‘Random pagina 2 - Kom oogsten bij Eet Meerbosch!’. Hier zegt de alt-tekst ook niks over wat hier te zien is, namelijk een foto van gewassen in dauw.

Hertoetsing januari 2025: de alt-teksten bij de aanbodpagina’s zijn nog niet correct. Er staat nu standaard ‘logo aanbod + tekst uit de h1’, ook als er geen logo te zien is. De h1-tekst is hier overbodig, want dit zie je niet op de afbeelding. Houd de alt-tekst kort.
1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

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

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

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

Uitkomst: Niet getoetst
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

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

Uitkomst: Onvoldoende

Aanbod overzicht

Uitkomst: Onvoldoende

Kickboxing (aanbod)

Uitkomst: Onvoldoende

Mijn tegoeden + inloggen op de app (popup window)

Uitkomst: Onvoldoende

Kickboxing institute (aanbieder)

Uitkomst: Onvoldoende
Hele sample
Aanbod overzicht

Rechtsboven de lijst staat een invoerveld waarmee je kunt sorteren. Het label ‘sorteer’ is echter niet aan de invoer (listbox) gekoppeld, waardoor dit door screenreaders niet wordt voorgelezen. Zie ook 4.1.2.

Kickboxing (aanbod)

De kopjes in de bovenste tekst (naast het logo) zijn niet als kop opgemaakt, maar als div-element en strong-elementen. Maak hier een logische koppenstructuur van, bijvoorbeeld:

  • h1: €150 Korting op sporten bij Kickboxing Institute
  • h2: Kickboxing workouts
  • h2: Geen poespas, met beide benen op de grond

De huidige h1 ‘Informatie over het aanbod’ kan worden weggelaten. Deze is namelijk op alle aanbod pagina’s hetzelfde en voegt niks toe. Dit komt op meerdere (aanbod)pagina’s voor. Hertoetsing: de h1 klopt nu, maar de categorie is een h2 geworden, en dit hoort geen kop te zijn. De tussenkopjes daaronder zijn nog steeds alleen opgemaakt met . Het div-element eromheen (dus de gehele tekst, kopjes + paragrafen) is nu opgemaakt als h3-kop, maar dit hoort ook geen kop te zijn. Kopelementen zijn alleen bedoeld voor (korte) kopteksten, niet voor gehele paragrafen.

Hertoetsing januari 2025: De koppenstructuur is nu bijna goed. Alleen de tussenkopjes van het aanbod staan nog opgemaakt met het strong-element in plaats van een heading-element. NB: wanneer de aanbieder dit zelf kan instellen hoort dit bij de content.

Mijn tegoeden + inloggen op de app (popup window)

Wanneer je kiest voor ‘Inloggen op de app’ opent er een popup. Hierin staan invoervelden zonder label en met ongeldige aria-attributen. Hierdoor is het onduidelijk wat waar ingevuld moet worden. Zie screenshot 10 om te zien wat de screenreader voorleest.

Hertoetsing januari 2025: de invoervelden hebben nu een label, maar deze is voor elk veld identiek. Bovendien hebben de velden het type telefoonnummer, waardoor het nog niet erg duidelijk is wat hier verwacht wordt. Pas het type aan en geef per veld aan om welk nummer het gaat.

Kickboxing institute (aanbieder)

De tussenkopjes onder ‘Omschrijving’ zijn niet als kop opgemaakt, maar met het strong-element. Hierdoor verschijnen deze kopjes niet in koppenlijsten van hulpsoftware. Bezoekers die via deze lijsten navigeren, missen nu deze informatie. NB: wanneer de aanbieder dit zelf kan instellen hoort dit bij de content.
1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Niet getoetst
1.3.4: Weergavestand
Hele sample

Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Niet van toepassing
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 van toepassing
1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Voldoende
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Niet getoetst
1.4.10: Reflow
Hele sample

Uitkomst: Voldoende
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende
Hele sample

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

Startpagina

Hertoetsing januari 2025: de melding die je krijgt na het ‘liken’ van aanbod heeft een sluitbutton in de vorm van een kruis, met een te laag contrast van 1.8:1 (lichtgrijs).
1.4.12: Tekstafstand
Hele sample

Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Niet van toepassing

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Onvoldoende
Hele sample

Hertoetsing januari 2025: wanneer je de zoekbutton in de header activeert, opent er een zoekveld. Met het toetsenbord kun je hier niet bij komen.
2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample

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

Uitkomst: Voldoende
2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet van toepassing
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: Voldoende
2.4.2: Paginatitel
Hele sample

Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample

Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Voldoende

Startpagina

Uitkomst: Onvoldoende
Startpagina

Links als ‘Vraag het aan’ en ‘Direct regelen’ zijn niet duidelijk qua doel. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.

Opmerking hertoetsing januari 2025: de links hebben nu een duidelijk doel, maar het is niet nodig om in een linktekst ‘link’ te zetten, omdat dit nu dubbel wordt voorgelezen. De manier waarop dit is opgelost heeft een nieuwe bevinding tot gevolg onder 2.5.3.
2.4.5: Meerdere manieren
Hele sample

Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample

Uitkomst: Onvoldoende
Hele sample

Hertoetsing januari 2025: In het gebruikersmenu staat er een knop met als naam ‘authorize device’. Dit is mogelijk niet voor alle gebruikers duidelijk. Maak hier bij voorkeur een Nederlandse tekst van.
2.4.7: Focus zichtbaar
Hele sample

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

Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende
Startpagina

Hertoetsing januari 2025: de links bij de regelingen zoals ‘Vraag het aan’ hebben een andere toegankelijke naam dan wat er zichtbaar is. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (hier het aria-label) altijd minstens de zichtbare tekst bevat, bij voorkeur in het begin van de naam. Dit zou dan kunnen worden: ‘Vraag het aan - naar pagina Meedoenregeling’.
2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet van toepassing

3 Begrijpelijk

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

Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Onvoldoende

Notificatievoorkeuren

Uitkomst: Onvoldoende
Notificatievoorkeuren

Bovenaan de pagina staat Engelse teksten zonder dat dit is aangegeven via een taalwissel in de code. (‘You currently have no email associated with your account Please add en email address to receive email notifications.’) Hierdoor lezen screenreaders het mogelijk niet goed voor. Voeg een taalwissel toe (lang=”en”) of zet deze teksten in het Nederlands.
3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Voldoende
3.2.2: Bij input
Hele sample

Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample

Uitkomst: Voldoende
3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende
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 van toepassing

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Voldoende
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

Vergoedingen

Uitkomst: Onvoldoende

Busvoordeelabonnement (vergoeding)

Uitkomst: Onvoldoende

Aanbod overzicht

Uitkomst: Onvoldoende
Hele sample

Hertoetsing: In de popup staat een icoon met een kruis om de popup te sluiten. Deze button heeft geen naam. De buttons zoals ‘Aanbod’ aan de rechterkant geven geen status aan (open/gesloten). Dit kan worden opgelost door middel van het aria-expanded attribuut. De buttons zoals ‘Aanbod’ aan de linkerkant werken als tabs. De status is echter niet duidelijk voor hulpsoftware. Geeft dit bijvoorbeeld aan met aria-selected op het actieve item.

Hertoetsing januari 2025: de opmaak in het uitgeklapte menu is nog niet correct. Er wordt gebruik gemaakt van ‘aria-selected’, maar de rol van deze elementen is hier geen tab. Op een button is dit attribuut niet toegestaan. Zie ook https://www.w3.org/TR/wai-aria-1.1/#aria-selected.

Vergoedingen

Hertoetsing: Onder Organisatie en Categorie staan invoervelden. Deze lijken visueel op een select met opties, maar het zijn nu in de code buttons die een listbox openen. De rol en werking hiervan is niet duidelijk voor gebruikers van hulpsoftware. De listbox heeft geen toegankelijke naam. Ook worden er invoervelden genest. Met het toetsenbord werkt het niet zoals verwacht bij een listbox met de enter toets om de lijst te openen en de pijltjestoetsen om tussen de opties te navigeren. Met de screenreader (getest met VoiceOver in Safari) is het nu onmogelijk om een optie te selecteren.

Busvoordeelabonnement (vergoeding)

Onderaan de pagina staan onderdelen die je kunt uitklappen, zoals ‘Abonnement verlengen’. Deze elementen zijn echter enkel h2-koppen, geen buttons. Maak hier buttons van en geef ook de status aan. Dit kan via het aria-expanded attribuut op de buttons. Hertoetsing: er staan nu geneste buttons, dit kan problemen geven voor hulpsoftware. Het div-element met de class faq-item ng-scope heeft een button role, en de h2 die er in staat ook. Haal bijvoorbeeld de role=”button” en de tabindex weg van de h2.

Hertoetsing januari 2025: er zijn geen geneste buttons meer, maar als je een vraag opent, komt de gehele inhoud in de button te staan, dus niet alleen de vraag, maar ook het geopende item.

Aanbod overzicht

Hertoetsing: Rechtsboven staat een select lijst om te sorteren. Dit is een listbox zonder toegankelijke naam. Dit kan worden opgelost door het element een aria-label te geven of via aria-labelledby te verbinden aan het ‘sorteer’ label. Ook hier geldt, net als bij de filters, dat de werking met het toetsenbord niet is zoals verwacht, namelijk dat je met de pijltjestoetsen door de opties kunt gaan.
4.1.3: Statusberichten
Hele sample

Uitkomst: Voldoende

Sample

  1. Startpagina - https://vergoedingen.nijmegen.nl/
  2. Vergoedingen - https://vergoedingen.nijmegen.nl/fondsen
  3. Busvoordeelabonnement (vergoeding) - https://vergoedingen.nijmegen.nl/fondsen/37
  4. Aanbod overzicht - https://vergoedingen.nijmegen.nl/aanbod
  5. Kickboxing (aanbod) - https://vergoedingen.nijmegen.nl/aanbod/3884
  6. Aanbieders - https://vergoedingen.nijmegen.nl/aanbieders
  7. AB Houtcreaties (aanbieder) - https://vergoedingen.nijmegen.nl/aanbieders/569
  8. Uitleg - https://vergoedingen.nijmegen.nl/uitleg
  9. Zoekresultaten - https://vergoedingen.nijmegen.nl/search?q=sport&search_item_types=products
  10. Inloggen - https://vergoedingen.nijmegen.nl/start
  11. Aanvraag busvoordeelabonnement (proces) - https://test-vergoedingen.nijmegen.nl/fondsen/49/activeer
  12. Mijn tegoeden + inloggen op de app (popup window) - https://test-vergoedingen.nijmegen.nl/tegoeden
  13. Notificaties - https://test-vergoedingen.nijmegen.nl/notifications
  14. Notificatievoorkeuren - https://test-vergoedingen.nijmegen.nl/preferences/notifications
  15. Kickboxing institute (aanbieder) - https://vergoedingen.nijmegen.nl/aanbieders/2047
  16. Random pagina 1 - https://vergoedingen.nijmegen.nl/fondsen/26
  17. Random pagina 2 - https://vergoedingen.nijmegen.nl/aanbod/3845

Technologie

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

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: