Rapport:
Audit digitale toegankelijkheid website Yarden

Uitkomst: Onvoldoende

Bevindingen: Het logo "YARDEN" bovenaan de website https://www.yarden.nl/, geïmplementeerd met een img-element, mist een alt-attribuut.Hierdoor lezen schermlezers nu de bestandsnaam voor, en dat is niet de bedoeling. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat. Verder kan ook als de afbeelding een link is het linkdoel toegevoegd worden om te voldoen aan 2.4.4. Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

In de header bevat het hoofdmenu de link "Service & CONTACT" die het submenu opent. Wanneer dit submenu wordt geopend, staat er een afbeelding onder "Yarden uitvaartorganisatie". Deze afbeelding is toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten. Zie bijvoorbeeld pagina https://www.yarden.nl/.

Op pagina https://www.yarden.nl/ staat boven de kop "Wat kost een uitvaart" een decoratieve afbeelding. Het tekstalternatief is "uitvaartverzekering voor het hele gezin". Daarnaast heeft deze afbeelding een title-attribuut dat een korte beschrijving toevoegt aan de afbeelding: "gezin op bank homepage gecomprimeerd". Deze teksten beschrijven de afbeelding niet, "gezin op bank" zou bijvoorbeeld beter zijn.
Decoratieve afbeeldingen bieden geen extra informatie en worden daarom het beste verborgen voor schermlezers. Dat kan voor afbeeldingen in een img-element doormiddel van een leeg alt attribuut (alt=""). Het title-attribuut moet ook worden verwijderd om onnodig voorlezen door schermlezers te voorkomen.
Hetzelfde probleem doet zich ook voor op andere pagina's. Op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm staan de decoratieve afbeeldingen onder de kop "Wat kunt u van ons verwachten?" en boven de koppen "Overlijden melden" en "Meer weten over uw pakketpolis?". Deze afbeeldingen zijn toegevoegd via een img-element en het alt-attribuut ontbreekt. De afbeelding boven de kop "Uitvaart regelen" is ook toegevoegd via een img-element en het alt-attribuut van deze afbeelding bevat momenteel: "Rouwverwerking en nagedachtenis bij buitencolumbarium". Al deze afbeeldingen hebben een title-attribuut dat een beschrijving geeft bij elke afbeelding.

Op pagina https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm staan de afbeeldingen boven de kopjes "Checklist bij overlijden" en "Over Yarden". Op pagina https://www.yarden.nl/over-yarden.htm staan de afbeeldingen boven de kopjes "Uiteenlopende functies" en "Financieel jaarverslag". De afbeelding boven de kop "Laatste nieuws" heeft een alternatieve tekst die de tekst van de kop herhaalt. Het is dus een decoratieve afbeelding en moet ook worden verborgen voor schermlezers.
Zie ook andere pagina's.

Het logo in de footer van de website toont de volledige tekst "KEURMERK UITVAARTZORG STICHTING", maar de alt-tekst is alleen "Keurmerk uitvaartzorg".
In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “KEURMERK UITVAARTZORG STICHTING”. Zie pagina https://www.yarden.nl/

Op pagina https://www.yarden.nl/klantenservice.htm, onder het kopje “Wijzigingsformulieren”, bevatten de links met teksten "Machtiging Automatisch Incasso" en “Formulier zelfstandig voortzetten overige verzekering” een PDF-pictogram zonder een tekstalternatief. Hierdoor weet een blinde bezoeker niet dat dit een PDF-document is. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer het kan voorlezen. Voeg de informatie als verborgen tekst toe.

Op kleine schermen verschijnt in de sticky footer een link "Menu" met het hamburger-menupictogram. Wanneer erop wordt geklikt, verandert het pictogram in een "X"-pictogram en verandert de functie naar het sluiten van het menu. Hoewel de pictogrammen visueel deze toestand van het menu (openen of sluiten) overbrengen, is het niet toegankelijk voor gebruikers van schermlezers. Als het veranderen van een afbeelding iets betekent, moet die betekenis ook toegankelijk zijn voor blinde bezoekers. Zorg ervoor dat schermlezers ook de status van het menu begrijpen. Voeg bijvoorbeeld een visueel verborgen tekst toe, of gebruik een aria-expanded-attribuut. Zie pagina https://www.yarden.nl/.

Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm zijn gedeelten met verborgen inhoud aanwezig. Het pijlpictogram dat de aanwezigheid van de verborgen inhoud aangeeft, heeft geen tekstalternatief.
Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Deze informatie is niet aanwezig in de vorm van een aria-expanded-attribuut of een verborgen tekst.

In het PDF-document op https://www.yarden.nl/web/file?uuid=3fe6f3ec-1bce-4aa6-9162-b55bafdd49c7&owner=397f43a2-21ab-4891-93ba-f72eda29675d staat het logo met de zichtbare tekst "YARDEN". Dit logo is toegevoegd als artefact.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een `Figure`-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's staat in de header een navigatiemenu met links. Dit is een groep links die visueel als een 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. Zie pagina https://www.yarden.nl/.
Hetzelfde probleem wordt waargenomen in de footer. Er is een groep links "Cookies", "Disclaimer" en "Privacyverklaring" die visueel alleen als groep worden weergegeven.

Op alle pagina's bevat het hoofdmenu in de header de link "Service & CONTACT" waarmee het submenu wordt geopend. Wanneer dit submenu wordt geopend, worden de volgende teksten onjuist gemarkeerd met <strong> in plaats van met de juiste kop-ementen: “Yarden uitvaartorganisatie”, “Adresgegevens”, “Postadres”, “Vanuit buitenland”. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h3-h4. 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. Zie pagina https://www.yarden.nl/.
Hetzelfde probleem wordt waargenomen in de footer met de tekst "Keurmerk Uitvaartzorg" en op de pagina's https://www.yarden.nl/ met de tekst "Bereken uw premie" en https://www.yarden.nl/veilig-inloggen/mijn-yarden-extra-goed-beveiligd.htm met de tekst "In Mijn Yarden kunt u:".

