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
Uit dit onderzoek blijkt dat wordt voldaan aan 26 van de 50 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 de taal van de webpagina’s goed is ingesteld en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Invoervelden zonder labels
Niet alle content is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord
Scope van de evaluatie
Website naam
EFRO webportal
Scope van de website
Alle pagina's op https://acceptatie.efro-webportal.nl/acc-mijn/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 50 van 50 WCAG 2.1 AA
Success Criteria.
16Voldoende
24Onvoldoende
10Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Toegankelijkheid
Uitkomst: Onvoldoende
PDF handboek EFRO-webportal
Uitkomst: Onvoldoende
Startpagina
De alternatieve teksten voor de iconen bovenaan de pagina zijn in het Engels, maar dit is een Nederlandse pagina. Bijvoorbeeld ‘smart’ en ‘Better cooperation governance’. Dit is mogelijk niet voor alle bezoekers goed te begrijpen. Maak hier Nederlandse teksten van.
Toegankelijkheid
Op de pagina staat een afbeelding met informatie over de toegankelijkheidsstatus. In de alternatieve tekst staat ‘Het toegankelijkheidslabel van EFRO webportal. Volg de link voor de toegankelijke versie van dit label.’. Er is echter geen link, waardoor deze informatie niet beschikbaar is. Voeg deze link toe.
PDF handboek EFRO-webportal
De afbeeldingen in het document missen een (goede) alternatieve tekst. Zo hebben de logo’s op pagina 1 als alternatieve tekst ‘Afbeelding met tekst Automatisch gegenereerde beschrijving’. Ook hebben veel afbeeldingen geen alternatieve tekst. De informatie in deze afbeeldingen is hierdoor niet voor iedereen beschikbaar. Voeg voor alle informatieve afbeeldingen een goede omschrijving toe. Decoratieve afbeeldingen (zoals een kader) kunnen het beste als decoratief worden gemarkeerd zodat hulpsoftware ze negeert.
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
Startpagina
Uitkomst: Onvoldoende
Inlogpagina
Uitkomst: Onvoldoende
Inloggen met gebruikersnaam en wachtwoord
Uitkomst: Onvoldoende
Registreren
Uitkomst: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Documenten
Uitkomst: Onvoldoende
Toegankelijkheid
Uitkomst: Voldoende
PDF vulnerability disclosure
Uitkomst: Onvoldoende
Startpagina
De koppenstructuur is niet logisch opgebouwd. Er is een h2-kop ‘Operationeel Programma 2014 - 2020’ met daaronder 2 h3-koppen ‘Beheerautoriteiten’ en ‘Ondersteuning’. Deze laatste koppen zijn echter algemene onderwerpen in de footer. Gebruikers die navigeren via koppen kunnen deze nu missen omdat ze qua betekenis onder het oude programma vallen. Geef deze koppen daarom een hoger niveau (h2).
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.
registratiefomulier (2e pagina):
Het formulier staat in een lijst (ul), maar dit is geen correcte opmaak voor een lijst. Hulpsoftware leest het nu mogelijk niet goed voor. De lijst-opmaak lijkt hier niet nodig en kan beter weg worden gehaald.
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 ‘Aanmaakdatum arrow_drop_up 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 meerdere projectpartners?*’ 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. DIt geldt ook voor de link Communicatie met het uitroepteken wanneer er nieuwe berichten zijn. Deze link heeft dan als naam ‘priority_high Communicatie’. Zet hier bijvoorbeeld ‘nieuw bericht’ bij.
Onder Communicatie staat een lijst met vragen. Binnen deze buttons staan tabellen. De eerste kop is ‘1.done’ (zonder rowspan van 2) en in de datarijen staan de vraag en antwoord. Deze tabelvorm is geen logische opmaak voor deze vragen. Aangeraden wordt om deze tweede button weg te halen en de ‘edit’-button aan te passen in ‘vraag openen’, en de tabelopmaak weg te halen. De vraag en antwoord staan als als tekst binnen een list-item, dat is voldoende.
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.
Toegankelijkheid
Opmerking: Er is geen logische koppenhiërarchie. Na de h1 volgen drie h5-kopjes binnen het artikel. In de footer staan h3-kopjes. Dit kan verwarrend zijn voor bezoekers die navigeren via koppen. Zorg dat er geen niveaus worden overgeslagen, dus dat hier na de h1 h2-koppen volgen.
PDF vulnerability disclosure
De kop ‘Vulnerability disclosure’ is in de code opgemaakt als een paragraaf. Maak hier bijvoorbeeld een h1-kop van.
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: Onvoldoende
Hele sample
Bevindingen:
In portretmodus op mobiel is het onmogelijk om in te loggen, doordat de invoervelden voor een groot deel buiten beeld vallen. Op landschapsmodus kunnen de gegevens wel worden ingevuld, maar is ook niet de gehele pagina zichtbaar. Zie screenshot 7.
Ook op andere pagina’s wanneer je nog niet bent ingelogd, is het lastig de content te lezen. Zie bijvoorbeeld de toegankelijkheidspagina in screenshot 8.
Mensen die motorisch beperkt zijn kunnen niet altijd het device draaien. Zorg daarom dat alles altijd bereikbaar is op portret- en op landschapsmodus.
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Aanvraag
Invoervelden voor persoonlijke informatie zoals naam en adres (bijvoorbeeld bij Penvoerder) hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.
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
Penvoerder
Uitkomst: Onvoldoende
Documenten
Uitkomst: Onvoldoende
Communicatie
Uitkomst: Onvoldoende
PDF handboek EFRO-webportal
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.63: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 knop in de popup om te annuleren (2:1). Zie screenshot 3.
De rode foutmelding onder een invoerveld (4.1). Zie screenshot 4.
De knop ‘opslaan’ op hover en focus (donkerblauw op zwart, 1.8:1).
De foutmelding in de popup (wit op roze, 2.6:1). Zie screenshot 5.
Documenten
Een geslecteerde en gehoverde optie in de selectlijst met documenten (grijs en blauw, 2.1:1 en 3.4:1). Zie screenshot 6.
Communicatie
De rij in de tabel op hover (blauw op lichtblauw, 2.8:1).
PDF handboek EFRO-webportal
De lichtblauwe kopjes, zoals bovenaan pagina 5 (4:1).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Inlogpagina
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Inlogpagina
Het formulier om in te loggen is vanaf 125% ingezoomd niet meer geheel leesbaar. De content wordt aan de linkerkant van de pagina afgesneden.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)
Startpagina
De content is boven de 200% ingezoomd niet meer geheel leesbaar. Aan de linkerkant valt een deel buiten beeld en voor het rechtergedeelte moet horizontaal gescrold worden. Zie screenshot 9. Dit geldt voor meerdere pagina’s wanneer je niet bent ingelogd.
Dashboard
Boven de 200% vallen teksten in invoervelden deels weg. Zie screenshot 10.
Boven de 300% ingezoomd valt een deel van de content in de footer aan de zijkanten buiten beeld.
Aanvraag
Boven de 150% moet er horizontaal gescrolld worden om de content te kunnen lezen. Zie screenshot 12.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Registreren
Uitkomst: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Projectgegevens
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.4:1).
Dashboard
De roze knop om een aanvraag te verwijderen (2.8:1).
De filterknoppen (2.6:1).
Projectgegevens
De geselecteerde checkboxes versus de niet geselecteerde (vinkje, 2.1:1).
Documenten
De lichtblauwe knop om documenten op privé te zetten (2.1:1).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Inlogpagina
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is in onderstaande gevallen niet alle content meer beschikbaar. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html.
Inlogpagina
Er valt er een inloglink achter een ander blok. Zie screenshot 11.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Dashboard
Wanneer je met de muis over de’i’-icoontjes gaat, verschijnt er content. Dit zijn soms grote blokken tekst die over andere delen van de pagina heen vallen (zie bijvoorbeeld de stap Projectgegevens). Deze content kan alleen worden gesloten door de muis te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Registreren
Uitkomst: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Communicatie
Uitkomst: Onvoldoende
Registreren
De Refresh-link is niet te bedienen met het toetsenbord.
Dashboard
Binnen de kopcellen van de tabel staat filterknoppen. Met de muis opent een popup met opties. Deze werken niet met het toetsenbord.
Aanvraag
Binnen het submenu kun je met de muis hoofdstukken in-en uitklappen. Met het toetsenbord kan dit niet.
De tooltip achter het invoerveld met het ‘i’-icoon is niet te openen met het toetsenbord. Dit komt op veel plekken voor.
Communicatie
Binnen een bericht met een bijlage staat een knop om deze te downloaden. Deze knop is niet te gebruiken met het toetsenbord.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Aanvraag
Wanneer je onder communicatie een vraag opent (met de ‘edit’-button) opent er een popup window. Hierin kun je met het toetsenbord alleen naar de pijlknoppen (‘arrow-drop_down’ en ‘navigate_next’) en het paginanummer (input zonder label), daarna loopt het vast. Je kunt niet verder naar de vragen en de popup sluiten kan ook niet. Zorg dat alle interactieve onderdelen binnen de popup bereikbaar zijn met het toetsenbord, en dat er een manier is om de popup met het toetsenbord te sluiten.
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: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Dashboard
Er is geen mechanisme om terugkerende blokken content, zoals de account button en het stappenmenu, over te slaan. Toetsenbordgebruikers moeten hierdoor op elke pagina door al deze links heen om bij de hoofdcontent te komen. Plaats hiervoor bijvoorbeeld een ‘skiplink’ als eerste link op de pagina waarmee deze onderdelen overgeslagen kan worden.
2.4.2: Paginatitel
Hele sample
Uitkomst: Onvoldoende
PDF vulnerability disclosure
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Alle pagina’s (zowel in - als uitgelogd) hebben dezelfde titel, ‘EFRO 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 vulnerability disclosure
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: Onvoldoende
Dashboard
Uitkomst: Onvoldoende
Penvoerder
Uitkomst: Voldoende
Dashboard
Er komt 2 keer een focus op de ‘uitloggen’ link. Het is nu niet duidelijk welke je moet activeren. Zorg dat alleen de juiste link focus kan ontvangen. (Deze focus heeft nu geen zichtbare stijl, zie 2.4.7).
Penvoerder
Opmerking: Na het activeren van een tab gaat de focus niet meteen in het tabpanel, maar eerst naar de andere tabs. Het voorgeschreven gedrag bij tabs is dat de focus via de tabtoets meteen in het actieve panel komt en dat je met de pijltjestoetsen tussen de tabs kunt navigeren. Zorg dat de code voor tabs is opgemaakt volgens de specificatie, zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Aanvraag
Bij de begroting (financiering na indienen) staan er in de eerste kolom links met als tekst ‘arrow_drop_down’ en ‘arrow_right’. Het is niet duidelijk waar deze links naartoe gaan. Deze links worden hier gebruikt om de rijen uit en in te klappen. Hier kan beter een button element gebruikt worden met een duidelijke tekst en een status (in/uitgeklapt) via het aria-expanded attribuut.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Onvoldoende
PDF handboek EFRO-webportal
Uitkomst: Onvoldoende
PDF handboek EFRO-webportal
Het document heeft geen bladwijzers. Bij documenten met veel pagina’s geven bladwijzers de gebruiker de mogelijkheid om meteen naar bepaalde content te springen. Dat is hier niet mogelijk. Voeg bladwijzers toe aan de PDF via koppen. Dit kan automatisch of handmatig, afhankelijk van het gebruikte programma.
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 Subsisidieaanvragen) 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’.
Opmerking: de button voor het uitklapmenu staat er ook wanneer er geen menu is (als je niet bent ingelogd). Hierdoor lijkt het of het menu niet werkt.
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: Onvoldoende
Startpagina
Uitkomst: Onvoldoende
Aanvraag
Uitkomst: Onvoldoende
Startpagina
De focus op het te kiezen programma is niet zichtbaar. Met de muis verandert het hele blok van kleur, maar met het toetsenbord is er geen verandering van stijl en is het dus niet duidelijk wanneer je er op staat. Zorg dat het in ieder geval zichtbaar is wanneer de knop met ‘OP [jaartal]’ focus heeft (dus of het hele blok of alleen de knop). Dit issue komt ook voor op de inlogpagina. De focus op de inlogknoppen is niet zichtbaar.
Aanvraag
De onderdelen van het aanvraag menu (Projectkenmerken, Projectgegevens etc) hebben geen zichtbare focus. Het is daardoor niet duidelijk voor ziende toetsenbordgebruikers wanneer ze op zo’n item staan. Voeg bijvoorbeeld een witte rand toe als focusstijl.
De zwarte knoppen, bijvoorbeeld om op te slaan binnen de verschillende onderdelen, hebben geen zichtbare focus. Dit geldt voor vrijwel alle knoppen binnen de stappen, ook in andere vormen, zoals een bericht onder Communicatie en knoppen binnen popups zoals ‘cancel’. Ook de focus op de uitloggen link is niet zichtbaar. Dit maakt het invullen van de aanvraag met het toetsenbord erg lastig. Zorg dat alle interactieve onderdelen een zichtbare focusstijl hebben, met minimaal een contrast van 3:1.
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: Voldoende
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
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: 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: 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.
De knop voor de audio-captcha heeft geen naam. Er staat een icoontje in, maar geen tekst. Voeg hier een duidelijke knoptekst toe. Dat kan als tekst binnen het button element of als aria-label op de button.
Dashboard
De knop om een nieuwe aanvraag te starten heeft als naam ‘"add_circle_outline Nieuw". Dit is verwarrend voor gebruikers van hulpsoftware. Het is beter om hier enkel ‘Nieuw’ van te maken of eventueel ‘Voeg nieuwe aanvraag toe’. Dit geldt ook voor de knoppen in de eerste kolom van de tabel. Deze hebben namen als ‘picture_as_pdf’ en ‘view_list’. Er zijn hier duidelijkere beschrijvingen toegevoegd in een title attribuut, maar dit attribuut wordt slecht ondersteund door hulpsoftware. Screenreaders lezen dus alleen de tekst in het i-element voor. Zorg dat deze tekst een goede beschrijving geeft.
Aanvraag
Binnen het submenu kun je met de muis hoofdstukken in-en uitklappen. Dit zijn geen buttons maar enkel div-elementen zonder duidelijke rol. Maak hier buttons van en geef ook de status aan, Dit kan worden gedaan met het aria-expanded attribuut.
De knoppen van de datepicker hebben geen naam. Ze screenshot 1. Wanneer het de bedoeling is dat deze functie alleen beschikbaar is voor gebruikers van de muis, zorg dan dat de knoppen verborgen zijn voor toetsenbord en hulpsoftware. Dat kan bijvoorbeeld via het aria-hidden attribuut.
De radiobuttons hebben geen naam (label). Zie ook 1.3.1.
Projectgegevens
De antwoorden bij de radiobuttons en checkboxes hebben geen label en geven geen correcte status aan. Voor gebruikers van hulpsoftware is het hierdoor onmogelijk om de vragen te beantwoorden. Zie screenshot 2. Zorg voor een goed geassocieerd label (zie ook 1.3.1) en dat de status (true/false) goed wordt doorgegeven binnen de toegankelijkheidslaag (accessibility tree).
Documenten
De knop om documenten privé te maken heeft als naam ‘lock_open_right’. Dit is niet echt duidelijk. Maak hier een goed beschrijvende tekst van.
Communicatie
Onder Communicatie (voordat er contact is geweest): Wanneer je een bericht wilt bewerken, opent een nieuwe pagina met een formulier waarin de berichten staan. Een bericht staat in een knop zonder naam. Voor gebruikers van hulpsoftware is het nu niet duidelijk waar deze knop voor is. Zet de titel van het bericht in de button.
Onder Communicatie (nadat er contact is geweest) staat een lijst met vragen. Deze vragen staan elk in button zonder naam. Binnen deze buttons staan tabellen. De eerste kop is ‘1.done’ (zonder rowspan van 2) en in de datarijen staan de vraag en antwoord. Deze tabelvorm is geen logische opmaak voor deze vragen. Aangeraden wordt om deze tweede button weg te halen en de ‘edit’-button aan te passen in ‘vraag openen’, en de tabelopmaak weg te halen. De vraag en antwoord staan als als tekst binnen een list-item, dat is voldoende.
4.1.3: Statusberichten
Hele sample
Uitkomst: Onvoldoende
Penvoerder
Uitkomst: Onvoldoende
Documenten
Uitkomst: Onvoldoende
Penvoerder
Wanneer een veld niet juist is ingevoerd, bijvoorbeeld het IBAN-nummer, verschijnt er een foutmelding onder het veld. Deze wordt niet doorgegeven aan hulpsoftware. Dit kan worden opgelost door via een role=“status” of het gebruik van live regions voor de statusberichten. Dit komt op veel plekken voor.
Documenten
Bij het uploaden van een document wordt de voortgang getoond in een tekst onder de upload button. Deze tekst wordt niet doorgegeven aan hulpsoftware. Dit kan worden opgelost door via een role=“status” of het gebruik van live regions voor de statusberichten. Zie voor meer info https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#techniques.
