Rapport:
Audit digitale toegankelijkheid website wia.apps.goudse.nl + wia.apps.dezeeuwse.nl

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek die geen tekstalternatief biedt. De onderstaande tabel dekt niet alle informatie van de grafiek. Hierdoor worden blinde gebruikers uitgesloten van deze informatie. Voeg de uitgeschreven tekst of een tabel met informatie uit deze visualisatie toe aan de pagina. Dit kan ook als een downloadbaar bestand. Deze grafiek wordt voorgelezen als losse teksten en zorgt voor een ontoegankelijke ervaring. Daarom is het beter om de grafiek te verbergen voor hulpsoftware met behulp van aria-hidden="true" zodra het tekstalternatief (zoals een tabel met alle informatie) is toegevoegd. Deze aanpak zorgt ervoor dat niet-ziende bezoekers zich kunnen concentreren op de toegankelijke gegevens.
Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/inkomen/ voor de grafiek na het berekenen van “Bereken resultaat”.

Wanneer de pagina https://wia.apps.goudse.nl/link/wia/ wordt ingezoomd naar 400% verschijnt een logo. Dit logo heeft de zichtbare tekst “de Goudse verzekeringen” en is verborgen voor hulpsoftware met role="presentation". Dit maakt het logo ontoegankelijk voor schermlezers. Logo's dragen belangrijke informatie over en moeten toegankelijk zijn voor alle bezoekers. Om dit probleem op te lossen, verwijder het role="presentation" attribuut en geef het logo een tekstalternatief. Dit zorgt ervoor dat schermlezergebruikers dezelfde informatie ontvangen als zichtbare bezoekers.

Op pagina https://wia.apps.goudse.nl/link/inkomen staat een calculator. Wanneer de gegevens zijn ingevuld en op de knop “Afdrukbare versie” is geklikt, verandert de lay-out van de pagina. Op deze pagina staat een logo met de zichtbare tekst “de Goudse verzekeringen” bovenaan de pagina. Het logo is geïmplementeerd als een afbeelding met het <img> element. Deze afbeelding mist echter een tekstalternatief, waardoor het ontoegankelijk is voor schermlezer gebruikers. Dit probleem heeft ook betrekking op succescriterium 4.1.2.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een formulier. In stap 1, naast de invoervelden, staan knoppen met iconen, bijvoorbeeld “€” en anderen. Deze iconen missen een tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop.
Voeg de beschrijving toe via een een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.

Op pagina https://wia.apps.goudse.nl/link/wia staan onder de grafiek icoontjes met een letter “i” die tooltips openen wanneer een bezoeker de muis over deze tooltips beweegt. Deze afbeeldingen hebben geen tekstalternatief.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ is de tekst "Met deze calculator … compenseren" geen koptekst, maar is gemarkeerd met een <h4>-element om de lettergrootte te vergroten.
Ditzelfde probleem wordt waargenomen na het inzoomen tot 400% met de tekst “Voor het beste resultaat raadpleegt u de WIA-calculator van De Goudse op een computer”.
Ook de stappen (1 tot en met 3) onder de grafiek zijn in h4-elementen opgenomen. Op deze pagina zijn dat geen koppen. Het kop-element is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h-element en gebruik een ander element, zoals een p-element.
Hetzelfde probleem wordt waargenomen op de pagina https://wia.apps.goudse.nl/link/aov/ in de tekst "Totaal"; op de pagina https://wia.apps.goudse.nl/link/inkomen/, onder "Resultaat", in de teksten "Huidig jaarinkomen", "Jaarinkomen bij arbeidsongeschiktheid zonder verzekering", "Jaarinkomen bij arbeidsongeschiktheid met Ondernemers-AOV".

