Rapport:
Audit digitale toegankelijkheid website Mijn Polissen Nh1816

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home is een decoratieve achtergrondafbeelding toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Omdat deze afbeelding puur decoratief is en geen betekenis overdraagt, moet het alt-attribuut leeg zijn (alt=""). Dit zorgt ervoor dat schermlezers de afbeelding negeren en zich kunnen concentreren op de belangrijkste inhoud van de pagina.

Op alle pagina’s van de site, inclusief https://mijn-polissen.nl/home, is het logo geïmplementeerd met een img-element zonder alt-attribuut. Dit zorgt ervoor dat schermlezers de bestandsnaam van de afbeelding voorlezen, wat verwarrend kan zijn voor gebruikers. Voeg een duidelijke alt-tekst toe aan dit logo, bijvoorbeeld alt="Logo Nh1816 Verzekeringen", zodat bezoekers die de afbeelding niet kunnen zien toch weten wat er staat. Zie ook succescriterium 2.4.4 voor aanvullende eisen ten aanzien van de links.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht (behalve https://mijn-polissen.nl/home) fungeert het bel-icoon in de header als een link, maar het tekstalternatief ontbreekt. Dit maakt de link ontoegankelijk voor gebruikers van schermlezers. Om dit te corrigeren, voeg een tekstalternatief toe aan het bel-icoon dat beschrijft waar de link naartoe leidt, zoals aria-label="Notificaties". Dit icoon is een SVG-element en dan kan de alternatieve tekst ook worden toegevoegd via het title-element binnen de SVG, maar zorg ervoor dat aria-hidden="true" niet is ingesteld, anders blijft de inhoud verborgen voor schermlezers. Dit probleem doet zich ook voor met het persoon-icoon op kleine schermen.

De knop “Help” op https://mijn-polissen.nl/home opent een dialoogvenster met secties die verborgen inhoud bevatten. De “+” en “−” iconen die de status van deze secties aangeven, hebben geen tekstalternatief. Zie ook succescriterium 4.1.2 voor meer informatie en een oplossingssuggestie.
Dit probleem komt ook voor op de pagina https://mijn-polissen.nl/meer/vragen, bijvoorbeeld bij de vraag “Waarom staat mijn schadeherstelbedrijf niet tussen de zoekresultaten?”.

Op pagina https://mijn-polissen.nl/verzekeringen fungeert het “+” icoon als een link om de consultatiepagina te openen, maar dit mist een tekstalternatief. Voeg een aria-label toe met een beschrijving van de link, zoals aria-label="Open consultatiepagina", zodat schermlezers duidelijk kunnen aangeven wat de functie van deze link is.

Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies, verschijnt een knop met een prullenbak-icoon wanneer een tweede verzekering wordt toegevoegd. Dit icoon heeft geen tekstalternatief, wat betekent dat schermlezers niet kunnen aangeven wat de functie van de knop is. Omdat deze knop alleen uit een afbeelding bestaat, moet de alternatieve tekst de functie van de knop beschrijven, bijvoorbeeld aria-label="Verzekering verwijderen". Dit kan ook worden toegevoegd met een title-element binnen de SVG, maar zorg ervoor dat de SVG niet verborgen is met aria-hidden="true".
Ditzelfde probleem doet zich voor op de pagina https://mijn-polissen.nl/schade-melden/schadeformulier, met het icoon “i” naast het label “Voeg bijlage(n) toe”.

Op pagina https://mijn-polissen.nl/overzicht, onder de kop “Goedemiddag, Ad”, is een decoratieve afbeelding niet verborgen voor schermlezers. Dit kan verwarrend zijn, omdat deze afbeelding geen betekenisvolle informatie biedt. Verberg de afbeelding voor schermlezers door aria-hidden="true" toe te voegen aan dit svg-element.
Dit probleem doet zich ook voor op de pagina https://mijn-polissen.nl/verzekeringen, onder de kop “Mijn pakket”, en op de pagina https://mijn-polissen.nl/dossier/mijn-schades, onder de kop “Mijn schades”.

Op pagina https://mijn-polissen.nl/overzicht, op een klein scherm, toont het logo de volledige tekst “Nh 1816 Verzekeringen”, maar de alt-tekst is alleen “Logo”. Dit is niet voldoende, omdat de volledige tekst die in het logo te zien is ook in het tekstalternatief moet staan. Pas de alt-tekst aan naar “Logo Nh 1816 Verzekeringen” zodat bezoekers die de afbeelding niet kunnen zien, toch precies weten wat er staat.

Op pagina https://mijn-polissen.nl/ledenvoordelen, in de sectie met “Ledenvoordelen”, zijn decoratieve afbeeldingen aanwezig zonder alt-attribuut. Deze afbeeldingen dragen geen betekenis over en moeten daarom verborgen worden voor schermlezers. Gebruik hiervoor een leeg alt-attribuut (alt="").
Dit probleem doet zich ook voor op de pagina’s https://mijn-polissen.nl/ledenvoordelen/65 en https://mijn-polissen.nl/ledenvoordelen/64.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home is de tekst “Welkom” visueel opgemaakt als een kop, maar is niet correct gemarkeerd met een HTML-kopniveau zoals h1, h2 of h3. Dit zorgt ervoor dat gebruikers van hulpsoftware de tekst niet als een kop kunnen herkennen, waardoor de structuur van de pagina minder duidelijk wordt. Markeer deze tekst correct met een kop-element om de semantische structuur van de pagina te verbeteren.

De knop “Help” op https://mijn-polissen.nl/home opent een dialoogvenster waarin de tekst “Help” ook visueel als een kop wordt weergegeven, maar niet als zodanig is gemarkeerd in de code. Markeer ook deze tekst met een passend kopniveau, zoals h2 of h3, om consistentie te waarborgen.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, is de tekst “Agentschap personeel” in de zijbalk niet als kop gemarkeerd. Dit moet gecorrigeerd worden door de tekst op te maken als een kop (h1-h6), zodat de inhoud correct wordt gestructureerd voor schermlezers.

Op pagina https://mijn-polissen.nl/overzicht zijn de teksten “Goedemiddag, Ad”, “Mijn pakket”, “Schade melden”, “Schadehersteller”, “Mijn dossier” en “Wat te doen bij” visueel opgemaakt als koppen, maar zijn niet programmatisch als zodanig gemarkeerd.
Ditzelfde probleem doet zich voor op de pagina https://mijn-polissen.nl/verzekeringen, met teksten zoals “Mijn pakket”, “Personenauto”, “Woonhuis” en “Inboedel”.

