Uitkomst: Onvoldoende

Bevindingen:

Met "Rotterdam" als woonplaats, wanneer een gebruiker terug gaat naar Geldplan Werkloosheid: Bovenin staat "Huidige woonplaats: "Rotterdam"." Onderin staat een blok met de titel "Nibud" en de tekst "De gemeente Rotterdam stelt deze geldplannen beschikbaar aan haar inwoners [...]" en het logo van Gemeente Rotterdam. Dit logo heeft de alt-tekst "Nibud", dat klopt niet.

In de desktop weergave: De header bevat een Nibud logo met alt-tekst "Dit geldplan wordt mede aangeboden door Nibud". Ook is er een logo van Startpunt geldzaken met de alt-tekst "Startpuntgeldzaken logo". De alt-tekst van het Nibud logo geeft niet weer wat op de afbeelding te zien is. Dit kan beter zijn "Nibud, logo". Bij Startpunt Geldzaken kan het beter zijn "Startpunt Geldzaken, logo". Zie ook 2.4.4.

In de mobiele weergave: De header bevat een Nibud logo met de alt-tekst "Nibud". De header bevat ook een afbeeldings-tag met een niet werkende link voor het logo van Startpunt Geldzaken. De tag heeft als alt-tekst "Dit geldplan wordt mede aangeboden door Startpuntgeldzaken logo". De alt-tekst van het Nibud logo geeft niet weer wat op de afbeelding te zien is. Dit kan beter zijn "Nibud, logo". Bij Startpunt Geldzaken kan het beter zijn "Startpunt Geldzaken, logo". Zie ook 2.4.4.

De grafiek in stap 2 ("Bekijk hoe je inkomen verandert en check de acties") wordt door de screenreader voorgelezen als "Visuele impressie van De hoogte van het inkomen en de uitgaven". Dat geeft niet weer wat een ziende persoon kan waarnemen. Suggestie: bied de data ook als tabel aan, zodat er een tekst alternatief is.

In stap 2, bijvoorbeeld onder "Check of je recht hebt op een uitkering" staan links. De links openen in een nieuw tabblad. Voor ziende gebruikers is een icoon toegevoegd, een vierkant met een pijl naar rechts boven, om aan te geven dat dit in een nieuw tabblad opent. Voor gebruikers die niet kunnen zien moet dit ook kenbaar gemaakt worden. Suggestie: voeg screen-reader-only tekst toe na de zichtbare tekst. Dus "UWV <span class="sr-only">link opent in een nieuw tabblad</span>".

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Onvoldoende

Bevindingen:

In stap 2 is een uitklap-knop met de tekst "Uitleg over de figuur". De tekst die hieronder valt heeft veel onderstreepte passages. De visuele onderstreping geeft aan dat deze tekst extra belangrijk is. Het element <u> wat hier gebruikt is is qua semantiek niet geschikt voor het doel om tekst te highlighten. Voor het highlighten van een kort stuk tekst is doorgaans <em> of <strong> geschikter. Voor gebruikers die kunnen zien kan het verwarrend zijn dat tekst onderstreept is die gaan link is. Het is een zeer lang bestaande conventie dat onderstrepet tekst een link bevat. Suggestie: gebruik <em> en andere styling, bijvoorbeeld dikgedrukte tekst zonder onderstreping. Gebruik dit alleen voor korte stukjes tekst (delen van een zin), zoals hier het geval is.

In stap 2 onder "Je inkomen bij werkloosheid" zijn sommige teksten dikgedrukt. Hiervoor is het HTML-element <b> gebruikt, dat heeft geen semantieke waarde. Gebruikers van hulptechnologieën weten dus niet dat de dikgedrukte tekst extra nadruk moet hebben. Suggestie: gebruik <strong>. Gebruik dit alleen voor korte stukjes tekst (delen van een zin), zoals hier het geval is.