Op pagina https://wia.apps.goudse.nl/link/wia/ staan 2 koppen van niveau 4 direct onder elkaar zonder content ertussen. Verwijder het eerste h4-element omdat deze tekst geen kop is.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek. Deze grafiek heeft een legenda die werkt als een groep knoppen, bijvoorbeeld “WIA-AV boven de WIA loongrens”, “WIA-AV onder de WIA loongrens” en andere opties. Deze elementen die als een groep knoppen functioneren, hebben geen semantische relatie tussen elkaar in de HTML. Als het voor een ziende bezoeker duidelijk is dat een groep knoppen of teksten bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek. Deze grafiek heeft een legenda die werkt als een groep knoppen, bijvoorbeeld “WIA-AV boven de WIA loongrens”, “WIA-AV onder de WIA loongrens” en andere opties. Wanneer een optie wordt geselecteerd, ziet deze er anders uit dan de rest. Deze informatie is niet toegankelijk voor blinde en slechtziende gebruikers. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een datatabel. De juiste markup ontbreekt. Een gegevenstabel heeft een rij of kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th-elementen en de gegevens in td-elementen. Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/inkomen/, na het berekenen van “Bereken resultaat”, onder de grafiek.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een groep knoppen (stappen voor het berekenen). Elke knop is een koptekst van niveau 4 zonder inhoud tussen hen. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat een formulier met stappen. De huidige stap ziet er anders uit dan de rest, maar deze informatie ontbreekt in de code. Bezoekers die de pagina laten voorlezen, hebben hierdoor geen toegang tot deze informatie. Zorg voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Bijvoorbeeld, voeg aria-current="true" toe aan de huidige stap.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat een formulier. In stap 2 van het formulier staan groepen met keuzerondjes. Elke elke groep heeft een <label> element, bijvoorbeeld "Aantal jaren bonus:" dat niet expliciet is gekoppeld aan de bijbehorende groep. Het id waarnaar wordt verwezen in de aria-labelledby-attribuut van de radio-groep ontbreekt helemaal in de HTML of komt niet overeen met het juiste of zelfs een bestaand element. Als aria-labelledby wordt gebruikt, moet het verwijzen naar een bestaand element in de HTML dat een betekenisvolle label voor de radio-groep biedt. Deze associatie zorgt ervoor dat schermlezer-gebruikers geïnformeerd worden over het doel van de radio-groep wanneer ze er naartoe navigeren.

De pagina https://wia.apps.goudse.nl/link/wia/ bevat een formulier. In stap 2 van het formulier zijn de <label> elementen bijvoorbeeld "WGA-gatverzekering Plus" en anderen, niet expliciet gekoppeld aan hun bijbehorende selectievakjes. Label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.

De pagina https://wia.apps.goudse.nl/link/wia/ bevat een formulier. In stap 3 staat een kop “Communiceer gekozen product combinatie”, maar deze is niet gemarkeerd als een koptekst. Blinde bezoekers hebben niets aan een (tussen)kop die fungeert als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Zet deze koppen om in heading-elementen.

Op pagina https://wia.apps.goudse.nl/link/wia staan onder de grafiek icoontjes die extra informatie tonen wanneer een bezoeker de muis over deze tooltips beweegt. De tekst van een tooltip is echter niet verbonden met het icoon. De relatie tussen het icoon en de inhoud ontbreekt in de HTML. Hetzelfde probleem is te zien op de pagina https://wia.apps.goudse.nl/link/inkomen/ voor de grafiek onder “Resultaat”.

Het PDF-document op https://wia.apps.goudse.nl/file?guid=55169095435288719&changedDate=1735634718033&name=Brochure-WIA-0-tot-100-Plan(0125881)dec2024.pdf&target=window mist structurele codes, waardoor de inhoud ontoegankelijk is voor schermlezers. Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Advies. Op pagina https://wia.apps.goudse.nl/link/wia/ is de gehele pagina opgemaakt als een meerdere geneste lay-outtabellen. Deze tabellen worden door een schermlezer voorgelezen en zorgen voor onprettige en ontoegankelijke ervaring. De bezoeker hoort steeds: ‘tabel openen’, ‘tabel suiten’. Om de toegankelijkheid te verbeteren, voeg role="presentation" toe aan het <table>-element om ervoor te zorgen dat het niet wordt aangekondigd als een table door schermlezers. Hetzelfde probleem is te zien op alle andere pagina's in de steekproef.

