Rapport in PDF

Deelonderzoek content JTF webportal

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
Stimulus Programmamanagement
Evaluatiedatum
29 januari 2024

Managementsamenvatting

Dit rapport bevat het deelonderzoek content. In combinatie met het totaalonderzoek van de EFRO webportal vormt dit een volledig toegankelijkheidsonderzoek van de website.

Uit dit onderzoek blijkt dat wordt voldaan aan 19 van de 28 getoetste 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 afbeeldingen van tekst worden gebruikt en dat de taal van de pagina’s goed is ingesteld.

Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:

  • Onjuiste of missende alt-teksten bij afbeeldingen
  • Invoervelden zonder labels
  • Te laag contrast van tekst

Scope van de evaluatie

Website naam
JTF webportal
Scope van de website
Alle pagina's op https://acceptatie.efro-webportal.nl/acc-jtf-mijn/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 28 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

PDF Gebruikersvoorwaarden JTF-webportal

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

De alt-tekst van het logo bovenaan de pagina is ‘JTF’. In de afbeelding staat echter ook nog ‘Fonds voor rechtvaardige transitie’. Screenreader gebruikers krijgen nu niet alle informatie mee. Zorg dat bij logo’s alle visuele teksten ook in de alt-tekst terugkomen.

Wanneer je bent ingelogd is de alt-tekst van het JTF-logo ‘Europese Unie, Europees Fonds voor Regionale Ontwikkeling’. Dit is niet correct.

PDF Gebruikersvoorwaarden JTF-webportal

Op pagina 2 staat een afbeelding zonder alternatieve tekst. Dit is een groot vlak, welke beter als decoratief gemarkeerd kan worden. De logo’s onderin het document staan niet in de codelaag en hebben ook geen alternatieve teksten. Deze bieden wel informatie en moeten daarom wel beschikbaar zijn voor hulpsoftware.
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

Inlogpagina

Uitkomst: Voldoende

Inloggen met gebruikersnaam en wachtwoord

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Dashboard

Uitkomst: Onvoldoende

Aanvraag

Uitkomst: Onvoldoende

Documenten

Uitkomst: Onvoldoende

PDF Gebruikersvoorwaarden JTF-webportal

Uitkomst: Onvoldoende
Inlogpagina

Opmerking: in het blok van EHerkenning staat een link met de tekst ‘toelichting’ in een u-element. Een u-element is bedoeld voor bijvoorbeeld foutieve spelling vanuit een andere taal. Om een link te onderstrepen kan beter CSS worden gebruikt. Hier is deze ‘text-decoration’ in CSS uitgezet. Dit komt ook voor bij link op de pagina ‘Inloggen met gebruikersnaam en wachtwoord’.

Inloggen met gebruikersnaam en wachtwoord

De invoervelden voor gebruikersnaam en wachtwoord hebben geen correct geassocieerd label. Gebruikers van hulpsoftware weten hierdoor niet welke invoer wordt gevraagd. Het label verwijst nu naar een ander id dan het invoerveld waar het bij hoort. Het label voor de gebruikersnaam heeft als for-attribuut de waarde ‘userName_id’, maar het invoerveld voor de gebruikersnaam heeft deze id niet. Hetzelfde geldt voor het wachtwoord veld. Zorg dat de verwijzingen goed worden ingesteld.

Registreren

De radiobuttons hebben geen label. De antwoorden’ ja’ en ‘nee’ zijn nu niet beschikbaar voor gebruikers van hulpsoftware. Ook zijn de radiobuttons niet gegroepeerd. Dit kan worden opgelost door een fieldset toe te voegen met de vraag in de legend, en vervolgens bij elke radiobutton een label element met het antwoord. Verbind het label via een id aan het invoerveld.

registreren - registratiefomulier (2e pagina): De invoervelden voor land (2 keer) en de CAPTCHA hebben geen label. Voeg een label element toe en verbind deze via een id aan het invoerveld, of voeg een Nederlandse tekst toe aan het aria-label op de input (het aria-label is nu leeg). Dit komt op meerdere pagina’s voor bij selectlijsten.