Op alle pagina's bevat het hoofdmenu in de header links die submenu's openen. In de geopende submenu's staan koppen die niet als kop gemarkeerd zijn. Bijvoorbeeld, in het submenu dat wordt geopend door "Alles over DE UITVAART" is dit "Uitvaart regelen". In de HTML-code is het echter alleen gemarkeerd als een link (<a>) binnen een listitem-element (<li>). Schermlezers en andere hulpsoftware kunnen dit niet herkennen als een koptekst. Koppen zijn belangrijk voor gebruikers die afhankelijk zijn van schermlezers omdat ze helpen de paginastructuur te begrijpen en gemakkelijk te navigeren. Dit kan opgelost worden door koppen te markeren met het juiste HTML-element, op het juiste kopniveau: h2, h3, h4, h5 of h6. Behoud de linkfunctionaliteit door de <a> in de koptekst te nesten.
Zie pagina https://www.yarden.nl/.

Op alle pagina's, in de footer, is de volgende tekst niet gemarkeerd als een kop: "Contact". Deze tekst wordt toegevoegd als een lijstitem. Het moet echter worden gemarkeerd met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 or h6.
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. Zie pagina https://www.yarden.nl/.
Hetzelfde gebeurt op de pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm , in de footer met teksten: “Zakelijk” and “Franchise”.
Hetzelfde geldt voor de volgende pagina's. De teksten op deze pagina's zijn niet gemarkeerd als koppen. Op pagina
https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm dit zijn teksten: “Terugboeken incasso” en “Herinneringsbrief na terugboeken incasso”. Op pagina
https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm zie teksten: “1 Kies een categorie”, “2 Kies een onderwerp”, “3 Verfijn het onderwerp” and “4 Wat is uw vraag over 'Kind meeverzekeren'?”.

Op pagina https://www.yarden.nl/klantenservice.htm, onder het kopje “Wijzigingsformulieren” staat een lijst met vijf items zoals: "Wilt u ons machtigen voor automatische incasso of uw bankrekeningnummer wijzigen?", "Wilt u uw verzekering overdragen aan uw partner of kind?", "Wilt u een verzekering laten overdragen van iemand die overleden is?", en andere. In de code worden alle items echter in één li-element geplaatst.

Op pagina https://www.yarden.nl/ onder "Bereken uw premie" staat een invoerveld met als placeholder "Uw geboortedatum". Dit veld is bedoeld voor het invoeren van een datum. In de HTML-code wordt echter type="tel" gebruikt, wat bedoeld is voor het invoeren van telefoonnummers. Het gebruik van het verkeerde invoertype kan gebruikers en hulpsoftware in verwarring brengen. Om dit te verbeteren moet het veld het juiste invoertype gebruiken, zoals type="date", of type="text".

Op pagina https://www.yarden.nl/klantenservice.htm onder het kopje "Contactformulier" staat een groep keuzerondjes, voorafgegaan door de tekst "Bent u klant bij Yarden?". Hoewel de groep visueel is gegroepeerd, is deze relatie niet programmatisch gedefinieerd 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 "Bent u klant bij Yarden?”.
Een soortgelijk probleem doet zich voor op pagina https://www.yarden.nl/klantenservice/bsn.htm met selectievakjes "Ja" en "Nee" voorafgegaan door de tekst: "Bent u ook fiscaal inwoner van een ander land dan Nederland?" en

Op pagina https://www.yarden.nl/klantenservice.htm wordt bij het verzenden van het formulier met lege of onjuiste gegevens een foutbericht weergegeven, bijvoorbeeld "Selecteer de categorie van uw vraag.". Schermlezers in de "formulier"-modus slaan echter vaak inhoud over tussen invoervelden, waardoor de foutmelding mogelijk niet wordt weergegeven. 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. Hetzelfde staat op de pagina:
https://www.yarden.nl/klantenservice/bsn.htm.

Op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm staan tabellen onder de kopjes "Reactietermijn per onderwerp" en "Bereikbaarheid per e-mail en online". De juiste opmaak ontbreekt. Een gegevenstabel heeft een rij of kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th-elementen en de gegevens in td-elementen.

Op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm wordt onder "Incasso na verzoek beëindiging verzekeringspolis" een blok tekst met meerdere alinea's ten onrechte gemarkeerd als een enkel p-element. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.
Hetzelfde probleem wordt waargenomen op de pagina https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm onder de kop "Aanvraag uitkering polis".
Zie ook op pagina's https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm en https://www.yarden.nl/veilig-inloggen/mijn-yarden-extra-goed-beveiligd.htm de tekst “Wij doen er alles aan om u zo goed mogelijk van dienst te zijn” bovenaan. Deze tekst is onjuist gemarkeerd met twee p-elementen, hoewel het een enkele tekst is. Op pagina https://www.yarden.nl/over-yarden.htm is de tekst“Het is onze missie om een goed en waardig afscheid voor iedereen bereikbaar te maken”is ook gemarkeerd met twee p-elementen.

Op pagina https://www.yarden.nl/over-yarden.htm, onder het kopje "Werken bij Yarden", wordt het strong-element misbruikt voor stylingdoeleinden. De hele zin is omwikkeld met een strong-element, waarschijnlijk om hem vet te maken: “Ook werken bij Yarden?”.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS.