Uitkomst: Onvoldoende

Bevindingen: Alle informatie op pagina https://wia.apps.goudse.nl/link/wia/ wordt voorgelezen in de onlogische volgorde. In de grafiek worden eerst de horizontale datalabels voorgelezen, dan de verticale. In de sectie onder de tabel, bijvoorbeeld in de sliders worden alle labels voorgelezen als een stuk tekst. Zorg voor een logische leesvolgorde van deze pagina.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://wia.apps.goudse.nl/link/wia/ is beperkt tot een enkele weergaveoriëntatie, namelijk liggend (landscape). Websites en apps moeten zowel in verticale (portret) als horizontale (landschap) stand goed werken. Bezoekers moeten de vrijheid hebben om te kiezen welke modus het beste voor hen werkt. Hiervan afwijken mag alleen als één bepaalde stand echt noodzakelijk is. Dit is bijvoorbeeld belangrijk voor mensen die hun tablet aan hun rolstoel hebben gemonteerd en de oriëntatie niet kunnen aanpassen. Zo kunnen zij de app of website gebruiken op de manier die voor hen het handigst is, zonder iets te missen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/inkomen/ verschijnt na het drukken op “Bereken resultaat”, de knop “E-mail verzenden naar adviseur”, die het formulier opent. Onder “Advies van een verzekeringsadviseur” hebben de invoervelden die persoonlijke informatie verzamelen (bijvoorbeeld achternaam, e-mailadres, telefoonnummer) een autocomplete attribuut een onjuiste waarde "on". Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Zie ook https://wia.apps.dezeeuwse.nl/link/inkomen/. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ wordt alleen kleur gebruikt in de grafiek om informatie te verstrekken. Zie de legenda en de balken in de grafiek. Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk of lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken. Hetzelfde probleem wordt waargenomen op de pagina https://wia.apps.goudse.nl/link/inkomen/ voor de grafiek onder "Resultaat".

Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een formulier met de knoppen “Volgende stap” en “Vorige stap”. Deze knoppen hebben een aangepaste toetsenbordfocusindicator die alleen te zien is als een achtergrondkleurverandering. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende, omdat de contrastratio tussen de gefocuste en niet-gefocuste staat van de achtergrondkleur minder dan 3,0:1 is. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
Hetzelfde probleem doet zich voor in de tweede stap. Wanneer zowel de checkboxen “WGA-gatverzekering Plus” als “WGA-gatverzekering” zijn aangevinkt, verschijnt er een modaal venster. De knop “OK” heeft een aangepaste toetsenbordfocusindicator die uitsluitend te zien is als een achtergrondkleurverandering.
Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/inkomen/. Na het berekenen van “Bereken resultaat”, verschijnt de knop “Afdrukbare versie”, die de afdrukbare versie van de resultaten opent. In deze afdrukbare versie van de pagina heeft de knop “Sluiten” een aangepaste toetsenbordfocusindicator met dezelfde probleem.

In het PDF-document op https://wia.apps.goudse.nl/file?guid=55169095435288719&changedDate=1735634718033&name=Brochure-WIA-0-tot-100-Plan(0125881)dec2024.pdf&target=window staat op pagina 10 een grafiek. Kleur wordt gebruikt om informatie te verstrekken. Zie de legenda en de balken in de grafiek. Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken. Hetzelfde probleem doet zich voor bij de grafieken op de pagina's 11, 14-17.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://wia.apps.goudse.nl/link/wia/ wordt witte tekst weergegeven op een blauwe achtergrond (HEX #0099CC) en vice versa. De contrastratio hiervan is 3,3:1. De knop "Volgende stap" bevat witte tekst op een lichtblauwe achtergrond (HEX #48B0F7), met een contrastratio van 2,4:1. Daarnaast hebben knoppen in het onderste menu lichtblauwe tekst (HEX #48B0F7) op een lichtgrijze achtergrond (HEX #ECF1F3), met een contrastratio van slechts 2,1:1. Deze contrastverhoudingen voldoen niet aan de minimale toegankelijkheidseisen. Voor tekst kleiner dan 24 px (of niet vetgedrukt) geldt een minimale vereiste van 4,5:1. Voor grote of vetgedrukte tekst (vanaf 24 px of groter) geldt een minimale ratio van 3,0:1. Hetzelfde probleem met witte en blauwe (HEX#0099CC) combinaties wordt waargenomen op de pagina https://wia.apps.goudse.nl/link/inkomen.

