Rapport:
Hercontrole van audit digitale toegankelijkheid website Webshop van Dela

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ zijn er decoratieve pictogrammen die onnodige tekstalternatieven hebben. In de footer onder "Vragen aan onze servicedesk?" krijgen de pictogrammen de tekstalternatieven "phonedl", "facebook" en "twitter". Deze afbeeldingen zijn puur decoratief en hoeven geen uitleg te krijgen van een schermlezer. Ook het pijlpictogram op de FAQ-pagina in de link “Contact via e-mail” heeft een onnodig tekstalternatief. Verwijder deze, zodat de pictogrammen voor hulpsoftware zijn verborgen. Zie andere pagina’s met hetzelfde probleem.

Op de homepage staan groene vinkjes onder de kop "Vind bijzondere herinneringsproducten in onze webshop". Deze worden toegevoegd via een img-element met een title-attribuut waarin “Done” staat. Dat zorgt ervoor dat schermlezers iets voorlezen wat geen betekenis heeft. Decoratieve afbeeldingen moeten onzichtbaar zijn voor schermlezers. Voor img-elementen moet het title-attribuut verwijderd worden en moet het alt-attribuut wel aanwezig maar leeg zijn: alt="". Zo wordt alleen relevante informatie voorgelezen.

In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf zijn decoratieve afbeeldingen aanwezig, ten onrechte getagd als figure zonder beschrijvingen. Zie op pagina 1 de afbeeldingen met tekst "Algemene inkoopvoorwaarden" en "coöperatie DELA". Deze afbeeldingen zijn decoratief omdat deze tekst als tekst in het document aanwezig is. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf staat op pagina’s 1 en 24 een logo met de tekst "DELA voor elkaar" zonder alternatieve tekst (alt-tekst). 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 ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Voeg alt-tekst toe aan deze informatieve afbeeldingen met de volledige tekst van het logo.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina’s van de website https://webshop.dela.nl/ staan in het bovenste menu links zoals “Urnen” met bijbehorende knoppen met pijltjessymbolen. Deze links bevatten de attributen: aria-haspopup met de waarde "true" en aria-expanded. Deze ARIA-attributen wekken ten onrechte de indruk dat de links submenu’s openen of sluiten, terwijl dat niet het geval is. Dit kan verwarring veroorzaken, vooral voor gebruikers van hulpsoftware zoals schermlezers.

Op de website https://webshop.dela.nl/ worden op veel plekken teksten gebruikt als (tussen)koppen, maar deze zijn technisch niet als kop gemarkeerd. Dat betekent dat ze niet als koppen herkenbaar zijn voor mensen die een schermlezer gebruiken. In de footer gaat het om teksten zoals "Webshop", "Service & contact" en "Vragen aan onze servicedesk?". Op de homepage ontbreken kop-elementen bij teksten als "Lees hoe andere nabestaanden omgaan met het overlijden van een dierbare", "Er zijn voor elkaar". Voor bezoekers die hulpsoftware gebruiken is het belangrijk dat koppen ook technisch als kop zijn opgemaakt. Dat betekent dat de teksten in heading-elementen moeten staan, zoals <h2> of <h3>. Zo kunnen gebruikers de structuur van een pagina begrijpen, snel door de inhoud navigeren en makkelijker vinden wat ze zoeken. Hetzelfde probleem wordt ook op andere pagina's waargenomen.

Op pagina https://webshop.dela.nl/ worden in de footer verschillende groepen van links visueel gegroepeerd, zoals onder "Webshop", "Service & contact" en "Vragen aan onze servicedesk?". Er is geprobeerd om deze groepering in de HTML weer te geven door het ul-element te gebruiken. Dit ul-element bevat echter child-elementen die niet zijn toegestaan. Zorg ervoor dat het ul-element li-elementen bevat voor de items van de groepen.
Op pagina https://webshop.dela.nl/ staan in de footer naast de tekst "© DELA" de links Disclaimer, Privacy statement, Cookie-instellingen en Inkoopvoorwaarden, MVO-Inkoopcode, Responsible disclosure visueel gegroepeerd, maar deze groepering is niet terug te zien in de HTML-structuur.

