Rapport:
Audit digitale toegankelijkheid website Webshop Dela

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website is ook een link. In het logo staat de tekst "DELA", maar het tekstalternatief is alleen "store logo". Dat is niet goed, want mensen die het beeld niet kunnen zien, weten dan niet wat er echt staat. Pas het tekstalternatief aan, zorg dat zowel het woord 'logo' als alle tekst die in het logo te zien is hierin terug komt. Zo krijgen alle bezoekers dezelfde informatie, ook als ze een schermlezer gebruiken. Zie: https://webshop.dela.nl/

De pijlpictogrammen in het hoofdmenu van de website hebben tekstalternatieven zoals "checkdl", "chevron-down" of "heroicons/solid/chevron-down". Deze teksten zeggen niets over de functie van het pictogram. Daardoor weten mensen die een schermlezer gebruiken niet dat er verborgen inhoud aanwezig is die je kunt openen of sluiten. Er is ook geen andere oplossing, zoals een aria-expanded-attribuut of een verborgen tekst, die deze informatie geeft. Zorg dat de functie van de pictogrammen wordt overgebracht door het tekstalternatief aan te passen. Dit probleem komt op meerdere plekken voor, zoals bij veelgestelde vragen op https://webshop.dela.nl/faq en bij de filters op https://webshop.dela.nl/urnen.

Het icoon op de knop om afbeeldingen schermvullend te bekijken heeft geen tekstalternatief. Voeg dit toe. Zie de volgende pagina's:
https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje,
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. Daar is het tekstalternatief “widescreen”, wat ook niet duidelijk maakt wat het pictogram doet.

Op de website 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 winkelwagenpictogram in de header, de pijlpictogrammen op de FAQ-pagina onder “We helpen je graag met:”, en het winkelwagenicoon op de knoppen "Toevoegen aan winkelwagen" op verschillende productpagina’s hebben onnodige tekstalternatieven. Verwijder deze, zodat de pictogrammen voor hulpsoftware zijn verborgen.

Op de homepage staan groene vinkjes onder de kopjes "Smakelijke herinneringen aan een dierbare" en "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.

Op pagina https://webshop.dela.nl/ staat bij het kopje "Smakelijke herinneringen aan een dierbare" een afbeelding. Deze afbeelding is toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""), zodat hulpsoftware deze op correcte wijze kan negeren. Hetzelfde probleem wordt waargenomen met afbeeldingen onder de kop "Productcategorieën" op de pagina's https://webshop.dela.nl/, https://webshop.dela.nl/urnen, https://webshop.dela.nl/alle-producten en andere.

In de header opent de link "Winkelmand" het modale venster van de winkelwagen als er artikelen in de winkelwagen zitten. Dit modale venster bevat afbeeldingen die werken als links, maar ze hebben geen alt-attribuut. Daardoor hebben deze links geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn mogelijk. Zie pagina https://webshop.dela.nl/.

Op pagina https://webshop.dela.nl/urnen staan onder het kopje "Reviews" de beoordelingssterren. Deze informatieve afbeeldingen zijn toegevoegd als achtergrondafbeeldingen en er is geen tekstalternatief. 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 de alternatieve tekst zetten. Hetzelfde staat op pagina https://webshop.dela.nl/alle-producten en op pagina https://webshop.dela.nl/vingerafdruksieraden.

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.

Op pagina 1 en 24 van het PDF-document op https://www.dela.nl/-/media/files/corporate/d-567-w-1221--inkoopvoorwaarden-cooperatie-dela.pdf staat een logo "DELA voor elkaar" als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een `Figure`-tag worden geplaatst en een alt-tekst krijgen die de afbeelding duidelijk beschrijft.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De zoekbalk bovenaan de website toont een lijst met suggesties, die als een groep wordt gepresenteerd. Deze relatie is echter niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of paginering 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. Zie pagina https://webshop.dela.nl/.

In de header van de website staat een zoekveld. Het label-element met "Zoeken" is niet expliciet gekoppeld aan dit invoerveld. label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld. Zie pagina https://webshop.dela.nl/. Een soortgelijk probleem doet zich voor op de pagina's https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje en https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed . Als de knop "Ja, ik wil een diepdruk toevoegen tegen meerprijs" is ingedrukt, wordt een formulier weergegeven. In dit formulier is het label-element met "Tekst" niet expliciet gekoppeld aan het bijbehorende tekstveld. Zie ook het label-element "Lettertype" dat ook niet expliciet is gekoppeld aan de bijbehorende keuzelijst (select-element).

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 "Productcategorieën", "Lees hoe andere nabestaanden omgaan met het overlijden van een dierbare", "Reviews" en "Mooie glasreliek". Op de pagina https://webshop.dela.nl/faq zijn "Urnen, sieraden en herinneringsproducten" en "We helpen je graag met" geen echte koppen. Op https://webshop.dela.nl/urnen is dit het geval bij onder andere "Productcategorieën", "Filters" en "Beschrijving". 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.

Op de website https://webshop.dela.nl/ worden in de footer verschillende groepen van links visueel gegroepeerd, zoals onder "Webshop", "Service & contact" en "Vragen aan onze servicedesk?", en naast "© 2024 DELA". Ook op andere pagina’s, zoals https://webshop.dela.nl/urnen en https://webshop.dela.nl/alle-producten, staan gegroepeerde links onder “Productcategorieën”. Voor bezoekers die de website niet visueel kunnen bekijken, is deze structuur echter niet zichtbaar. In de HTML worden deze links niet als groep aangeboden. Daardoor missen gebruikers van schermlezers de context die aangeeft dat de links bij elkaar horen. Als links visueel als groep worden getoond, moet dat ook duidelijk zijn in de code. Zet deze groepen in een <ul>- of <nav>-element om de onderlinge samenhang aan te geven. Zo blijft de navigatiestructuur voor iedereen begrijpelijk, ook zonder visuele weergave.

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. Ook op de pagina https://webshop.dela.nl/algemene-voorwaarden komt dit probleem voor, onder secties zoals “Artikel 1 - Definities”, “Artikel 3 - Toepasselijkheid” en “Artikel 4 - Het aanbod”. 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 onder "Artikel 2 - Identiteit" staan tekstparen zoals "Naam ondernemer" en "DELA Uitvaartverzorging N.V." die visueel uitzien als term en definitie. In de HTML ontbreekt deze relatie. Zonder semantische opmaak met <dl>, <dt> en <dd> kunnen screenreaders de koppeling tussen de termen en hun bijbehorende uitleg niet herkennen.

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, maar zijn in de HTML niet gemarkeerd als koptekst. Hierdoor zijn ze voor schermlezers niet herkenbaar als onderdeel van de structuur. Gebruik h-elementen zoals <h2> of <h3> om deze teksten als kop aan te duiden, of zorg ervoor dat een bestaande koprol niet wordt overschreven door styling of scripting.

Op pagina https://webshop.dela.nl/urnen staan onder "Filters" meerdere secties met groepslabels, zoals filtercategorieën. Deze labels zijn visueel duidelijk, maar in de HTML zijn ze niet programmatisch gekoppeld aan de bijbehorende filtergroepen. Daardoor missen schermlezers de context die aangeeft welke elementen bij elkaar horen. Dit kan opgelost worden door gebruik te maken van fieldset- en legend-elementen, of door de groepslabels te koppelen met aria-labelledby. Op de pagina’s https://webshop.dela.nl/alle-producten, https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring geldt hetzelfde probleem bij de filtersecties.

Op de productpagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje komen vergelijkbare fouten voor bij interactieve onderdelen onder "Uitlijning" en "Invoegen:", vooral wanneer de optie “Ja, ik wil een diepdruk toevoegen tegen meerprijs” is geselecteerd. Ook daar ontbreekt de semantische koppeling tussen de labeltekst en de bijbehorende opties.

Op de afrekenpagina https://webshop.dela.nl/checkout/index/index/step/onepage/ bevat het formulier meerdere secties met visuele groepslabels die niet gekoppeld zijn aan hun inhoud. Hierdoor is de structuur voor gebruikers van hulpsoftware onduidelijk. Zorg ervoor dat alle groepslabels in de HTML correct verbonden zijn met de inhoud waar ze bij horen. Dit verhoogt de toegankelijkheid en zorgt voor een logischere navigatie voor iedereen die met een schermlezer werkt.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje staat onder "Beschrijving" een tekstblok dat visueel uit meerdere alinea’s bestaat, maar in de HTML als één enkele div is gemarkeerd. Door het ontbreken van aparte p-elementen voor elke alinea, verliezen gebruikers van schermlezers structuur en overzicht. Elke visueel herkenbare alinea moet zijn eigen p-element krijgen, zodat de tekst ook technisch als losse paragrafen wordt weergegeven. Dit probleem komt ook voor op de 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/urn-eeuwige-verbintenis-met-waxinelichtje wordt het em-element onder "Belangrijke informatie over de gravure op deze urn:" gebruikt om tekst schuin weer te geven, zonder dat er sprake is van semantische nadruk. Hetzelfde gebeurt op https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk in de beschrijving bij de zin “Als u de bestelling geplaatst heeft …”. Het em-element hoort alleen gebruikt te worden als de tekst ook inhoudelijk nadruk moet krijgen. Voor alleen visuele stijl moet in plaats daarvan CSS worden toegepast. Zo blijft de betekenis van semantische elementen behouden voor hulpsoftware.

Op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed wordt de tekst die begint met "De afmetingkeuze heeft betrekking ..." opgemaakt met strong- en em-elementen, terwijl er geen inhoudelijke nadruk wordt bedoeld. Deze elementen worden daar alleen gebruikt voor visuele stijl, zoals vet of cursief. Hetzelfde gebeurt met de tekst “Let op: Gouden variant wordt speciaal vervaardigd en is daarom niet retourneerbaar!”, die onterecht met <strong> is gemarkeerd. De HTML-elementen strong en em hebben een semantische functie. Ze geven aan dat bepaalde tekst belangrijk is (strong) of extra nadruk krijgt (em). Als ze alleen worden gebruikt voor opmaak, zonder dat er sprake is van betekenisvolle nadruk, raken deze elementen hun waarde kwijt voor mensen die met hulpsoftware lezen. Dit probleem komt ook voor op de pagina https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk, bij de teksten die beginnen met “De bedel heeft een doorsnede …” en “De bedel is inclusief leren armband …”. Gebruik CSS voor visuele opmaak zoals vet of cursief, en bewaar semantische elementen voor tekst die inhoudelijk nadruk verdient. Zo blijft de inhoud toegankelijk en betekenisvol.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje is de tekst "Belangrijke informatie over de gravure op deze urn" gemarkeerd met <strong>, terwijl dit functioneert als een kop. Het strong-element is bedoeld om nadruk te geven aan woorden binnen een lopende tekst, niet om een sectie in te leiden. Als een tekst als kop wordt gepresenteerd, moet dit altijd gebeuren met een kop-element zoals <h2> of <h3>. Alleen dan herkennen schermlezers het als onderdeel van de structuur van de pagina.

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: Onvoldoende

Bevindingen: Op de website https://webshop.dela.nl/ is de volgorde van HTML-elementen in de submenu’s van het hoofdmenu niet logisch wanneer een bezoeker met het toetsenbord navigeert op een klein scherm. Na de knop die het submenu "Urnen" opent, komt direct het submenu "Overige", dat onterecht de links bevat die eigenlijk horen bij "Assieraden" en "Vingerafdruksieraden", zoals "Ringen", "Armbanden" en "Colliers". Hierdoor klopt de structuur van het menu niet, wat verwarrend is voor schermlezers en toetsenbordgebruikers. Dit probleem geldt ook voor de submenu's "Assieraden" en "Vingerafdruksieraden", waar de gekoppelde inhoud niet op de juiste plek in de HTML staat.

Op pagina https://webshop.dela.nl/faq zijn er uitklapbare secties met verborgen inhoud. Deze inhoud is op het scherm niet zichtbaar, maar wordt wél door schermlezers gelezen. Dat betekent dat de visuele en semantische leesvolgorde uit elkaar lopen. Gebruikers krijgen informatie te horen die ze niet kunnen zien, wat de begrijpelijkheid en navigatie bemoeilijkt. Om dit op te lossen, moet de verborgen inhoud ook onzichtbaar zijn voor hulpsoftware. Dit kan met aria-hidden="true" of via hidden of display: none in CSS, zolang het element daadwerkelijk niet bedoeld is om op dat moment beschikbaar te zijn. Wanneer de inhoud weer zichtbaar wordt, moet deze toegankelijkheid weer worden hersteld door de aria- of style-attributen aan te passen. Zo blijft de leesvolgorde en inhoud voor iedereen gelijk.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ ontbreekt in een formulier met invoervelden voor persoonlijke gegevens (bijvoorbeeld achternaam, e-mailadres, telefoonnummer) het attribuut autocomplete. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's staan in de footer links onder kopjes "Webshop", "Service & contact" en "Vragen aan onze servicedesk?" met blauwe (HEX #4D738A) tekst op een grijze (HEX #EEEEEE) achtergrond. De contrastratio is te laag: 4,4:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Zie pagina https://webshop.dela.nl/.

Op de homepagina https://webshop.dela.nl/ staan links met witte tekst op een oranje (HEX #ED7522) achtergrond. Zie de links "Bekijk onze producten". De contrastratio is te laag: 2,9:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde probleem doet zich voor op andere pagina's. Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt oranje en wit gebruikt in de links "Toevoegen aan winkelwagen", "Opties selecteren" en de tekst "Voorbeeld" die verschijnt als de schakelknop is ingesteld op "Ja, ik wil een diepdruk toevoegen tegen meerprijs" en de bezoeker begint te typen in het tekstveld "Tekst". Op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed gaat het om de links "Toevoegen aan winkelwagen" en tekst "Voorbeeld". Op pagina https://webshop.dela.nl/checkout/cart/index is oranje en wit gebruikt in de link "Afrekenen". Zie ook andere pagina's.

Op pagina https://webshop.dela.nl/urnen staat een blauwe (HEX #027FA4) link "Meer informatie" op een lichtblauwe (HEX #E4F2F5) achtergrond. De contrastratio is te laag: 4,0:1.Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde staat op de pagina https://webshop.dela.nl/vingerafdruksieraden.

Op pagina https://webshop.dela.nl/urnen verandert de kleur van de tekst van de links in de paginering als een bezoeker de muisaanwijzer over de link beweegt. De contrastratio is te laag. De tekstkleur is grijs (HEX #9CA3AF). Tegen de witte achtergrond is de contrastratio 2,5:1. De huidige link heeft een lichtgrijze (HEX #F3F4F6) achtergrond en het contrast is 2,3:1. Dit moet minstens 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). Hetzelfde wordt waargenomen op de pagina's https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden. Zie ook pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje met de knop "Doorgaan met winkelen" die wordt weergegeven in het dialoogvenster "Product succesvol toegevoegd" nadat op de knop "Toevoegen aan winkelwagen" is geklikt. De tekst op de knop is zwart op de donkergrijze (HEX #4B5563) achtergrond bij hover. De contrastratio is 2,8:1.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt het item aan de winkelwagen toegevoegd als een bezoeker op de knop "Toevoegen aan winkelwagen" klikt. Er verschijnt de witte melding "Je hebt Urn Eeuwige verbintenis met waxinelichtje aan je winkelwagen toegevoegd." op een groene (HEX ##10b981) achtergrond. De contrastratio is te laag: 2,5:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde probleem is te zien 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, https://webshop.dela.nl/fotoblok-met-askamer-donkerbruin.

Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ hebben de foutmeldingen in het formulier de rode (HEX #EF4444) tekst tegen een witte achtergrond. De contrastratio is 3,8: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.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje verschijnt er een foutmelding in lichtoranje tekst (HEX #FB923C) op een witte achtergrond wanneer het veld "Tekst" leeg is en de knop "Toevoegen aan winkelwagen" wordt ingedrukt terwijl de optie "Ja, ik wil een diepdruk toevoegen tegen meerprijs" is geselecteerd. De kleurcombinatie heeft een contrastratio van slechts 2,3:1, wat te laag is voor normale tekst. Dit moet minimaal 4,5:1 zijn.

Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ verschijnt de foutmelding "Ongeldig e-mailadres" wanneer alle velden correct zijn ingevuld, behalve de velden onder "Uw e-mail", en er op "Afrekenen" is geklikt. De witte tekst van het bericht op de rode (HEX #EF4444) achtergrond heeft een contrastratio van 3,8:1. Dit moet minstens 4,5:1 zijn.

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/ is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% onder "Productcategorieën" het woord "Vingerafdruksieraden" gedeeltelijk weggevallen. Zorg dat alles nog werkt en leesbaar is als wordt ingezoomd tot 400% op een scherm van 1280 bij 1024 pixels.

Op pagina https://webshop.dela.nl/urnen verschijnt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% een horizontale scrollbalk. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed of 256 CSS-pixels hoog. Zorg ervoor dat de tekst binnen het scherm past, zonder dat er een scrollbalk verschijnt.

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 in de header een knop "Winkelwagen". Deze knop opent een modaal venster als er items in de winkelwagen zitten. De knop met het "X"-icoon heeft onvoldoende kleurcontrast tussen het icoon en de achtergrond. Het grijze (HEX #D1D5DB) icoon tegen de witte achtergrond heeft een contrastratio van 1,5:1. Dit moet minimaal 3,0:1 zijn. Er moet gezorgd worden dat iconen voldoende contrast hebben.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje staat op de afbeelding een knop met een icoon voor volledig scherm. Deze knop opent een modaal venster. Het grijze (HEX #9CA3AF) "X"-icoon tegen de witte achtergrond heeft een contrastratio van 2,5:1. Dit is onvoldoende. Zie ook 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 hebben de "X"-iconen onvoldoende contrast. Er moet gezorgd worden dat iconen voldoende contrast hebben.

Op pagina https://webshop.dela.nl/ staat op de homepagina de rubriek "Reviews". Elke recensie bevat afbeeldingen met sterren. Deze gele (HEX #FFC008) sterren op een witte achtergrond hebben een contrastratio van 1,6: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/urnen hebben de pijliconen in de paginering onvoldoende kleurcontrast bij hoveren. De grijze (HEX #9CA3AF) iconen tegen de witte achtergrond hebben een contrastratio van 2,5:1. Dit is lager dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen. Er moet gezorgd worden dat deze iconen voldoende contrast hebben.

Op pagina’s https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden komt dit probleem met de pijliconen ook voor. Het contrast bij hoveren is 2,5:1. Er moet gezorgd worden dat deze grafische elementen voldoende contrast hebben.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt het item aan de winkelwagen toegevoegd na het klikken op de knop "Toevoegen aan winkelwagen". Het bericht "Je hebt Urn Eeuwige verbintenis met waxinelichtje aan je winkelwagen toegevoegd." verschijnt. Er is een "X"-icoon om deze melding te verwijderen. Dit icoon heeft een grijze kleur (HEX #4B5563) tegen een groene achtergrond (HEX #12B981) met een contrastratio van 2,9:1. Dit moet minstens 3,0:1 zijn. Er moet gezorgd worden dat iconen voldoende contrast hebben.

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 is hetzelfde "X"-icoon zichtbaar bij meldingen. Ook hier is de contrastratio 2,9:1. Er moet gezorgd worden dat iconen voldoende contrast hebben.

Op pagina https://webshop.dela.nl/urnen krijgen de selectievakjes in het gedeelte "Filters" een witte rand op een lichtblauwe achtergrond (HEX #E5F2F6) wanneer deze de toetsenbordfocus hebben. De contrastratio tussen de rand en de achtergrond is 1,1:1. Dit moet ten minste 3,0:1 zijn. Er moet gezorgd worden dat de focusmarkering voldoende contrast heeft.

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.

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: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ bevat de header een hoofdmenu met submenu’s. Deze submenu’s zijn niet te bedienen via het toetsenbord. Interactieve onderdelen zoals deze moeten toegankelijk zijn zonder muis, zodat bezoekers met alleen een toetsenbord deze ook kunnen gebruiken.

Op pagina’s https://webshop.dela.nl/urnen en https://webshop.dela.nl/vingerafdruksieraden zijn de links met de tekst "Meer informatie" niet via het toetsenbord bereikbaar. Deze interactieve elementen moeten toegankelijk zijn voor bezoekers die zonder muis navigeren.

Op pagina’s https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje, https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed en https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk zijn de link "Toevoegen aan winkelwagen" in de sticky footer en de knop om een afbeelding in volledig scherm te bekijken niet toegankelijk via het toetsenbord. Ook verschijnt na het toevoegen van een artikel een dialoogvenster met de link "Doorgaan met winkelen", die niet met het toetsenbord bereikbaar is. Deze onderdelen moeten voor alle bezoekers bruikbaar zijn, ook zonder muis.

Op pagina https://webshop.dela.nl/urnen is bij weergave op een klein scherm een interactief element aanwezig om het gedeelte "Filters" te openen en te sluiten. Dit element is niet met het toetsenbord te bedienen. Alle interactieve onderdelen moeten ook via het toetsenbord bedienbaar zijn.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt extra inhoud weergegeven wanneer de keuzeknop is ingesteld op "Ja, ik wil een diepdruk toevoegen tegen meerprijs". Interactieve onderdelen onder "Uitlijning" en "Invoegen:" zijn niet toegankelijk via het toetsenbord. Ook op andere pagina’s is dit probleem zichtbaar. Alle klikbare elementen zoals links, knoppen, formulieren, keuzelijsten, tabbladen, sliders en accordeons moeten met het toetsenbord bedienbaar zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/urnen verwijst de skiplink naar het gedeelte onder "Beschrijving", terwijl er aanvullende unieke inhoud boven dit doel staat. De skiplink moet verwijzen naar het begin van de unieke inhoud op de pagina. Er moet gezorgd worden dat de skiplink naar de juiste plek verwijst. Op pagina’s https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden wordt hetzelfde probleem waargenomen. De skiplink verwijst niet naar het begin van de unieke inhoud.

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/ worden op kleine schermen meerdere problemen met de volgorde van de toetsenbordfocus waargenomen wanneer de bezoeker naar het hoofdmenu in de header navigeert. Na de link "Urnen" gaat de toetsenbordfocus correct naar de knop met een pijl. Daarna komt de focus echter in het geopende submenu "Overige" terecht, gevolgd door onzichtbare interactieve elementen binnen het hoofdmenu. Wanneer andere submenu's worden geopend, zoals "Vingerafdruksieraden", komt de toetsenbordfocus na de submenu-items opnieuw terecht in het eerder geopende submenu "Overige". Zorg dat de focusvolgorde logisch en consistent is, zodat bezoekers eenvoudig naar het volgende menu-item kunnen navigeren. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen deze elementen per ongeluk worden geactiveerd.

Op pagina https://webshop.dela.nl/faq, onder "Urnen, sieraden en herinneringsproducten", hebben secties met verborgen inhoud een probleem met de volgorde van focus. Elementen binnen samengevouwen blokken krijgen nog steeds toetsenbordfocus, ook al zijn ze niet zichtbaar. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren en naar het scherm kijken. Zorg dat elementen die niet zichtbaar zijn geen toetsenbordfocus krijgen.

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 komt de toetsenbordfocus na de link "Urn Eeuwige verbintenis met waxinelichtje" in het kruimelpad terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op interactieve elementen die niet zichtbaar zijn, zoals knoppen, links of formuliervelden. Dit kan ertoe leiden dat een bezoeker onbedoeld een handeling uitvoert. Hetzelfde probleem met een onzichtbaar interactief element komt voor op pagina’s https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed en https://webshop.dela.nl/asbedel-in-organische-vorm-met-vingerafdruk. Ook hier moet worden gezorgd dat de toetsenbordfocus alleen op zichtbare interactieve elementen terechtkomt.

Op pagina https://webshop.dela.nl/vingerafdruksieraden is de focusvolgorde niet logisch. De link "webshop@dela.org" is met het attribuut tabindex="-1" verwijderd uit de natuurlijke tabvolgorde. Hierdoor kunnen bezoekers die met de Tab-toets navigeren deze link niet bereiken. Daarnaast is op één of meer elementen een tabindex-waarde groter dan 0 gebruikt. 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.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje opent de knop met de tekst "Toevoegen aan winkelwagen" een modale dialoog, maar de toetsenbordfocus wordt na openen niet automatisch binnen de dialoog geplaatst. Bezoekers kunnen daarnaast nog steeds navigeren en interactie hebben met de onderliggende pagina, terwijl de dialoog openstaat. Dit is niet het verwachte gedrag van een modaal venster. De focus moet automatisch binnen de dialoog worden geplaatst zodra deze opent. Zolang de dialoog zichtbaar is, moet de focus binnen de dialoog blijven en mag niet op elementen achter de dialoog terechtkomen. Pas hiervoor technieken toe om de focus te begrenzen tot het dialoogvenster totdat dit gesloten wordt.

Advies: Op alle pagina's, in de header, wanneer het zoekveld "Zoeken" toetsenbordfocus krijgt, wordt de rest van de pagina, op het zoekveld na, gedimd. Er wordt echter geen dialoogvenster of modal geactiveerd en de zoekveld wordt niet gemarkeerd als een modal. De interactieve elementen op de pagina kunnen nog steeds toetsenbordfocus ontvangen. Dit gedrag kan bezoekers in verwarring brengen. Dit wordt niet op toegankelijkheid afgekeurd, maar het kan de toegankelijkheid wel verbeteren als dit wordt opgelost. Zie pagina https://webshop.dela.nl/ .

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ staat bovenaan een link met het logo en de zichtbare tekst "DELA Herinneringsproducten". De toegankelijke naam van deze link is “store logo”, wat niet duidelijk maakt waar de link naartoe leidt. Bezoekers die hulpsoftware gebruiken, kunnen hierdoor niet goed inschatten wat het doel van de link is. Voeg beschrijvende tekst toe aan de toegankelijke naam zodat de bestemming van de link duidelijk is.

Op pagina https://webshop.dela.nl/ bevat het hoofdmenu bovenaan een link met de zichtbare tekst "Urnen", maar de toegankelijke naam is "Urnen checkdl". Deze naam bevat de tekst "checkdl" uit het title-attribuut van het SVG-icoon, wat het doel van de link onduidelijk maakt. Ditzelfde probleem doet zich voor bij de andere menu-items "Assieraden", "Vingerafdruksieraden" en "Overige". De toegankelijke namen moeten duidelijk beschrijven waar de link naartoe leidt, zonder verwarrende of overbodige toevoegingen uit bijvoorbeeld het pictogram.

Op pagina https://webshop.dela.nl/ staat in de header een knop "Winkelwagen" die een modaal venster opent wanneer er artikelen zijn toegevoegd. Als er meerdere artikelen in de winkelwagen staan, zijn er links met potloodiconen die allemaal dezelfde toegankelijke naam “Bewerken” hebben, terwijl deze links naar verschillende pagina’s leiden. Voor bezoekers die hulpsoftware gebruiken is het daardoor niet duidelijk welk product bewerkt zal worden. Zorg dat deze links unieke toegankelijke namen krijgen, bijvoorbeeld door “Bewerken” aan te vullen met de productnaam. Deze extra tekst kan visueel worden verborgen als het al visueel duidelijk is bij welk product de link hoort.

Op pagina https://webshop.dela.nl/ bevat de link "Lees meer" onder de tekst "Lees hoe andere nabestaanden omgaan met het overlijden van een dierbare" geen duidelijke beschrijving van de bestemming. Deze linktekst is vaag en biedt geen bruikbare informatie aan bezoekers die schermlezers gebruiken of moeite hebben met het interpreteren van context. Zorg dat de linktekst duidelijk maakt waar de link naartoe leidt, bijvoorbeeld door de tekst aan te vullen met de naam of kop van het bijbehorende onderdeel. Als dit visueel al duidelijk is, kan deze extra informatie op een toegankelijke manier visueel verborgen worden.

Op pagina https://webshop.dela.nl/ staat in de header een knop "Winkelwagen" die een modaal venster opent wanneer er items in de winkelwagen zijn geplaatst. In dit venster worden afbeeldingen van de items getoond die functioneren als links. Deze afbeeldingen hebben echter een leeg alt-attribuut (alt=""), waardoor ze voor schermlezers niet worden aangekondigd. De links hebben hierdoor geen inhoud en geen toegankelijke naam, waardoor niet duidelijk is waar ze naartoe verwijzen. Dit is in strijd met succescriterium 4.1.2. Voeg een beschrijvende alt-tekst toe aan de afbeeldingen zodat de bestemming van de link voor alle bezoekers begrijpelijk is. Andere oplossingen waarbij de link een toegankelijke naam krijgt zijn ook mogelijk.

Op pagina https://webshop.dela.nl/urnen worden bij de paginering pijlpictogrammen gebruikt om naar de vorige en volgende pagina's te navigeren. De toegankelijke namen van deze links zijn "Vorige" en "Volgende", afkomstig van het attribuut aria-label. Deze benamingen geven onvoldoende informatie over het doel van de links. Pas de toegankelijke namen aan naar bijvoorbeeld "vorige pagina" en "volgende pagina", zodat duidelijk is dat het om navigatie naar een andere pagina gaat. Hetzelfde probleem komt voor op pagina's https://webshop.dela.nl/alle-producte en https://webshop.dela.nl/vingerafdruksieraden. Ook hier moet worden gezorgd dat de toegankelijke namen van de pagineringslinks expliciet aangeven dat het om navigatie naar een andere pagina gaat.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje staat onder de afbeelding een onzichtbare link zonder inhoud, waardoor deze geen waarneembaar linkdoel heeft. Dit belemmert de toegankelijkheid voor bezoekers die hulpsoftware gebruiken. Voeg aan deze link inhoud toe, bijvoorbeeld door een tekst toe te voegen binnen het a-element of door een aria-label te gebruiken. Het linkdoel moet altijd duidelijk zijn. 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/asbedel-in-organische-vorm-met-vingerafdruk. Ook op deze pagina’s moeten de onzichtbare links voorzien worden van een duidelijk en toegankelijk linkdoel.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ opent de knop "Winkelwagen" in de header een modaal venster als artikelen in de winkelwagen zijn geplaatst. In dit venster staan meerdere knoppen met een prullenbakpictogram en allemaal dezelfde toegankelijke naam: "Verwijderen". Deze knoppen hebben echter verschillende functies, omdat elke knop een specifiek artikel uit de winkelwagen verwijdert. Dit zorgt voor verwarring bij bezoekers die schermlezers gebruiken, omdat het niet duidelijk is welk artikel wordt verwijderd. Zorg dat elke knop een unieke toegankelijke naam krijgt, bijvoorbeeld door de productnaam toe te voegen aan de tekst. Zo wordt duidelijk welke actie elke knop uitvoert.

Op pagina https://webshop.dela.nl/ is op kleine schermen in de header een menuknop aanwezig met de ontoereikende toegankelijke naam "menude Menu". Deze naam beschrijft de functie van de knop niet duidelijk. De sluitknop in het geopende menu heeft de toegankelijke naam "x Menu", wat eveneens geen duidelijke actie beschrijft. Gebruik betekenisvolle namen zoals "menu openen" en "menu sluiten" om duidelijk te maken wat de knop doet. Binnen het geopende menu hebben pijlpictogrammen die submenu’s openen toegankelijke namen zoals "chevron-right", wat ook niet informatief is. Gebruik beschrijvende teksten zoals "submenu openen" of verwijs naar de sectie die wordt geopend.

Op pagina https://webshop.dela.nl/faq bevatten knoppen voor het openen en sluiten van accordeons ontoereikende toegankelijke namen zoals "Hoe kom ik aan de as om in het sieraad te doen? heroicons/solid/chevron-down". Hier moet het pictogram niet worden opgenomen in de toegankelijke naam. Zorg dat alleen de betekenisvolle tekst wordt gebruikt, bijvoorbeeld "Hoe kom ik aan de as om in het sieraad te doen?" als toegankelijke naam.

Op pagina https://webshop.dela.nl/urnen worden in het gedeelte "Filters" knoppen gebruikt om extra filteropties te tonen. Bijvoorbeeld onder "Prijs" heeft de knop "Toon (4) meer" de toegankelijke naam "Toon (4) meer chevron-down". De naam van het pictogram hoort hier niet in te staan. Zorg dat de toegankelijke naam overeenkomt met de zichtbare en betekenisvolle tekst zonder toevoeging van de pictogramnaam.

Op pagina https://webshop.dela.nl/urnen hebben filters met selectievakjes toegankelijke namen die niet uniek zijn. Onder "Prijs" hebben de selectievakjes allemaal de toegankelijke naam "prijs", en onder "Materiaal" is dit "specifiek_materiaal". Hierdoor is voor schermlezers niet duidelijk welke optie wordt gekozen. Elk selectievakje moet een unieke toegankelijke naam krijgen die overeenkomt met het zichtbare label. Zo kunnen bezoekers die schermlezers gebruiken de juiste keuze maken. Hetzelfde probleem met onduidelijke of dubbele 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. Ook hier moeten de toegankelijke namen van de selectievakjes uniek en betekenisvol zijn.

Op pagina https://webshop.dela.nl/urnen bevat de zijbalk met filters meerdere secties die kunnen worden geopend met knoppen met het label "Toon meer". Alle knoppen hebben dezelfde tekst, terwijl ze elk een andere filtersectie openen. Hierdoor is voor blinde bezoekers of bezoekers die schermlezers gebruiken niet duidelijk welke knop bij welke sectie hoort. Zorg dat elke knop een unieke en beschrijvende tekst krijgt, bijvoorbeeld “Toon meer opties voor Prijs” of “Toon meer bij Materiaal”, zodat duidelijk is welke sectie wordt uitgebreid.

Op pagina https://webshop.dela.nl/alle-producten is hetzelfde probleem aanwezig: meerdere knoppen met het label "Toon meer" besturen verschillende onderdelen, zonder dat dat via de knoptekst duidelijk wordt gemaakt. Dit moet worden aangepast door de knopteksten specifiek te maken voor de bijbehorende filtersectie.

Op pagina https://webshop.dela.nl/vingerafdruksieraden staat in het filter onder "Kleur" een knop met de tekst "Toon (3) meer". Deze tekst beschrijft niet nauwkeurig wat de functie van de knop is. Voor gebruikers die afhankelijk zijn van schermlezers is het daardoor lastig te begrijpen welke opties worden getoond. Ook hier moet de knoptekst worden aangepast naar een beschrijvende naam zoals “Toon meer kleuren”.

Op pagina https://webshop.dela.nl/catalogsearch/result/?q=ring staat een vergelijkbare knop met de tekst "Toon (4) meer" bij een filteroptie. Deze tekst is niet informatief genoeg. Geef ook hier een duidelijke beschrijving van de functie van de knop, zodat het doel voor iedereen helder is.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/urnen is de toetsenbordfocus niet zichtbaar op het select-element waarmee op een parameter kan worden gesorteerd, en ook niet op het select-element "Toon" naast de paginering. De toetsenbordfocus moet altijd duidelijk zichtbaar zijn op interactieve elementen zoals knoppen, links en invoervelden die via het toetsenbord te bedienen zijn. Als dit niet het geval is, kunnen bezoekers die met het toetsenbord navigeren niet zien waar ze zich bevinden op de pagina, waardoor ze niet weten wanneer ze op Enter moeten drukken om een element te activeren. Hetzelfde probleem met onzichtbare toetsenbordfocus wordt waargenomen op pagina's https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden. Ook daar is de focus op bepaalde interactieve elementen niet visueel herkenbaar, wat de bruikbaarheid ernstig belemmert voor bezoekers die geen muis gebruiken.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje is de toetsenbordfocus niet zichtbaar op de wisselknop met de tekst “Nee, ik wil geen gravure toevoegen” of “Ja, ik wil een gravure toevoegen tegen meerprijs”. De focus moet ook hier duidelijk zichtbaar zijn zodat bezoekers kunnen volgen waar ze zich bevinden tijdens het navigeren. Dit probleem moet worden opgelost door styling toe te voegen die de focus op deze knoppen visueel markeert. Vergelijkbare problemen komen ook op andere pagina’s voor.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ staat bovenaan een link met het logo en de tekst "DELA Herinneringsproducten". De toegankelijke naam van deze link is “store logo”. Omdat deze naam niet overeenkomt met de zichtbare tekst in het logo, werkt de link niet goed bij spraakbediening. Het spraaksysteem herkent de link niet als de bezoeker de zichtbare tekst uitspreekt. Zorg dat de zichtbare tekst in het logo voorkomt in de toegankelijke naam, bij voorkeur vooraan.

Op pagina https://webshop.dela.nl/ staat in de header een zoekveld met een placeholder-tekst "Zoeken", maar de toegankelijke naam van het veld is leeg. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, werkt het zoekveld niet met spraakbediening. Het systeem kan het veld niet activeren wanneer de bezoeker het woord "Zoeken" uitspreekt. Zorg daarom dat de zichtbare tekst onderdeel is van de toegankelijke naam, bij voorkeur vooraan.

Op pagina https://webshop.dela.nl/urnen staan filters met selectievakjes. De toegankelijke namen van deze selectievakjes bevatten niet de zichtbare labeltekst. Bijvoorbeeld, het selectievakje met het label "€ 7,50 - € 100" heeft de toegankelijke naam “price”. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, is spraakbediening niet mogelijk. Het systeem herkent het element niet wanneer de bezoeker de zichtbare tekst uitspreekt. Zorg daarom dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

Op pagina https://webshop.dela.nl/alle-producten, https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring komt hetzelfde probleem met de filters en toegankelijke namen voor. De toegankelijke namen van de selectievakjes bevatten niet de zichtbare tekst. Hierdoor werken de elementen niet goed met spraakbediening. Zorg dat de zichtbare tekst onderdeel is van de toegankelijke naam, bij voorkeur vooraan.

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 https://webshop.dela.nl/ worden meerdere aria-labels gebruikt met Engelse tekst. Voorbeelden zijn “store logo” voor het logo bovenaan de pagina en “Search” voor de zoekknop. Deze Engelse termen worden uitgesproken door schermlezers volgens de Nederlandse uitspraakregels, wat verwarrend kan zijn. Vertaal deze teksten naar het Nederlands om de begrijpelijkheid te verbeteren.

Op pagina https://webshop.dela.nl/urnen heeft het sorteer-select-element het aria-label “Sort By” en het select-element naast “Toon” heeft het aria-label “Show items per page”. Verder hebben de pagineringslinks de teksten “Previous” en “Next”. Ook bevatten de invoervelden met filteropties aria-labels zoals “price”, “specific_material”, “specific_color” en andere Engelse termen. Deze Engelse labels worden niet goed uitgesproken door schermlezers in het Nederlands. Vertaal deze aria-labels naar het Nederlands.

Op pagina’s https://webshop.dela.nl/alle-producten en https://webshop.dela.nl/vingerafdruksieraden komen dezelfde problemen met Engelse aria-labels voor. Deze labels zijn niet afgestemd op de taal van de website en leiden tot verwarring bij gebruik van hulpsoftware. Vertaal de teksten van de aria-labels naar het Nederlands.

Op pagina https://webshop.dela.nl/ is de tekst van de skiplink “Skip to Content”. Omdat deze tekst wordt uitgesproken in het Nederlands, is de Engelse tekst niet goed verstaanbaar voor bezoekers die hulpsoftware gebruiken. 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 bij foutmeldingen in het formulier de tekst “Dit is een verplicht veld.”. 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, zoals “Het veld is niet (goed) ingevuld.”

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: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ bevat het formulier foutmeldingen die geen uitleg geven over hoe de fouten kunnen worden gecorrigeerd. De foutmelding bij het veld "Postcode" luidt bijvoorbeeld “Vul alstublieft een geldige postcode in.”. Deze melding geeft geen informatie over wat er precies wordt verwacht. Geef in plaats daarvan duidelijke instructies in de foutmelding, zoals “Voer een geldige Nederlandse postcode in, zoals 1234 AB”, zodat bezoekers weten hoe het veld correct moet worden ingevuld.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/ bevatten de hoofdmenulinks in de header submenu’s. In de code is echter niet aangegeven of deze submenu’s geopend of gesloten zijn. Wanneer een link een submenu kan tonen of verbergen, moet de toestand van dat submenu beschikbaar zijn voor hulpsoftware. Dit kan worden opgelost door het attribuut aria-expanded toe te voegen. Omdat dit attribuut alleen werkt zolang de focus op de link blijft, is aanvullende visueel verborgen tekst nodig als de focus verplaatst wordt, zodat de toestand van het submenu toch beschikbaar blijft.

Op pagina https://webshop.dela.nl/ staat in de header een zoekveld zonder toegankelijke naam. Bezoekers die gebruikmaken van een schermlezer weten hierdoor niet wat er in het veld moet worden ingevuld. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Koppel daarom een label-element aan het veld om een duidelijke toegankelijke naam toe te voegen.

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/faq zijn er secties met verborgen inhoud die met knoppen kunnen worden in- en uitgeklapt. Voor ziende bezoekers is het duidelijk of een sectie open of gesloten is, maar voor bezoekers die schermlezers gebruiken is dat niet het geval. Voeg daarom een aria-expanded-attribuut toe aan de knoppen die deze secties openen en sluiten. Als alternatief kan visueel verborgen tekst worden toegevoegd die de toestand van de sectie beschrijft.

Op pagina https://webshop.dela.nl/urnen staat op een klein scherm een sectie “Filters” met verborgen inhoud. De knop waarmee deze sectie wordt geopend, heeft niet de juiste toegankelijke rol. Elk HTML-element heeft standaard een rol die bepaalt hoe hulpsoftware ermee omgaat. Als de rol niet correct is, begrijpen schermlezers niet wat het element doet. Zorg dat de knop de juiste toegankelijke rol heeft. Daarnaast wordt de open of gesloten toestand van de filtersectie niet programmatisch doorgegeven aan schermlezers. Dit kan opgelost worden met het attribuut aria-expanded of met visueel verborgen tekst die de status van de sectie aangeeft.

Op pagina’s https://webshop.dela.nl/alle-producten, https://webshop.dela.nl/vingerafdruksieraden en https://webshop.dela.nl/catalogsearch/result/?q=ring komen problemen voor met de knop die de filtersectie opent. De toegankelijke rol ontbreekt en de toestand van de inhoud wordt niet op een toegankelijke manier gedeeld. Zorg dat de knop de juiste rol krijgt en gebruik aria-expanded of visueel verborgen tekst om de status aan te geven.

Op pagina https://webshop.dela.nl/urnen staat in de sectie “Filters” bij bepaalde categorieën, zoals "Prijs", een knop met de tekst “Toon (4) meer”. Deze tekst en de visuele presentatie maken duidelijk dat de extra opties verborgen zijn, maar het attribuut aria-expanded staat ten onrechte op "true". Als de opties worden getoond, verandert de tekst in “Toon minder”, maar aria-expanded is dan ingesteld op "false". Deze tegenstrijdigheid zorgt voor verwarring bij bezoekers die hulpsoftware gebruiken. Zorg dat de waarde van aria-expanded overeenkomt met de werkelijke status van de inhoud.

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 aria-expanded waargenomen. De waarde van het attribuut komt niet overeen met de zichtbare toestand van de inhoud. Pas dit aan zodat alle bezoekers dezelfde informatie krijgen.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje staat een knop met een icoon voor volledig scherm zonder de juiste toegankelijke rol. Hierdoor begrijpen schermlezers niet wat de knop doet. Zorg dat de knop de correcte 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/urn-eeuwige-verbintenis-met-waxinelichtje opent de knop met het volledig-schermicoon een modaal dialoogvenster. Dit dialoogvenster heeft niet de juiste ARIA-rol. Schermlezers herkennen daardoor niet dat het om een dialoogvenster gaat. Voeg role="dialog" toe om dit op te lossen. Zorg daarnaast dat het dialoogvenster een toegankelijke naam heeft door een aria-label met een duidelijke beschrijving van de inhoud toe te voegen.

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 met het modale dialoogvenster waargenomen. Ook hier ontbreekt de juiste rol en toegankelijke naam. Voeg role="dialog" toe en gebruik aria-label om het venster begrijpelijk te maken voor bezoekers die hulpsoftware gebruiken.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje verschijnt extra inhoud wanneer de schakelknop op "Ja, ik wil een diepdruk toevoegen tegen meerprijs" staat. Onder "Lettertype" staat een select-element met het label "Lettertype", maar dit element heeft geen toegankelijke naam. Hierdoor is het select-element niet toegankelijk. Geef dit element een toegankelijke naam, bijvoorbeeld door een label-element correct te koppelen.
Hetzelfde probleem met ontbrekende toegankelijke namen bij select-elementen wordt waargenomen op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed. Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ ontbreken toegankelijke namen bij het select-element onder "Bezorgopties" wanneer "Afhalen bij DELA locatie" is geselecteerd, evenals bij het select-element "DELA locatie". Voeg ook hier toegankelijke namen toe.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt bij een ingeschakelde schakelknop extra inhoud getoond, waaronder een tekstveld onder "Tekst". Dit invoerveld heeft geen toegankelijke naam. Daardoor weten bezoekers met een schermlezer niet wat zij moeten invullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Voeg een label-element toe dat het veld benoemt.
Hetzelfde probleem met het ontbreken van een toegankelijke naam bij het tekstveld wordt waargenomen op pagina https://webshop.dela.nl/as-ring-strak-en-glanzend-6-mm-breed. Zorg dat het tekstveld daar ook voorzien is van een correcte toegankelijke naam.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje verschijnt extra inhoud wanneer de schakelknop op "Ja, ik wil een diepdruk toevoegen tegen meerprijs" staat. Naast "Invoegen:" staan interactieve elementen met een kruispictogram en een "*"-pictogram. Deze elementen missen een toegankelijke rol en toegankelijke naam. Daardoor is het voor schermlezers niet duidelijk wat deze elementen doen. Voeg een correcte rol en toegankelijke naam toe om hun functie te beschrijven.

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.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje opent de knop "Toevoegen aan winkelwagen" een dialoogvenster. Dit venster heeft geen toegankelijke naam, waardoor schermlezers de inhoud niet goed kunnen overbrengen. Voeg een aria-label toe met een duidelijke beschrijving van de inhoud, zodat bezoekers met een schermlezer begrijpen wat het dialoogvenster toont.

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 komt hetzelfde probleem voor. De dialoogvensters die worden geopend via "Toevoegen aan winkelwagen" hebben geen toegankelijke naam. Zorg ook hier voor een aria-label met een beschrijving van de inhoud, zodat alle bezoekers dezelfde informatie ontvangen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop.dela.nl/checkout/index/index/step/onepage/ verschijnt bij fouten in het gedeelte "Uw e-mail" een foutmelding, maar deze melding krijgt geen toetsenbordfocus. Hierdoor wordt de melding niet automatisch opgemerkt door schermlezers, waardoor blinde bezoekers niet worden geïnformeerd over het probleem. Voeg het attribuut aria-live="polite" toe aan de melding zodat deze automatisch wordt voorgelezen zodra deze verschijnt. Op dezelfde pagina verschijnt bij een ongeldig e-mailadres de foutmelding "Ongeldig e-mailadres" wanneer alle andere velden correct zijn ingevuld en de bezoeker op "Afrekenen" klikt. Ook deze melding krijgt geen focus en zal daardoor waarschijnlijk niet worden opgemerkt door schermlezers. Voeg aria-live="polite" toe om ervoor te zorgen dat de melding automatisch wordt aangekondigd.

Op pagina https://webshop.dela.nl/urn-eeuwige-verbintenis-met-waxinelichtje wordt bij een ingeschakelde schakelknop en een leeg gelaten veld "Tekst" de foutmelding "Dit veld moet u invullen voordat u uw bestelling kunt toevoegen." weergegeven. Deze melding krijgt geen focus en wordt daarom niet automatisch aangekondigd aan bezoekers die een schermlezer gebruiken. Voeg aria-live="polite" toe om te zorgen dat de melding toegankelijk is voor blinde gebruikers.