Op pagina https://wia.apps.goudse.nl/link/aov/ staat blauwe tekst (HEX#0099CC) op een lichtgrijze achtergrond (HEX#F8F8F8). De contrastratio is 3,1:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://wia.apps.goudse.nl/index.html staan blauwe (HEX#0099cc) koppen op een grijze achtergrond. Het kleurcontrast is 3,7:1. Dit moet minimaal 4,5:1 zijn.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek met een legenda die dient als een groep interactieve elementen. Bijvoorbeeld, "WIA-AV boven de WIA loongrens", "WIA-AV onder de WIA loongrens" en andere opties. De geselecteerde optie heeft grijze tekst (HEX#A0A3A4) op een lichtgrijze achtergrond (HEX#ECF1F3) met een contrastratio van 2,2:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://wia.apps.dezeeuwse.nl/link/aov, onder de kop "Hoe financier ik mijn AOV?", staat witte tekst, die op sommige plaatsen op een groene (HEX#3A8C7F) semi-transparante achtergrond een lage contrastratio heeft van 4:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

In het PDF-document op https://wia.apps.goudse.nl/file?guid=55169095435288719&changedDate=1735634718033&name=Brochure-WIA-0-tot-100-Plan(0125881)dec2024.pdf&target=window hebben de knoppen op pagina 10 blauwe tekst (HEX#018DBD) op een blauwe achtergrond (HEX#B7DCED). De kleurcontrastratio is te laag: 2,6:1. Op pagina 10 en 11 staat witte tekst op een blauwe achtergrond (HEX#B7DCED), bijvoorbeeld: paginanummer, brochure titel. De contrastratio is 1,4:1. Deze contrastratio voldoet niet aan de minimumvereiste waarde (voor tekst onder een lettergrootte tot 24 px of vetgedrukt, moet de verhouding minstens 4,5:1 zijn, en voor grote tekst vanaf 24 px of vetgedrukt, minimaal 3,0:1).
Dezelfde problemen worden waargenomen op pagina 14-17.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://wia.apps.goudse.nl/link/wia/ wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, wordt de gehele inhoud van de pagina verloren. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://wia.apps.goudse.nl/link/wia/ wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400% of bij een schermbreedte van 320px, gaat de gehele inhoud van de pagina verloren en verschijnt de tekst “Voor het beste resultaat raadpleegt u de WIA-calculator van De Goudse op een computer”.
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Wanneer de pagina https://wia.apps.goudse.nl/link/inkomen/ wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, wordt de tekst onder de grafiek gedeeltelijk verborgen omdat deze wordt bedekt door de knoppen “Afdrukbare versie” en “E-mail verzenden naar adviseur”. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Wanneer de pagina https://wia.apps.goudse.nl/link/aov/ wordt bekeken bij een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt er een scrollbar. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/inkomen/ en op pagina https://wia.apps.goudse.nl/index.html.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ bevat de grafiek balken in verschillende kleuren op een lichtgrijs-blauwe achtergrond (HEX#ECF1F3). De volgende kleuren hebben onvoldoende contrastratio: paars (HEX#A366C2) met een contrastratio van 2,5:1, lichtbeige (HEX#D9C9B1) met een contrastratio van 1,8:1, en tan (HEX#C8B28E) met een contrastratio van 2,3:1; en andere. Deze waarden liggen onder de minimum vereiste van 3,0:1 voor grafische elementen. Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/inkomen/ voor de grafiek onder "Resultaat" met combinaties van violet (HEX#C299D7) op witte achtergrond (2,4:1), grijs (HEX#BABABA) op witte achtergrond (1,9:1).