Op de pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies ontbreekt een kopmarkering voor de tekst “Ik wil graag verzekeringsadvies”, en op de pagina https://mijn-polissen.nl/ledenvoordelen/65 is de tekst “Forteiland Pampus voor € 7,50 p.p.” niet correct als kop gemarkeerd.

Op pagina https://mijn-polissen.nl/home opent de knop “Help” een dialoogvenster waarin secties met verborgen inhoud geen correcte kopmarkering hebben voor de elementen die de verborgen inhoud openen en sluiten. Deze teksten fungeren als koppen voor de uitklapbare secties en moeten daarom worden gemarkeerd met een passend kopniveau, zoals h2 of h3.
Dit probleem doet zich ook voor op de pagina https://mijn-polissen.nl/meer/vragen, bijvoorbeeld bij “Waarom staat mijn schadeherstelbedrijf niet tussen de zoekresultaten?” en andere uitklapbare vragen.

Op pagina https://mijn-polissen.nl/home bevat een formulier met label-elementen voor “E-mailadres” en “Wachtwoord” die niet correct zijn gekoppeld aan hun bijbehorende invoervelden. Gebruik het for-attribuut op de label-elementen en zorg ervoor dat de id-attributen van de bijbehorende invoervelden overeenkomen met deze for-attributen. Hierdoor worden de velden correct gekoppeld, wat de toegankelijkheid en gebruiksvriendelijkheid van het formulier verbetert.

Op pagina https://mijn-polissen.nl/home verschijnt de foutmelding “Er is iets misgegaan. Probeer het later opnieuw.” wanneer een wachtwoord wordt ingevoerd dat niet overeenkomt met het opgegeven e-mailadres. Deze foutmelding staat echter buiten het form-element, waardoor deze mogelijk niet correct wordt voorgelezen door schermlezers. Plaats de foutmelding binnen het form-element en koppel deze aan het invoerveld met behulp van een aria-describedby-attribuut. Dit zorgt ervoor dat de foutmelding altijd wordt aangekondigd wanneer een gebruiker door het formulier navigeert.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, verschijnt in de zijbalk een groep elementen met teksten zoals “Overzicht”, “Mijn dossier”, “Mijn verzekeringen”, “Adviseur”, “Ledenvoordelen” en “Meer”. Deze elementen worden visueel als een samenhangende groep gepresenteerd, maar dit wordt niet correct weerspiegeld in de HTML-structuur. Gebruik een ul- of ol-element om deze elementen als een echte groep te markeren, zodat de samenhang duidelijk is voor zowel visuele bezoekers als gebruikers van schermlezers.

Op pagina https://mijn-polissen.nl/verzekeringen/polis/8000106001, op een klein scherm, lijken de knoppen “Details”, “Dekkingen” en “Meer” visueel bij elkaar te horen, maar deze relatie wordt niet duidelijk aangegeven in de HTML-structuur. Plaats deze knoppen in een ul-element om duidelijk te maken dat deze knoppen als een groep functioneren.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier worden foutmeldingen voor de invoervelden “Geef een gedetailleerde omschrijving van de schade” en “Wat is uw telefoonnummer?” weergegeven, maar deze foutmeldingen zijn niet correct gekoppeld aan de bijbehorende invoervelden. Schermlezers in 'formulier'-modus kunnen deze foutmeldingen daardoor overslaan. Gebruik een aria-describedby-attribuut op de invoervelden dat verwijst naar het id-attribuut van de foutmelding, zodat de relatie tussen de foutmelding en het invoerveld duidelijk is voor gebruikers van hulpsoftware.

Op pagina https://mijn-polissen.nl/ledenvoordelen/65, onder “Forteiland Pampus voor € 7,50 p.p.”, zijn de teksten “Voorwaarden” en “Ticket bestellen:” onjuist opgemaakt met strong-elementen in plaats van koppen, zoals h2 of h3. Het strong-element is bedoeld voor het benadrukken van tekst, maar niet voor het markeren van sectiekoppen. Vervang deze elementen door echte kop-elementen om de semantische structuur van de pagina te verbeteren en de navigatie voor gebruikers van schermlezers te optimaliseren.

Op pagina https://mijn-polissen.nl/meer/gebruiksvoorwaarden, onder de kop “Definities”, staat een lijst met 10 items, en onder de kop “Doel van de Verzekeringsapp” staat een lijst met 6 items, maar beide lijsten zijn niet correct opgemaakt als HTML-lijsten. Dit betekent dat de structuur van deze inhoud niet correct wordt overgebracht naar schermlezers, die dan niet kunnen aangeven hoeveel items in de lijst staan of wanneer de lijst begint en eindigt. Gebruik de juiste HTML-elementen voor deze opsommingen, zoals <ol> voor genummerde lijsten of <ul> voor lijsten met bullets. Dit zorgt ervoor dat de inhoud correct wordt aangekondigd en gestructureerd voor gebruikers van hulpsoftware.

Op pagina https://mijn-polissen.nl/verzekeringen/polis/8000106001, op een klein scherm, zijn de knoppen “Details”, “Dekkingen” en “Meer” visueel zo opgemaakt dat de actieve knop duidelijk te onderscheiden is van de andere knoppen. Echter, deze visuele status is niet doorgevoerd in de code. Dit betekent dat bezoekers die schermlezers gebruiken niet kunnen horen welke sectie momenteel actief is. Voeg aria-current="true" toe aan de actieve knop om deze status ook programmatisch duidelijk te maken.