Pagina https://www.yarden.nl/klantenservice/bsn.htm bevat een formulier. De label-elementen voor de invoervelden "Relatienummer", "Geboortedatum" en "Burgerservicenummer (BSN)" gebruiken een for-attribuut dat naar dezelfde id-waarde wijst: "Nee". Deze id hoort echter bij een selectievakje met zichtbare tekst "Nee" onder "Bent u ook fiscaal inwoner van een ander land dan Nederland?". Hierdoor zijn deze labels niet correct gekoppeld aan de corresponderende invoervelden.
Label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Door deze link lezen schermlezers het label voor als een bezoeker direct naar het invoerveld navigeert.

Op pagina https://www.yarden.nl/veilig-inloggen/mijn-yarden-extra-goed-beveiligd.htm, onder het kopje "Hoe werkt inloggen in twee stappen", is een lijst met 2 items aanwezig maar ontbreekt de juiste opmaak. 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.

Op pagina https://www.yarden.nl/klantenservice.htm beschrijft de kop "Snel naar" niet adequaat de inhoud die erop volgt. Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm onder "1 Kies een categorie" heeft de actieve link "OVER MIJN VERZEKERING" (naar de huidige sectie) een duidelijk visueel uiterlijk, maar dit onderscheid is niet aanwezig in de code. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="true" toe aan de actieve link.

Het PDF-document op https://www.yarden.nl/web/file?uuid=080b6f62-471f-4716-863b-218a37988296&owner=397f43a2-21ab-4891-93ba-f72eda29675d 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.

In het PDF-document op https://www.yarden.nl/web/file?uuid=3fe6f3ec-1bce-4aa6-9162-b55bafdd49c7&owner=397f43a2-21ab-4891-93ba-f72eda29675d staan verschillende koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld op pagina 1 de teksten "Aanvraag Wijziging", "Gegevens huidige verzekeringnemer", "Inloggegevens Mijn Yarden", en andere.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

In het PDF-document op https://www.yarden.nl/web/file?uuid=3fe6f3ec-1bce-4aa6-9162-b55bafdd49c7&owner=397f43a2-21ab-4891-93ba-f72eda29675d, op pagina 2, staat één alinea tekst die begint met: "U kunt ook met uw smartphone ... ". In de tags is deze alinea gemarkeerd als twee p-tags.
De visuele structuur moet weerspiegeld worden in de tags. Als tekst visueel uit een aantal alinea's bestaat, moet hetzelfde aantal `P`-tags aanwezig zijn in de tags. Zorg dat elke alinea in een aparte `P`-tag staat.

In het PDF-document op https://www.yarden.nl/web/file?uuid=3fe6f3ec-1bce-4aa6-9162-b55bafdd49c7&owner=397f43a2-21ab-4891-93ba-f72eda29675d zijn onderaan de tekst die begint met "Oude Stadsgracht 1 ..." en de tekst "DELA Natura- en levensverzekeringen N.V." toegevoegd als artefact. Hierdoor is deze informatie niet toegankelijk voor schermlezers en niet beschikbaar voor blinde en slechtziende bezoekers.

Advies. Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm, er zijn twee koppen van niveau 1: “De gratis verzekering van mijn kind vervalt. Hoe kan ik ervoor zorgen dat mijn kind een eigen polis krijgt?” en “Veelgestelde vragen”. De pagina moet slechts één <h1> hebben die de inhoud van de pagina beschrijft.

Advies. Op de pagina's van de website https://www.yarden.nl/ staan afbeeldingen die zijn toegevoegd met CSS (met pseudo-elementen ::before en ::after). Dit kan toegankelijkheidsproblemen veroorzaken omdat schermlezers inhoud kunnen aankondigen die is toegevoegd met CSS-pseudo-element en de eigenschap content. Decoratieve inhoud moet worden verborgen voor schermlezers. Zie bijvoorbeeld op pagina https://www.yarden.nl de link met de tekst "Zoeken" en een vergrootglaspictogram. De toegankelijke naam van de link is "ZoekenE". Het "E" gedeelte is toegevoegd via ::before en content: "E". In de footer is dit het pictogram "b" voor de link "Yarden blog". Het wordt toegevoegd via ::before en content: "0" en kan worden aangekondigd door de schermlezer. Op de pagina https://www.yarden.nl/klantenservice/bsn.htm zie je de pijlpictogrammen in de broodkruimels. Ze zijn toegevoegd via ::after en content: "I" en kunnen worden aangekondigd door de schermlezer. Zie ook andere pagina's.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm is de volgorde van HTML-elementen binnen artikelen onder de kop "Complimenten en klachten" onjuist, met afbeeldingen boven koppen. De huidige volgorde is afbeelding, kop, tekst, link. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.
Een soortgelijke kwestie staat op de pagina's
https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm, https://www.yarden.nl/over-yarden.htm en https://www.yarden.nl/index/passieconcert-heerlen.htm.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/klantenservice.htm ontbreekt bij een formulier met invoervelden voor persoonsgegevens (bijvoorbeeld "Achternaam", "E-mailadres", "Telefoonnummer") het attribuut autocomplete. 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.
Hetzelfde probleem staat op de pagina:
https://www.yarden.nl/klantenservice/bsn.htm.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/ , onder het kopje "Wat kost een uitvaart" zijn links alleen in kleur te onderscheiden van gewone tekst, zie "uitvaartcalculator", "Mijn Laatste Wensen uitvaartverzekering". Het kleurcontrast is 1,7:1.
Dit kan een probleem zijn voor kleurenblinde of slechtziende gebruikers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat. Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen. Een andere oplossing is het verhogen van het contrast tot minimaal 3,0:1 en het toevoegen van een andere visuele clue op hover, zoals onderstreping.

Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm, onder "2 Kies een onderwerp" en "3 Verfijn het onderwerp" staan links die visueel verschillen van de rest van de links door tekst en achtergrondkleuren. Zie "Verzekering afsluiten" en "Kind meeverzekeren". Deze links zijn alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner op de website https://www.yarden.nl/ hebben de knoppen "Alles afwijzen", "Alle cookies accepteren" en "Alle toestaan" onvoldoende kleurcontrast. De witte tekst van de knop tegen de oranje (HEX #F07F0A) achtergrond heeft een contrastverhouding van 2,7:1. Dit is lager dan het vereiste minimum van 4,5:1 voor standaardtekst.
Hetzelfde probleem doet zich voor op andere pagina's. Op pagina https://www.yarden.nl/klantenservice.htm de link "Ga naar Mijn Yarden", op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm de linken "Bekijk de pagina" en "Lees meer", op pagina https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm de link "Checklist bij overlijden", en andere pagina's.

Op alle pagina's van de website staan blauwe links die onvoldoende kleurcontrast hebben tegen de bruine achtergrond. Hieronder staan enkele voorbeelden. In de cookiebanner staat een blauwe (HEX #1177A1) link met tekst "Meer informatie" op de lichtbruine achtergrond (HEX #F0EDE9). Dezelfde kleurencombinatie is te zien op andere pagina's. Op homepage https://www.yarden.nl/ zijn dit de links "Uitvaartverzekering", "Inspiratie" en "Uitvaartwensen" onder het kopje "Voor de uitvaart", en ook links onder het kopje "Tijdens de uitvaart". Zie op pagina https://www.yarden.nl/over-yarden.htm onder het kopje "Geschiedenis en missie" de links "geschiedenis" en "missie".
Op pagina https://www.yarden.nl/klantenservice/bsn.htm onder "Fiscaal inwonerschap" staat een blauwe link "Belastingdienst". De contrastverhouding is 4,3:1. Dit moet minimaal 4,5:1 zijn.

Op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm , onder "Bereikbaarheid per e-mail en online", staan blauwe links "online contactformulier" op de lichtgrijze (HEX #F2F0EF) achtergrond. De kleurcontrastverhouding is 4,4:1. De blauwe link "Facebook" op de lichtbruine (HEX #E1DDDA) achtergrond heeft een kleurcontrastverhouding van 3,7:1. Dit moet minstens 4,5:1 zijn.
Op pagina https://www.yarden.nl/klantenservice/bsn.htm onder "Akkoordverklaring" staat een lichtblauwe (HEX #80B2C5) link "privacyverklaring". Tegen de lichtbruine (HEX #F0EDE9) achtergrond is het contrast 2,0:1.
Zie ook andere pagina's.

Op alle pagina's opent de link "Zoeken" in de header een invoerveld voor zoekopdrachten. De zoekbalk heeft onvoldoende kleurcontrast voor de placeholder-tekst. De grijze (HEX #999999) placeholder-tekst tegen de witte achtergrond heeft een contrastverhouding van 2,8:1, wat lager is dan de vereiste 4,5:1 voor standaardtekst. Het moet minimaal 4,5:1 zijn.
Zie pagina https://www.yarden.nl/ .
Hetzelfde probleem wordt waargenomen in het hoofdmenu bovenaan de pagina. In het geopende menu-item "Alles over DE UITVAART" staat een invoerveld met de placeholder-tekst: "Postcode / Plaats / Naam". Zie ook https://www.yarden.nl/ , onder "Bereken uw premie", het invoerveld met de placeholder "Uw geboortedatum". Op pagina https://www.yarden.nl/klantenservice.htm , onder het kopje "Kom bij ons langs", heeft het invoerveld een lichtbruine (HEX #CEC2B7) placeholder-tekst "Postcode / plaats". Tegen de witte achtergrond is het contrast 1,7:1. Het moet minimaal 4,5:1 zijn.

Op de pagina's van de website https://www.yarden.nl/ wordt de bruine kleur gebruikt. In combinatie met verschillende kleuren is het kleurcontrast te laag. Het kleurcontrast moet minstens 4,5:1 zijn. Hieronder worden voorbeelden gegeven. Ze zijn echter niet uitputtend.

Op alle pagina's, in de footer, staan lichtbruine (HEX #CEC2B7) teksten op een bruine (#6A5B52) achtergrond. Bijvoorbeeld "Service & Contact", "Yarden blog", "Keurmerk Uitvaartzorg" en anderen. De kleurcontrastverhouding is 3,7:1.

Als de pagina's van de website https://www.yarden.nl/ worden bekeken op een klein scherm, verschijnt een sticky header en footer. In de sticky header heeft de witte tekst van de links "overlijden melden 088 - 3353433"en "Inloggen Mijn Yarden" tegen de bruine (HEX #94867B) achtergrond een te lage kleurcontrastverhouding: 3,5:1. De witte tekst van de links in de sticky footer, bijvoorbeeld "Home", tegen de lichtbruine (HEX #A99D95) achtergrond heeft ook een te lage contrastverhouding: 2,6:1. Dezelfde kleurencombinaties worden waargenomen op andere pagina's. Zie op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm onder "Reactietermijn per onderwerp" en "Bereikbaarheid per e-mail en online" de witte tekst in de tabelkopcellen op de lichtbruine achtergrond en de bruine tekst "Wat kunt u van ons verwachten?" op de witte achtergrond. Zie op pagina https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm de tekst van de kopjes, bijvoorbeeld "Uitkeren Natura Uitvaartpolis". Op pagina https://www.yarden.nl/klantenservice/bsn.htm is dit de bruine tekst "Controleer uw gegevens" en de lichtbruine tekst van de items in de broodkruimels ("Home", "Service & Contact", "BSN").

Op pagina https://www.yarden.nl/klantenservice.htm wordt onder de kopjes "Contact met Yarden", "Adresgegevens Yarden Uitvaartorganisatie", "Wijzigingsformulieren" en "Contactformulier" de kleur bruin (HEX #9C928F) gebruikt voor de tekst. Tegen de witte achtergrond is de kleurcontrastverhouding te laag: 3,1:1. Bijvoorbeeld de volgende teksten: "Telefonisch contact", "Bel 24/7:", "Vind een Yarden locatie bij u in de buurt" onder "Contact met Yarden".
Op dezelfde pagina onder het kopje "Contactformulier" staat een lichtbruine (HEX #ACA4A1) tekst op de witte achtergrond. Zie bijvoorbeeld de tekst "Uw e-mailadres wordt gebruikt om antwoord te geven op uw vraag." onder het "E-mailadres" label. Het kleurcontrast is 2,4:1.
Op pagina https://www.yarden.nl/klantenservice/bsn.htm staat bruine (HEX #A49B95) tekst, bijvoorbeeld "U vindt uw relatienummer bovenaan in de brief die u ontvangt.", op een lichtbruine (HEX #F0EDE9) achtergrond. De kleurcontrastverhouding is te laag: 2,3:1.
Zie ook andere pagina's.

Op pagina https://www.yarden.nl/klantenservice.htm staan de witte teksten van de links "Over Yarden" en "Blog" bovenaan en van de kop "Klantenservice" op een afbeelding.
Het contrast van de witte linktekst tegen de lichtblauwe achtergrondafbeelding (HEX #DCE7E9) is 1,3:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Het contrast tussen de witte tekst "Klantenservice" en de lichtblauwe (HEX #E1EBEF) achtergrondafbeelding is 1,2:1, waardoor het moeilijk is voor bezoekers om de tekst te lezen. Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn.
Een soortgelijk probleem doet zich voor op de pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm .

Op pagina https://www.yarden.nl/klantenservice.htm verandert de tekst van de linken in de gedeelten onder "Direct zelf regelen", "Snel naar", "Veelgestelde vragen" en andere wanneer deze linken de toetsenbordfocus krijgen en de bezoeker er met de muis overheen beweegt. De contrastverhouding van deze blauwe (HEX #18AAE6) tekst tegen een witte achtergrond is 2,6: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 wordt waargenomen op de pagina's https://www.yarden.nl/klantenservice.htm en https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/is-mijn-ongeboren-kind-gratis-meeverzekerd-1.htm met de linken "Over Yarden" en "Blog" bovenaan en op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm met linken in de gedeelten met verborgen inhoud onder "Wat is uw vraag over 'Kind meeverzekeren'?".

Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm verandert de tekst van linken in de footer, bijvoorbeeld 'Service & Contact', 'Yarden blog' en andere linken wanneer deze linken de toetsenbordfocus krijgen en wanneer de bezoeker met de muisaanwijzer over deze linken beweegt. De contrastverhouding van deze blauwe (HEX #18AAE6) tekst op bruine (HEX #6A5B52) achtergrond is 2,5:1. Een soortgelijk probleem wordt waargenomen op dezelfde pagina op een klein scherm, voor de links in de sticky footer, zoals "Home". De contrastverhouding van de blauwe (HEX #17AAE6) linktekst tegen de bruine (HEX #A99D95) achtergrond is 1,0:1. Zie ook links in het menu geopend door "Menu" link.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de tekst op de website wordt ingezoomd op 200%, zijn de links in de kop "Over Yarden" en "Blog" niet zichtbaar. Als een bezoeker inzoomt, moet alles nog werken. Zie https://www.yarden.nl/.

Wanneer de pagina https://www.yarden.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 200%, gaat de volgende tekst verloren: de tekst begint met “Afscheid nemen, u staat er waarschijnlijk niet vaak bij stil…”
Als een bezoeker inzoomt, moet alles nog leesbaar zijn.
Hetzelfde probleem doet zich voor op andere pagina's. Op de pagina's https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm, https://www.yarden.nl/klantenservice/bsn.htm en
https://www.yarden.nl/veilig-inloggen/mijn-yarden-extra-goed-beveiligd.htm met tekst "Wij doen er alles aan om u zo goed mogelijk van dienst te zijn", op pagina https://www.yarden.nl/over-yarden.htm met tekst “Het is onze missie om een goed en waardig afscheid voor iedereen bereikbaar te maken”, en anderen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Er ontstaan problemen als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Bij succescriterium 1.4.4 is al beschreven dat er content en/of functionaliteit verloren gaat als tot 200% wordt ingezoomd. Dat gebeurt ook als tot 400% wordt ingezoomd. Deze problemen zijn hier daarom niet nog een keer benoemd. Zorg dat de problemen niet alleen opgelost worden voor als tot 200% is ingezoomd, maar ook voor 400%.

Wanneer de pagina's van de website https://www.yarden.nl/ worden bekeken met een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%, bedekt de sticky footer de volgende inhoud: de links "Cookies", "Disclaimer", "Privacyverklaring" en de tekst "© 2025 Yarden, alle rechten voorbehouden". Deze inhoud is niet zichtbaar.

Als de pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, gaat de inhoud gedeeltelijk verloren. Het menu met linken als "Opzegtermijn", "Incasso", "Betalingsachterstand" en andere wordt plakkerig en bedekt de inhoud eronder.

Als de pagina https://www.yarden.nl/klantenservice.htm wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, overlapt onder het kopje "Contactformulier" de tekst "optioneel" de tekst "Met uw telefoonnummer kunnen we u sneller van dienst zijn.".

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, in de header, opent de link "Zoeken" een paneel met een invoerveld voor zoekopdrachten. De zoekbalk heeft onvoldoende kleurcontrast tussen het veld en de achtergrond. Het witte veld op de bruine (HEX #CEC2B7) achtergrond heeft een contrastverhouding van 1,7:1. Dit is te laag, het moet minimaal 3,0:1 zijn. Zie pagina https://www.yarden.nl/.

Hetzelfde probleem is waargenomen bij de invoervelden op andere pagina's. Deze invoervelden hebben bruine randen op de witte achtergrond. Zie invoervelden in de kopregel in het submenu "Alles over DE UITVAART", op pagina https://www.yarden.nl/ onder de kop "Bereken uw premie", op pagina
https://www.yarden.nl/klantenservice.htm onder de kopjes "Kom bij ons langs" en "Contactformulier" en op pagina https://www.yarden.nl/klantenservice/bsn.htm invoervelden in het formulier. Op pagina https://www.yarden.nl/klantenservice.htm onder het kopje "Contactformulier" wordt hetzelfde probleem waargenomen met de randen van selectievakjes en keuzerondjes.

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: Als je op elke pagina in het hoohfdmenu bijvoorbeeld over de link "Service & Contact" gaat met de muis (hover), verschijnt er aanvullende content. De bezoeker kan deze content niet weghalen zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escape toets kunnen doen. Aangezien de aanvullende content geen onderliggende content bedekt wordt dit niet afgekeurd, maar pas op dat bij het oplossen van 1.4.4 en 1.4.10 dit niet alsnog een probleem geeft. Dit geld voor alle links in het hoofdmenu waarbij aanvullende content wordt.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, in de header, is de link met tekst "Zoeken" niet toetsenbordbedienbaar.
Zorg dat de link zowel met de spatiebalk als de Enter-toets bediend kan worden.
Zie pagina https://www.yarden.nl/ .

Op de website staat een cookieknop. Als een bezoeker met de muis over deze knop beweegt, wordt een tooltip weergegeven. Dit gebeurt niet bij focus op het toetsenbord. Hierdoor kunnen bezoekers die alleen met het toetsenbord navigeren de tooltip niet zien. De informatie in de tooltip is voor hen dus niet toegankelijk. Zorg dat de tooltips ook openen als ze toetsenbordfocus krijgen.
Zie pagina https://www.yarden.nl/.

Op pagina https://www.yarden.nl/klantenservice.htm zijn een aantal interactieve elementen niet toegankelijk via het toetsenbord. Bijvoorbeeld, knoppen "Bel met ons" en "Vanuit het buitenland" onder het kopje "Contact met Yarden" waarmee meer informatie beschiknaar komt, de knop "Bestanden kiezen" en checkbox "Ja, Yarden mag mij maximaal 1 keer..." in het formulier. Dit creëert aanzienlijke uitdagingen voor gebruikers die alleen op het toetsenbord vertrouwen voor navigatie en interactie met de inhoud. Alle interactieve elementen moeten toegankelijk zijn via het toetsenbord om gelijke toegang voor alle bezoekers te garanderen.

Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm kunnen de volgende interactieve elementen niet met het toetsenbord worden bediend: de links waarmee secties met verborgen inhoud worden geopend en gesloten onder "4 Wat is uw vraag over 'Kind meeverzekeren'?" en de knoppen "Ja" en "Nee, ik wil graag contact" onder "Bent u hiermee geholpen?" in elk van deze secties als ze geopend zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/klantenservice.htm staat een formulier met de verificatiemethode reCAPTCHA. Als het selectievakje is aangevinkt maar de verzendknop nog niet is ingedrukt, verschijnt de melding "Verificatie verlopen. Vink het selectievakje opnieuw aan." verschijnt na enige tijd. Er is een tijdslimiet aanwezig. Dit kan een probleem zijn voor bezoekers die meer tijd nodig hebben. Bezoekers moeten de tijdslimiet kunnen uitzetten, aanpassen of verlengen. Hetzelfde probleem staat op de pagina https://www.yarden.nl/klantenservice/bsn.htm.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina's van de website https://www.yarden.nl/ 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 kan het beste 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: Voor het PDF-document https://www.yarden.nl/web/file?uuid=080b6f62-471f-4716-863b-218a37988296&owner=397f43a2-21ab-4891-93ba-f72eda29675d is 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.
Hetzelfde geldt voor PDF-documenten op https://www.yarden.nl/web/file?uuid=3fe6f3ec-1bce-4aa6-9162-b55bafdd49c7&owner=397f43a2-21ab-4891-93ba-f72eda29675d.

Uitkomst: Onvoldoende

Bevindingen: Op een klein scherm na de link "Inloggen Mijn Yarden" komt de toetsenbordfocus terecht op onzichtbare interactieve elementen uit het navigatiemenu, terwijl het menu gesloten is.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Zie pagina https://www.yarden.nl/.

Op alle pagina's staat op een klein scherm een menuknop. Deze knop opent een mobiel menu. De toetsenbordfocus komt niet in het mobiele menu terecht. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. De focus moet in het mobiele menu terechtkomen. Zolang het menu geopend is, moet de focus in het menu blijven en niet op de onderliggende pagina terechtkomen. Zie pagina https://www.yarden.nl/.

Op pagina https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm, in de sectie "Uw aanvraag als uitvaartondernemer" komt de toetsenbordfocus terecht op een onzichtbaar interactief element na de knop "Aanvragen" onder de kop "Uitkeren Natura Uitvaartpolis".
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Op pagina https://www.yarden.nl/klantenservice.htm worden bij het verzenden van het formulier met lege of onjuiste gegevens foutmeldingen weergegeven zonder dat de pagina opnieuw wordt geladen. De focus wordt echter niet automatisch verplaatst naar de eerste foutmelding. Dit dwingt toetsenbordgebruikers om achteruit te navigeren met Shift+Tab 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.
Hetzelfde staat op de pagina https://www.yarden.nl/klantenservice/bsn.htm

Op pagina https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm , onder het kopje "Bereikbaarheid en reactietijd", staat een gedeelte met in-page links, zoals de links "Opzegtermijn", "Incasso", "Betalingsachterstand" en andere. Deze links scrollen door de pagina naar de corresponderende inhoud. Wanneer een link wordt geactiveerd met het toetsenbord, gaat de focus ten onrechte naar de volgende link in plaats van naar de bijbehorende sectie.
Dit is geen logische focusvolgorde en kan desoriënterend zijn voor gebruikers van het toetsenbord. Zorg ervoor dat het activeren van een link de toetsenbordfocus verplaatst naar het begin van de bijbehorende sectie die in beeld wordt gebracht.
Hetzelfde probleem doet zich voor op de pagina:
https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm.

Uitkomst: Onvoldoende

Bevindingen: Het logo "YARDEN" bovenaan de website, dat ook een link is, mist beschrijvende tekst voor de bestemming. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt. Dit kan opgelost worden door een alt-tekst aan de afbeelding van het logo toe te voegen, of een tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label-attribuut. Zie pagina https://www.yarden.nl/ .

Op kleine schermen staat in de sticky footer een link "Menu" die het navigatiemenu opent en sluit. De toegankelijke naam van de link is "Menu". De functie van deze link verandert als het menu geopend is. Dan wordt de link namelijk gebruikt om het menu weer te sluiten. Ook deze verandering van functie is niet terug te zien in de toegankelijke naam van de link. Voeg een toegankelijke naam toe die de functie van de link beschrijft, en zorg dat deze mee verandert als de functie van de link verandert.
Zie pagina https://www.yarden.nl/.

Advies. Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm onder "4 Wat is uw vraag over 'Kind meeverzekeren'?" staan links die secties met verborgen inhoud openen en sluiten. Deze links hebben geen inhoud.
Alleen het title-attribuut is gebruikt om deze links het linkdoel te geven.
Deze link wordt niet afgekeurd omdat het title-attribuut op de link het linkdoel ook aangeeft. Dit is echter niet de meest betrouwbare manier om een link van content (zoals het doel en de naam) te voorzien.

Uitkomst: Onvoldoende

Bevindingen: Er is geen tweede manier om de pagina's van deze website te vinden. Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.
Zie pagina https://www.yarden.nl/.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/ staat een cookieknop waarmee het dialoogvenster "Mijn cookie instellingen" wordt geopend. De toegankelijke naam van de knop is "Voorkeuren openen", wat de functie niet goed beschrijft.
Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, in het hoofdmenu, in het submenu "Alles over DE UITVAART", is de toetsenbordfocus niet zichtbaar op het keuze-element "Kies een categorie".
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. Zie pagina https://www.yarden.nl/.
Hetzelfde probleem doet zich voor op de pagina https://www.yarden.nl/klantenservice.htm met het select-element "Categorie" en "Onderwerp". Het select-element "Onderwerp" wordt weergegeven wanneer een bezoeker een optie selecteert, bijvoorbeeld "Polis/verzekering", in het select-element "Categorie".

Op pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm is de toetsenbordfocus niet zichtbaar op meerdere interactieve elementen, bijvoorbeeld in de header op de linken in het navigatiemenu en op de linken in de submenu's, op de linken in de gedeelten onder "1 Kies een categorie" en "3 Verfijn het onderwerp".

Op pagina https://www.yarden.nl/klantenservice/bsn.htm is de toetsenbordfocus niet zichtbaar bij selectievakjes in het formulier onder "Contactformulier".

Op de pagina https://www.yarden.nl/klantenservice.htm is de toetsenbordfocus niet zichtbaar in de header op de links "Over Yarden" en "Blog" en op de menu-items en hun submenu-items, bijvoorbeeld op de link "Alles over de uitvaart" en de links in het submenu dat deze link opent. Zorg ervoor dat de toetsenbordfocus altijd zichtbaar is op interactieve elementen die met het toetsenbord kunnen worden gefocust.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website staat in het logo, dat ook een link is, de tekst: "YARDEN". De toegankelijke naam van deze link is leeg. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Zie pagina https://www.yarden.nl.

Op de pagina's van de website https://www.yarden.nl/ staat in de header een navigatiemenu. De link "Alles over de uitvaart" opent het submenu dat een select-element bevat. De zichtbare tekst van dit element is de tekst van de eerste optie: "Kies een categorie". Deze zichtbare tekst is echter niet aanwezig in de toegankelijke naam. Hierdoor kan dit select-element niet met spraak worden bediend. Als de toegankelijke naam van een element niet de zichtbare tekst bevat (in dit geval de tekst van de eerste optie), is het voor bezoekers met spraaksoftware niet mogelijk om dit element te bedienen.
Een soortgelijk probleem wordt waargenomen op de pagina https://www.yarden.nl/klantenservice/bsn.htm met selectie-element "Kies een land" dat wordt geopend wanneer het selectievakje "Ja" onder "Bent u ook fiscaal inwoner van een ander land dan Nederland?" is aangevinkt. De toegankelijke naam van dit selectie-element bevat niet de tekst van het zichtbare label "Kies een land".

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de metagegevens van de PDF op https://www.yarden.nl/web/file?uuid=080b6f62-471f-4716-863b-218a37988296&owner=397f43a2-21ab-4891-93ba-f72eda29675d 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/klantenservice.htm worden bij het verzenden van het formulier met lege of onjuiste gegevens berichten weergegeven, bijvoorbeeld "Selecteer de categorie van uw vraag”. 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: "Vraagcategorie niet geselecteerd.".
Een soortgelijke kwestie staat op de pagina https://www.yarden.nl/klantenservice/bsn.htm.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's staat in de header een navigatiemenu. De link "Alles over DE UITVAART" in dit menu opent een submenu dat een invoerveld met placeholder-tekst bevat: "Postcode / Plaats / Naam". Er ontbreekt echter een blijvend label; de placeholder-tekst wordt gebruikt als label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen. Voeg een label toe in de vorm van een tekst of een icoon.
Zie pagina https://www.yarden.nl/.
Hetzelfde probleem doet zich voor op de pagina's https://www.yarden.nl/ , in de rubriek "Bereken uw premie" en https://www.yarden.nl/klantenservice.htm , in de rubriek "Kom bij ons langs".

Op pagina https://www.yarden.nl/klantenservice/bsn.htm is een invoerveld voor de datum aanwezig: "Geboortedatum". Dit veld accepteert alleen een specifiek datumformaat, maar de instructie met betrekking tot het vereiste formaat wordt gegeven via een placeholder-tekst. Hierdoor is deze instructie niet permanent zichtbaar op de pagina, omdat de placeholdertekst verdwijnt wanneer de bezoeker begint te typen.
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: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website staat het logo met de zichtbare tekst "YARDEN". Deze link heeft echter geen 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. Zie pagina https://www.yarden.nl.

Op alle pagina's staat in de header een navigatiemenu. De links in dit menu, bijvoorbeeld "Alles over DE UITVAART", openen submenu's, maar de code geeft niet aan of het submenu open of gesloten is. Als er een link 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.
Zie pagina https://www.yarden.nl/.
Een soortgelijk probleem wordt waargenomen op de website https://www.yarden.nl/ wanneer de pagina's worden bekeken op een klein scherm. De link "Menu" in de sticky footer opent en sluit het navigatiemenu. Deze link geeft echter geen informatie over de status van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers.

Op alle pagina's, in de header, opent en sluit de link "Zoeken" het paneel met een zoekinvoerveld. Deze link geeft echter geen informatie over de status van het paneel (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers. Zie pagina https://www.yarden.nl/.

Op alle pagina's, in het hoofdmenu, in het submenu "Alles over DE UITVAART", onder het kopje "Yarden bij u in de buurt" staat een keuzelijst (select-element): "Kies een categorie". De toegankelijke naam ontbreekt. Hierdoor is het element niet toegankelijk. Geef het select-element een toegankelijke naam. Zie pagina https://www.yarden.nl/.
Hetzelfde probleem doet zich voor op de pagina https://www.yarden.nl/klantenservice/bsn.htm met selectie-element "Kies een land" dat wordt geopend als het selectievakje "Ja" onder "Bent u ook fiscaal inwoner van een ander land dan Nederland?" is aangevinkt.

Op pagina https://www.yarden.nl/klantenservice.htm , onder het kopje "Contact met Yarden", hebben de knoppen "Bel met ons" en "Vanuit het buitenland" niet de juiste toegankelijke rol. Hetzelfde geldt voor de knop "Bestanden kiezen" in het formulier.
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 bepaald hoe hulpsoftware het element weergeeft. 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. Let op dat role=”button” niet voldoende is om van bijvoorbeeld een div een knop te maken. Er moet ook nog gezorgd dat de div focus krijgt en ook met behulp van de spatiebalk te bedienen is. Het is daarom beter om een standaartd button element te gebruiken omdat daarmee de toegankelijkheidsfunctionaliteit automatisch geborgd is. Zorg dat de knop de juiste toegankelijke rol heeft. Een soortgelijke kwestie staat op de pagina https://www.yarden.nl/klantenservice/veelgestelde-vragen/over-mijn-verzekering/de-gratis-verzekering-van-mijn-kind-vervalt.-hoe-kan-ik-ervoor-zorgen-dat-mijn-kind-een-eigen-polis-krijgt.htm met de knoppen "Ja" en "Nee, ik wil graag contact" in de secties met verborgen inhoud.

Op pagina https://www.yarden.nl/klantenservice.htm onder het kopje "Contactformulier" kan de bezoeker een bestand uploaden door op "bestanden kiezen" te klikken. Wanneer het bestand is geüpload, verschijnt de naam van het bestand met de "x" knop onder "bestanden kiezen". Deze "x"-knop heeft echter niet de juiste toegankelijke rol. Hij heeft ook geen toegankelijke naam. Bezoekers afhankelijk van hulpsoftware kunnen de knop niet bedienen en weten niet waar hij voor dient. Geef het element de juiste rol, functionaliteit en een goede naam. Zorg dat deze naam beschrijft wat de knop doet, bijvoorbeeld "verwijder bestand bestandsnaam".

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.yarden.nl/klantenservice.htm wordt bij het indienen van een formulier een bericht met succes weergegeven zonder dat de pagina opnieuw wordt geladen. De focus wordt echter niet verplaatst naar dit bericht.
Een schermlezer kan dit bericht alleen voorlezen aan een blinde bezoeker als het bericht in de code als statusbericht is gemarkeerd. Daarvoor moet het bericht het attribuut aria-live="polite" of role="status" krijgen. Dit zorgt ervoor dat schermlezers het bericht automatisch voorlezen.

Op pagina https://www.yarden.nl/klantenservice.htm staat een formulier. Als de bezoeker door het formulier navigeert en de velden leeg of met onjuiste gegevens achterlaat, verschijnen er foutmeldingen onder de velden, maar deze krijgen geen focus. Dit betekent dat schermlezers het bericht niet zullen voorlezen aan blinde gebruikers.
Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.