Op pagina https://wia.apps.goudse.nl/index.html staan invoervelden met grijze randen. De contrastratio tussen de rand en de achtergrond van de pagina is 1,1:1. Dit moet minimaal 3,0:1 zijn.

Op pagina https://wia.apps.goudse.nl/link/inkomen/, na het berekenen van "Bereken resultaat", verschijnt de knop "E-mail verzenden naar adviseur", die het formulier opent. De contrastratio tussen de grijze (HEX#E7E7E9) rand van de invoervelden en de lichtgrijze (HEX#F8F8F8) achtergrond van de pagina is 1,2:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

In het PDF-document op https://wia.apps.goudse.nl/file?guid=55169095435288719&changedDate=1735634718033&name=Brochure-WIA-0-tot-100-Plan(0125881)dec2024.pdf&target=window heeft een grafiek op pagina 10 balken in lichtgrijs (HEX#CECDCD) op een blauwe achtergrond (HEX#B7DCED). De kleurcontrastratio is 1,1:1. Donkergrijze (HEX#818182) balken op dezelfde achtergrond hebben een contrastratio van 2,7:1, wat te laag is. Groene (HEX#C6DC98) balken hebben een contrastratio van 1,1:1, wat ook onvoldoende is. Het contrast tussen informatieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben. Hetzelfde probleem doet zich voor bij grafieken op pagina 11, 14-17.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek. Wanneer een bezoeker met de muis over deze grafiek beweegt, verschijnen er datalabels met informatie. Deze vensters overlappen de pagina-inhoud, bijvoorbeeld de legenda van de grafiek. De bezoeker moet de extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina. Ook, wanneer de bezoeker de muis beweegt over de aanvullende content, verdwijnt die content. De bezoeker zou in staat moeten zijn om de aanvullende content te hoveren zonder dat deze verdwijnt.
Hetzelfde probleem is waarneembaar op de pagina https://wia.apps.goudse.nl/link/inkomen/ onder de kop “Resultaat” voor de grafiek.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ bestaat de legenda van de grafiek uit interactieve elementen, bijvoorbeeld "WIA-AV boven de WIA loongrens", "WIA-AV onder de WIA loongrens", die niet met het toetsenbord kunnen worden genavigeerd of geactiveerd. Alle interactieve componenten moeten bedienbaar zijn met het toetsenbord. Om dit op te lossen, zorg ervoor dat elk element in de legenda toetsenbord toegankelijk is, bijvoorbeeld door <button> te gebruiken. Hetzelfde probleem wordt waargenomen op dezelfde pagina voor interactieve elementen zoals “i” iconen naast invoervelden in het formulier.
Hetzelfde probleem wordt waargenomen op de pagina https://wia.apps.goudse.nl/link/inkomen/ met interactieve “i” iconen.

Op pagina https://wia.apps.goudse.nl/link/wia/ tonen de balken in de grafiek aanvullende informatie wanneer er met de muis overheen wordt bewogen, maar er is geen manier om deze informatie via het toetsenbord te tonen. Hetzelfde probleem wordt waargenomen op de pagina https://wia.apps.goudse.nl/link/inkomen/ met de grafiek.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek. Wanneer op de interactieve elementen in de legenda wordt geklikt, verschijnt er een melding met de tekst "Double click on legend to isolate one trace". Dit bericht zou op de pagina moeten blijven totdat de gebruiker actie onderneemt om het te sluiten. Overweeg om het zichtbaar te maken totdat het handmatig wordt gesloten door de sluitknop.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina's https://wia.apps.goudse.nl/link/wia/ en https://wia.apps.dezeeuwse.nl/link/wia/ hebben dezelfde tekst in het <title>-element van de pagina: “COUNT - Calculator”. De pagina's https://wia.apps.goudse.nl/link/aov/, https://wia.apps.goudse.nl/link/inkomen/, https://wia.apps.dezeeuwse.nl/link/aov en https://wia.apps.dezeeuwse.nl/link/inkomen/ hebben dezelfde tekst in het <title>-element van de pagina: “COUNT - Homepage”.
Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat elke pagina een unieke title-tekst heeft die de inhoud van de pagina nauwkeurig beschrijft.