Dashboard

De koppen van de tabel onder Subsidieaanvragen hebben verwarrende teksten als ‘Nummer sort filter_alt’. Deze kopteksten worden door screenreaders bij elke datacel opnieuw opgelezen. Maak hier duidelijke teksten van zoals ‘Aanmaakdatum’.

Aanvraag

De radiobuttons zoals bij de vraag ‘Wordt in dit project gebruik gemaakt van een intermediair?*’ hebben geen label. Gebruikers van hulpsoftware weten hierdoor niet welk antwoord bij welke invoer hoort. Ook zijn de radiobuttons niet gegroepeerd. Dit kan worden opgelost door een fieldset toe te voegen met de vraag in de legend, en vervolgens bij elke radiobutton een label element met het antwoord. Verbind het label via een id aan het invoerveld. Dit issue komt op meerdere pagina’s voor.

De lijst van het menu is niet correct opgemaakt. De list-items hebben geen ‘parent’ doordat de parent een role=”navigation” heeft. Haal deze rol weg zodat het weer een ul-element wordt.

Opmerking: bij uitgevoerde stappen staat een vinkje, met als tekstalternatief ‘done’. Aangezien dit een Nederlandse pagina is, is het duidelijker hier ook een Nederlandse tekst van te maken.

Documenten

In de lijst met documentensoorten komt er een vinkje te staan bij een voltooide upload. Deze informatie wordt niet doorgegeven aan hulpsoftware. Geef dit bijvoorbeeld aan met een verborgen tekst binnen het list item.

PDF Gebruikersvoorwaarden JTF-webportal

De kopjes in het document zijn opgemaakt als paragraaf, en daardoor voor gebuikers van hulpsoftware niet herkenbaar als kop. Maak hier kopelementen van met een logische hiërarchie.
1.3.2: Betekenisvolle volgorde
Hele sample

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

Uitkomst: Onvoldoende

Dashboard

Uitkomst: Onvoldoende

Aanvraag

Uitkomst: Onvoldoende

Penvoerder

Uitkomst: Onvoldoende

Documenten

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.

Dashboard

Wanneer je een aanvraag wilt verwijderen, opent een nieuwe pagina met een roze knop en de tekst ‘ja, verwijderen’. Deze knoptekst heeft te laag contrast (2.8:1).

Aanvraag

De knop om in een tabel de filteropties te wissen (2.2:1).

Penvoerder
  • De rode teksten van de nog in te vullen onderdelen (3.79:1).
  • De grijze teksten in de tabs (1.7:1).
  • De rode foutmelding onder een invoerveld (4:1).
Documenten

Een geslecteerde en gehoverde optie in de selectlijst met documenten (grijs en blauw, 2.1:1 en 3.4:1).
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: Voldoende
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende

Dashboard

Uitkomst: Onvoldoende

Documenten

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.

Registreren

De randen van de invoervelden (lichtgrijs, 1.7:1).

Dashboard
  • De roze knop om een aanvraag te verwijderen (2.8:1).
  • De filterknoppen (2.2:1).
Documenten

De lichtblauwe knop om documenten op privé te zetten (2.1:1).
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
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 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: Niet getoetst
2.4.2: Paginatitel
Hele sample

Uitkomst: Onvoldoende

PDF Gebruikersvoorwaarden JTF-webportal

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Alle pagina’s (zowel in - als uitgelogd) hebben dezelfde titel, ‘JTF Webportaal’. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Geef daarom elke pagina een unieke titel die de pagina beschrijft.

PDF Gebruikersvoorwaarden JTF-webportal

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 van toepassing
2.4.6: Koppen en labels
Hele sample

Uitkomst: Onvoldoende

Dashboard

Uitkomst: Onvoldoende
Dashboard