Op de homepage van https://webshop.dela.nl/ , onder de koppen "Tastbare herinneringen aan een dierbare" en "Vind bijzondere herinneringsproducten in onze webshop", staat een lijst van drie punten zoals “Ervaren medewerkers”, “Snelle en nette bezorging” en “Done Kosteloos retourneren”. Deze tekst ziet eruit als een opsomming, maar is dat technisch niet. Daar worden meerdere punten genoemd die duidelijk bij elkaar horen, maar niet als lijst zijn opgemaakt. Als tekst eruitziet als een opsomming, moet die ook in de HTML als lijst gemarkeerd worden met ul of ol. Schermlezers geven dan aan hoeveel items de lijst bevat, waardoor bezoekers weten wat ze kunnen verwachten. Dit maakt de inhoud overzichtelijker en toegankelijker voor iedereen. Vaak is dit eenvoudig aan te passen via de content-editor van het CMS. Op pagina https://webshop.dela.nl/algemene-voorwaarden zijn onder onderdelen zoals "Artikel 1 - Definities", "Artikel 3 - Toepasselijkheid" en "Artikel 4 - Het aanbod" de lijsten niet gemarkeerd als lijsten in de HTML-code. Het dl-element is gebruikt waarbij de items van de lijst zijn omwikkeld met dd-elementen, maar dit is niet de juiste manier om deze items weer te geven. Voor gebruikers van hulpsoftware worden deze items niet als gestructureerde lijsten gepresenteerd. In plaats daarvan worden ze aangekondigd als losse beschrijvingen zonder termen, wat niet overeenkomt met de bedoelde structuur. Dit maakt navigatie moeilijker en verstoort het begrip van de inhoud. A similar issue is observed on page https://webshop.dela.nl/faq. Een soortgelijk probleem wordt waargenomen op pagina https://webshop.dela.nl/faq. Er is een groep secties met verborgen inhoud onder de kop "Urnen, sieraden en herinneringsproducten", maar elke sectie is onjuist gemarkeerd met een apart ul-element.

Op pagina https://webshop.dela.nl/faq , onder "Urnen, sieraden en herinneringsproducten", bevatten de uitklapbare onderdelen accordeonknoppen die inhoud openen en sluiten. Deze teksten fungeren als koppen voor de inhoud die volgt. Er is een heading-element aanwezig voor deze koppen, maar dit element is geplaatst binnen een button-element. Als een kop binnen een knop staat, wordt de rol van kop niet meer voorgelezen. Dit kan opgelost worden door een h-element te gebruiken met daarbinnen een button-element. De volgorde is dan bijvoorbeeld `<h2><button>Titel van de sectie</button></h2>`. `role="button"` is dan niet meer nodig.

Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ bevat het formulier meerdere secties met visuele groepslabels. Voor sommige secties zijn toegankelijkheidsproblemen vastgesteld. De sectie “Bezorgopties” is correct gemarkeerd met fieldset- en legend-elementen, maar het fieldset-element bevat de groep gerelateerde keuzerondjes niet. In de sectie “Product overzicht” is een legend-element aanwezig, maar dit staat niet binnen een fieldset-element. Het legend-element moet alleen worden gebruikt als eerste child van een fieldset-element. Zonder dit ouder-element heeft het geen semantische betekenis voor hulpsoftware. De sectie “Samenvatting” bevat een fieldset-element zonder toegankelijke naam. Er is een legend-element aanwezig in het fieldset-element, maar dit staat niet op de juiste plek. Het legend-element moet een direct child zijn van het fieldset-element. Er mag dus geen ander element, zoals een div-element, tussen staan. Dit is in strijd met de HTML-specificaties en veroorzaakt toegankelijkheidsproblemen. Alleen bij een correcte structuur kunnen hulpsoftware de namen van fieldset-elementen juist interpreteren. Verwijder alle div-elementen of geef ze een andere plaats.

Op pagina https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk onder de kop "Beschrijving" wordt het strong-element onjuist gebruikt voor opmaakdoeleinden. Een hele alinea tekst die begint met “De bedel heeft een doorsnede …” is in het strong-element geplaatst om de tekst 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, zoals vetgedrukte tekst. Gebruik hiervoor CSS.

Op de afrekenpagina https://webshop.dela.nl/checkout/index/index/step/onepage/ worden foutmeldingen weergegeven bij de invoervelden voor e-mail, zoals “Dit is een verplicht veld.” en “E-mailadres moet overeenkomen”. Schermlezers in formuliermodus kunnen deze foutmeldingen overslaan als ze niet correct gekoppeld zijn aan het bijbehorende inputveld. De foutmeldingen zijn visueel zichtbaar, maar niet programmatisch verbonden met de invoervelden. Hierdoor missen gebruikers cruciale feedback. Om dit op te lossen, moet elk inputveld dat een foutmelding kan genereren voorzien zijn van een aria-describedby-attribuut dat verwijst naar het id van het foutbericht. Zo weet hulpsoftware welke fout bij welk veld hoort en kan die informatie direct worden doorgegeven aan de gebruiker. Dit zorgt voor een toegankelijke en begrijpelijke interactie met het formulier.

In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf is de koptekst “Algemene inkoopvoorwaarden coöperatie DELA” visueel duidelijk als titel bedoeld, maar in de tagstructuur is deze tekst gemarkeerd als een gewone paragraaf (P-tag). Hierdoor ontbreekt voor gebruikers van hulpsoftware de juiste context. Een titel of kop moet in een PDF altijd worden gemarkeerd met een H-tag, bijvoorbeeld H1, zodat de logische structuur van het document overeenkomt met de visuele presentatie. Dit maakt het document toegankelijker voor schermlezers en zorgt ervoor dat gebruikers sneller kunnen navigeren via de documentstructuur. Vervang de P-tag door een H-tag om dit op te lossen. Zo wordt de koptekst correct als zodanig herkend.

In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf zijn er problemen met de lijststructuur die de toegankelijkheid via schermlezers belemmeren. Op pagina’s 4 tot en met 8 bestaat een lijst uit elf items die inhoudelijk één geheel vormen, maar in de tagging zijn ze opgesplitst in drie aparte lijsten. Hierdoor wordt de lijst door schermlezers als meerdere losse blokken voorgelezen, wat verwarrend is voor gebruikers. De oplossing is om deze L-tags samen te voegen tot één doorlopende lijst, zodat de volledige reeks als één gestructureerde lijst wordt gepresenteerd. Als het niet mogelijk is om de lijst technisch te combineren over meerdere pagina’s, kan er bij het begin van de vervolglijst een toelichting worden toegevoegd, zoals: “Vervolg van de lijst op de vorige pagina”. Op pagina 5 is bovendien de geneste lijststructuur fout gemarkeerd. De subitems onder punt 3.2 worden niet correct weergegeven als een onderliggende lijst. Hierdoor raakt de hiërarchie tussen hoofd- en subitems verloren en begrijpen schermlezers de structuur niet goed. Zorg dat subitems technisch genest zijn binnen het hoofditem, bijvoorbeeld met een geneste L-tagstructuur in de PDF-tags, zoals te zien is bij correcte voorbeelden op pagina 4.

Het PDF-document op https://www.dela.nl/-/media/files/corporate/mvo_code_dela.pdf bevat geen structuurcodes, 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf staat op pagina’s oranje tekst (HEX #F36F21) op een witte achtergrond. Bijvoorbeeld op pagina 4 staat deze kleur bij de cijfers "1.", "2." en "3.". De contrastratio is te laag: 3,0:1. Zorg dat het contrast minimaal 4,5:1 is.