Het PDF-document https://wia.apps.goudse.nl/file?guid=55169095435288719&changedDate=1735634718033&name=Brochure-WIA-0-tot-100-Plan(0125881)dec2024.pdf&target=window heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de PDF-instellingen een documenttitel ingesteld worden. Als een PDF geopend wordt in een PDF-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de PDF-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het PDF-document.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ krijgen de invoervelden "Leeftijd in jaren" en "Arbeidsongeschiktheid (%)" eerst focus. Dit zijn echter niet de eerste interactieve elementen op de pagina, noch de eerste invoervelden in het formulier. Wanneer de website wordt genavigeerd met behulp van een toetsenbord, moeten interactieve elementen zoals knoppen en invoervelden focus ontvangen in een logische volgorde. Logisch betekent dat de volgorde van focus overeenkomt met de visuele lay-out van de pagina. Als deze volgorde wordt verstoord, kan dit de navigatie belemmeren voor gebruikers die uitsluitend afhankelijk zijn van toetsenborden, zoals mensen met motorische beperkingen, visuele beperkingen of leesstoornissen. Zorg ervoor dat de toetsenbordfocus sequentieel door de elementen beweegt op een manier die overeenkomt met hun visuele plaatsing.

Op pagina https://wia.apps.goudse.nl/link/wia/ zorgt in de tweede stap van het formulier, het klikken op de knop "Overige verzekeringsoplossingen" ervoor dat extra delen van een tabel zichtbaar worden. Na activatie verschuift de toetsenbordfocus echter naar het eerste element van de pagina in plaats van naar de nieuw verschenen sectie van de tabel. Dit verstoort de verwachte focusvolgorde. Om dit probleem op te lossen, moet ervoor worden gezorgd dat de toetsenbordfocus automatisch naar de nieuw onthulde inhoud wordt verplaatst of op de knop blijft na activatie, zodat een logische en naadloze navigatie-ervaring wordt geboden.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ is de toetsenbordfocus niet zichtbaar op de volgende elementen: knoppen met stappen, knoppen met iconen naast invoervelden, bijvoorbeeld “€”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op pagina https://wia.apps.goudse.nl/link/aov/ staat rechtsboven een knop met een gumicoon. De toetsenbordfocus is niet zichtbaar op deze knop. Zorg dat het duidelijk zichtbaar is wanneer interactieve elementen de focus ontvangen.

Op pagina https://wia.apps.dezeeuwse.nl/link/wia/ is de toetsenbordfocus niet zichtbaar op alle knoppen met een groene achtergrond, bijvoorbeeld “Volgende stap”. Hetzelfde probleem doet zich voor op de pagina https://wia.apps.dezeeuwse.nl/link/inkomen/.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een formulier. De invoervelden met zichtbare tekst, bijvoorbeeld “Bruto jaarsalaris (€)”, hebben geen toegankelijke naam. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.
Hetzelfde probleem doet zich voor bij de invoervelden op de pagina's https://wia.apps.goudse.nl/link/aov/ en https://wia.apps.goudse.nl/link/inkomen.

In de afdrukbare versie van de resultaten op de pagina https://wia.apps.goudse.nl/link/inkomen die verschijnt na het invullen van het formulier en het klicken op "Bereken resultaat" en vervolgens op de knop “Afdrukbare versie”, staat een logo met zichtbare tekst “de Goudse verzekeringen” bovenaan de pagina. Het logo is geïmplementeerd als een afbeelding met de rol "button". Deze knop heeft geen toegankelijke naam. Deze mismatch voorkomt dat spraakherkenningssystemen de knop herkennen wanneer gebruikers de zichtbare tekst uitspreken.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek. Wanneer op de interactieve elementen in de legenda wordt geklikt, verschijnt er een melding met de tekst "Double click on legend to isolate one trace". Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een formulier die uit meerdere stappen bestaat. Bij stap 1, wanneer een bezoeker het formulier met onjuiste gegevens indient, verschijnt de foutmelding “Vul een heel bedrag in, zonder komma en centen”. Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zit. Vaak bevat het een ontkenning. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."
Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/aov/ en op de pagina https://wia.apps.goudse.nl/link/inkomen, bijvoorbeeld “U kunt hier alleen getallen van 18 t/m 59 invullen. Ondernemers die jonger of ouder zijn verzekert De Goudse niet” en andere.