De knoppen om te bewerken en verwijderen (eerste kolom van de tabel onder Mijn Subisidieaanvragen) hebben namen in het Engels (‘edit’ en ‘cancel’). Dit is mogelijk niet voor alle gebruikers goed te begrijpen. Geef alle interactieve onderdelen op Nederlandse pagina’s ook Nederlandse labels. Gebruik hiervoor de tekst binnen de button of een aria-label. Het title attribuut wordt slecht ondersteund door hulpsoftware. Dit komt op veel plekken voor, ook bijvoorbeeld bij met uitklapmenu met het label ‘toggle navigation’ en inloggen met het label ‘toggle account menu’.

De betekenis van de asterisk (*) voor verplichte velden wordt niet uitgelegd. Dit is mogelijk niet voor iedereen duidelijk, wat onnodige foutmeldingen oplevert. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst. Ook kan een ‘required’ attribuut behulpzaam zijn voor gebruikers van hulpsoftware, aangezien de asteriks niet door alle screenreaders goed wordt voorgelezen.
2.4.7: Focus zichtbaar
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

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

Inlogpagina

Uitkomst: Onvoldoende
Inlogpagina

Op deze pagina staat een blok met Engelse tekst (‘European login’). Dit gedeelte is niet in de code aangegeven als Engels. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse tekst aan met het attribuut lang="en" op het betreffende element.
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.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Onvoldoende

Aanvraag

Uitkomst: Onvoldoende

Penvoerder

Uitkomst: Onvoldoende
Aanvraag

Wanneer er foutmeldingen zijn gevonden bij het verzenden van het formulier wordt er niet overal duidelijk aangegeven wat er fout is gegaan. ‘De startdatum is verplicht.’ is een algemene instructie (die er ook al kon staan voor het verzenden). Een goede foutmelding is wanneer er bijvoorbeeld wordt aangegeven dat een veld niet is ingevuld, of niet correct is ingevuld. Een alternatief kan zijn: het plaatsen van een algemene melding bovenaan het formulier dat er fouten zijn gevonden. Dan mag wel worden volstaan met de melding ‘De startdatum is verplicht’.

Penvoerder

Wanneer niet alle gegevens goed zijn ingevuld, staat er een algemene melding boven aan de pagina zoals ‘De overige gegevens zijn niet volledig ingevuld.’ Na het opslaan verschijnt een rood kader om deze velden, maar er is geen tekstuele melding. Voor iemand die deze kaders niet kan zien, is het nu lastig te achterhalen welke velden gecorrigeerd moeten worden. Geef van elke fout in tekst aan wat er mis is gegaan en hoe dit opgelost moet worden.
3.3.2: Labels of instructies
Hele sample

Uitkomst: Onvoldoende

Registreren

Uitkomst: Onvoldoende
Registreren

Bij het aanmaken van een wachtwoord wordt niet van tevoren aangegeven wat het verplichte format is. Hierdoor kan het een gebruiker meerdere pogingen kosten voor het op de juiste manier is ingevuld. Zet de eisen voor het wachtwoord voor het invullen al bij het veld.
3.3.3: Foutsuggestie
Hele sample

Uitkomst: Voldoende
3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet getoetst

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Niet getoetst
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Niet getoetst
4.1.3: Statusberichten
Hele sample

Uitkomst: Niet getoetst

Sample met getoetste webpagina's

  1. Startpagina - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/
  2. Inlogpagina - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/LoginPage
  3. Inloggen met gebruikersnaam en wachtwoord - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/LoginWithPassword
  4. Registreren - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/Registration
  5. Dashboard - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/Dashboard
  6. Aanvraag - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/Application/12434/Details
  7. Penvoerder - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/Application/12434/Secretary
  8. Documenten - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/Application/12434/Documents
  9. PDF Gebruikersvoorwaarden JTF-webportal - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/downloads/Gebruikersvoorwaarden_JTF-webportal_v2.230123.pdf
  10. Service en contact - https://acceptatie.efro-webportal.nl/acc-jtf-mijn/Info/ServiceEnContact

Webtechnologie

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

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: