Rapport:
Audit digitale toegankelijkheid website Mijn Dela

Uitkomst: Onvoldoende

Bevindingen: Bovenaan in de omgeving van Mijn Dela staat een logo met de zichtbare tekst “Dela voor elkaar”. Het toegankelijke alternatief is niet van alle tekst voorzien, er ontbreekt “voor elkaar”. Voeg deze tekst toe.

Op pagina https://a.dela.nl/mijndela staat een decoratieve afbeelding onder het kopje “Praat met uw naasten over uw uitvaartverzekering”. Het tekstalterantief is “Praat met je dierbaren over je uitvaartverzekering.”. Deze tekst voegt niets toe aan de pagina en dient te worden weggelaten. Zie ook een andere afbeelding in deze zijkolom.

Op pagina https://a.dela.nl/mijndela staan onder het kopje "Mijn DELA van de heer P.G.J.T. van 't Westeinde" icoontjes van een huis, envelop en telefoon die een informatief doel hebben. Deze pictogrammen missen echter een tekstalternatief. Decoratieve pictogrammen die informatie overdragen zijn ontoegankelijk voor schermlezers als ze geen tekstalternatief hebben. Blinde bezoekers krijgen de informatie uit de pictogrammen niet door. Zorg ervoor dat de informatie beschikbaar is via een tekstalternatief. Dit kan worden gedaan door de informatie in de alt-tekst van het img-element te plaatsen. Hetzelfde issue komt op meerdere pagina’s voor, bijvoorbeeld op pagina https://a.dela.nl/mijndela/persoonsgegevens under the heading "Mijn DELA van de heer P.G.J.T. van 't Westeinde".

Op pagina https://a.dela.nl/mijndela, onder de kop "Mijn DELA van de heer P.G.J.T. van 't Westeinde" functioneren afbeeldingen met potlood als links, maar deze afbeeldingen hebben geen tekstalternatief. Hierdoor ontstaan links zonder content die ook onder succescriterium 2.4.4 worden afgekeurd. Om de links toegankelijk te maken, moeten de afbeeldingen alt-teksten krijgen die het linkdoel beschrijven. Zo weten bezoekers die schermlezers gebruiken wat deze links doen. Dit komt op meerdere pagina’s voor.

Op pagina https://a.dela.nl/mijndela, indien bekeken op een schermformaat kleiner dan 1280x1024px, wordt onder het kopje "Mijn DELA" een knop gebruikt met een pijlpictogram om aan te geven of de sectie open of gesloten is. Dit icoon heeft geen tekstalternatief. Een pijltje dat naar beneden wijst kan aangeven dat een sectie met inhoud nog dicht is, en een pijltje omhoog dat de inhoud zichtbaar is. Zorg ervoor dat schermlezers dit ook begrijpen. Voeg bijvoorbeeld een visueel verborgen tekst toe, of gebruik een aria-expanded-attribuut. Deze knop staat op meerdere pagina’s.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren staat een icoontje van een printer. Dit icoon heeft geen tekstalternatief.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela is de tekst "Belangrijke links" onder de kopjes "DELA UitvaartPlan" en "DELA LeefdoorPlan" niet als koptekst gemarkeerd. 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. Hetzelfde is gezien op pagina https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren in “Subtotaal”.

Op pagina https://a.dela.nl/mijndela, onder het kopje "Mijn DELA van de heer P.G.J.T. van 't Westeinde", staan tabs die beginnen met “Mijn verzekeringen”, “Mijn gegevens” en zo verder. In de HTML zijn deze links opgenomen in een lijst-element (<ul>). Echter dit element bevat kind-elementen die niet zijn toegestaan: <a> elementen in plaatst van <li> elementen. Dit geldt ook voor de mobile weergave van deze navigatie. Controleer alle pagina’s waar deze navigatie staat.

Op pagina https://a.dela.nl/mijndela, onder het kopje "Mijn DELA van de heer P.G.J.T. van 't Westeinde", staan tabs die beginnen met “Mijn verzekeringen”, “Mijn gegevens” en zo verder. De geselecteerde link ziet er anders uit dan de rest. Deze informatie is niet beschikbaar in de HTML. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit kan opgelost worden door een verborgen tekst aan de link toe te voegen, of door het aria-current-attribuut te gebruiken. Controleer alle pagina’s waar deze navigatie staat.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staat een groep keuzerondjes, voorafgegaan door de tekst "Geslacht*". Hoewel ze visueel zijn gegroepeerd, is deze relatie niet programmatisch gedefinieerd in de HTML. De groepslabel is niet gebonden met de groep waardoor de relatie tussen “Geslacht” en de keuzes niet af te lezen is in de HTML. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Geslacht*”. Dit komt op vele pagina’s voor: https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon onder “Verzekering”, op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/gezinslid-op-zelfstandige-polis onder “Een eigen polis voor uw kind of ex-partner - polisnummer: 1621622” en op pagina https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren onder “Eerste basiskeuze: begraven of cremeren?”.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon verschijnt na het verzenden van het formulier met lege of onjuiste gegevens de foutmelding "Maak alstublieft een keuze." en "Sorry, deze gegevens hebben we ook nodig. Vul alstublieft dit veld in.". Schermlezers in de "formulier"-modus slaan echter vaak inhoud over tussen invoervelden, waardoor de foutmelding mogelijk niet wordt aangekondigd. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.
Zie ook pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie onder “Geldverzekering wijzigen - DELA Uitvaartplan (polisnummer: 1621622)” in het invoerveld “Vul uw gewenste Geldverzekering in:”.
Een soortgelijk probleem is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/gezinslid-op-zelfstandige-polis onder “Een eigen polis voor uw kind of ex-partner - polisnummer: 1621622” in het invoerveld “Wie wordt de nieuwe verzekeringnemer?” en “E-mailadres van uw kind/ex-partner*”.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staat onder het kopje "Verzekering", een lijst met 6 items zonder de juiste markering. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela/uitvaartverzekering?polisnr=1621622 onder “Diensten in uw verzekering”.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staan secties met inhoud die kan worden in- en uitgeklapt. De teksten die de secties openen hebben geen rol van een kop. Zie onder het kopje “Verzekeringen”. De teksten waarmee je delen van een accordion kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie onder “Geldverzekering wijzigen - DELA Uitvaartplan (polisnummer: 1621622)”. Controleer andere pagina’s op het voorkomen van deze functionaliteit.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon onder "Verzekering” staat een lijst. De link “Bekijk welke aandoeningen, onderzoeken en opnames in deze categorie voorkomen.” opent weer een andere lijst. De relatie tussen deze link en de andere lijst is niet in de code vastgelegd. Dit kan worden opgelost door aria-controls attribuut toe te voegen. Dit komt ook op andere pagina’s voor, bijvoorbeeld https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie en op https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/gezinslid-op-zelfstandige-polis is de kop "Weet u het e-mailadres van uw kind/ex-partner niet?" onjuist gemarkeerd met <strong> in plaats van het juiste heading-element. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremerenfeatures staat een voortgangsbalk. Deze visuele indicator helpt ziende gebruikers te begrijpen waar ze zich binnen het proces bevinden. Om de toegankelijkheid te verbeteren, moet deze voortgangsbalk ook bruikbaar zijn voor schermlezergebruikers, met name bij de eerste stap. Voortgangsbalk laat zien op welk punt de bezoeker is in een proces. Deze informatie is zichtbaar voor ziende bezoekers, en moet ook toegankelijk zijn voor bezoekers met een schermlezer. Daarvoor moet de informatie over de voortgang in de code worden vastgelegd. Gebruik hiervoor bijvoorbeeld een visueel verborgen tekst of een aria-label.

Op pagina https://a.dela.nl/mijndela/uitvaartverzekering?polisnr=1621622 staat onder "Snel naar" een groep links die visueel als één groep worden weergegeven, maar deze groepering wordt niet weerspiegeld in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element.