Op pagina https://wia.apps.goudse.nl/link/inkomen/ verschijnt na het klikken op “Bereken resultaat” de knop “E-mail verzenden naar adviseur”, die het formulier opent. Het formulier genereert foutmeldingen, bijvoorbeeld “Dit is een verplicht veld”, die de problemen bij het invoeren van gegevens niet adequaat beschrijven. De huidige foutmeldingen zijn instructies (“Dit is een verplicht veld”) in plaats van uitleg over wat er fout is gegaan (“dit veld is niet ingevuld”). Foutmeldingen moeten specifieker zijn en de aard van de fout uitleggen. Verander de teksten van de foutmeldingen, zodat bezoekers weten wat zij niet goed hebben gedaan.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat onder de grafiek een formulier die uit meerdere stappen bestaat. Bij stap 1, wanneer een bezoeker het formulier met onjuiste gegevens indient, verschijnt de instructie “Vul een heel bedrag in, zonder komma en centen”. Deze instructie is echter niet permanent zichtbaar op de pagina; deze verschijnt alleen binnen een foutmelding. Zorg ervoor dat instructies vooraf al zichtbaar en toegankelijk zijn voor alle bezoekers, niet alleen in foutmeldingen. Verplaats de instructie zodat deze permanent zichtbaar is in de buurt van het invoerveld.
Hetzelfde probleem is aanwezig op de pagina https://wia.apps.goudse.nl/link/aov/ en op de pagina https://wia.apps.goudse.nl/link/inkomen, bijvoorbeeld “U kunt hier alleen getallen van 18 t/m 59 invullen. Ondernemers die jonger of ouder zijn verzekert De Goudse niet” en andere.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat een grafiek. Deze grafiek heeft een legenda die dient als knoppen, bijvoorbeeld “WIA-AV boven de WIA loongrens”, “WIA-AV onder de WIA loongrens” en anderen. Deze interactieve elementen hebben niet de juiste rol. Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet.
Daarnaast hebben deze interactieve elementen meerdere toestanden (bijvoorbeeld ingedrukt, niet ingedrukt), maar er ontbreekt een indicatie van hun huidige staat.Hierdoor kan hulpsoftware deze informatie niet doorgeven aan zijn gebruiker. Blinde bezoekers weten daardoor niet wat de toestand is van de knop. Zorg dat de toestand van de knop ook in de code wordt weergegeven.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat in de tweede stap van het formulier, een knop "Overige verzekeringsoplossingen" die extra content open maakt. Hoewel de open of gesloten staat van de content visueel zichtbaar is, wordt deze niet gecommuniceerd naar schermlezers. Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo. Dit kan opgelost worden door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Op pagina https://wia.apps.goudse.nl/link/wia/ staan in de sectie onder de grafiek knoppen met de iconen “i” naast invoervelden. Deze knoppen openen extra inhoud wanneer erop geklikt wordt. Deze knoppen hebben niet de juiste rol, geen toegankelijke naam en geen straataanduiding. Hetzelfde probleem doet zich voor bij dezelfde iconen op de pagina’s https://wia.apps.goudse.nl/link/aov/ en https://wia.apps.goudse.nl/link/inkomen.

De pagina https://wia.apps.goudse.nl/link/wia/ bevat een formulier. In stap 1 staan naast de invoervelden knoppen met iconen zoals het euroteken, kalender en anderen. Deze knoppen hebben geen toegankelijke namen. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