Het PDF-document op https://voorwaarden.nh1816.nl/03618.pdf mist structurele codes (tags), zoals semantische koppen, lijsten en alternatieve teksten voor afbeeldingen. Dit maakt de inhoud van het document ontoegankelijk voor schermlezers, omdat deze de structuur niet correct kunnen interpreteren. Voeg een correcte codelaag toe aan dit document om ervoor te zorgen dat de inhoud toegankelijk is voor alle gebruikers. Houd er rekening mee dat na het toevoegen van deze structuur mogelijk nieuwe toegankelijkheidsproblemen aan het licht kunnen komen.
Hetzelfde probleem doet zich voor bij het PDF-document op https://www.nh1816.nl/voorwaarden/04311.pdf. Ook dit document mist de nodige structurele codes, waardoor de inhoud niet correct kan worden geïnterpreteerd door hulpsoftware.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home ontbreekt bij het formulier met de invoervelden voor persoonlijke informatie, zoals “E-mailadres” en “Wachtwoord”, het autocomplete-attribuut. Dit attribuut is belangrijk voor de toegankelijkheid, omdat het browsers en hulpsoftware in staat stelt automatisch persoonlijke informatie in te vullen, wat het gebruiksgemak aanzienlijk verhoogt. Voeg het attribuut autocomplete="username" toe aan het invoerveld voor e-mail en autocomplete="current-password" voor het wachtwoordveld. Dit zorgt ervoor dat bezoekers hun gegevens sneller kunnen invullen en vermindert de kans op invoerfouten.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier ontbreekt ook het autocomplete-attribuut voor het invoerveld “Wat is uw telefoonnummer?”. Voeg hier het attribuut autocomplete="tel" toe om automatische invoer mogelijk te maken. Voor een volledige lijst met aanbevolen waarden voor het autocomplete-attribuut kun je de richtlijnen van de W3C raadplegen op https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home zijn er verschillende kleurcontrastproblemen die de leesbaarheid van de tekst aanzienlijk verminderen. De bruine knop met de tekst “Help” (HEX #B3A49A) en de links “Registreren?” en “Wachtwoord vergeten?” op een witte achtergrond hebben een contrastverhouding van slechts 2,4:1. Dit is aanzienlijk lager dan de vereiste 4,5:1 voor tekst kleiner dan 24px die niet vetgedrukt is. Pas de kleur van de knop en de links aan, of kies een donkerdere tint bruin die een voldoende contrast biedt.

Op pagina https://mijn-polissen.nl/home hebben de knoppen “Verder” en “Inloggen” witte tekst op een oranje achtergrond (HEX #E95E40), met een contrastverhouding van slechts 3,4:1. Ook hier is het contrast onvoldoende voor kleine tekst. Dit moet minimaal 4,5:1 zijn. Overweeg om een donkerdere tint oranje te gebruiken of de tekst vet te maken om de leesbaarheid te verbeteren. Ditzelfde probleem doet zich voor in het dialoogvenster dat wordt geopend via de link “+31 88 112 1816”, waar de oranje knop “Nee, annuleer” op een witte achtergrond staat. De contrastverhouding van 3,4:1 is ook hier onvoldoende voor goede leesbaarheid.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve de homepage, is er grijze tekst (HEX #8D8D8D) op een witte achtergrond, bijvoorbeeld in de header “Combinummer: 6140422”, in de zijbalk “Agentschap personeel”, “Ingangsdatum:” en andere secties. Deze tekst heeft een contrastverhouding van 3,3:1, wat lager is dan de vereiste 4,5:1 voor kleine tekst. Gebruik een donkerdere grijstint voor deze elementen om aan de contrastvereisten te voldoen.

Daarnaast is er op https://mijn-polissen.nl/overzicht oranje tekst (HEX #E95E40) op een witte achtergrond, bijvoorbeeld in de zijbalklink “Bekijk het volledige profiel”, de knop “Schade melden” en de link “Bekijk uw pakket”. Deze elementen hebben ook een contrastverhouding van slechts 3,4:1, wat onvoldoende is voor goede leesbaarheid. Pas ook hier de kleuren aan om te zorgen voor een minimaal contrast van 4,5:1.