Het is mogelijk om het actieplan als pdf te downloaden. De PDF is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Software kan daardoor bijvoorbeeld niet bepalen wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en ALT-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bij de lijst met "bereidt voor op de inkomensterugval" geeft schermlezer in Safari de lijstsemantiek niet weer. Advies: voeg role="list" toe aan de <ul> zodat het voor gebruikers die blind zijn ook duidelijk is dat het om een lijst gaat.

Uitkomst: Onvoldoende

Bevindingen:

Bij het voorlezen van de site met schermlezer krijgt men na de skiplink het volgende te horen: "Opent in een nieuw tablad Opent een externe site Opent een externe site in een nieuw tablad". Dit is verwarrend. Let er ook op dat het woord "tablad" verkeerd gespeld is.

Uitkomst: Onvoldoende

Bevindingen:

Er staat een instructie bij de grafiek in stap 2 ("Bekijk hoe je inkomen verandert en check de acties"): "Tip: beweeg de muis over de puntjes in de figuur om de bedragen te zien." Hier moeten ook instructies voor andere input-methodes staan (touch / keyboard).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Bij de grafiek in stap 2 ("Bekijk hoe je inkomen verandert en check de acties") is er tussen verschillende types inkomen alleen door kleur onderscheid gemaakt. Mensen die kleurenblind zijn kunnen mogelijk het verschil niet zien.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

