Issues:
Audit digitale toegankelijkheid website Yarden
(Alleen de bevindingen)
Scope van de evaluatie
| Naam website | Yarden |
|---|---|
| Datum | 18 april 2025 |
| Scope van de website |
Binnen de scope van het onderzoek valt:
|
| Conformiteitsdoel | WCAG 2.1 niveau AA |
Uitgebreide toetsresultaten
1. Waarneembaar
1.1 Tekstalternatieven
1.1.1 Niet-tekstuele content (Niveau A)
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 1: 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.
Bevinding 2: 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/.
Bevinding 3: 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.
Bevinding 4: 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.
Bevinding 5: 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/
Bevinding 6: 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.
Bevinding 7: 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/.
Bevinding 8: 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.
Bevinding 9: 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.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 10: 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.
Bevinding 11: 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:".
Bevinding 12: 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/.
Bevinding 13: 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'?”.
Bevinding 14: 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.
Bevinding 15: 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".
Bevinding 16: 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
Bevinding 17: 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.
Bevinding 18: 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.
Bevinding 19: 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.
Bevinding 20: 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.
Bevinding 21: 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.
Bevinding 22: 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.
Bevinding 23: 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”.
Bevinding 24: 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.
Bevinding 25: 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.
Bevinding 26: 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.
Bevinding 27: 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.
Bevinding 28: 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.
Bevinding 29: 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.
Bevinding 30: 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.
1.3.2 Betekenisvolle volgorde (Niveau A)
Informatie over succescriterium 1.3.2 Betekenisvolle volgorde
Uitkomst: Onvoldoende
Bevinding 31: 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.
1.3.5 Identificeer het doel van de input (Niveau AA)
Informatie over succescriterium 1.3.5 Identificeer het doel van de input
Uitkomst: Onvoldoende
Bevinding 32: 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.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 33: 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.
Bevinding 34: 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.
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 35: 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.
Bevinding 36: 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.
Bevinding 37: 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.
Bevinding 38: 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.
Bevinding 39: 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.
Bevinding 40: 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.
Bevinding 41: 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").
Bevinding 42: 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.
Bevinding 43: 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 .
Bevinding 44: 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'?".
Bevinding 45: 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.
1.4.4 Herschalen van tekst (Niveau AA)
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 46: 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/.
Bevinding 47: 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.
1.4.10 Reflow (Niveau AA)
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevinding 48: 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%.
Bevinding 49: 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.
Bevinding 50: 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.
Bevinding 51: 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.".
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 52: 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/.
Bevinding 53: 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.
1.4.13 Content bij hover of focus (Niveau AA)
Informatie over succescriterium 1.4.13 Content bij hover of focus
Uitkomst: Voldoende
Bevinding 54: 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.
2. Bedienbaar
2.1 Toetsenbordtoegankelijk
2.1.1 Toetsenbord (Niveau A)
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevinding 55: 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/ .
Bevinding 56: 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/.
Bevinding 57: 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.
Bevinding 58: 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.
2.2 Genoeg tijd
2.2.1 Timing aanpasbaar (Niveau A)
Informatie over succescriterium 2.2.1 Timing aanpasbaar
Uitkomst: Onvoldoende
Bevinding 59: 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.
2.4 Navigeerbaar
2.4.1 Blokken omzeilen (Niveau A)
Informatie over succescriterium 2.4.1 Blokken omzeilen
Uitkomst: Onvoldoende
Bevinding 60: 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.
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 61: 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.
2.4.3 Focus volgorde (Niveau A)
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevinding 62: 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/.
Bevinding 63: 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/.
Bevinding 64: 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.
Bevinding 65: 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
Bevinding 66: 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.
2.4.4 Linkdoel (in context) (Niveau A)
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevinding 67: 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/ .
Bevinding 68: 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/.
Bevinding 69: 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.
2.4.5 Meerdere manieren (Niveau AA)
Informatie over succescriterium 2.4.5 Meerdere manieren
Uitkomst: Onvoldoende
Bevinding 70: 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/.
2.4.6 Koppen en labels (Niveau AA)
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevinding 71: 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.
2.4.7 Focus zichtbaar (Niveau AA)
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevinding 72: 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".
Bevinding 73: 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".
Bevinding 74: 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.
2.5 Input modaliteiten
2.5.3 Label in naam (Niveau A)
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevinding 75: 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.
Bevinding 76: 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".
3. Begrijpelijk
3.1 Leesbaar
3.1.1 Taal van de pagina (Niveau A)
Informatie over succescriterium 3.1.1 Taal van de pagina
Uitkomst: Onvoldoende
Bevinding 77: 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.
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevinding 78: 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.
3.3.2 Labels of instructies (Niveau A)
Informatie over succescriterium 3.3.2 Labels of instructies
Uitkomst: Onvoldoende
Bevinding 79: 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".
Bevinding 80: 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.
4. Robuust
4.1 Compatibel
4.1.2 Naam, rol, waarde (Niveau A)
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevinding 81: 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.
Bevinding 82: 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.
Bevinding 83: 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/.
Bevinding 84: 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.
Bevinding 85: 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.
Bevinding 86: 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".
4.1.3 Statusberichten (Niveau AA)
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Onvoldoende
Bevinding 87: 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.
Bevinding 88: 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.
Onderbouwing van de evaluatie
Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.
Steekproef getoetste webpagina's
- Home:
https://www.yarden.nl/ - Klantenservice:
https://www.yarden.nl/klantenservice.htm - Bereikbaarheid en reactietijd:
https://www.yarden.nl/klantenservice/bereikbaarheid-en-reactietijd.htm - Zoekresultaten:
https://www.yarden.nl/zoekresultaten.htm?q=yarden - Aanvraag uitkering polis:
https://www.yarden.nl/uitvaart-regelen/aanvraag-uitkering-polis.htm - Veelgestelde vragen:
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 - BSN:
https://www.yarden.nl/klantenservice/bsn.htm - Mijn Yarden extra goed beveiligd:
https://www.yarden.nl/veilig-inloggen/mijn-yarden-extra-goed-beveiligd.htm - Yarden uitvaartorganisatie:
https://www.yarden.nl/over-yarden.htm - Pagina niet gevonden:
https://www.yarden.nl/index/passieconcert-heerlen.htm - PDF Machtiging2023_Yarden_Automatischeincasso:
https://www.yarden.nl/web/file?uuid=080b6f62-471f-4716-863b-218a37988296&owner=397f43a2-21ab-4891-93ba-f72eda29675d - Formulier Verzekering Overdragen Mijn Laatste Wensen uitvaartverzekering 2023:
https://www.yarden.nl/web/file?uuid=3fe6f3ec-1bce-4aa6-9162-b55bafdd49c7&owner=397f43a2-21ab-4891-93ba-f72eda29675d
Ondersteunende technieken
Bronnen
-
Evaluatiedocument WCAG 2.0
www.drempelvrij.nl/over-het-waarmerk -
Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG20-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.