Het PDF-document op https://a.dela.nl/-/media/files/verzekeringen/dup/D216_W0923_Algemene_voorwaarden_DUP_41.pdf bevat geen codes, waardoor de inhoud niet toegankelijk 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. Ook de PDF-documenten “nieuwe verzekering” en “Uw nieuwe DELA CoöperatiespaarPlan” bevatten geen codes.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon , staat een formulier met velden die persoonlijke inforamtie van de bezoeker verzamelen: “Voornaam*”, “Achternaam (geboortenaam)*”, “Geboortedatum*”. Het autocomplete-attribute ontbreekt. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden 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. 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: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Bovenaan op Mijn Dela staat een zoekveld. De placeholder tekst “Stel uw vraag” heeft onvoldoende contrast. Deze tekst is nodig om dit invoerveld met stem te bedienen en moet daarom voldoende contrast hebben.
De blauwe (HEX #9ACCDB) placeholder tekst tegen de witte achtergrond heeft een contrast ratio van 1,7:1.

Op pagina https://a.dela.nl/mijndela staat een blauwe (HEX#007FA4) tekst "Uitloggen" op een blauwe (HEX#E5F2F6) achtergrond. De kleurcontrastverhouding is te laag: 4,0:1.Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.
Dit komt ook voor op pagina https://a.dela.nl/mijndela onder “Mijn DELA van de heer P.G.J.T. van 't Westeinde” in de links “Mijn gegevens”, “Belangrijke documenten”, ”Mijn uitvaartwensen”, “Mijn ledenvoordelen”. De kleurcontrastverhouding is te laag: 4,0:1.
Een soortgelijk probleem is gezien op pagina https://a.dela.nl/mijndela. Daar staat а witte tekst "Lees hier meer" en "Lees de verhalen" op oranje (HEX #ED7522) achtergrond. De kleurcontrastverhouding is te laag: 2,9:1.

Op pagina https://a.dela.nl/mijndela, onder de tekst "Belangrijke links" staan а blauwe (HEX #007fa4) links op grijze (HEX #EBEB) achtergrond. De kleurcontrastverhouding is te laag: 3,9:1.

Op pagina https://a.dela.nl/mijndela, onder het kopje "Uw uitvaartwensen" verandert de tekst van de link "Uitvaartwensen bekijken of wijzigen" wanneer deze link de toetsenbordfocus krijgt. De contrastverhouding van deze tekst is 2,8:1. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbord focus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover).
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela. Daar staat а witte tekst "Lees hier meer" en "Lees de verhalen" op oranje (HEX #F29F65) achtergrond. De kleurcontrastverhouding is te laag: 2,1:1.
Een soortgelijk probleem doet zich voor op pagina https://a.dela.nl/mijndela/persoonsgegevens onder het kopje "Persoonsgegevens", "Adresgegevens" in de knop "Wijzigen" en onder het kopje "Mijn DELA Account" in de knop "Wachtwoord wijzigen". De contrastverhouding tussen de rand van het toetsenbord en de achtergrond is 2,8:1.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon verschijnen de foutmeldingen in rode (HEX #E54C42) tekst op een witte achtergrond. De resulterende contrastverhouding is 3,9:1.
Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen. Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie onder “Geldverzekering wijzigen - DELA Uitvaartplan (polisnummer: 1621622)” waar foutmeldingen in rode (HEX #E54C42) tekst verschijnen op een blauwe (HEX #E5F2F6) achtergrond. De resulterende contrastverhouding is 3,4:1.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://a.dela.nl/mijndela in de <head> sectie van de HTML-code zijn maximum-scale en user-scalable=no aanwezig. Dit wordt niet afgekeurd, maar kan wel verbeterd worden, zodat ook oudere browsers de website toegankelijk kunnen tonen. Vroeger gaf deze code veel problemen voor bezoekers die sterk inzoomden. Moderne browsers kunnen de code negeren. Maar het is toch het beste om de code te verwijderen.

Wanneer een bezoeker inzoomt op https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren, verdwijnt het kruimelpad. Dit is niet de bedoeling, want op deze manier gaat functionaliteit verloren. Zorg dat alle content en functionaliteiten leesbaar en bruikbaar blijven als een bezoeker inzoomt. Zie ook https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/catering.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela als de link "Uitvaartwensen bekijken of wijzigen" de toetsenbordfocus krijgt, is deze zichtbaar door een blauwe (HEX #4DA6BF) rand om de link. De contrastverhouding tussen de rand van de toetsenbordfocus en de blauwe (HEX #E5F2F6) achtergrond is 2,4:1. Dit moet minimaal 3:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela wanneer de link "Lees hier meer" en "Lees de verhalen" de toetsenbordfocus krijgt, deze is zichtbaar door een oranje (HEX #F29F65) toetsenbordfocus. De contrastverhouding tussen de rand van de toetsenbordfocus en de witte achtergrond is 2,1:1 Ditzelfde probleem is gezien op pagina https://a.dela.nl/mijndela/persoonsgegevens, onder de kopjes "Persoonsgegevens", "Adresgegevens", en "Contactgegevens", is er een knop en een link "Wijzigen". De toetsenbordfocus-indicator gebruikt een blauwe kleur (HEX #4DA6BF) op een witte achtergrond. De contrastverhouding tussen de toetsenbordfocusrand en de achtergrond is 2,8:1.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon, verschijnt een formulier als de bezoeker ‘ja’ kiest bij de vraag “Wilt u nog een gezienslid toevoegen?”. Wanneer het veld is ingevuld, verandert de rand van het veld in groen en wordt het contrast onvoldoende. De contrastverhouding tussen de groene (HEX #75bb21) rand en de witte achtergrond van de pagina wordt 2,4:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon en op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie onder “Geldverzekering wijzigen - DELA Uitvaartplan (polisnummer: 1621622)”.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staan keuzerondjes. Wanneer een rondje in geselecteerd, krijgt het een oranje vulling. Het contrast met de niet geselecteerd rondje is 2,9:1. Dit moet minimaal 3,0:1 zijn.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren staat een voortgangsbalk. De contrastverhouding tussen de groene (HEX #91C94D) voorgrond en de grijze (HEX #EBEBEB) achtergrond is 1,7:1. Dit maakt het moeilijk voor gebruikers met een visuele handicap om de voortgang waar te nemen of deze te onderscheiden van de achtergrond. Om dit probleem op te lossen, moet het actieve en inactieve deel van de voortgangsbalk een contrastverhouding hebben van ten minste 3:1 met de omringende kleuren.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/catering en https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/overige-wensen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als op pagina https://a.dela.nl/mijndela/leden-van-de-cooperatie 400% wordt ingezoomd, verandert de tabnavigatie onder “Mijn Dela” in een knop met de tekst “Mijn ledenvoordelen”. Deze knop is niet met het toetsenbord te bedienen.
Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.
Dit gebeurt op alle pagina’s waar deze navigatie staat.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon, zijn de tooltips naast de invoervelden niet met toetsenbord te bedienen. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden. Dezelfde probleem is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon, onder de tekst '€ Vrij te besteden bedrag (hele getallen)' en 'Is uw gezinslid een kind? (in verband met kinderpremie)' wanneer de ingevoerde datum voor het veld minder dan 25 jaar is. Een soortgelijk probleem doet zich voor op pagina https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/overige-wensen.

Op pagina https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/overige-wensen is binnen de sectie "Overige wensen" bij de radiobutton "Bedrag voor overige wensen" een invoerveld aanwezig. Dit invoerveld is niet toegankelijk via het toetsenbord. Zorg ervoor dat alle invoervelden met het toetsenbord kunnen worden bediend.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van Mijn Dela 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: Het <title> element op pagina https://a.dela.nl/mijndela/mijn-documenten is leeg. Dit element moet op elke pagina aanwezig zijn en unieke tekst bevatten die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Deze tekst wordt getoond in de tab van de browser. Met een duidelijke beschrijving kunnen gebruikers makkelijker navigeren tussen verschillende pagina’s. Plaats een tekst in het title-element die de inhoud van de pagina beschrijft.

Pagina’s https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren, https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/catering en https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/overige-wensen hebben dezelfde tekst in het <title>-element van de pagina: "Bereken uw uitvaartkosten". 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://a.dela.nl/-/media/files/verzekeringen/dup/D216_W0923_Algemene_voorwaarden_DUP_41.pdf 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. Ook de PDF-documenten “Uw nieuwe DELA CoöperatiespaarPlan” en “Nieuwe verzekering” hebben geen titel ingesteld in de documenteigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Indien men Mijn Dela bezoekt op een mobiel schermformaat, opent de knop "Mijn verzekeringen" een dropdown menu. De toetsenbordfocus verlaat dit menu en gaat naar de link "1621622". Het menu blijft open staan. Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Op pagina https://a.dela.nl/mijndela/persoonsgegevens staat een tabnavigatie die begint met “Mijn verzekeringen”. De toetsenbordfocus is niet logisch in dit onderdeel. Zodra een bezoeker een van deze items met een Enter toets selecteert, landt de focus op de browserbediening. De focus dient zich in de nieuw geopende content te verplaatsen.
Dezelfde observatie wordt gedaan op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren. Na het klikken op de link 'Bereken de kosten van een uitvaart' verplaatst de focus zich naar een onzichtbaar element in plaats van naar de knop met het printerpictogram.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon worden foutmeldingen weergegeven in het veld "Geboortedatum*" bij het indienen van het formulier met onjuiste gegevens, zonder dat de pagina opnieuw wordt geladen. Echter, de focus wordt niet automatisch naar de eerste foutmelding verplaatst. Hierdoor moeten toetsenbordgebruikers met Shift+Tab terug navigeren om de fout te vinden, wat inefficiënt is. Zorg dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren na de link “Bereken de kosten van een uitvaart” landt de focus op een onzichtbaar element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela, onder het kopje "Mijn DELA van de heer P.G.J.T. van 't Westeinde", staan links met een potlood-icoontje die geen inhoud hebben en dus geen linkdoel. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.
Hetzelfde probleem is gezien op pagina https://a.dela.nl/mijndela onder het kopje "DELA UitvaartPlan" voor Polisnummer "1621622" en "8291396" links. Een soortgelijk probleem is gezien op pagina https://a.dela.nl/mijndela/mijn-documenten onder het kopje "DELA Uitvaartplan" voor Nummer "1621622" en "8291396".

Op pagina https://a.dela.nl/mijndela, onder het kopje "DELA UitvaartPlan" en "DELA LeefdoorPlan", bevatten meerdere links dezelfde tekst "Betaalgegevens wijzigen". Deze tekst beschrijft de bestemming van de link niet volledig, waardoor onduidelijkheid ontstaat, vooral voor gebruikers met cognitieve beperkingen of gebruikers die afhankelijk zijn van schermlezers. Linkteksten die meerdere keren op een pagina voorkomen geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘betaalgegevens wijzigen voor polisnummer [number]’ toe te voegen.
Dezelfde observatie wordt gedaan op pagina https://a.dela.nl/mijndela, onder de koppen "DELA UitvaartPlan" en "DELA LeefdoorPlan" bij de links "Betalingstermijn wijzigen", "Persoonsgegevens wijzigen", "Belangrijke documenten", en onder de kop "Praat met uw naasten over uw uitvaartverzekering" bij de link "Lees hier meer", en ook onder "Omdat elk leven oneindig aandacht verdient" bij de link "Lees de verhalen" treedt hetzelfde probleem op.
Zie ook pagina https://a.dela.nl/mijndela/persoonsgegevens onder de koppen "Persoonsgegevens" en "Adresgegevens" bij de link "Wijzigen".
Daarnaast komt het probleem voor op de pagina’s https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren en
https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/catering: bij de links "Lees meer", "Lees minder" en "Details" treedt hetzelfde probleem op.

Op pagina https://a.dela.nl/mijndela/mijn-documenten verwijst de link "Ga naar belangrijke documenten" onder de kop "DELA Uitvaartplan" naar https://a.dela.nl/mijndela/uitvaartverzekering?polisnr=1621622&inschrijverId=381&systeemId=VASDELA#belangrijke-documenten. Onder de kop "DELA Leefdoorplan" is een link met dezelfde tekst aanwezig, maar deze verwijst naar een andere bestemming. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn. Dit komt op meerdere pagina’s voor.

Uitkomst: Onvoldoende

Bevindingen: Er is maar één manier om alle pagina's op deze website te vinden en dat is de link. Zorg ervoor dat er een andere manier is om elke pagina te bereiken.
Elke pagina op de website moet op minimaal twee manieren bereikbaar zijn. Bijvoorbeeld via een zoekfunctie, sitemap, links op de homepage of links in de footer.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren is de focus niet zichtbaar op de radiobuttons onder 'Basiszaken bij cremeren' radio buttons." 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://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon heeft het invoerveld 'Achternaam (geboortenaam)' een interactief element met het label '?', dat geen zichtbare toetsenbordfocusindicator heeft. Dezelfde observatie wordt gedaan op dezelfde pagina onder de tekst '€ Vrij te besteden bedrag (hele getallen)' en 'Is uw gezinslid een kind? (in verband met kinderpremie)' wanneer de ingevoerde datum voor het veld minder dan 25 jaar is. Zorg dat de toetsenbordfocus zichtbaar is op knoppen, zodat bezoekers weten wanneer zij een knop kunnen indrukken.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de metadata van de PDF “Uw nieuwe DELA CoöperatiespaarPlan” is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen. Dit geldt ook voor het document “Nieuwe verzekering”.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren wordt automatisch verzonden als de radiobutton "Basiszaken bij cremeren" of "Basiszaken bij begraven" toetsenbordfocus krijgt. Dit kan voor veel bezoekers verwarrend zijn. Formulieren mogen alleen verstuurd worden als de bezoeker daar bewust voor kiest. Bijvoorbeeld doordat hij op een verzendknop klikt. Het mag dus niet automatisch gebeuren op het moment dat een element toetsenbordfocus krijgt. Het toevoegen van een verzendknop is in deze situatie de beste oplossing.
Dit komt ook voor op andere pagina’s waar de keuze uit twee opties kan worden gemaakt.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon worden bij het indienen van het formulier met lege of onjuiste gegevens de meldingen 'Maak alstublieft een keuze' en 'Sorry, deze gegevens hebben we ook nodig. Vul alstublieft dit veld in' weergegeven voor verplichte velden. 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 staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staat onder de tekst "Geboortedatum*" een datuminvoerveld. Dit veld accepteert alleen een specifiek datumformaat, maar het label bevat geen instructies over het vereiste formaat. Hierdoor moet een bezoeker allerlei schrijfwijzen uitproberen om te ontdekken op welke manier de datum moet worden ingevuld. Dit is ontoegankelijk voor veel bezoekers. Zorg dat de instructie over de schrijfwijze van de datum altijd zichtbaar is op de pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://a.dela.nl/mijndela, onder het kopje "Mijn DELA van de heer P.G.J.T. van 't Westeinde", staan links met een potlood-icoontje zonder toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft. Hetzelfde is te zien op pagina https://a.dela.nl/mijndela/persoonsgegevens, onder het kopje "Mijn DELA van de heer P.G.J.T. van 't Westeinde" staan links met een potlood-icoontje waar geen toegankelijke naam bij staat. Er zijn meer interactieve elementen op deze website waar de toegankelijke naam ontbreekt.

Op pagina https://a.dela.nl/mijndela, op een klein scherm, staat onder het kopje "Mijn DELA" een knop "Mijn verzekeringen" met een submenu, maar in de HTML wordt niet aangegeven of het submenu open of gesloten is. Als er een button is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen. Daarvoor kan het aria-expanded-attribuut gebruikt worden. Maar let op: dit attribuut werkt alleen zolang de focus op de link blijft. Verplaatst de focus? Gebruik dan een verborgen tekst om de staat van het submenu aan te geven. Hetzelfde is te zien op een scherm van mobiel formaat op pagina's https://a.dela.nl/mijndela/persoonsgegevens en https://a.dela.nl/mijndela/uitvaartverzekering?polisnr=1621622 onder de kop "Mijn DELA" en op de pagina https://a.dela.nl/mijndela/leden-van-de-cooperatie onder de kop.

Op pagina https://a.dela.nl/mijndela/leden-van-de-cooperatie, wanneer ingezoomd, mist de knop "Mijn ledenvoordelen" de toegankelijke rol van een knop. 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. Zorg dat de knop de juiste toegankelijke rol heeft.
Hetzelfde is gezien op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon. In het formullier staan tooltip-icoontjes. Deze knoppen en de sluitknoppen binnen de tooltip-vensters missen de juiste toegankelijke rol. Zie ook pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie staat een invoerveld zonder toegankelijke naam. Zie het invoerveld naast “Vul uw gewenste Geldverzekering in”.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staat een formulier waarin tooltipknoppen worden gebruikt. Deze knoppen missen de juiste rol. Deze knop opent een dialoogvenster. De juiste attributen ontbreken. Om dit op te lossen, moet het attribuut aria-haspopup="dialog" worden toegevoegd aan de knop. Dit attribuut geeft aan dat het klikken op de knop een dialoogvenster opent. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het aria-expanded-attribuut, dat de waarde true of false moet krijgen. In het dialoogvenster heeft de sluitknop niet de juiste rol.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon staat onder de kop 'Verzekering' de link 'Bekijk welke aandoeningen, onderzoeken en opnames in deze categorie voorkomen', die een lijst opent. Deze is onjuist gecodeerd als een <a>-element (link), terwijl een ander interactief element, zoals een knop (<button>), geschikter zou zijn. Dit is geen correcte rol voor dit element. Het element werkt namelijk als een knop: als een bezoeker er op klikt wordt een bepaalde functie geactiveerd. Een link doet iets anders: die brengt bezoekers naar een andere locatie. Wijzig de rol van link naar die van knop (role=”button”).
Zie ook pagina’s https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren en https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/catering met links “Lees meer”, “Lees minder” en “Details”.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon zijn onder de kop 'Verzekering' openen link secties met verborgen inhoud. Hoewel de open- of gesloten status visueel duidelijk is, wordt deze niet programmatisch gecommuniceerd aan 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.
Dezelfde observatie wordt gedaan op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/wijzigen-dekking-en-premie onder de kop "Geldverzekering wijzigen - DELA Uitvaartplan (polisnummer: 1621622)".
Een soortgelijk probleem doet zich voor op de pagina’s: https://a.dela.nl/verzekeringen/uitvaartverzekering/kosten-uitvaart-berekenen/begraven-of-cremeren en https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/catering. Bij de links "Lees meer", "Lees minder" en "Details" is de open- of gesloten status visueel zichtbaar, maar wordt deze niet programmatisch gecommuniceerd aan schermlezers.

Op pagina https://a.dela.nl/mijndela/uitvaartplan/wijzigen/bijschrijven-persoon wordt onder de kop 'Verzekering' de slider ( een invoerveld) onder de tekst "€ Vrij te besteden bedrag (hele getallen)" weergegeven zonder een toegankelijke naam wanneer "Nee" is geselecteerd.

Op pagina
https://a.dela.nl/mijndela/uitvaartplan/kosten-uitvaart-berekenen/begraven-of-cremeren heeft een printknop geen rol en geen naam. Voeg deze toe zodat het voor gebruikers van schermleessoftware duidelijk is waar het interactieve element voor dient.

Uitkomst: Voldoende