In het PDF-document op https://www.dela.nl/-/media/files/corporate/mvo_code_dela.pdf staat oranje tekst (HEX #E3672A) op een witte achtergrond bij woorden zoals "Algemeen", "Mensen" en "Kinderarbeid". De contrastratio is te laag: 3,4:1. Zorg dat het contrast minimaal 4,5:1 is.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% de link met de tekst "Service en Contact" in de header niet meer zichtbaar. Als een bezoeker inzoomt, moet alles nog werken.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de link met de tekst "Service en Contact" in de header niet zichtbaar. Als een bezoeker inzoomt, moet alles nog zichtbaar zijn en werken.

Op pagina https://webshop.dela.nl/vingerafdruksieraden verschijnt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% een horizontale scrollbalk. Horizontaal scrollen is niet toegestaan, behalve bij uitzonderingen zoals tabellen, betekenisvolle afbeeldingen of kaarten. Zorg ervoor dat de tekst binnen het scherm past.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ staat in de header een knop "Winkelwagen". Deze knop opent een modaal venster als er items in de winkelwagen zitten. Wanneer de link met het potloodicoon en de knop met het prullenbakicoon de toetsenbordfocus krijgen, is dit zichtbaar door een blauwe (HEX #8FA0D8) focusrand. De contrastratio tussen deze focusrand en de witte achtergrond is 2,6:1. Dit moet minimaal 3,0:1 zijn. Er moet een kleurcombinatie met voldoende contrast gebruikt worden om dit op te lossen.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje is bij de knop “Toevoegen aan winkelwagen” dezelfde focusrand (HEX #8FA0D8) zichtbaar bij toetsenbordgebruik. De contrastratio is 2,6:1. Dit moet minimaal 3,0:1 zijn. Er moet een kleurcombinatie met voldoende contrast gebruikt worden zodat de focus goed zichtbaar is.

Op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed doet zich hetzelfde probleem met de focusrand voor. De contrastratio van de toetsenbordfocusrand is 2,6:1 en moet minimaal 3,0:1 zijn. Er moet een kleurcombinatie met voldoende contrast gebruikt worden om de zichtbaarheid van de focus te verbeteren.

Op pagina https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk is bij de knop “Toevoegen aan winkelwagen” eveneens een toetsenbordfocusrand met een contrastratio van 2,6:1 zichtbaar. Dit is onvoldoende. Er moet gezorgd worden voor een kleurcombinatie met minimaal 3,0:1 contrast zodat toetsenbordgebruikers de focus goed kunnen zien.

Op pagina https://webshop.dela.nl/ staat op de homepagina de rubriek "Reviews". Elke recensie bevat afbeeldingen met sterren. Deze gele (HEX #C89211) sterren op een witte achtergrond hebben een contrastratio van 2,8:1. Dit moet minstens 3,0:1 zijn. Er moet gezorgd worden dat deze grafische elementen voldoende contrast hebben.
Op pagina https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden komt hetzelfde probleem met de gele sterren voor. De contrastratio is 1,6:1 en moet minstens 3,0:1 zijn. Er moet gezorgd worden dat deze grafische elementen voldoende contrast hebben.

Op pagina https://webshop.dela.nl hebben de links met de teksten "Bekijk onze producten", "Smakelijke herinneringen aan een dierbare" en "Vind bijzondere herinneringsproducten in onze webshop" een donkerblauwe rand (HEX #0F5FAA) op een blauwe achtergrond (HEX #007FA4) bij toetsenbordfocus. De contrastratio is 1,4:1. Dit moet minstens 3,0:1 zijn. Er moet gezorgd worden dat de focusmarkering voldoende contrast heeft.