Op pagina https://mijn-polissen.nl/verzekeringen is er een contrastprobleem met de oranje tekst (HEX #E95E40) op een grijze achtergrond (HEX #F0F3F6), bijvoorbeeld bij de tekst “Verzekeringen”. De contrastverhouding is slechts 3,3:1, wat aanzienlijk lager is dan de minimale vereiste van 4,5:1 voor kleine tekst. Gebruik een donkerdere oranje tint of een lichtere achtergrond om de leesbaarheid te verbeteren. Daarnaast is er lichtbruine tekst (HEX #B3A49A) op een witte achtergrond, zoals “Polisnummer: 6140422.021”, met een contrastverhouding van slechts 2,4:1. Ook hier moet het contrast minimaal 4,5:1 zijn voor tekst kleiner dan 24px. Kies een donkerdere bruintint voor de tekst of gebruik een achtergrondkleur met een hoger contrast.

Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies, onder de tekst “Mijn adviesvraag:”, is er een invoerveld met een grijze placeholder-tekst (HEX #9EA5B1) op een witte achtergrond, met een contrastverhouding van slechts 2,5:1. Dit is onvoldoende voor kleine tekst. Dit moet minimaal 4,5:1 zijn.
Ditzelfde probleem doet zich voor op de pagina https://mijn-polissen.nl/schade-melden/schadeformulier, onder de teksten “Geef een gedetailleerde omschrijving van de schade” en “Wat is uw telefoonnummer?”. Gebruik een donkerdere grijstint voor de placeholder-tekst om de leesbaarheid te verbeteren.

Op pagina https://mijn-polissen.nl/overzicht is er grijze tekst (HEX #8D8D8D) “Goedemiddag,” op een grijze achtergrond (HEX #F0F3F6), met een contrastverhouding van slechts 2,9:1. Omdat deze tekst groter is dan 24px, moet het contrast minimaal 3,0:1 zijn. Kies een donkerdere grijstint voor de tekst of een lichtere achtergrondkleur om aan deze vereiste te voldoen.

In het PDF-document op https://voorwaarden.nh1816.nl/03618.pdf is er oranje tekst (HEX #EB5D40) op een witte achtergrond, bijvoorbeeld bij de tekst “AANSPRAKELIJKHEIDSVERZEKERING”. Deze tekst heeft een contrastverhouding van slechts 3,4:1, wat onvoldoende is voor kleine tekst. Pas de tekstkleur aan of gebruik een donkerdere tint oranje om aan de minimale contrastvereiste van 4,5:1 te voldoen.
Ditzelfde probleem doet zich voor in het PDF-document op https://www.nh1816.nl/voorwaarden/04311.pdf, waar de oranje tekst ook een onvoldoende contrastverhouding heeft. Pas de kleuren in deze documenten aan om de leesbaarheid en toegankelijkheid te verbeteren.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home, wanneer bekeken op een schermresolutie van 1280×1024 en ingezoomd tot 200%, worden verschillende belangrijke elementen onzichtbaar, zoals het logo, de tekst “Welkom” en de inleidende zin “In Mijn Polissen kunt …inloggen”. Dit probleem wordt waarschijnlijk veroorzaakt door vaste breedtes, overflow-instellingen of onvoldoende flexibele containers in de CSS. Om dit te corrigeren, moet de lay-out responsief worden gemaakt, zodat alle inhoud correct schaalt bij hogere zoomniveaus. Gebruik flexbox of CSS grid voor flexibele layouts en vermijd vaste pixels voor breedtes en hoogtes.

Op pagina https://mijn-polissen.nl/home, wanneer het “Help”-dialoogvenster open is en alle secties zijn uitgebreid, de inhoud in de sectie “Mijn verzekeringen lopen via een ander gezinslid. Hoe kan ik deze verzekeringen zelf inzien?” niet zichtbaar. Dit wijst op een probleem met de maximale hoogte van de container of een overflow-instelling die inhoud verbergt. Controleer de CSS-instellingen voor deze sectie en zorg ervoor dat de inhoud altijd volledig zichtbaar blijft, ongeacht het zoomniveau.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, verdwijnt de sectie met informatie onder de kop “Agentschap personeel” in de zijbalk wanneer bekeken op een resolutie van 1280×1024 en ingezoomd tot 200%. Dit kan worden opgelost door de zijbalk flexibeler te maken en ervoor te zorgen dat elementen automatisch worden verplaatst naar nieuwe regels als er niet genoeg ruimte is.
Op pagina https://mijn-polissen.nl/overzicht verdwijnt de tekst “Welkom in … ledenvoordelen” onder de kop “Goedemiddag, Ad” bij dezelfde resolutie en zoominstelling.
Dit probleem doet zich ook voor op de pagina https://mijn-polissen.nl/verzekeringen met de teksten “Vervaldatum: 01-01-2022” en “Aantal actieve polissen: 5”. Controleer de marges, padding en breedte-instellingen voor deze elementen om ervoor te zorgen dat ze correct worden weergegeven bij hogere zoomniveaus.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home ontstaan problemen wanneer een bezoeker inzoomt tot 400% op een schermresolutie van 1280 bij 1024 pixels. Net als bij 200% zoom gaat er inhoud verloren, zoals het logo, de tekst “Welkom” en de inleidende zin “In Mijn Polissen kunt …inloggen”. Deze problemen moeten niet alleen worden opgelost voor 200% zoom, maar ook voor 400% zoom om te voldoen aan succescriterium 1.4.10. Zorg ervoor dat alle inhoud correct schaalt door flexibele CSS-layouts te gebruiken, zoals flexbox of CSS grid, en vermijd vaste breedtes in pixels.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve de homepage, verdwijnen de links “Adviseur”, “Ledenvoordelen” en “Meer” in het hamburgermenu wanneer ingezoomd tot 400% op een schermresolutie van 1280 bij 1024 pixels. Dit probleem wordt waarschijnlijk veroorzaakt door vaste hoogtes of overflow-instellingen die de inhoud buiten het zicht verbergen. Zorg ervoor dat het hamburgermenu volledig scrollbaar is of gebruik een flexibele layout zodat alle links zichtbaar blijven.

Op pagina’s https://mijn-polissen.nl/overzicht en https://mijn-polissen.nl/adviseur, wanneer ingezoomd tot 400% op een schermresolutie van 1280 bij 1024 pixels, is de knop “Nee, annuleer” in het dialoogvenster dat wordt geopend via de link “+31 88 112 1816” niet zichtbaar en niet bedienbaar. Bovendien ontbreekt de kop “Noodnummer bellen”. Dit kan worden opgelost door ervoor te zorgen dat het dialoogvenster altijd volledig zichtbaar blijft, ongeacht het zoomniveau. Vermijd vaste hoogtes voor het dialoogvenster en zorg ervoor dat de inhoud automatisch schaalt.

Op pagina https://mijn-polissen.nl/overzicht, wanneer ingezoomd tot 400% of bij een schermbreedte van 320px, worden de link “Bekijk uw pakket” en de tekst “€ 2.349,27” niet correct afgebroken, waardoor ze buiten de rechterrand van het scherm uitsteken. Dit zorgt voor ongewenste horizontale scrollbars. Gebruik de CSS-eigenschap word-break: break-word; of overflow-wrap: break-word; om ervoor te zorgen dat lange woorden correct worden afgebroken.
Dit probleem doet zich ook voor op de pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies met de tekst “Ik wil graag verzekeringsadvies”, op de pagina https://mijn-polissen.nl/meer/gebruiksvoorwaarden met de teksten “https://www.nh1816.nl/polisvoorwaarden”, “www.nh1816.nl/privacyverklaring”, “www.autoriteitpersoonsgegevens.nl” en “Schadeverzekeringsmaatschappij”, en op de pagina https://mijn-polissen.nl/verzekeringen/polis/8000106001 met de tekst “€ 95,03”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home, onder de teksten “E-mailadres” en “Wachtwoord”, is de contrastverhouding tussen de grijze rand van de invoervelden (HEX #D9DFE8) en de witte achtergrond slechts 1,3:1. Dit is aanzienlijk lager dan de minimale vereiste van 3,0:1 voor interactieve elementen zoals invoervelden. Gebruik een donkerdere grijstint voor de rand, bijvoorbeeld HEX #737373, om de leesbaarheid en zichtbaarheid van de invoervelden te verbeteren.
Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier doet hetzelfde contrastprobleem zich voor onder de teksten “Geef een gedetailleerde omschrijving van de schade” en “Wat is uw telefoonnummer?” en ook bij stap “2” met het selectievakje “Ik bevestig dat mijn ingevulde … zijn ingevuld…”. Pas hier ook de randkleur aan naar een donkerdere tint om aan de contrastvereisten te voldoen.

Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies, onder de tekst “Mijn adviesvraag:”, is een invoerveld aanwezig waarvan de grijze rand (HEX #D9DFE8) een contrastverhouding van slechts 1,2:1 heeft met de grijze achtergrond (HEX #F0F3F6). Dit contrast is ook te laag voor een correct zichtbare rand. Gebruik hier een donkerdere kleur voor de rand om de minimale contrastvereiste van 3,0:1 te behalen.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier heeft de knop met het “i” icoon naast het label “Voeg bijlage(n) toe” onvoldoende contrast. Het witte icoon op de bruine achtergrond (HEX #B3A49A) heeft een contrastverhouding van slechts 2,4:1. Verander de kleur van de achtergrond of het icoon zelf om ervoor te zorgen dat de contrastverhouding minimaal 3,0:1 is, zoals vereist voor grafische elementen die informatie overbrengen.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier, na het indienen van stap “1” van het formulier, wordt een wit vinkje op een groene achtergrond (HEX #89C209) weergegeven, samen met een groen selectievakje in het veld “Ik bevestig dat … bij stichting CIS.” De contrastverhouding van deze iconen is te laag, namelijk 2,1:1. Pas de kleuren van deze iconen aan om de minimale contrastvereiste van 3,0:1 te bereiken, zodat ze duidelijk zichtbaar zijn voor alle gebruikers.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home, wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium en het “Help”-dialoogvenster is geopend met alle secties uitgebreid, wordt de inhoud onder de kop “Mijn verzekeringen lopen via een ander gezinslid. Hoe kan ik deze verzekeringen zelf inzien?” gedeeltelijk onzichtbaar. Dit probleem ontstaat vaak wanneer de hoogte en breedte van de containers waarin de tekst zich bevindt niet flexibel genoeg zijn om aanpassingen in letterafstand, regelafstand of woordafstand te ondersteunen. Zorg ervoor dat de containers van de tekst responsief zijn en voldoende ruimte bieden voor grotere tekstafstanden. Dit kan worden bereikt door flexibele eenheden zoals em, rem of percentages te gebruiken voor de hoogte en breedte van de containers, en door vaste pixels te vermijden.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home, na de link “Wachtwoord vergeten?”, slaat de toetsenbordfocus de link “+31 88 112 1816” over, waardoor deze onbereikbaar en niet bedienbaar is voor bezoekers die alleen met het toetsenbord navigeren. Dit kan worden opgelost door ervoor te zorgen dat alle interactieve elementen, zoals links, correct opgenomen zijn in de tabbalk. Controleer of de link geen tabindex="-1" of aria-hidden="true" heeft, en zorg ervoor dat deze correct is opgenomen in de natuurlijke tabvolgorde van de pagina.

Op pagina https://mijn-polissen.nl/overzicht en op pagina https://mijn-polissen.nl/adviseur doet zich hetzelfde probleem voor, waarbij bepaalde links worden overgeslagen door de toetsenbordfocus. Zorg ervoor dat alle links bedienbaar zijn met de Enter-, Return- of spatietoets, zodat ze toegankelijk zijn voor alle bezoekers.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier is de knop met het “i” icoon en de knop “Selecteer bestand(en)” niet toegankelijk via het toetsenbord. Controleer of deze knoppen correct als button-elementen zijn gemarkeerd of voorzien zijn van de juiste code om bediening met de spatiebalk en Enter-toets mogelijk te maken.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier, gebruikt een formulier HTML5-validatie met de melding "Waarde moet 13/05/2025 of later zijn" voor het invoerveld "Wat is de datum waarop de schade is ontstaan?". Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Dit kan ook voorkomen in andere formulieren.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de site https://mijn-polissen.nl/overzicht ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Onvoldoende

Bevindingen: De pagina's https://mijn-polissen.nl/ledenvoordelen/65 en https://mijn-polissen.nl/ledenvoordelen/64 hebben dezelfde tekst in het title-element van de pagina: “Ledenvoordeel”. 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 titel heeft die de inhoud van de pagina nauwkeurig beschrijft.

Het PDF-document op https://www.nh1816.nl/voorwaarden/04311.pdf heeft geen titel ingesteld in de bestandeigenschappen. 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://mijn-polissen.nl/home openen de knop “Help” en de link “+31 88 112 1816” een dialoogvenster. Momenteel kan de toetsenbordfocus de geopende dialoog verlaten en naar de onderliggende pagina bewegen. Dit kan verwarrend zijn voor bezoekers die alleen met het toetsenbord navigeren, omdat de focus binnen het dialoogvenster moet blijven totdat dit wordt gesloten. Zorg ervoor dat de toetsenbordfocus correct wordt beheerd door de focus vast te zetten binnen het dialoogvenster en ervoor te zorgen dat de focus terugkeert naar het element waarmee het dialoogvenster werd geopend zodra het venster wordt gesloten. Dit kan worden bereikt door de focus te vergrendelen binnen het dialoogvenster totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Ditzelfde probleem doet zich voor op de pagina’s https://mijn-polissen.nl/overzicht en https://mijn-polissen.nl/adviseur met de link “+31 88 112 1816”.

Op pagina https://mijn-polissen.nl/home opent de knop “Help” een dialoogvenster. Na het sluiten van dit venster keert de toetsenbordfocus niet terug naar het element dat het venster heeft geopend of naar het volgende logische element in de focusvolgorde van de pagina. Dit kan frustrerend zijn voor toetsenbordgebruikers, omdat ze mogelijk helemaal opnieuw moeten navigeren om hun plek te vinden. Zorg ervoor dat de focus correct wordt hersteld naar de knop “Help” zodra het dialoogvenster wordt gesloten, of naar het volgende relevante element in de focusvolgorde.

Op pagina https://mijn-polissen.nl/home verschijnt de foutmelding “Er is iets misgegaan. Probeer het later opnieuw” wanneer een bezoeker een wachtwoord invoert dat niet overeenkomt met het opgegeven e-mailadres, zonder dat de pagina wordt herladen. De focus wordt echter niet automatisch naar de foutmelding verplaatst, waardoor toetsenbordgebruikers moeten terugnavigeren met Shift+Tab om de fout te vinden. Dit kan worden opgelost door de focus automatisch naar het invoerveld met de fout te verplaatsen en de foutmelding aan dit veld te koppelen. Een alternatief kan zijn om aria-live="polite" of role="status" te gebruiken, zie ook succescriterium 4.1.3.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, komt de toetsenbordfocus na de link “Ad Combinummer: 6140422” terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden, omdat dit verwarrend kan zijn voor toetsenbordgebruikers.

Op alle pagina’s van https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, verschijnt op een klein scherm een menuknop om het mobiele menu te openen. Momenteel kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren naar de onderliggende pagina, terwijl het menu open blijft. Dit kan worden opgelost door de focus binnen het menu te vergrendelen totdat het menu wordt gesloten. Dit zorgt ervoor dat de focus binnen het menu blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.

Op https://mijn-polissen.nl/overzicht verschuift de toetsenbordfocus naar andere elementen voordat het de menu-items bereikt wanneer het mobiele menu is geopend. Dit is geen logische focusvolgorde en kan verwarrend zijn voor bezoekers die alleen met het toetsenbord navigeren. Zorg ervoor dat de focus direct naar de submenu-items gaat zodra het menu wordt geopend, bijvoorbeeld door de eerste focusbare link in het menu automatisch te focussen.

Op pagina https://mijn-polissen.nl/overzicht, onder de teksten “Schadehersteller”, “Mijn dossier” en “Wat te doen bij”, bevinden zich links die genest zijn binnen knoppen, zoals “Voertuigschade”. Dit kan leiden tot dubbele focuspunten, omdat zowel de knop als de geneste link focusbaar zijn. Dit kan worden opgelost door een van de geneste elementen te verwijderen of te vervangen door een niet-interactief element, zodat er geen overbodige focuspunten ontstaan.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://mijn-polissen.nl/overzicht (behalve https://mijn-polissen.nl/home) is het logo bovenaan een link. Deze link mist een beschrijvende tekst over de bestemming van de link. Dit maakt het moeilijk voor bezoekers die hulpsoftware gebruiken om te begrijpen waar de link naartoe leidt. Dit kan worden opgelost door een alt-tekst aan de afbeelding van het logo toe te voegen, bijvoorbeeld alt="Logo Nh1816 Verzekeringen, ga naar Overzicht Mijn Polissen" of door gebruik te maken van een aria-label-attribuut met een vergelijkbare beschrijving. Hiermee wordt de bestemming van de link duidelijker voor schermlezers.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht (behalve https://mijn-polissen.nl/home) bevindt zich in de header een link met een belicoon. Deze link bevat geen inhoud en heeft daardoor geen duidelijke functie voor bezoekers die een schermlezer gebruiken. Zie ook succescriterium 1.1.1 voor meer informatie en een oplossingssuggestie.
Dit probleem doet zich ook voor op een klein scherm, bij het pictogram van het persoon. Zorg ervoor dat alle interactieve iconen een duidelijke, toegankelijke naam hebben, zodat hun functie begrijpelijk is voor alle bezoekers.

Op pagina https://mijn-polissen.nl/verzekeringen bevindt zich een link met een “+”-icoon. Deze link bevat geen inhoud en heeft daardoor geen duidelijke functie voor bezoekers die een schermlezer gebruiken. Voeg een beschrijvende aria-label toe, zoals aria-label="Voeg nieuwe verzekering toe", zodat gebruikers de functie van de link begrijpen.

Op pagina https://mijn-polissen.nl/verzekeringen staan in de sectie met verzekeringen meerdere links met de tekst “Details”. Zo verwijst onder de heading “Personenauto” de link naar https://mijn-polissen.nl/verzekeringen/polis/8000102001, terwijl onder de kop “Woonhuis” een andere link met dezelfde tekst naar een andere bestemming leidt. Dit kan verwarrend zijn voor bezoekers, omdat het niet duidelijk is welke link naar welke inhoud leidt. Zorg ervoor dat links met dezelfde tekst ook naar dezelfde bestemming leiden, of pas de linkteksten aan zodat ze duidelijk maken naar welke specifieke inhoud ze verwijzen, bijvoorbeeld “Details over personenautoverzekering” en “Details over woonhuisverzekering”.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://mijn-polissen.nl/overzicht is er geen tweede manier om de pagina’s te vinden. Dit kan een probleem zijn voor bezoekers die afhankelijk zijn van hulpmiddelen zoals schermlezers of voor mensen die moeite hebben met navigeren via de standaard menu’s. Om de toegankelijkheid te verbeteren, moet elke pagina op de website op meerdere manieren toegankelijk zijn. Dit kan bijvoorbeeld door een zoekfunctie toe te voegen, een sitemap te maken of een inhoudsopgave toe te voegen die links naar alle belangrijke pagina’s bevat. Hiermee wordt de structuur van de website duidelijker en kunnen bezoekers sneller de gewenste informatie vinden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier worden knoppen met de tekst “1” en “2” gebruikt om de secties “Algemeen” en “Overzicht” te openen. De toegankelijke namen van deze knoppen zijn momenteel ook “1” en “2”, wat hun functie niet duidelijk maakt voor bezoekers die gebruikmaken van schermlezers. Voeg beschrijvende tekst toe aan deze knoppen, bijvoorbeeld aria-label="1. Algemeen" en aria-label="2. Overzicht", zodat gebruikers duidelijk begrijpen welke sectie ze openen.

Op pagina https://mijn-polissen.nl/ledenvoordelen zijn meerdere knoppen aanwezig met de zichtbare tekst “Bekijken”, maar deze knoppen vervullen verschillende functies. Dit kan verwarrend zijn voor bezoekers die gebruikmaken van schermlezers, omdat de knoppen dezelfde naam hebben maar naar verschillende inhoud verwijzen. Geef deze knoppen unieke, beschrijvende namen die de specifieke functie van elke knop duidelijk maken, zoals “Bekijken: voordeel voor leden” of “Bekijken: informatie over korting”, zodat de functie van elke knop helder is voor alle bezoekers.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies is er een invoerveld met de zichtbare tekst “Mijn adviesvraag:”, terwijl de toegankelijke naam van het invoerelement luidt: “Vul hier zo veel mogelijke relevante informatie in…”. Dit kan voor problemen zorgen bij bezoekers die gebruikmaken van spraaksoftware, omdat de zichtbare tekst niet overeenkomt met de toegankelijke naam. Zorg ervoor dat de toegankelijke naam van het invoerveld dezelfde tekst bevat als de zichtbare labeltekst, bijvoorbeeld door gebruik te maken van een label-element met de tekst “Mijn adviesvraag:”, gekoppeld aan het invoerveld met het for-attribuut. Als alternatief kan een aria-label worden gebruikt met dezelfde tekst als de zichtbare labeltekst om consistentie te garanderen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de site https://mijn-polissen.nl/overzicht is de primaire taal ingesteld op “EN” via het lang-attribuut in de HTML, terwijl de inhoud in het Nederlands is. Dit kan ervoor zorgen dat schermlezers de tekst met de verkeerde uitspraakregels voorlezen, wat de inhoud moeilijker te begrijpen maakt voor gebruikers die afhankelijk zijn van deze technologieën. Stel de taalcode correct in door lang="nl" te gebruiken op het html-element van elke pagina, zodat de inhoud op de juiste manier wordt voorgelezen.

In de metadata van de PDF op https://voorwaarden.nh1816.nl/03618.pdf is de taal niet ingesteld. Dit betekent dat schermlezers niet weten welke uitspraakregels ze moeten gebruiken voor de tekst in het document. Zorg ervoor dat de taalinstelling van de PDF correct wordt ingesteld, bijvoorbeeld via de bestandseigenschappen of in de authoring-software waarmee de PDF is gemaakt. Gebruik “nl” als taalcode om ervoor te zorgen dat de tekst correct wordt voorgelezen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home verschijnt de foutmelding “Er is iets misgegaan. Probeer het later opnieuw.” wanneer een bezoeker een wachtwoord invoert dat niet overeenkomt met het opgegeven e-mailadres. Deze melding is te algemeen en geeft niet duidelijk aan waar de fout is opgetreden of wat er precies mis is gegaan. Een goede foutmelding moet specifiek zijn en duidelijk maken welk veld niet correct is ingevuld. Dit maakt het voor de bezoeker duidelijker waar de fout ligt en hoe deze kan worden opgelost.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier worden foutmeldingen weergegeven bij het veld “Geef een gedetailleerde omschrijving van de schade” met de tekst “Dit veld is verplicht” en bij het veld “Wat is uw telefoonnummer?” met de tekst “Voer een geldig telefoonnummer in”. Deze teksten zijn instructies, maar geen duidelijke foutmeldingen, omdat ze niet aangeven dat er een fout is gemaakt. Gebruik foutmeldingen die duidelijk maken wat er fout is gegaan, zoals: “Het veld ‘Omschrijving van de schade’ is niet (goed) ingevuld” en “Het veld ‘Telefoonnummer’ is niet (goed) ingevuld”. Hiermee wordt de gebruiker beter geïnformeerd over de specifieke fout en hoe deze kan worden opgelost.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies staat onder de kop “Ik wil graag verzekeringsadvies” een select-element zonder label. De eerste optie in het select-element kan niet als label dienen, omdat deze verdwijnt zodra een andere optie wordt geselecteerd. Dit kan verwarrend zijn voor bezoekers, omdat ze niet weten waar de keuzelijst over gaat. Voeg een permanent zichtbaar label toe aan dit select-element, bijvoorbeeld met een label-element dat correct gekoppeld is aan het select-element via het for-attribuut. Hiermee wordt de context van de keuzelijst duidelijk voor alle bezoekers, ook voor gebruikers van schermlezers.

Op de pagina https://mijn-polissen.nl/schade-melden/schadeformulier heeft het invoerveld “Wat is de datum waarop de schade is ontstaan?” een bijbehorende instructie: “Waarde moet 13/05/2025 of later zijn”. Deze instructie verschijnt echter alleen in een foutmelding en is niet permanent zichtbaar op de pagina. Zorg ervoor dat deze instructie altijd zichtbaar is, bijvoorbeeld door de tekst direct onder of naast het invoerveld te plaatsen. Dit maakt de invoervereisten duidelijk voor alle bezoekers, voordat ze proberen het formulier in te vullen.

Op https://mijn-polissen.nl/schade-melden/schadeformulier heeft het invoerveld “Wat is uw telefoonnummer?” een bijbehorende instructie “12345678” in de placeholdertekst. Deze placeholder verdwijnt zodra de gebruiker begint te typen, waardoor de instructie verloren gaat. Voeg een permanent zichtbaar label of instructietekst toe naast of onder het invoerveld, zodat bezoekers altijd kunnen zien welk formaat het telefoonnummer moet hebben, zelfs nadat ze met het invullen zijn begonnen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home openen de knop “Help” en de link “+31 88 112 1816” een dialoogvenster, maar deze functionaliteit wordt niet correct aangegeven in de code. Dit kan worden opgelost door het attribuut aria-haspopup="dialog" toe te voegen aan de knop en de link. Dit attribuut maakt duidelijk dat het klikken op deze elementen een dialoogvenster opent, waardoor schermlezers de functie correct kunnen aankondigen.
Dit probleem doet zich ook voor op de pagina https://mijn-polissen.nl/overzicht en op de pagina https://mijn-polissen.nl/adviseur bij de link “+31 88 112 1816”.

Op https://mijn-polissen.nl/home missen de dialoogvensters die worden geopend door de knop “Help” en de link “+31 88 112 1816” zowel een correct ARIA-rolattribuut als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan worden opgelost door role="dialog" toe te voegen aan het dialoogvenster, samen met een beschrijvend aria-label, zoals aria-label="Hulpinformatie". Dit zorgt ervoor dat schermlezers de dialoogvensters correct identificeren en beschrijven.

Op pagina https://mijn-polissen.nl/home opent de knop “Help” een dialoogvenster met daarin een sluitknop. Deze sluitknop heeft momenteel geen toegankelijke naam, waardoor schermlezers de functie ervan niet kunnen aankondigen. Voeg een aria-label, zoals aria-label="Sluit venster", toe aan de sluitknop om de functionaliteit duidelijk te maken voor alle bezoekers.

Op https://mijn-polissen.nl/home opent de knop “Help” een dialoogvenster waarin zich secties met verborgen inhoud bevinden. Hoewel de open- of gesloten status visueel duidelijk is, wordt deze status niet programmatisch gecommuniceerd aan schermlezers. Dit kan worden opgelost door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden. Dit attribuut moet de waarde true of false krijgen, afhankelijk van de huidige staat van de sectie. Als alternatief kan visueel verborgen tekst worden toegevoegd die de huidige staat van de sectie beschrijft.
Dit probleem doet zich ook voor op de pagina https://mijn-polissen.nl/meer/vragen, bijvoorbeeld bij de vraag “Waarom staat mijn schadeherstelbedrijf niet tussen de zoekresultaten?”.

Op pagina https://mijn-polissen.nl/home opent de knop “Help” een dialoogvenster. De “+” en “−” iconen die de status van deze secties aangeven hebben geen naam en geen waarde. Dit kan worden opgelost met een aria-label als "Toon meer informatie over..." en "Verberg meer informatie over...". IN plaats van "Toon" en "Verberg" kan ook aria-expanded gebruikt worden met de waarden "false" en "true".
Een vergelijkbaar probleem doet zich voor op de pagina https://mijn-polissen.nl/meer/vragen, bijvoorbeeld bij de vraag “Waarom staat mijn schadeherstelbedrijf niet tussen de zoekresultaten?”.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, is het logo bovenaan een link zonder toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of functie van de link is. Zie ook succescriterium 2.4.4 voor meer informatie en een mogelijke oplossing.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve de homepage, bevindt zich in de header een link met een belicoon. Deze link heeft geen toegankelijke naam, waardoor het voor gebruikers van schermlezers onduidelijk is wat de functie van de link is. Zie succescriterium 1.1.1 voor meer informatie en een mogelijke oplossing.

Op alle pagina’s van de site https://mijn-polissen.nl/overzicht, behalve https://mijn-polissen.nl/home, verschijnt op een klein scherm een menuknop om het mobiele menu te openen. Het attribuut aria-expanded op deze knop wordt echter niet correct bijgewerkt om de status van het menu weer te geven. Het blijft ingesteld op false, ook wanneer het menu geopend is. Zorg ervoor dat dit attribuut dynamisch wordt bijgewerkt, zodat het de waarde true krijgt wanneer het menu zichtbaar is, en false wanneer het gesloten is. Dit zorgt ervoor dat schermlezers correct kunnen aangeven of het menu geopend of gesloten is.

Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies wordt, wanneer een tweede verzekering wordt toegevoegd, een knop met een prullenbakicoon weergegeven zonder toegankelijke naam. Voeg een aria-label toe, bijvoorbeeld aria-label="Verwijder verzekering [NAAM]", om de functie van de knop duidelijk te maken voor gebruikers van schermlezers.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier wordt, na het indienen van stap “1” van het formulier, onder de heading “Schade melden” een knop met een wit icoon van een vinkje op een groene achtergrond weergegeven zonder toegankelijke naam. Voeg ook hier een aria-label toe, bijvoorbeeld aria-label="Bevestig schade", zodat de functie van de knop duidelijk is voor alle gebruikers.

Op pagina https://mijn-polissen.nl/verzekeringen fungeert het “+”-icoon als een link om de adviespagina te openen, maar het heeft geen toegankelijke naam. Voeg een beschrijvende naam toe, zoals aria-label="Voeg nieuw advies toe", om de functie van de link duidelijk te maken voor alle gebruikers.

Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies staat onder “Ik wil graag verzekeringsadvies” een select-element. De toegankelijke naam ontbreekt, waardoor het element niet toegankelijk is voor gebruikers van schermlezers. Geef dit element een toegankelijke naam door een correct gekoppeld label-element te gebruiken of een aria-label toe te voegen, zodat de functie van het select-element duidelijk is voor alle bezoekers.

Op pagina https://mijn-polissen.nl/verzekeringen/polis/8000106001 functioneren op een klein scherm de knoppen “Details”, “Dekkingen” en “Meer” visueel als tabbladen die verschillende contentsecties openen. Deze knoppen missen echter de nodige ARIA-attributen zoals aria-controls en aria-selected om duidelijk aan te geven welke sectie actief is en welke relatie er bestaat tussen de knoppen en de bijbehorende inhoud. Voeg aria-controls toe aan elke knop om deze te koppelen aan de bijbehorende contentsectie, en gebruik aria-selected="true" voor de actieve knop om aan te geven welke sectie momenteel is geopend. Dit maakt de tabnavigatie duidelijker voor gebruikers van schermlezers en andere ondersteunende technologieën. Raadpleeg de WAI-ARIA specificatie voor meer informatie over de correcte implementatie van tabbladen: https://www.w3.org/TR/wai-aria/.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier heeft de knop met een “i”-icoon naast het label “Voeg bijlage(n) toe” niet de juiste toegankelijke rol en naam. Dit kan verwarrend zijn voor gebruikers van schermlezers, omdat ze niet weten wat de functie van de knop is. Voeg een toegankelijke rol toe, zoals role="button", om duidelijk te maken dat het een knop is, en gebruik een aria-label zoals aria-label="Meer informatie over bijlagen" om de functie van de knop duidelijk te maken voor alle bezoekers.

Op https://mijn-polissen.nl/schade-melden/schadeformulier opent de knop met een “i”-icoon naast het label “Voeg bijlage(n) toe” verborgen inhoud. Hoewel de open of gesloten status visueel duidelijk is, wordt deze status niet programmatisch gecommuniceerd aan schermlezers. Voeg een aria-expanded-attribuut toe aan deze knop, bijvoorbeeld aria-expanded="false" wanneer de inhoud verborgen is en aria-expanded="true" wanneer de inhoud zichtbaar is. Dit attribuut zorgt ervoor dat de open- of gesloten status van de sectie correct wordt doorgegeven aan schermlezers, zodat ook blinde of slechtziende bezoekers weten welke inhoud zichtbaar is.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-polissen.nl/home verschijnt de foutmelding “Er is iets misgegaan. Probeer het later opnieuw” wanneer een bezoeker een wachtwoord invoert dat niet overeenkomt met het opgegeven e-mailadres, zonder dat de pagina wordt herladen. De focus wordt ook niet naar de foutmelding verplaatst. Dit is daarom een statusbericht en moet voorgelezen kunnen worden. Voeg het attribuut aria-live="polite" of role="status" toe, zodat het voorgelezen kan worden. Een alternatief kan zijn om de focus te verplaatsen naar het eerste foutieve invoerveld. Zie ook succescriterium 2.4.3.

Op pagina https://mijn-polissen.nl/verzekeringen/verzekeringsadvies is er boven een tekstveld een teller te zien die het aantal resterende tekens weergeeft. Deze teller is een statusbericht dat dynamisch wordt bijgewerkt, maar deze informatie wordt niet automatisch gecommuniceerd aan schermlezers. Om dit op te lossen, voeg een aria-live="polite" of role="status" attribuut toe aan de teller, zodat schermlezers de wijzigingen kunnen aankondigen zodra ze plaatsvinden. Zorg ervoor dat deze attributen aanwezig zijn op het moment dat de pagina wordt geladen, zodat schermlezers de status onmiddellijk kunnen doorgeven wanneer de gebruiker begint te typen.
Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier is hetzelfde probleem aanwezig bij het invoerveld “Geef een gedetailleerde omschrijving van de schade”. Ook hier moet een aria-live="polite" of role="status" attribuut worden toegevoegd aan de teller, zodat gebruikers van schermlezers onmiddellijk op de hoogte worden gebracht van het aantal resterende tekens terwijl ze typen.

Op https://mijn-polissen.nl/schade-melden/schadeformulier activeert het aanklikken van een optie in de lijst “Op welke polis wilt u schade melden?” een wachtanimatie. Deze animatie fungeert als een statusbericht, maar is niet toegankelijk voor blinde bezoekers. Voeg een aria-live="polite" of role="status" attribuut toe aan het icoon om ervoor te zorgen dat deze statusverandering wordt doorgegeven aan schermlezers zodra de animatie verschijnt.
Ditzelfde probleem doet zich ook voor op de pagina https://mijn-polissen.nl/ledenvoordelen/65 en op de pagina https://mijn-polissen.nl/ledenvoordelen/64, na het klikken op de knop “Code genereren”.

Op pagina https://mijn-polissen.nl/schade-melden/schadeformulier is een formulier aanwezig. Wanneer er fouten optreden bij het invullen van het formulier, verschijnen foutmeldingen, maar deze krijgen geen focus. Dit betekent dat schermlezers de meldingen waarschijnlijk niet aankondigen aan blinde gebruikers, omdat de focus niet automatisch naar de foutmelding verplaatst wordt. Voeg aria-live="polite" toe aan de foutmeldingen om ervoor te zorgen dat ze automatisch worden voorgelezen zodra ze verschijnen, zonder dat de gebruiker handmatig naar de melding hoeft te navigeren.