De modal "Geef je woonplaats op om Geldplan Werkloosheid optimaal te benutten" heeft een knop met onvoldoende contrast. De knop heeft een oranje (#e26b0a) achtergrond en witte tekst "Overslaan". Het contrast is nu 3.3:1, dat moet minstens 4.5:1 zijn.

In het formulier verschijnt op de titels van de uitklappers bij foutieve invoer een melding "Nog niet alle velden zijn ingevuld". Deze rode (#f00) tekst heeft een te laag kleurcontrast (4:1). Minimum kleurcontrast bij normale tekst is 4.5:1. Te laag kleurcontrast kan ervoor zorgen dat mensen met visuele beperkingen deze melding niet kunnen lezen. Hetzelfde geldt voor de tekst "Dit veld is verplicht" die onder niet-ingevulde velden verschijnt. Het contrast is daar 3.7:1 ipv de minimumwaarde 4.5:1.

In stap 3, de actiepuntenlijst: nadat je op "afgerond" hebt geklikt wordt de knop groen (#5cb85c) met witte tekst. Het contrast van de tekst is te laag (2.5:1). Dat moet minstens 4.5:1 zijn.

Uitkomst: Onvoldoende

Bevindingen:

Bij alleen-tekst-zoom tot 200% en scherm-breedte 1280px: teksten lopen door elkaar en worden onleesbaar in de woonplaats modal.

Bij alleen-tekst-zoom tot 200% en scherm-breedte 1280px: In het blok over "Sterre" valt het meeste van de tekst weg.

Bij alleen-tekst-zoom tot 200% en scherm-breedte 1280px: In de footer valt inhoud van het scherm en is niet meer te zien

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Bij pagina-zoom tot 400% en scherm-breedte 1280px: Lange woorden in de footer ("huishoudportemonnee") worden niet afgebroken en vallen van het scherm af.

Bij pagina-zoom tot 400% en scherm-breedte 1280px: De tekst-labels van de "opslaan", "vorige", "volgende", "print" en "pdf" knoppen verdwijnen.

Bij pagina-zoom tot 400% en scherm-breedte 1280px: Bij sommige punten van de actie-lijst valt het groene vinkje van afgeronde acties van het scherm.

Uitkomst: Onvoldoende

Bevindingen:

In stap 3, de actiepuntenlijst, verschijnt naast de titel een groen (#00b388) vinkje wanneer een actiepunt is afgerond. Het kleurencontrast van dit vinkje is te laag (2.7:1). Dit moet minstens 3:1 zijn. Zie ook 4.1.3.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Bij de grafiek in stap 2 ("Bekijk hoe je inkomen verandert en check de acties") kan je op "Loon", "WW-uitkering", "Bijstand" en "Toeslagen" klikken om de weergave te veranderen. Dit werkt niet met het toetsenbord.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

De paginatitel is "Werkloosheid - Nibud". Deze titel staat in de <head> sectie van de HTML. Dit geeft niet voldoende weer wat de inhoud van de pagina is. Bij het uitlezen van een webpagina lezen schermlezers deze tekst als eerste voor, waardoor schermlezergebruikers direct weten op welke pagina ze zich bevinden. Het wordt ook de naam van het venster of tabblad, en de naamsuggestie bij het opslaan van de pagina als bladwijzer. Daarom is het belangrijk dat de titel goed de inhoud van de pagina beschrijft.

Uitkomst: Onvoldoende

Bevindingen:

Bij het openen van een geldplan in twee browsers verschijnt een melding "Een ander persoon werkt ook aan dit geldplan." De toetsenbord-focus blijft in het formulier en gaat niet naar de sluiten knop van de melding. Als de gebruiker verder tabt blijft de focus in het formulier onder de melding. Hierdoor kan het navigeren met het toetsenbord lastig worden.

Het formulier bevat veel "uitklappers". Alle velden in de ingeklapte secties zijn met het toetsenbord bereikbaar ook al zijn ze niet te zien.

Bij het klikken op "vorige" of "volgende" scrolt het bovenste deel van de pagina in beeld. Maar de focus blijft onderaan. Nadat de "volgende" knop wordt geactiveerd tabt de gebruiker door naar het Nibud logo in de footer. Suggestie: verplaats na een klik op "volgende" de focus naar boven, bijvoorbeeld op de titel van de huidige stap.

Uitkomst: Onvoldoende

Bevindingen:

In de desktop weergave: De header bevat twee links naar https://geldplanwerkloosheid.nibud.nl, de een staat op een Nibud logo en de ander op een logo van Startpunt geldzaken. De link op het Nibud logo heeft als toegankelijke tekst "Dit geldplan wordt mede aangeboden door Nibud". Dit geeft geen goede indicatie van wat er te zien is en waar de link voor dient. Beter zou zijn "Nibud, logo, ga naar voorpagina Geldplan Werkloosheid". Voor het logo van Startpunt Geldzaken is de situatie vergelijkbaar. De toegankelijke tekst is "Startpuntgeldzaken logo". Dit geeft weer wat te zien is (met een ontbrekende spatie, wat het voor de schermlezer software moeilijk maakt). Maar het geeft niet weer waar de link toe dient. Beter zou zijn "Startpunt Geldzaken, logo, ga naar voorpagina Geldplan Werkloosheid". De tekst "ga naar [x]" kan je als screen reader only tekst toevoegen aan de link. Zie ook 1.1.1.

In de mobiele weergave: De header bevat twee links naar https://geldplanwerkloosheid.nibud.nl, de een staat op een Nibud logo en de ander op een logo van Startpunt geldzaken. De link op het Nibud logo heeft als toegankelijke tekst "Nibud". Dit geeft geen goede indicatie van wat er te zien is en waar de link voor dient. Beter zou zijn "Nibud, logo, ga naar voorpagina Geldplan Werkloosheid". Voor het logo van Startpunt Geldzaken is de situatie vergelijkbaar. De toegankelijke tekst is "Dit geldplan wordt mede aangeboden door Startpuntgeldzaken logo". Deze zin klopt gewoon niet (en er ontbreekt een spatie tussen Startpunt en Geldzakenspatie, wat het voor de schermlezer software moeilijk maakt). Beter zou zijn "Startpunt Geldzaken, logo, ga naar voorpagina Geldplan Werkloosheid". De tekst "ga naar [x]" kan je als screen reader only tekst toevoegen aan de link. Advies: Check de link van het Startpunt Geldzaken logo op mobiel, die klopt niet. Zie ook 1.1.1.

In stap 2 onder "Vraag hulp, zoals voor uitstel van betaling" is een link met de naam "zelfjeschuldenregelen.n" (de "l" erachter is niet onderdeel van de link). De link gaat echter naar de website van Nibud. Dit maakt dat het linkdoel niet goed beschrijvend is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

De modal "Geef je woonplaats op om Geldplan Werkloosheid optimaal te benutten" bevat een suggesties-menu. Deze geeft ook alerts voor gebruikers die blind zijn, dat is heel goed! Alleen verschijnen de meldingen in het Engels: "11 results are available, use up and down arrow keys to navigate." De Engelse tekst moet in de code als Engels gemarkeerd worden of (beter) in het Nederlands verschijnen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Op de voorpagina onderaan staat een "Meer over Nibud" blok. Dit blok bevat hetzelfde icon dat elders gebruikt is om "opent in een nieuw tabblad" aan te geven. Maar deze link opent niet in een nieuw tabblad. Zie ook 1.3.1 Info en relaties.

In stap 2 onder "Check of je recht hebt op een uitkering" staan twee links met de toegankelijke naam "UWV". De links gaan echter naar twee verschillende pagina's. Daarom moeten ook twee verschillende linknamen gebruikt worden.

Uitkomst: Onvoldoende

Bevindingen:

In het formulier verschijnt op de titels van de uitklappers bij foutieve invoer een melding "Nog niet alle velden zijn ingevuld". Deze melding wordt niet voorgelezen aan gebruikers van schermlezer software.

Wanneer een gebruiker bijvoorbeeld het datum-veld niet invult verschijnt een rode tekst "Dit veld is verplicht". Dit is geen duidelijke foutmelding. Een foutmelding informeert de gebruiker over fouten die hij of zij gemaakt heeft bij het invullen. "Je hebt dit veld niet ingevoerd." Controleer ook de overige formuliervelden.

Uitkomst: Onvoldoende

Bevindingen:

De modal "Geef je woonplaats op om Geldplan Werkloosheid optimaal te benutten" bevat een suggesties-menu. Deze geeft instructies voor een gebruiker die blind is. Deze instructies worden te vroeg afgekapt door andere teksten.

Voor de tekst "Sterre Met een WW-uitkering heb ik misschien recht op toeslagen. Dat ga ik nu uitzoeken!" leest schermlezer nog voor "1 van 1, slide". Dit kan verwarrend zijn. En voor ziende gebruikers ontbreekt de informatie dat dit een slideshow is met één slide volledig. Advies: haal alle slideshow logica weg als er maar één item is.

In het formulier staan vraagtekens die "tooltips" met informatie laten verschijnen. Dat werkt in Safari momenteel uitsluitend voor ziende toetsenbordgebruikers. Een muisklik wordt niet geregistreerd. De inhoud van de tooltip wordt door schermlezer niet voorgelezen (ondanks dat de tooltip met aria-describedby gekoppeld is aan de input, omdat de tooltip op het moment dat het invoerveld de focus heeft op aria-hidden gezet wordt). In Firefox en Chrome werkt de klik wel. Advies: Zet de tekst als altijd zichtbare instructie naast het bijbehorende label en koppel hem via aria-describedby aan de input.

Het juiste datum-formaat wordt niet weergegeven voor gebruikers van schermlezer. Omdat de datumkiezer niet opent dmv het toetsenbord kunnen schermlezer gebruikers geen datum invullen. Advies: Geef het juiste formaat weer in een label of description.

"Wanneer een gebruiker de schermlezer gebruikt om de hele pagina voor te lezen werkt dat niet. Gebruikers van schermlezer software krijgen niet altijd alles te horen (en soms te veel).

• Soms wordt alleen de eerste vraag voorgelezen (""Welke situatie is op jou van toepassing?"") en de rest van het formulier overgeslagen, ook vragen die al zichtbaar in beeld verschijnen. De knop ""Vorige"" onderaan is dan het volgende element wat voorgelezen wordt.
• Soms is de output van de schermlezer dubbelop: ""Op welke datum is je eerste werkloosheidsdag? (Deze vraag is verplicht) Op welke datum is je eerste werkloosheidsdag? (Deze vraag is verplicht) Vraagteken Op welke datum is je eerste werkloosheidsdag? (Deze vraag is verplicht) Kies Datum"".
• Soms worden vragen voorgelezen die verborgen zijn achter een ingeklapte sectie. "

De eerste combobox ("dropdown") voor de leeftijd van kinderen heeft als onzichtbaar label "Leeftijd eerste kind Leeftijd tweede kind Leeftijd derde kind Leeftijd vierde kind Leeftijd vijfde kind Leeftijd zesde kind" wanneer er zes kinderen ingesteld zijn. Dit is voor gebruikers van een schermlezer onduidelijk.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Bij het toevoegen van kinderen wordt niet voorgelezen hoe veel kinderen ingesteld zijn. Er wordt ook niks verteld over de "leeftijd" velden die eronder verschijnen.

Naast het Leeftijd veld staat per regel een prullenbak knop met de toegankelijke tekst "Verwijder Leeftijd [xde] kind". Maar je verwijdert niet de leeftijd. Het hele kind/de hele regel wordt verwijderd. En het aantal in het "Aantal" veld wordt met 1 verminderd. Dit wordt niet aangegeven voor gebruikers van een schermlezer.

De <div> waar de datepicker in zit heeft een fout ARIA attribuut: aria-expanded. Dat mag alleen op knoppen zitten die iets bedienen wat in- en/of uitgevouwen kan worden.

De radio inputs in het formulier hebben foutieve opmaak. Om de inputs zit het label element heen. Dat is valide HTML. Maar het label element heeft een role="radio" attribuut. Dit maakt semantisch gesproken een radio input van het label. En in deze input/label genest is dan nog het <input> element. Een interactief element in een ander interactief element kan voor problemen zorgen met hulptechnologieën omdat onduidelijk is welk element de voorrang krijgt bij een interactie.

In stap 2 is een uitklap-knop met de tekst "Uitleg over de figuur". Deze knop heeft altijd het attribuut aria-expanded="false", ook wanneer die uitgeklapt is. Als de bijbehorende informatie zichtbaar is moet aria-expanded de waarde "true" krijgen.

Het <header> element heeft een attribuut role="navigation". Deze rol is niet toegestaan voor het <header> element.

Het element met de id "modalResidenceCheck" heeft een attribuut aria-labelledby="Woonplaats check". aria-labelledby dient als waarde de id van een element op de pagina te bevatten. Het is bovendien niet nodig om dit element een label te geven.

Uitkomst: Onvoldoende

Bevindingen:

Bij het tegelijk openen van een geldplan in twee verschillende browser-vensters verschijnt een melding "Een andere persoon werkt ook aan dit geldplan." Deze melding wordt niet weergegeven via schermlees software.

Na klik op de "Opslaan" knop opent een modal. Bij klik op de "Link kopiëren" knop verandert de tekst in "Gekopiëerd". Dit wordt niet voorgelezen aan een gebruiker van schermlezer software. In plaats daarvan wordt de URL https://geldplanwerkloosheid.nibud.nl/?residenceId=23488254-7075-0c7d-07dc-36124d8495b6&mpwui=2edb9e5b-8591-4a51-bf57-01dd86fb3441&pane=0&mpwui=2edb9e5b-8591-4a51-bf57-01dd86fb3441 voorgelezen. Deze URL is lang en bestaat vooral uit willekeurige letters en cijfers, een slechte ervaring voor schermlezer gebruikers. Suggestie: zorg ervoor dat "gekopiëerd" voorgelezen wordt en niet de URL. Dit speelt ook bij Stap 3 onderaan.

In stap 3, de actiepuntenlijst, verschijnt naast de titel een groen vinkje wanneer een actiepunt is afgerond. Deze status wordt niet voorgelezen voor een persoon die schermlezer software gebruikt. Suggestie: Voeg in de heading screen reader only tekst toe met de tekst "Afgerond". Zie ook 1.4.11.