Op pagina https://webshop.dela.nl/urnen is de toetsenbordfocus op het select-element voor sorteren op een parameter en op het select-element "Toon" naast de paginering zichtbaar door een blauwe rand (HEX #8199D2) op een lichtblauwe achtergrond (HEX #E5F2F6). De contrastratio is 2,5:1. Dit moet minimaal 3,0:1 zijn. De toetsenbordfocus moet altijd goed zichtbaar zijn op interactieve elementen zoals knoppen, links en invoervelden die met het toetsenbord bediend kunnen worden. Als dit niet het geval is, kunnen bezoekers die met het toetsenbord navigeren niet zien waar ze zich op de pagina bevinden en weten ze niet wanneer ze Enter moeten indrukken om een element te activeren. Ditzelfde probleem komt voor op pagina’s https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ heeft het hoofdmenu in de header items met submenu's. Wanneer met de muis over deze items wordt bewogen, verschijnen de submenu's. Deze submenu's overlappen de inhoud van de pagina. De content moet eenvoudig gesloten kunnen worden zonder muisgebruik. Er moet bijvoorbeeld met de Escape-toets gezorgd worden dat deze submenu’s gesloten kunnen worden. Zo kunnen bezoekers die moeite hebben met het bedienen van de muis snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf staat geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet in de instellingen van het PDF-document ook een documenttitel toegevoegd worden. Als een PDF geopend wordt in een PDF-lezer, zoals Adobe Acrobat of een browser, verschijnt meestal de bestandsnaam bovenaan in de titelbalk. Als in de metadata van het document een titel is ingesteld, wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan sneller en gemakkelijker bepalen of het document relevant is. Deze titel kan ingesteld worden in de bestandseigenschappen van het bronbestand of van het PDF-document. In het PDF-document op https://www.dela.nl/-/media/files/corporate/mvo_code_dela.pdf staat eveneens geen titel ingesteld in de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/urnen in het gedeelte "Filters" staan knoppen die extra filteropties weergeven, zoals de knop "Toon (4) meer" onder "Prijs". Wanneer deze extra opties worden geopend, verplaatst de toetsenbordfocus zich niet naar de nieuw toegevoegde inhoud, maar direct naar de volgende filtergroep. Dit zorgt voor verwarring bij bezoekers die het toetsenbord gebruiken. Bij het openen van nieuwe filteropties moet de focus eerst naar het eerste interactieve element binnen deze inhoud gaan voordat er naar een volgende groep wordt gegaan. Op pagina https://webshop.dela.nl/alle-producten , https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring gebeurt hetzelfde met de toetsenbordfocus na het openen van extra filteropties. Ook hier moet de focus naar het eerste interactieve element binnen de nieuwe inhoud gaan om verwarring te voorkomen.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje de focusvolgorde niet logisch. De links met miniaturen onder de afbeelding zijn verwijderd uit de natuurlijke tabvolgorde met het attribuut tabindex="-1". Hierdoor kunnen bezoekers die met de Tab-toets navigeren deze links niet bereiken. Dit verstoort de natuurlijke volgorde van de toetsenbordnavigatie. Zorg dat de focusvolgorde aansluit bij de visuele en functionele structuur van de pagina door geen gebruik te maken van positieve tabindex-waarden en door belangrijke interactieve elementen niet te verwijderen uit de tabvolgorde. Ditzelfde probleem wordt waargenomen op pagina’s https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed, https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk en https://webshop.dela.nl/fotoblok-met-askamer-donkerbruin. Ook op deze pagina’s moeten de onzichtbare links voorzien worden van een duidelijk en toegankelijk linkdoel.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje staat een knop die een modaal venster opent met de afbeelding in volledig schermweergave. Bij het openen van het dialoogvenster wordt de toetsenbordfocus echter niet automatisch naar de inhoud van het dialoogvenster verplaatst. Zorg dat de focusvolgorde logisch blijft, door deze naar de nieuwe inhoud te verplaatsen. Na de interactieve elementen in het dialoogvenster kan de toetsenbordfocus bovendien onterecht verschuiven naar interactieve elementen op de pagina achter het dialoogvenster, in plaats van binnen het geopende venster te blijven. Dit is geen logische focusvolgorde. Zorg dat de toetsenbordfocus binnen het dialoogvenster blijft, totdat de bezoeker het venster sluit. Ditzelfde probleem wordt waargenomen op pagina’s https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed, https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk en https://webshop.dela.nl/fotoblok-met-askamer-donkerbruin.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/urnen staan in de filters naast de selectievakjes links met teksten zoals “€ 13 - € 100”, “Aluminium”, “Blauw” en andere. Deze teksten beschrijven voor gebruikers van hulpsoftware niet duidelijk het doel van de links. Hetzelfde probleem met onduidelijke toegankelijke namen bij filters wordt waargenomen op pagina’s https://webshop.dela.nl/alle-producten , https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring .

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/urnen staat op kleine schermen naast de kop "Filters" een knop met een pijltje als icoon. De toegankelijke naam van deze knop is “chevron-down”. Zorg dat de toegankelijke naam betekenisvol is en duidelijk de functie van de knop beschrijft. Hetzelfde probleem wordt waargenomen op de pagina's https://webshop.dela.nl/alle-producten, https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s van de website https://webshop.dela.nl/ wordt op kleine schermen via de knop “Menu” het navigatiemenu geopend. In dit menu openen de knoppen met pijlen naast de menulinks de submenu’s. In deze submenu’s staan knoppen waarmee bezoekers teruggaan naar het hoofdmenu. In het submenu dat opent via de knop naast “Urnen” is dit bijvoorbeeld de knop met de zichtbare tekst “Urnen”. De toegankelijke naam van deze knop is “Terug naar hoofdcategorieën” en is afkomstig van het attribuut aria-label. Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze tekst niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje staat in de vaste balk onderaan het scherm een knop met de zichtbare tekst “Toevoegen aan winkelwagen”. De toegankelijke naam van deze knop is echter “Opties selecteren” en is afkomstig van het attribuut aria-label. Het gebruik van het aria-label-attribuut overschrijft alle andere methoden voor het benoemen van elementen. Schermlezers en spraakherkenningssoftware gebruiken de tekst die in het aria-label staat. Dit wordt de toegankelijke naam genoemd. Als deze toegankelijke naam anders is dan de zichtbare tekst, wijkt de tekst die schermlezers voorlezen en die door spraakherkenningssoftware wordt gebruikt af van wat op de knop te zien is. Hierdoor kunnen bezoekers de knop niet met stemcommando bedienen, omdat zij de zichtbare tekst uitspreken. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst. Hetzelfde probleem wordt waargenomen op pagina's https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed, https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk en https://webshop.dela.nl/fotoblok-met-askamer-donkerbruin

Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ is de toegankelijke naam van het select-element onder "Bezorgopties" bij de keuze “Afhalen bij DELA locatie” ingesteld als “Selecteer locatie voor bezorgadres”. Deze toegankelijke naam wijkt af van de zichtbare tekst. Hierdoor kan dit select-element niet met spraak worden bediend. Ditzelfde probleem wordt waargenomen bij het select-element voor “DELA locatie”.
Op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed heeft het selectievakje “Asvulset om product te vullen (niet nodig bij bezorging op DELA-locatie) (€ 7,50)” geen toegankelijke naam. Hierdoor is dit element niet met spraak te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de metagegevens van het PDF-document https://www.dela.nl/-/media/files/corporate/mvo_code_dela.pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina’s van de website https://webshop.dela.nl/ hebben de links in de header submenu’s. De pijltjesknoppen waarmee deze submenu’s worden geopend, hebben toegankelijke namen in het Engels, zoals "Show submenu for Urns category". Omdat deze tekst in het Nederlands wordt uitgesproken, is de Engelse tekst voor bezoekers die hulpsoftware gebruiken niet goed te begrijpen. Vertaal deze tekst naar het Nederlands.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/urnen verschuift de toetsenbordfocus onverwacht naar de eerste optie onder "Prijs" zodra een filteroptie wordt geselecteerd. Bezoekers ontvangen geen melding van deze contextwijziging voordat deze plaatsvindt. Een verplaatsing van de focus mag niet automatisch gebeuren bij een actie zoals het aanvinken van een keuzevakje, het invullen van een veld of het selecteren van een optie in een keuzelijst. Zulke contextwijzigingen mogen alleen plaatsvinden na een duidelijke waarschuwing. Voeg een knop toe waarmee bezoekers handmatig de filters kunnen toepassen of gebruik asynchrone JavaScript om de selectie aan te passen. Gebruik dan ook een live-region om via de schermlezer aan te geven dat de inhoud is gewijzigd.
Op pagina’s https://webshop.dela.nl/alle-producten , https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring wordt hetzelfde probleem met onverwachte focusverschuivingen bij het selecteren van filteropties waargenomen. Bezoekers krijgen geen melding voordat de context wijzigt. Dit kan verwarrend zijn en belemmert het gebruik van hulpsoftware. Voeg een knop toe om de filters toe te passen of gebruik asynchrone JavaScript met een live-region om wijzigingen correct aan te kondigen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ verschijnt de tekst "E-mailadres moet overeenkomen" wanneer het e-mailadres in het veld “Bevestig e-mail” niet overeenkomt met het e-mailadres in het veld “E-mail”. Deze tekst is een instructie, geen foutmelding. Een foutmelding moet duidelijk aangeven dat er een fout is gemaakt en aangeven waar de fout zich bevindt. Het is gebruikelijk dat een foutmelding een ontkenning bevat. Hetzelfde probleem wordt waargenomen bij het bericht "Vul alstublieft een geldige postcode in, zoals 1234 AB." dat verschijnt wanneer de postcode onjuist is. Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt dezelfde kwestie waargenomen. Wanneer de schakelknop op "Ja, ik wil een diepdruk toevoegen tegen meerprijs" staat en het veld "Tekst" leeg is bij het verzenden van het formulier, verschijnt de melding “Dit veld moet u invullen voordat u uw bestelling kunt toevoegen.”. Ook dit is een instructieve formulering en geen foutmelding. Pas de teksten aan zodat ze aangeven dat een fout is gemaakt, bijvoorbeeld door te vermelden dat het veld niet (goed) is ingevuld.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ werkt de zoekbalk als een combobox: terwijl de bezoeker typt, verschijnen suggesties in een vervolgkeuzelijst. De juiste ARIA-structuur ontbreekt echter. Voeg role="combobox" toe aan het invoerveld en gebruik aria-expanded om aan te geven of de suggestielijst zichtbaar is. Voor volledige toegankelijkheid zijn aanvullende attributen nodig, zoals beschreven op https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Op pagina https://webshop.dela.nl/urnen staat op een klein scherm een sectie “Filters” met verborgen inhoud. De open of gesloten toestand van de filtersectie wordt niet programmatisch doorgegeven aan schermlezers. Dit kan worden opgelost met het attribuut aria-expanded of met visueel verborgen tekst die de status van de sectie aangeeft. Hetzelfde probleem wordt waargenomen op pagina's https://webshop.dela.nl/alle-producten , https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje heeft de knop met het volledig-schermicoon onterecht de toegankelijke rol van een dialoogvenster. Hierdoor begrijpen schermlezers niet wat de knop doet. Zorg dat de knop de juiste rol krijgt zodat hulpsoftware de functie goed kan overbrengen aan de bezoeker. Op pagina’s https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed, https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk en https://webshop.dela.nl/fotoblok-met-askamer-donkerbruin wordt hetzelfde probleem waargenomen bij de knop met het volledig-schermicoon. Voeg de juiste toegankelijke rol toe aan deze knoppen.

Op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed heeft het selectievakje met de zichtbare tekst "Asvulset om product te vullen (niet nodig bij bezorging op DELA-locatie)" geen toegankelijke naam. Hierdoor is het element niet bruikbaar voor bezoekers die hulpsoftware gebruiken. Voeg een toegankelijke naam toe die de functie van het selectievakje duidelijk maakt.

Uitkomst: Voldoende