In het formulier op https://wia.apps.goudse.nl/link/wia/ staan iconen met een ‘i’ die tooltips openen. De inhoud van deze tooltips is niet toegankelijk voor een schermlezer.

De pagina https://wia.apps.goudse.nl/link/wia/ bevat een formulier. In stap 2 van het formulier staan selectievakjes zoals “WGA-gatverzekering Plus” en “WIA-aanvullingsverzekering boven de WIA-loongrens”. Deze selectievakjes hebben geen toegankelijke naam. Omdat dit onduidelijk is voor blinde of slechtziende bezoekers die een schermlezer gebruiken, is het belangrijk dat selectievakjes altijd een toegankelijke naam hebben die hun doel beschrijft. Zorg ervoor dat het selectievakje een toegankelijke naam krijgt, bijvoorbeeld door een <label>-element aan het selectievakje te koppelen. In stap 2 staan radiobuttons met groepslabels. Deze labels zijn niet verbonden met de groep waardoor hulpsoftware de relatie tussen het label en de groep niet kan begrijpen.

Op pagina https://wia.apps.goudse.nl/link/wia/ staat een formulier. De invoervelden hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.
Hetzelfde probleem doet zich voor bij de invoervelden op de pagina's https://wia.apps.goudse.nl/link/aov/ en https://wia.apps.goudse.nl/link/inkomen.

Op de afdrukbare versie van de resultaten op de pagina https://wia.apps.goudse.nl/link/inkomen, staat een logo met de zichtbare tekst “de Goudse verzekeringen” bovenaan de pagina. Het logo is geïmplementeerd als een afbeelding met de rol "button". Deze knop heeft geen toegankelijke naam. Interactieve elementen zoals knoppen moeten een toegankelijke naam hebben om ervoor te zorgen dat hun functionaliteit duidelijk is.

Op pagina https://wia.apps.goudse.nl/link/inkomen staat in het formulier, onder de tekst “Inschatting percentage arbeidsongeschiktheid” een slider. Deze slider heeft geen toegankelijke naam. Hetzelfde probleem doet zich voor op de pagina https://wia.apps.goudse.nl/link/wia/, in stap 1.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wia.apps.goudse.nl/link/wia/ staat een formulier. Wanneer de waarde in het invoerveld "Arbeidsongeschiktheid (%)" wordt gewijzigd, worden de grafiek en de tabel dynamisch bijgewerkt. Er wordt echter geen statusbericht verstrekt om blinde bezoerks te informeren over deze wijzigingen, en de focus verschuift niet naar de bijgewerkte inhoud. Dit laat gebruikers van hulpsoftware onwetend over de updates en zorgt ervoor dat ze de nieuwe informatie niet kunnen vinden. Voor alle dynamische updates moet een statusbericht worden geïmplementeerd met behulp van aria-live regio’s of door het toevoegen van role="status". Hetzelfde probleem doet zich voor bij de interactieve elementen in de legenda op dezelfde pagina. Het activeert een pop-up met de tekst "Dubbelklik om een trace te isoleren", maar er is geen statusbericht.

Op pagina https://wia.apps.goudse.nl/link/inkomen/ verschijnt na het klikken op "Bereken resultaat" de knop “E-mail verzenden naar adviseur”, die het formulier opent. Het formulier toont een succesbericht na het indienen, "Bedankt voor het versturen van … af met uw adviseur", zonder dat de pagina herlaad, en de focus van het toetsenbord wordt niet naar het bericht verplaatst. Dit bericht wordt niet als statusbericht voorgelezen. Daarom is extra code nodig zodat schermlezers het statusbericht automatisch voorlezen zodra het verschijnt. Voeg aria-live="polite" of role="status" toe aan de melding. Meer informatie overrole="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.

Op pagina https://wia.apps.goudse.nl/index.html wanneer in het invoerveld onder “AOV-premie per maand (€)” een waarde wordt ingevuld, verschijnt in het veld onder “AOV premie per jaar (€)” een berekening. Dit is een statusbericht, maar wordt niet als dusdanig voorgelezen.