Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website www.dela.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Dela
Datum 26 maart 2025
Scope van de website Buiten de scope van het onderzoek valt:
  • Alle pagina's op dela.nl
  • Alle PDF's op dela.nl
Buiten de scope van het onderzoek valt:
  • De pagina's op mijn.dela.nl. Dit vereist een apart onderzoek.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
    		•
    Conformiteitsdoel WCAG 2.1 niveau AA

    Uitgebreide toetsresultaten

    Aantal bevindingen: 96

    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: Op alle pagina's staat een cookiebanner. In de cookie-instellingen staat een logo met de tekst "coöperatie DELA". De alternatieve tekst voor deze afbeelding is "Bedrijfslogo".
    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: “coöperatie DELA”. Zie pagina https://www.dela.nl. Hetzelfde probleem op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, onder het kopje "Belangrijke informatie".

    Bevinding 2: Op alle pagina's is het logo bovenaan geïmplementeerd als een achtergrondafbeelding, waardoor het onzichtbaar is voor schermlezers. Bovendien ontbreekt er alternatieve tekst. Hierdoor is het logo niet toegankelijk voor bezoekers die de afbeelding niet kunnen zien. Logo’s geven informatie. Daarom moeten ze altijd voorzien zijn van een tekstalternatief. Je mag ze niet als achtergrond plaatsen, tenzij er een tekstalternatief is. Dit kan bijvoorbeeld opgelost worden door het logo als img-element te plaatsen en een alt-attribuut toe te voegen die alle tekst van het logo bevat. Hetzelfde probleem in het modale venster dat de knop "Suggesties?" opent. Zie pagina https://www.dela.nl.

    Bevinding 3: Op alle pagina's hebben in het hoofdmenu sommige links pijl-icoontjes om submenus aan te geven, maar deze icoontjes missen alternatieve tekst. Het pijltje is een afbeelding die informatie overdraagt ('er is een submenu'). Deze informatie moet ook beschikbaar zijn voor bezoekers die de afbeelding niet kunnen zien. Dat is op dit moment niet zo, want de alt-tekst is leeg. Dit kan opgelost worden door een alt-tekst toe te voegen, of door gebruik te maken van het aria-expanded-attribuut om deze informatie op een niet-visuele manier over te brengen. Zie pagina https://www.dela.nl.

    Bevinding 4: Op alle pagina's verschijnt op een klein scherm het mobiele menu. In het mobiele menu zijn er "+" en "-"-icoontjes die aangeven of een sectie open of gesloten is. Hoewel de positie van het icoon visueel deze staat overbrengt, is deze niet programmatisch toegankelijk voor schermlezers. Als het draaien of veranderen van een afbeelding iets betekent, moet die betekenis ook toegankelijk zijn voor blinde bezoekers. Een pijltje dat naar beneden wijst kan aangeven dat een sectie met inhoud nog dicht is, en een pijltje omhoog dat de inhoud zichtbaar is. Zorg ervoor dat schermlezers dit ook begrijpen. Voeg bijvoorbeeld een visueel verborgen tekst toe, of gebruik een aria-expanded-attribuut. Dit probleem houdt ook verband met succescriterium 4.1.2. Zie pagina https://www.dela.nl. Hetzelfde probleem is op de pagina https://www.dela.nl/uitvaart/regelen/depositofonds, onder het kopje "Meer informatie over het vooruitbetalen van de uitvaart" met pijl-icoontjes; op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid, onder het kopje "Meer informatie over het vooruitbetalen van de uitvaart" en anderen.

    Bevinding 5: Op alle pagina's staat in het hoofdmenu een invoerveld "Stel uw vraag". Dit invoerveld heeft een knop met een chat-icoon. Bij dit icoon ontbreekt een tekstuele alternatieve tekst. Wanneer een knop alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop. Voeg de beschrijving toe via een alt-attribuut bij het img-element, een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer. Zie pagina https://www.dela.nl.

    Bevinding 6: Op pagina https://www.dela.nl/verzekeringen, onder het hoofdmenu, staat een knop met een printer-icoon. Dit icoon mist een tekstueel alternatief. Wanneer een knop alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop. Hetzelfde probleem op de pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid, op pagina https://www.dela.nl/over-dela/nieuws-en-media, op pagina https://www.dela.nl/over-dela/over-cooperatie-dela/governance/responsible-disclosure-english en anderen.

    Bevinding 7: Op pagina https://www.dela.nl/uitvaart/regelen/depositofonds, onder het kopje "Wat is een uitvaartdeposito?", staan downloadlinks met icoontjes van een wolk met een pijl. Deze icoontjes zijn toegevoegd als een achtergrondafbeelding en er is geen tekstueel alternatief geboden. Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element plaatsen en de informatie in het alt-attribuut te zetten.
    Hetzelfde probleem staat hieronder, onder het kopje "In 3 stappen een uitvaartdeposito", met nummers.

    Bevinding 8: Op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid onder het kopje "Ervaringen van nabestaanden" staan informatieve afbeeldingen van sterren met een leeg alt-attribuut. Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alt-tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker. Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut.

    Bevinding 9: Het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf bevat informatieve afbeeldingen zonder tekstuele alternatieven (alt-tekst). Zie pagina's 1 en 24. Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu mist, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Voeg alt-teksten toe aan deze informatieve afbeeldingen.

    1.2 Op tijd gebaseerde media

    1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

    Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

    Uitkomst: Onvoldoende

    Bevinding 10: Op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen wordt een video gepresenteerd onder het kopje "Bekijk de video". De video bevat op verschillende momenten tekst en logo's, bijvoorbeeld rond 0:01, 00:23, 00:34 en anderen.
    Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiodescriptie toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiodescriptie toevoegen.

    1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

    Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

    Uitkomst: Onvoldoende

    Bevinding 11: De video op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen voldoet niet aan Succescriterium 1.2.5, dat een audiodescriptie voor video's vereist. In het bijzonder heeft deze video audiodescriptie nodig (Niveau AA), aangezien er voldoende ruimte is binnen de bestaande audiotrack. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

    1.3 Aanpasbaar

    1.3.1 Info en relaties (Niveau A)

    Informatie over succescriterium 1.3.1 Info en relaties

    Uitkomst: Onvoldoende

    Bevinding 12: Op alle pagina's staat in de cookiebanner onder het kopje "Dela.nl maakt gebruik van cookies" een tekstblok met drie alinea's dat incorrect is gemarkeerd als één div-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. Zie pagina https://www.dela.nl.

    Bevinding 13: Op alle pagina's staat in de footer onder de kopjes "Service en contact" een lijst met zes items die niet op de juiste wijze zijn opgemaakt. Hetzelfde geldt voor onder andere kopjes in de footer, zoals "Ledenservice", "Persoonlijke situaties", "Alles over de uitvaart" en anderen. Zie pagina https://www.dela.nl. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Hetzelfde probleem is op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, in de stap "Verzekering samenstellen" onder de kopjes "Dienstenverzekering", "Geldverzekering", wanneer het invoerveld "Geboortedatum" wordt ingediend.

    Bevinding 14: Op alle pagina's staat in de rechterbenedenhoek een chatbox met de knop "Verstuur gesprek". Deze knop opent een formulier. Als het formulier wordt ingediend met lege of onjuiste gegevens, verschijnt een foutmelding "Voer een e-mailadres in". Echter, schermlezers in "form"-modus slaan vaak inhoud tussen invoervelden over, waardoor de foutmelding mogelijk niet wordt aangekondigd. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding. Zie pagina https://www.dela.nl.

    Bevinding 15: Op alle pagina's staat aan de rechterkant een knop "Suggesties?". Deze knop opent een modaal venster. In de feedbacksectie staat een formulier met groepen radiobuttons, voorafgegaan door de tekst "Wat vind je ervan?" en "Wat wil je ons meegeven?". Hoewel visueel 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 “Wat vind je ervan?” en “Wat wil je ons meegeven?”. Zie pagina https://www.dela.nl. Hetzelfde probleem is te vinden op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, in de stap "Verzekering samenstellen", onder de kopjes "Aanvullend geldbedrag" en "Bepaal de betaalduur en -termijn".

    Bevinding 16: Op alle pagina's staat aan de rechterkant een knop "Suggesties?". Deze knop opent een modaal venster. In dit modaal venster zijn de volgende teksten incorrect gemarkeerd met strong in plaats van correcte heading-elementen: "Vertel ons wat je van onze website vindt!", "Wat vind je ervan?", "Wat wil je ons meegeven?" en anderen. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel. Zie pagina https://www.dela.nl.

    Bevinding 17: Op alle pagina's verschijnt op een klein scherm bovenaan een knop met een telefoontoestel-icoon. Deze knop opent extra inhoud met de tekst "Contact". Deze tekst is niet gemarkeerd als kopje. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet 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. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Hetzelfde probleem in de footer, bijvoorbeeld "Service en contact", "Ledenservice", "Persoonlijke situaties" en anderen. Zie pagina https://www.dela.nl. Hetzelfde probleem is op pagina https://www.dela.nl/service-en-contact met de teksten "Voorgestelde onderwerpen" en "Of heeft u een andere vraag?"; op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid, met de teksten "Mooi afscheid", "Intiem afscheid. Fijn familie onder elkaar", en "Fantastisch geregeld"; en anderen.

    Bevinding 18: Op de homepage https://www.dela.nl/, onder de kop "Direct naar", wordt de inhoud visueel gepresenteerd als één lijst, maar in de HTML-code is deze verdeeld in drie afzonderlijke lijsten. Deze discrepantie tussen visuele presentatie en programmatische structuur zorgt voor verwarring bij gebruikers van ondersteunende technologieën zoals schermlezers. Schermlezers kondigen het begin en einde van elke lijst aan, waardoor gebruikers meerdere afzonderlijke lijsten waarnemen in plaats van één samenhangende lijst. Deze inconsistentie tussen wat visueel wordt waargenomen en wat programmatisch wordt gecommuniceerd, maakt navigatie moeilijk voor gebruikers met visuele beperkingen. Om dit probleem op te lossen, combineert u de afzonderlijke lijsten tot één enkel list-element dat overeenkomt met de visuele presentatie.
    Hetzelfde probleem wordt waargenomen op de pagina's https://www.dela.nl/service-en-contact, https://www.dela.nl/verzekeringen, en https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen.

    Bevinding 19: Op pagina https://www.dela.nl/ staat een leeg heading-element in de buurt van de kop "Direct naar”. Schermlezergebruikers vertrouwen op koppen om efficiënt door de inhoud te navigeren. Een lege kop biedt geen context en kan verwarring of onnodige stops veroorzaken tijdens de navigatie. Bovendien creëert het een gat in de kopstructuur van het document, wat mogelijk invloed heeft op gebruikers die afhankelijk zijn van een logische leesvolgorde. Hetzelfde geldt voor de pagina https://www.dela.nl/service-en-contact in de buurt van de kop "Uw persoonlijke situatie", op pagina https://www.dela.nl/verzekeringen in de buurt van de kop "Meer over verzekeringen" en op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen in de buurt van de kop "Ook interessant".

    Bevinding 20: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, onder "Belangrijke informatie", staat een groep links die visueel als een groep worden gepresenteerd, maar deze groepering wordt niet weerspiegeld in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of teksten bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul- of ol-element.

    Bevinding 21: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, in het formulier, zijn de teksten op de radiobuttons geen koppen, maar ze zijn incorrect gemarkeerd met een <h6>-element om het lettertype te wijzigen (in de substap 2, substap 3 van de stap "Verzekering samenstellen", stap "Persoonsgegevens"). Het kop-element (h6) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h6-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h6-element en gebruik een ander element. De gewenste stijl kun je met CSS toevoegen.

    Bevinding 22: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Gezondheidsvragen" onder het kopje "T.e.s.k.a. Ravestein" staan secties met verborgen inhoud. De elementen die verborgen inhoud openen en sluiten, missen heading-rollen. De teksten waarmee je delen van een accordion kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven. Hetzelfde probleem doet zich voor op pagina https://www.dela.nl/uitvaart/regelen/depositofonds, onder het kopje "Meer informatie over het vooruitbetalen van de uitvaart"; op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid en op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen.

    Bevinding 23: Op pagina https://www.dela.nl/over-dela/over-cooperatie-dela/governance/responsible-disclosure-english, onder het kopje "Did you find a security problem in our systems? Please let us know.", staat een tekst die begint met "Every day, IT and security specialists are working hard to improve …". Het strong-element wordt hier alleen gebruikt voor stylingdoeleinden. Hele zinnen zijn omwikkeld met strong-elementen, waarschijnlijk om ze vet te maken. 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 24: Op pagina https://www.dela.nl/over-dela/nieuws-en-media, in de paginering, ziet de huidige links anders uit dan de rest. Deze informatie is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit kan opgelost worden door een verborgen tekst aan de link toe te voegen, of door het aria-current-attribuut te gebruiken.

    Bevinding 25: Op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid staan onder de kopjes "Voorbeeld uitvaart thuis" en "Voorbeeld uitvaart bij DELA" gegevenstabellen. De juiste markering ontbreekt. Ook wordt het strong-element gebruikt in plaats van th-elementen. 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 26: Op pagina https://www.dela.nl/uitvaart/voor-de-uitvaart/ervaringen-van-klanten, onder het kopje "Gemiddelde waardering van klanten", zijn informatieve elementen met beoordelingen verborgen voor de schermlezer met aria-hidden="true". Hetzelfde probleem doet zich ook hieronder voor. Het attribuut aria-hidden="true" zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen.

    Bevinding 27: In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf zijn op pagina’s 4-8 elf lijstitems visueel als één lijst gepresenteerd, maar in de tags zijn deze verdeeld in drie afzonderlijke lijsten. Zorg ervoor dat de lijst als één enkele gestructureerde lijst wordt gecodeerd. Hetzelfde probleem komt voor op pagina’s 12, 14, 17 en andere pagina’s. Combineer de lijsten: zorg ervoor dat de afzonderlijke L-tags in de code worden samengevoegd tot één enkele lijst, zodat de schermlezer de items als een doorlopende lijst voorleest. Een andere oplossing is om de twee lijsten ongewijzigd te laten en bij de tweede lijst een toelichting toe te voegen waarin wordt vermeld dat deze lijst een vervolg is op de lijst van de vorige pagina.

    Bevinding 28: Vanaf pagina 5 van het PDF-document https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf is de geneste lijststructuur incorrect. De tags geven een onjuiste hiërarchie aan, waardoor hulptechnologieën zoals schermlezers de relatie tussen hoofd- en sublijstitems verkeerd interpreteren. Zorg ervoor dat geneste lijsten correct gestructureerd zijn, zodat schermlezers de bedoelde hiërarchie nauwkeurig communiceren.

    Bevinding 29: Het PDF-document at https://www.dela.nl/-/media/files/uitvaart/machtiging-uitvoeren-asbestemming_i-720-w-0322.pdf heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

    1.3.2 Betekenisvolle volgorde (Niveau A)

    Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

    Uitkomst: Onvoldoende

    Bevinding 30: Op pagina https://www.dela.nl/verzekeringen, onder het kopje "Verzekeringen", is de volgorde van HTML-elementen binnen de artikelen incorrect. De huidige volgorde is tekst, kop, tekst. Wanneer deze artikelen van boven naar beneden worden gelezen door een schermlezer, is het niet duidelijk welke tekst bij welk artikel hoort. Dit komt doordat de koppen niet bovenaan elke artikelcode staan. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud (afbeeldingen en tekst) 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 alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Laat hiervoor de alt-tekst leeg (alt="" op het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: koptekst - inhoud. Een vergelijkbaar probleem staat op de pagina https://www.dela.nl/over-dela/nieuws-en-media, op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, in stap “Verzekering samenstellen”, onder het kopje “Selecteer uitvaartverzekering”.

    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 31: Op alle pagina's, in de rechterbenedenhoek, staat een chat met de knop "Verstuur gesprek". Deze knop opent een formulier. Bij het invoerveld voor persoonlijke gegevens ("E-mailadres") ontbreekt het autocomplete-attribuut. 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. Zie pagina https://www.dela.nl. Hetzelfde probleem staat op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, in de vorm, op de stap “Verzekering samenstellen” en "Persoonsgegevens".

    1.4 Onderscheidbaar

    1.4.1 Gebruik van kleur (Niveau A)

    Informatie over succescriterium 1.4.1 Gebruik van kleur

    Uitkomst: Onvoldoende

    Bevinding 32: Op pagina https://www.dela.nl/uitvaart/voor-de-uitvaart/ervaringen-van-klanten, boven de koppen "Persoonlijke benadering in het hele traject", staan sterren als beoordelingen waarbij de geselecteerde sterren geel gekleurd zijn (HEX #F7DE00) en de niet-geselecteerde sterren grijs (HEX #EEEEEE). De contrastverhouding is 1,2:1. Daarnaast staan naast de koppen oranje balken (HEX #F57323) op een grijze achtergrond (HEX #F0F0F0) die de klanttevredenheid voor bepaalde punten zoals "Volgens wensen" weergeven. De contrastverhouding van deze tevredenheidsbalken is slechts 2,5:1. Mensen die kleurenblind zijn of visuele beperkingen hebben, hebben vaak moeite om onderscheid te maken tussen kleuren of zien bepaalde kleuren helemaal niet. Wanneer informatie alleen via kleur wordt overgedragen, zoals bij de beoordelingssterren en tevredenheidsbalken, kunnen deze gebruikers deze belangrijke informatie niet benaderen. Om dit probleem op te lossen, voeg aanvullende visuele signalen toe naast kleur, zoals tekstlabels die de beoordelingen aangeven, of gebruik patronen naast kleur voor de tevredenheidsbalken.

    Bevinding 33: Op alle pagina's, aan de rechterkant, staat een knop "Suggesties?". Deze knop gebruikt een aangepaste toetsenbordfocusindicator die uitsluitend op een achtergrondkleurverandering is gebaseerd. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende, omdat de contrastverhouding tussen de gefocuste en niet-gefocuste staat van de achtergrondkleur/randkleur minder dan 3.0:1 is. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond. Deze knop opent ook een modaal venster. Hetzelfde probleem doet zich voor in dit modale venster met de knop "Afronden". Zie pagina https://www.dela.nl.

    1.4.3 Contrast (minimum) (Niveau AA)

    Informatie over succescriterium 1.4.3 Contrast (minimum)

    Uitkomst: Onvoldoende

    Bevinding 34: Op alle pagina's staat er witte tekst op een oranje achtergrond (HEX #ED7522) of omgekeerd. De kleurcontrastverhouding is te laag: 2,9:1. Voor tekst groter dan 19px en vet, moet de contrastverhouding minimaal 3,0:1 zijn, en voor tekst kleiner dan 24px en niet vet, moet de contrastverhouding minimaal 4,5:1 zijn.
    Zie pagina https://www.dela.nl.

    Bevinding 35: Op alle pagina's, in de cookiebanner, staat een knop met een blauwe (HEX #63A8C1) tekst op een witte achtergrond en omgekeerd. De knopptekst "Cookies instellen", "Alles afwijzen" en "Alle cookies accepteren" heeft onvoldoende contrast bij toetsenbordfocus en hover. De kleurcontrastverhouding is te laag: 2,7:1. Dit moet minimaal 4,5:1 zijn. 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). Een vergelijkbaar probleem doet zich voor met de witte knopptekst 'Suggesties?', die, wanneer deze tegen een blauwe achtergrond (HEX #3A91AF) wordt aangewezen, een kleurcontrast heeft van 3,6:1. Zie pagina https://www.dela.nl.

    Bevinding 36: Op alle pagina's staat een chat met de knop "Verstuur gesprek". Deze knop opent een formulier. Bij het indienen van het formulier met lege of onjuiste gegevens worden foutmeldingen weergegeven in oranje (HEX #ED7522) tekst tegen een licht-oranje (HEX #FCE4D3) achtergrond. De resulterende contrastverhouding is 2,4:1. Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen. Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is. Zie pagina https://www.dela.nl. Een vergelijkbaar probleem doet zich voor op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Verzekering samenstellen", met rode (HEX #F44336) foutmelding op grijze (HEX #FAFAFA) achtergrond, het kleurcontrast is 3,5:1; en bij de stap "Persoonsgegevens".

    Bevinding 37: Op alle pagina's, in de footer, staan blauwe (HEX #4C738A) links op een grijze (HEX #EBEBEB) achtergrond, zoals bijvoorbeeld "Contact met ons opnemen", "Wijzigingen doorgeven" en andere. De kleurcontrastverhouding is te laag: 4,3:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Zie pagina https://www.dela.nl. Hetzelfde probleem doet zich voor op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stappen "Gezondheidsvragen" en "Betaalgegevens", bijvoorbeeld, "rechten en plichten".

    Bevinding 38: Op de homepagina staat er witte linktekst "Een groene uitvaart" op een groene achtergrond (HEX #75BB22). De kleurcontrastverhouding is te laag: 2,4:1.
    Deze tekst is groter dan 19px maar kleiner dan 24px en vetgedrukt, daarom moet het contrast minimaal 3,0:1 zijn. Hetzelfde probleem staat hieronder, met witte tekst "Ben je op zoek naar een … en milieu?" op een groene (HEX #75BB22) achtergrond. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Zie pagina https://www.dela.nl.

    Bevinding 39: Op de homepage, in het hoofdmenu, staat een invoerveld "Stel uw vraag". De blauwe (HEX#99CCDB) placeholder-tekst tegen de witte achtergrond heeft een contrastverhouding van 1,7:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde probleem in chat, met de placeholder-tekst "Uw bericht (max. 140 tekens)". Zie pagina https://www.dela.nl.

    Bevinding 40: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, onder het kopje "Uitvaartverzekering samenstellen", staat een invoerveld. De grijze (HEX #ACACAC) placeholder-tekst op een witte achtergrond heeft een kleurcontrastverhouding van 2,3:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

    Bevinding 41: Op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid staat onder het kopje "Op deze pagina:" een blauwe linktekst (HEX #007FA4) op een lichtblauwe (HEX #D2E6FC) achtergrond. De kleurcontrastverhouding is te laag: 3,6:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
    Hetzelfde probleem doet zich voor op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid, op pagina https://www.dela.nl/uitvaart/regelen/depositofonds, op pagina https://www.dela.nl/over-dela/over-cooperatie-dela/governance/responsible-disclosure-english en andere.

    Bevinding 42: Op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid staan а blauwe (HEX #007FA4) links op een grijze (HEX #EBEBEB) achtergrond, bijvoorbeeld "vervoer", "Opbaring thuis", "verzorging" en andere. De kleurcontrastverhouding is 3,9:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

    Bevinding 43: Op pagina https://www.dela.nl/over-dela/nieuws-en-media staat een blauwe (HEX #007FA4) tekst op een lichtblauwe (HEX #E5F2F6) achtergrond, bijvoorbeeld "FEB". De kleurcontrastverhouding is 4:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

    Bevinding 44: Op pagina https://www.dela.nl/bewindvoerders staat een witte tekst "Producten, DELA biedt de mogelijkheid om voor..." op een groene (HEX #91C94D) achtergrond. De kleurcontrastverhouding is te laag: 2,4:1. Voor tekst groter dan 19px en vetgedrukt moet de contrastverhouding minstens 3,0:1 zijn en voor tekst kleiner dan 24px en niet vetgedrukt moet de contrastverhouding minstens 4,5:1 zijn.

    Bevinding 45: In de PDF https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf staat а oranje (HEX #F36F21) tekst op een witte achtergrond, bijvoorbeeld "1.", "2." , "3." en andere. De kleurcontrastverhouding is te laag: 3,0:1. Het contrast moet minstens 4,5:1 zijn.
    Hetzelfde probleem doet zich voor bij de PDF https://www.dela.nl/-/media/files/uitvaart/machtiging-uitvoeren-asbestemming_i-720-w-0322.pdf, met oranje (HEX #C78713) tekst op witte achtergrond, bijvoorbeeld "Gegevens opdrachtgever" en andere.

    1.4.4 Herschalen van tekst (Niveau AA)

    Informatie over succescriterium 1.4.4 Herschalen van tekst

    Uitkomst: Onvoldoende

    Bevinding 46: Op elke pagina staan in de HTML-code bij meta name="viewport" de instellingen 'maximum-scale' en 'user-scalable=no'. Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.

    Bevinding 47: Op alle pagina's, wanneer bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd tot 200%, zijn de links in de footer, zoals "Service en contact", "Contact met ons opnemen" en "Wijzigingen doorgeven", niet zichtbaar. Als een bezoeker inzoomt, moet alles nog gewoon werken. Zie pagina https://www.dela.nl.

    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%. Zie pagina https://www.dela.nl.

    1.4.11 Contrast van niet-tekstuele content (Niveau AA)

    Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

    Uitkomst: Onvoldoende

    Bevinding 49: Op alle pagina's, in het hoofdmenu, staat een invoerveld "Stel uw vraag". Dit invoerveld heeft een knop met een witte chat-icoon op een blauwe achtergrond. De kleurcontrastverhouding van 2,4:1 is te laag. Dit moet minimaal 3:1 zijn. Het icoon is dus niet voor iedereen zichtbaar, waardoor het invoerveld geen geldig ‘visueel label’ heeft. Zorg dat het icoon genoeg contrast heeft. Hetzelfde probleem is te zien in het modale venster dat de knop "Suggesties?" opent bij hover over blauwe (HEX#93C1D2) sluitknop op witte achtergrond. De contrastverhouding is 1,9:1. Zie pagina https://www.dela.nl.

    Bevinding 50: Op alle pagina's staat in de rechterbenedenhoek een chat. In de chat staat een knop met een witte ">" voor het verzenden van berichten. Dit symbool op een oranje (HEX #ED7522) achtergrond heeft een contrastverhouding van 2,9:1. Dit moet minimaal 3:1 zijn. Zie pagina https://www.dela.nl.

    Bevinding 51: Op alle pagina's staat een knop "Suggesties?". Deze knop opent een modaal venster. In het feedbackgedeelte is een formulier met verschillende secties aanwezig. Onder de kop "Wat wil je ons meegeven?" is de randkleur van de radioknoppen blauw (HEX #CCE6ED), de achtergrondkleur is wit. De kleurcontrastverhouding is 1,3:1. De kleurcontrastverhouding tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze radioknoppen moet minimaal 3,0:1 zijn. Zie pagina https://www.dela.nl. Een vergelijkbaar probleem staat op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Persoonsgegevens" met selectievakjes.

    Bevinding 52: Op alle pagina's staat de knop "Suggesties?". Deze knop opent een modaal venster. In het feedbackgedeelte zijn emoji's aanwezig. Er zijn oranje (HEX #EE7E2E), gele (HEX #FFC201), lichtgroene (HEX #94D24F) en groene (HEX #00B24E) emoji-knoppen op een witte achtergrond, het kleurcontrast is minder dan 3:1. Deze emoji's zijn informatief en vereisen een minimale contrast van 3,0:1 ten opzichte van de achtergrond. Zie pagina https://www.dela.nl.

    Bevinding 53: Op alle pagina's, in de rechter onderhoek, staat een chatknop die extra inhoud opent. In deze extra inhoud krijgen de chatonderdelen, zoals het invoerveld, de knop "Translation" en andere, de toetsenbordfocus. Dit is zichtbaar door een lichtblauwe (HEX #93C4F4) focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is 1,8:1.
    Dit moet minimaal 3:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.
    Zie pagina https://www.dela.nl.

    Bevinding 54: In het PDF-document https://www.dela.nl/-/media/files/uitvaart/machtiging-uitvoeren-asbestemming_i-720-w-0322.pdf staat een formulier. De contrastverhouding tussen de lichtblauwe (HEX #E7F1F5) blokken die de invoervelden voorstellen en de witte achtergrond is 1,1:1.
    De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

    1.4.12 Tekstafstand (Niveau AA)

    Informatie over succescriterium 1.4.12 Tekstafstand

    Uitkomst: Onvoldoende

    Bevinding 55: Op pagina https://www.dela.nl/verzekeringen worden, wanneer gebruikers tekstspatiëring toepassen zoals beschreven in dit succescriterium, de teksten "Ga naar de overlijdensrisicoverzekering", "Na de uitvaart … op te pakken.", "Het DELA LeefdoorPlan, de … door blijven gaan." en andere, gedeeltelijk onzichtbaar en onleesbaar. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken. Hetzelfde probleem doet zich voor op pagina https://www.dela.nl/uitvaart/regelen/depositofonds voor de tekst "Kosteloos hulp bij vastleggen uitvaartwensen", "Hoe werkt de uitkering van het uitvaartdeposito?" en andere; op de pagina https://www.dela.nl/bewindvoerders, met de kop "DELA BewindvoerdersDesk".

    1.4.13 Content bij hover of focus (Niveau AA)

    Informatie over succescriterium 1.4.13 Content bij hover of focus

    Uitkomst: Onvoldoende

    Bevinding 56: Wanneer een bezoeker de muis over het hoofdmenu beweegt, verschijnen submenu’s die de content op de pagina bedekken. De bezoeker moet de extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

    2. Bedienbaar

    2.1 Toetsenbordtoegankelijk

    2.1.1 Toetsenbord (Niveau A)

    Informatie over succescriterium 2.1.1 Toetsenbord

    Uitkomst: Onvoldoende

    Bevinding 57: Op alle pagina's bevat het hoofdmenu een submenu. Echter, dit submenu kan niet worden geopend met het toetsenbord. Zorg dat submenu’s met het toetsenbord kunnen worden geopend en gebruikt, en dat de informatie in deze submenu’s toegankelijk is voor alle bezoekers. De pagina’s die de hoofdnavigatie-items openen, bevatten namelijk niet alle informatie die in de submenu’s staat. Zie pagina https://www.dela.nl.

    Bevinding 58: Op alle pagina's, op een klein scherm, verschijnt een menuknop om het mobiele navigatiemenu te openen. Echter, deze menuknop is niet toegankelijk met het toetsenbord. Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.

    Bevinding 59: Op pagina https://www.dela.nl/over-dela/nieuws-en-media onder het kopje "Laatste nieuws" is de link met het nieuws niet toegankelijk met het toetsenbord.

    Bevinding 60: Op pagina https://www.dela.nl/uitvaart/regelen/depositofonds, onder het kopje "Meer informatie over het vooruitbetalen van de uitvaart", staan secties met verborgen inhoud. Deze secties zijn niet toegankelijk met het toetsenbord.
    Sommige bezoekers gebruiken alleen een toetsenbord om te navigeren en geen muis. Zij moeten alle klikbare onderdelen van de website gewoon kunnen gebruiken. Daaronder vallen bijvoorbeeld links, knoppen, formulieren, keuzelijsten, tabbladen, sliders en accordeons. Zorg dat alles wat aanklikbaar is, ook werkt met het toetsenbord. Een vergelijkbaar probleem staat op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen, en op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid.

    2.1.4 Enkel teken sneltoets (Niveau A)

    Informatie over succescriterium 2.1.4 Enkel teken sneltoets

    Uitkomst: Onvoldoende

    Bevinding 61: Op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen staat een Youtube videospeler die gebruik maakt van sneltoetsen met één teken. De Youtube-speler gebruikt sneltoetsen, zoals de 'k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

    2.4.2 Paginatitel (Niveau A)

    Informatie over succescriterium 2.4.2 Paginatitel

    Uitkomst: Onvoldoende

    Bevinding 62: Dit PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf heeft geen titel. Een PDF-document moet een titel bevatten die duidelijk het onderwerp of het doel van het document beschrijft. Daarnaast dient deze titel in de titelbalk te worden getoond in plaats van de bestandsnaam. Dit is belangrijk voor bezoekers met verschillende beperkingen omdat het hen in staat stelt snel en gemakkelijk vast te stellen of de informatie in het document relevant is voor hen. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het PDF-document. Hetzelfde probleem is aanwezig in de PDF https://www.dela.nl/-/media/files/uitvaart/machtiging-uitvoeren-asbestemming_i-720-w-0322.pdf.

    2.4.3 Focus volgorde (Niveau A)

    Informatie over succescriterium 2.4.3 Focus volgorde

    Uitkomst: Onvoldoende

    Bevinding 63: Bij het eerste bezoek verschijnt een cookiebanner. Deze banner krijgt niet als eerste toetsenbordfocus, en dat moet wel. De banner bedekt de inhoud van de pagina, en als de toetsenbordfocus daar niet als eerste op komt, kunnen bezoekers die alleen met het toetsenbord navigeren de melding niet afsluiten. Zorg dus dat de focus als eerste naar de cookiebanner gaat. Zie pagina https://www.dela.nl.

    Bevinding 64: Op alle pagina's, op een klein scherm, verschijnt een menuknop om het mobiele navigatiemenu te openen. De toetsenbordfocus loopt door de elementen in dit menu wanneer het menu is gesloten. Dit is geen logische focusvolgorde. Zie pagina https://www.dela.nl.

    Bevinding 65: Op alle pagina's staat een knop "Suggestions?" die een modaal venster opent. In dit venster komt de toetsenbordfocus na de link "Powered by Expoints" op een onzichtbaar interactief element terecht. Zie pagina https://www.dela.nl.
    Hetzelfde probleem staat onder het kopje “Uitvaartverzorger Annemieke begeleidde een duurzame uitvaart”, na de link “Bekijk de video”; en op pagina https://www.dela.nl/verzekeringen, na het invoerveld "Stel uw vraag".

    Bevinding 66: Op alle pagina's, op een klein scherm, verschijnt een menuknop om het mobiele navigatiemenu te openen. In dit mobiele navigatiemenu zijn er secties met verborgen submenu's. De toetsenbordfocus komt in de secties met verborgen submenu's terecht wanneer deze secties gesloten zijn. Dit is geen logische focusvolgorde. Zie pagina https://www.dela.nl.

    Bevinding 67: Op alle pagina's, op een klein scherm, staat bovenaan de pagina een menuknop. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu open blijft. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat. Zie pagina https://www.dela.nl.

    Bevinding 68: Op alle pagina's, in het hoofdmenu, staat een invoerveld "Stel uw vraag" met een chatknop. Wanneer een bezoeker het chatvenster opent en vervolgens verder navigeert met de Tab-toets, gaat de toetsenbordfocus niet naar de dialoog, maar blijft door elementen op de hoofdpagina erachter lopen. Dit gedrag creëert aanzienlijke toegankelijkheidsbarrières voor gebruikers die alleen het toetsenbord gebruiken. Wanneer een dialoogvenster wordt weergegeven, verwachten gebruikers dat de focus naar die dialoog gaat, zodat ze kunnen interacteren met de inhoud ervan. Om dit probleem op te lossen, moet een goede focusbeheersing worden geïmplementeerd door de toetsenbordfocus naar het eerste focusbare element binnen de dialoog te verplaatsen wanneer deze wordt geopend, en de focus binnen de dialoog te houden totdat deze wordt gesloten. Zie pagina https://www.dela.nl.

    Bevinding 69: Op elke pagina is er in het hoofdmenu een chatfunctie met de knop 'Verstuur gesprek'. Deze knop opent een formulier. Wanneer het formulier met lege of onjuiste gegevens wordt verzonden, verschijnt er een foutmelding zonder dat de pagina opnieuw laadt. Echter, de toetsenbordfocus wordt niet automatisch naar de eerste foutmelding verplaatst. Dit dwingt toetsenbordgebruikers om met Shift+Tab terug te navigeren om de fout te vinden, wat inefficiënt is. Zorg ervoor dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker direct geïnformeerd over de fout en kan deze de invoer aanpassen. Zie pagina https://www.dela.nl.

    Informatie over succescriterium 2.4.4 Linkdoel (in context)

    Uitkomst: Onvoldoende

    Bevinding 70: Op elke pagina ontbreekt bij het logo bovenaan, dat functioneert als een link, een beschrijvende tekst die de bestemming van de link verduidelijkt. 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.dela.nl. Een soortgelijk probleem wordt waargenomen op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, onder het kopje "Belangrijke informatie".

    Bevinding 71: Op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid, in het kruimelpad, staat vóór de link "Uitvaart" een link zonder inhoud en dus zonder herkenbaar linkdoel. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.
    Een vergelijkbaar probleem staat op de pagina https://www.dela.nl/over-dela/over-cooperatie-dela/governance/responsible-disclosure-english, op pagina https://www.dela.nl/uitvaart/voor-de-uitvaart/ervaringen-van-klanten en op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen.

    Bevinding 72: Op pagina https://www.dela.nl/over-dela/nieuws-en-media missen de paginanummering-links voldoende context. Hoewel ziende gebruikers begrijpen dat "1", "2", "3", enz. paginanummers vertegenwoordigen, is dit niet duidelijk voor gebruikers met slechtziendheid of gebruikers van schermlezers. Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’.

    2.4.6 Koppen en labels (Niveau AA)

    Informatie over succescriterium 2.4.6 Koppen en labels

    Uitkomst: Onvoldoende

    Bevinding 73: Op alle pagina's opent de knop met "Suggesties?" een extra content met een iframe. Het title-attribuut van het iframe is "null". Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Zie pagina https://www.dela.nl.

    Bevinding 74: Pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen bevat een iframe met een kaart. De titel "Welkom bij DELA Nedermaas | crematorium en uitvaartcentrum in Geleen" beschrijft het inhoudstype niet.

    Bevinding 75: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, onder het kopje "Kosten", staan iconen die tooltips activeren. Al deze knoppen hebben dezelfde toegankelijke naam "tooltip". Hetzelfde wordt waargenomen tijdens het indienen van het formulier "Geboortedatum" op deze pagina. Dit is niet duidelijk voor bezoekers die een schermlezer gebruiken, want de tooltips die door de knoppen geopend worden, zijn allemaal verschillend. Die informatie is nu niet beschikbaar voor schermlezers. Geef elke knop een unieke en beschrijvende toegankelijke naam.

    2.4.7 Focus zichtbaar (Niveau AA)

    Informatie over succescriterium 2.4.7 Focus zichtbaar

    Uitkomst: Onvoldoende

    Bevinding 76: Op alle pagina's, in het hoofdmenu, staat een invoerveld "Stel uw vraag". Dit invoerveld heeft een knop met een wit chat-icoon op een blauwe achtergrond. De toetsenbordfocus is niet zichtbaar op deze knop. Zorg dat de toetsenbordfocus zichtbaar is op knoppen, zodat bezoekers weten wanneer zij een knop kunnen indrukken. Hetzelfde probleem doet zich voor in het modale venster dat de knop "Suggesties?" opent, met de link "Powered by Expoints". Zie pagina https://www.dela.nl.

    2.5 Input modaliteiten

    2.5.3 Label in naam (Niveau A)

    Informatie over succescriterium 2.5.3 Label in naam

    Uitkomst: Onvoldoende

    Bevinding 77: Op alle pagina's, bovenaan de pagina, toont het logo de tekst: "Dela voor elkaar". Er is geen toegankelijke naam voor deze link. 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.dela.nl. Een soortgelijk probleem wordt waargenomen op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, logo's onder de kop "Belangrijke informatie"

    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 78: De primaire taal van de pagina https://www.dela.nl/over-dela/over-cooperatie-dela/governance/responsible-disclosure-english is Engels, maar het lang-attribuut is ingesteld op "nl-NL". Zorg dat de primaire taal van de pagina aangegeven is met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="en". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen. Stel de taalcode correct in voor elke pagina door lang="en" te gebruiken.

    3.2 Voorspelbaar

    3.2.1 Bij focus (Niveau A)

    Informatie over succescriterium 3.2.1 Bij focus

    Uitkomst: Onvoldoende

    Bevinding 79: Op alle pagina's staat een knop "Suggesties?", die een modaal venster opent. In dit modale venster, bij het bedienen met pijlen, wanneer de radioknop "Ik wil contact met DELA" toetsenbordfocus ontvangt, wordt een nieuwe pagina geopend in een nieuwe browser-tabblad. Dit gebeurt onverwacht. Dit kan verwarrend zijn voor veel bezoekers. Zorg dat de betekenis van een pagina niet verandert als een element toetsenbordfocus krijgt. Zie pagina https://www.dela.nl.

    3.2.3 Consistente navigatie (Niveau AA)

    Informatie over succescriterium 3.2.3 Consistente navigatie

    Uitkomst: Onvoldoende

    Bevinding 80: Het menu, dat op meerdere pagina's voorkomt, heeft een inconsistente volgorde van items. Op de meeste pagina’s is de volgorde: Uitvaart, Verzekeringen, Inspiratie, Service en Contact. Op de pagina https://www.dela.nl/bewindvoerders is de volgorde echter anders: Bewindvoerders, Inhoud, Producten, Samenwerking, Over ons, Praktische tools en Contact. Terugkerende navigatie-elementen, zoals een menu, zoekfunctie of inhoudsopgave, moeten op elke pagina in dezelfde volgorde staan. Ze mogen niet veranderen bij het navigeren door de site. Voor sommige gebruikers, zoals blinde en slechtziende mensen of mensen met cognitieve beperkingen, kan een inconsistente volgorde het lastiger maken om informatie of functionaliteit te vinden. Door de volgorde van navigatie-elementen consistent te houden, kunnen gebruikers beter voorspellen waar ze onderdelen op elke pagina kunnen vinden. Dit vergemakkelijkt de navigatie en stelt hen in staat herhalende elementen sneller over te slaan. Zie pagina https://www.dela.nl.

    3.3 Assistentie bij invoer

    3.3.1 Foutidentificatie (Niveau A)

    Informatie over succescriterium 3.3.1 Foutidentificatie

    Uitkomst: Onvoldoende

    Bevinding 81: Op alle pagina's, in het hoofdmenu, staat een chat met de knop "Verstuur gesprek". Deze knop opent een formulier. Het indienen van het formulier met lege of onjuiste gegevens toont een bericht "Voer een e-mailadres in". Dit bericht fungeert als instructie, niet als een juiste foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld." Zie pagina https://www.dela.nl.
    Een soortgelijk probleem wordt waargenomen op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stappen "Verzekering samenstellen", "Kies een geldbedrag" en "Persoonsgegevens".

    3.3.2 Labels of instructies (Niveau A)

    Informatie over succescriterium 3.3.2 Labels of instructies

    Uitkomst: Onvoldoende

    Bevinding 82: Op alle pagina's, in het hoofdmenu, staat een invoerveld met de placeholder-tekst "Stel uw vraag". Dit invoerveld mist een permanente label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Hier kan dus niet een placeholdertekst voor worden gebruikt, want die verdwijnt zodra de bezoeker begint te typen.
    Hetzelfde probleem doet zich voor wanneer de chat is geopend, met een invoerveld met de placeholder-tekst "Uw bericht (max. 140 tekens)". Ook verdwijnt de instructie "(max. 140 tekens)" wanneer de bezoeker waarden in het invoerveld invoert. Zie pagina https://www.dela.nl.

    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 83: Op alle pagina's, in het hoofdmenu, hebben links met pijliconen submenu’s. De schermlezer krijgt deze informatie niet. Voeg het aria-haspopup-attribuut toe, en stel de waarde in op “menu” of “true”. Zie pagina https://www.dela.nl.

    Bevinding 84: Op alle pagina's, in het hoofdmenu, hebben links met pijliconen een submenu, maar de HTML-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.dela.nl.

    Bevinding 85: Op alle pagina's, op een klein scherm, verschijnt bovenaan een menuknop. Deze knop heeft niet de juiste toegankelijke rol. Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Zorg dat de knop de juiste toegankelijke rol heeft. Zie pagina https://www.dela.nl.

    Bevinding 86: Op alle pagina's, op een klein scherm, verschijnen bovenaan knoppen met een chat- en telefoonpictogram. Deze knoppen hebben geen toegankelijke naam, eigen rol en status (open-gesloten). Zie pagina https://www.dela.nl.

    Bevinding 87: Op alle pagina's, in het hoofdmenu, staat een knop met een chat-icoon. Deze knop opent een dialoogvenster. Dit dialoogvenster ontbeert de juiste ARIA-rol.
    Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat. Dit kan opgelost worden door role="dialog" aan het dialoogvenster toe te voegen. Zie pagina https://www.dela.nl. Hetzelfde probleem is op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Verzekering samenstellen", in de substap 3, wanneer de bezoeker op de knop "Mail mij de premieberekening" klikt.

    Bevinding 88: Op alle pagina's, aan de rechterkant, staat een knop "Suggesties?". Deze knop opent een modaal venster. Dit dialoogvenster mist zowel een juiste ARIA-rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog". Zie pagina https://www.dela.nl.
    Hetzelfde probleem doet zich voor op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Gezondheidsvragen", wanneer de bezoeker op de knop "Lees hier meer over de medische acceptatie en de regeling voor als je genezen bent van kanker" klikt.

    Bevinding 89: Op alle pagina's, aan de rechterkant, staat een knop "Suggesties?", die een modaal venster opent. Dit modale venster staat in een iframe zonder title-attribuut. Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Zie pagina https://www.dela.nl.

    Bevinding 90: Op de pagina https://www.dela.nl/verzekeringen, onder het hoofdmenu, staat een knop met een printericoon. Deze knop heeft niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet begrijpen dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Het gevolg is dat alle content die met deze knop kan worden geopend, ook niet toegankelijk is. Zorg dat de knop de juiste toegankelijke rol heeft. Hetzelfde probleem doet zich voor bij pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid, pagina https://www.dela.nl/over-dela/nieuws-en-media, pagina https://www.dela.nl/over-dela/over-cooperatie-dela/governance/responsible-disclosure-english en andere.

    Bevinding 91: Op pagina https://www.dela.nl/over-dela/nieuws-en-media, onder "Laatste nieuws," heeft de link met de kop "Geert Deschoolmeester treedt toe tot groepsdirectie coöperatie DELA" niet de juiste toegankelijke rol. Zorg dat de link de rol van link krijgt door het HTML-element <a> te gebruiken, of voeg role=”link” toe.

    Bevinding 92: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Gezondheidsvragen", onder de kop "Onderzoek en opname", is een groep radiobuttons aanwezig. Een legend-element ontbreekt. Het legend-element is nodig om een label of naam aan de groep keuzerondjes of -vakjes te geven. Voeg een legend-element toe binnen de fieldset en vul het met de tekst “Onderzoek en opname” (of een meer beschrijvend en toepasselijk label) om duidelijk het doel van de groep aan te geven.

    Bevinding 93: Op de pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, in de stap "Persoonsgegevens", onder de kop "Jouw uitvaartverzekering", tegenover de tekst "Aanvullend geldbedrag", staat een onzichtbare knop zonder een toegankelijke naam.

    Bevinding 94: Op pagina https://www.dela.nl/verzekeringen/uitvaartverzekering/verzekering-samenstellen, bij de stap "Gezondheidsvragen" onder het kopje "T.e.s.k.a. Ravestein" zijn er secties met verborgen inhoud. Deze sectie heeft niet de juiste rol en status. Hetzelfde probleem doet zich voor op pagina https://www.dela.nl/uitvaart/regelen/depositofonds, onder het kopje "Meer informatie over het vooruitbetalen van de uitvaart"; op pagina https://www.dela.nl/uitvaart/regelen/huiskamerafscheid en op pagina https://www.dela.nl/uitvaartlocaties/crematorium-uitvaartcentrum-nedermaas-geleen.

    Bevinding 95: Op pagina https://www.dela.nl/uitvaart/voor-de-uitvaart/ervaringen-van-klanten, onder het kopje "Overzicht van waarderingen", staan interactieve elementen om waardering te geven. Deze elementen hebben niet de juiste rol en status.

    4.1.3 Statusberichten (Niveau AA)

    Informatie over succescriterium 4.1.3 Statusberichten

    Uitkomst: Onvoldoende

    Bevinding 96: Op alle pagina's met een chatfunctie worden nieuwe berichten niet automatisch de toetsenbordfocus gegeven of gemarkeerd als statusberichten. Als gevolg hiervan kondigen schermlezers nieuwe berichten niet automatisch aan.
    Hierdoor worden ze niet automatisch voorgelezen als ze verschijnen. Dat moet wel. Gebruik daarom bijvoorbeeld een aria-live-attribuut of voeg role="status" toe aan de chatberichten. Zie pagina https://www.dela.nl.

    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

    Ondersteunende technieken

    Bronnen

    Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

    Geprint: 2025-04-12 03:33:07 v2.4-011