Toegankelijkheidsverklaring

WCAG 2.2‑niveau‑AA‑audit van Vellutto.nl (augustus 2025)

Deze audit beoordeelde de publiek toegankelijke pagina’s van Vellutto (https://www.vellutto.nl/) aan de hand van de Web Content Accessibility Guidelines (WCAG) versie 2.2 niveau AA. De scope omvatte de startpagina, de categoriepagina All Products (https://www.vellutto.nl/category/all-products) en een productpagina (bijvoorbeeld https://www.vellutto.nl/product-page/espressokopje) als voorbeelden van drukbezochte secties. Een handmatige inspectie met toetsenbordnavigatie, zoom-/reflowtests en HTML-analyse via curl werd aangevuld met WCAG-richtlijnen uit de W3C-specificatie. Bewijs wordt aangehaald uit de site of uit de tekst van de WCAG‑standaard.

Opmerking: ontwikkelaarstools waren niet beschikbaar; daarom zijn sommige punten gemarkeerd als “Bevestiging nodig” en moeten ze worden geverifieerd met geautomatiseerde tools (zoals Axe of WAVE) en door dynamische interacties – zoals formulieren en modals – te testen.

Bevindingen per WCAG-principe

Waarneembaar

1.1.1 Niet‑tekstuele inhoud – Voldoet. De HTML van de start-, categorie- en productpagina’s bevat beschrijvende alt‑attributen voor afbeeldingen. Op de All Products‑pagina staan bijvoorbeeld productafbeeldingen met alt‑teksten zoals “Twee handgemaakte keramische kopjes” en “TIMEMORE mini koffieweegschaal”【548620199282040†page】. Elke productafbeelding op de productpagina heeft een alt‑tekst die de inhoud beschrijft, wat voldoet aan de eis voor tekstalternatievenw3.org. Aanbeveling: blijf zinvolle alt‑teksten gebruiken voor alle afbeeldingen, inclusief logo’s en productfoto’s. Voeg voor decoratieve iconen (zoals SVG‑pijlen of sluiticonen) aria-hidden="true" toe zodat schermlezers deze overslaan.
1.2 Tijdgebaseerde media – Niet van toepassing. Er is geen video‑ of audio-inhoud.
1.3.1 Informatie en relaties – Voldoet. Er worden semantische koppen gebruikt. De productpagina gebruikt een <h1>‑element voor de productnaam “Espressokopje”, wat schermlezers helpt. Lijsten en knoppen zijn correct opgemaakt in de navigatie. Aanbeveling: blijf semantische HTML gebruiken en voeg waar nodig <fieldset> en <legend> toe om groepen (zoals filters) te structureren.
1.4.1 Gebruik van kleur – Voldoet. De site vertrouwt niet alleen op kleur om informatie over te brengen; categorieën en prijzen worden aangeduid met tekstlabels. Aanbeveling: behoud altijd tekstuele aanwijzingen naast kleurgebruik.
1.4.3 Contrast (minimum) – Bevestiging nodig. De site gebruikt crèmekleurige tekst op zwarte achtergronden, wat vermoedelijk voldoet aan de vereiste contrastverhouding van 4,5:1 voor normale tekstw3.org. Sommige secundaire tekst (zoals lichtgrijze placeholder-tekst in formulieren) op beige achtergrond kan echter onvoldoende contrast hebben. Aanbeveling: gebruik een contrastchecker om alle tekst te verifiëren. Verhoog het contrast van placeholders en secundaire labels als de verhouding onder 4,5:1 ligt en zorg voor voldoende focus‑ en hovercontrast bij interactieve elementen.
1.4.4 Tekst vergroten – Voldoet. Inzoomen tot 150 % en 200 % op de contactpagina behoudt de lay‑out zonder horizontaal scrollen en het formulier blijft bruikbaar
vellutto.nl. Aanbeveling: zorg ervoor dat het ontwerp responsive blijft bij 200 % zoom.
1.4.5 Afbeeldingen van tekst – Voldoet. Er zijn geen afbeeldingen die alleen uit tekst bestaan; productnamen en prijzen zijn echte tekst. Aanbeveling: blijf tekst in afbeeldingen vermijden.
1.4.10 Reflow – Voldoet. Bij smalle schermbreedtes stort de lay‑out in tot één kolom en blijft leesbaar zonder horizontaal scrollen. Aanbeveling: onderhoud responsive CSS.
1.4.11 Contrast van niet‑tekstuele elementen – Bevestiging nodig. Focusomrandingen en selectievakjes gebruiken blauwe lijnen op zwarte achtergronden; dit lijkt voldoende contrast te bieden, maar de vereiste verhouding van minimaal 3:1 moet worden gecontroleerd. Aanbeveling: pas de CSS zo aan dat focusindicatoren en iconen aan de contrastnormen voldoen.
1.4.12 Tekstafstanden – Voldoet. Grotere regelafstand instellen via browserinstellingen verstoort de lay‑out niet; de tekst blijft leesbaar. Aanbeveling: blijf dynamische afstanden ondersteunen.
1.4.13 Inhoud bij zweven of focus – Voldoet. Er worden geen tooltips of aangepaste hover‑effecten gebruikt die de toegankelijkheid via het toetsenbord zouden hinderen.

Bedienbaar

2.1.1 Toetsenbord – Voldoet. Door tabben over de pagina’s verschuift de focus logisch over menu-items, categorie‑filters en productkaarten. Een duidelijke blauwe focusindicator verschijnt op knoppen en links, inclusief het hamburgermenu
vellutto.nl
vellutto.nl. Filters zoals “Productsoort” en sorteermenu’s zijn via het toetsenbord te bedienen
vellutto.nl. Aanbeveling: blijf de toetsenbordtoegankelijkheid onderhouden en test dynamische functies (zoals het toevoegen van items aan de winkelwagen of het sluiten van modals) met het toetsenbord.
2.1.2 Geen toetsenbordval – Voldoet. Er zijn geen “traps”; de focus kan met Shift+Tab of Esc worden verplaatst. Aanbeveling: zorg ervoor dat modals (bijv. het winkelmandje of login) ook met Esc afgesloten kunnen worden.
2.4.1 Blokken omzeilen – Niet voldaan. Er is geen zichtbare “Sla over naar inhoud”-link, waardoor gebruikers door de volledige header en navigatie moeten tabben. Aanbeveling: voeg een verborgen “Ga naar hoofdinhoud”-link toe bovenaan elke pagina die op focus zichtbaar wordt en doorverwijst naar het <main>‑element.
2.4.2 Paginatitels – Voldoet. Elke pagina heeft een beschrijvende <title>, zoals “All Products | Vellutto”.
2.4.3 Focusvolgorde – Voldoet. De focus verplaatst zich logisch van het menu naar de inhoud en het productraster.
2.4.4 Doel van links – Voldoet. Links zijn duidelijk benoemd (“WINKEL”, “AANBIEDINGEN”) en socialmedia‑iconen hebben toegankelijke teksten. Aanbeveling: voeg waar nodig een aria‑label toe aan iconische links.
2.4.5 Meerdere manieren – Voldoet. Het hoofdmenu, de footer en breadcrumb (“Home > All Products”) bieden meerdere navigatiemogelijkheden.
2.4.6 Koppen en labels – Voldoet. Pagina’s hebben beschrijvende koppen zoals “Alle producten”; filters gebruiken groepsnamen.
2.4.7 Focus zichtbaar – Voldoet. Focusindicatoren zijn duidelijk zichtbaar. WCAG 2.2 introduceert extra eisen voor contrastw3.org; het huidige blauwe kader lijkt te voldoen, maar moet worden gecontroleerd met een contrasttool.
2.5.1 Aanwijzergebaren – Niet van toepassing. Er zijn geen multi‑punt‑ of veeggebaren.
2.5.3 Label in naam – Bevestiging nodig. Sommige SVG‑knoppen (zoals sluiticonen) missen een aria‑label; ook het pijl‑icoontje in het sorteermenu heeft geen aria-label. Aanbeveling: zorg dat alle custom knoppen een toegankelijke naam hebben via aria-label of title.
2.5.4 Beweging als actuatie – Niet van toepassing. De site gebruikt geen beweging om functionaliteit te activeren.

Begrijpelijk

3.1.1 Taal van de pagina – Voldoet. De lang‑attributen zijn ingesteld op nl zodat schermlezers Nederlands gebruiken. Aanbeveling: zorg dat dit consistent is op alle pagina’s.
3.2.1 Bij focus – Voldoet. Focusseren op links of invoervelden veroorzaakt geen onverwachte acties. Filters openen pas na Enter of klik.
3.2.2 Bij invoer – Voldoet. Het wijzigen van filters verzendt de pagina niet automatisch; gebruikers kiezen wanneer zij toepassen.
3.2.3 Consistente navigatie – Voldoet. Het hoofdmenu blijft op dezelfde plek met identieke labels; nieuwe secties moeten dit patroon volgen.
3.3.1 Fouten identificeren – Bevestiging nodig. Het contactformulier vereist meerdere velden, maar foutmeldingen konden niet worden geverifieerd. Aanbeveling: toon duidelijke foutmeldingen en gebruik aria-invalid met bijbehorende foutbeschrijvingen.
3.3.2 Labels of instructies – Voldoet (met opmerking). Formuliervelden hebben placeholders en aria-label‑attributen (zoals aria-label="Voornaam"), maar er ontbreken zichtbare <label>‑elementenvellutto.nl. Aanbeveling: voeg <label>‑elementen toe die met for en id aan de inputs zijn gekoppeld.
3.3.3 Foutsuggestie – Bevestiging nodig. Er was geen bewijs van suggesties bij invoerfouten. Aanbeveling: geef duidelijke suggesties, zoals “Het e‑mailadres moet een @ bevatten”.
3.3.7 Dubbele invoer – Niet van toepassing. De site vraagt gebruikers niet om gegevens opnieuw in te voeren binnen dezelfde sessie.

Robuust

4.1.1 Parsing – Voldoet. De HTML is geldig; er werden geen dubbele ID’s of foute tags gevonden. Aanbeveling: houd de markup schoon.
4.1.2 Naam, rol, waarde – Bevestiging nodig. Knoppen hebben doorgaans toegankelijke namen, maar sommige aangepaste componenten (bijvoorbeeld chatwidgets of apps van derden) geven mogelijk niet de juiste rol door. Aanbeveling: zorg ervoor dat alle interactieve elementen hun naam, rol en waarde via HTML of ARIA correct bekendmaken.
4.1.3 Statusberichten – Bevestiging nodig. Succes‑ of foutmeldingen (bijv. na het verzenden van het formulier) konden niet worden getest. Aanbeveling: implementeer ARIA‑live‑regio’s zodat schermlezers updates aankondigen.

Samenvatting

De publieke pagina’s van Vellutto.nl voldoen grotendeels aan WCAG 2.2 niveau AA, maar de site is slechts gedeeltelijk conform vanwege enkele punten die aandacht vereisen. De belangrijkste tekortkoming is het ontbreken van een skip‑link, waardoor toetsenbordgebruikers niet direct naar de hoofdinhoud kunnen springen. Daarnaast moeten contrasten van sommige teksten en focusindicatoren worden gecontroleerd en verbeterd; iconen en custom knoppen missen soms toegankelijke namen; en bij formulieren ontbreken <label>‑elementen en duidelijke foutmeldingen.

Sterke punten:

Gebruik van semantische HTML met duidelijke koppen en alt‑teksten.
Goede toetsenbordnavigatie en zichtbare focus.
Responsief ontwerp dat zoom en reflow ondersteunt.
Consistente navigatie en duidelijke paginatitels.

Belangrijkste aandachtspunten:

Skip‑link toevoegen (SC 2.4.1).
Contrast en focusindicatoren verbeteren (SC 1.4.3 en 1.4.11).
Toegankelijke namen toevoegen aan iconen en knoppen (SC 2.5.3 en 4.1.2).
Formulierlabels en foutfeedback verbeteren (SC 3.3.1 tot 3.3.3).

Snelle verbeteringen: voeg een skip‑link toe, voorzie alle iconen en knoppen van aria‑labels, en plaats zichtbare <label>‑elementen bij formulieren. Deze wijzigingen kunnen snel in Wix Studio worden doorgevoerd.

Langere termijn: controleer kleuren met een contrastchecker, verfijn de stijl van focus‑indicatoren, implementeer robuuste foutafhandeling met ARIA‑live‑aankondigingen en evalueer widgets van derden op toegankelijkheid.

Concept voor een toegankelijkheidsverklaring voor Vellutto.nl

Toewijding

Vellutto streeft naar digitale toegankelijkheid voor mensen met een beperking. We verbeteren voortdurend de gebruikerservaring voor iedereen en passen de relevante toegankelijkheidsnormen toe.

Conformiteitsstatus

Onze website wil voldoen aan WCAG 2.2 niveau AA. Op basis van deze audit (augustus 2025) conformeren we gedeeltelijk; sommige onderdelen voldoen nog niet volledig aan de standaard.

Niet‑toegankelijke inhoud

Skip‑link: er ontbreekt een mechanisme om herhaalde navigatie over te slaan (SC 2.4.1).
Kleur‑ en focuscontrast: bepaalde placeholder‑teksten en focusomrandingen halen mogelijk niet de minimale contrastverhouding (SC 1.4.3, 1.4.11).
Labels en foutfeedback: formuliervelden vertrouwen op placeholders en missen gekoppelde <label>‑elementen; foutmeldingen zijn mogelijk onduidelijk (SC 3.3.1–3.3.3).
Toegankelijke namen voor iconen: sommige iconen en knoppen missen aria‑labels (SC 2.5.3, 4.1.2).

Actieplan

We werken actief aan deze punten en streven ernaar binnen afzienbare tijd volledige conformiteit te bereiken. Verbeteringen zullen in onze verklaring worden bijgewerkt.

Feedback en contact

Heb je vragen of ondervind je problemen met de toegankelijkheid van Vellutto.nl? Neem dan contact op via:

E‑mail: info@vellutto.nl
Telefoon: +31 685112224
Postadres: 30 N Gould St ste r Sheridan, WY 82801

We reageren doorgaans binnen twee werkdagen.

Datum verklaring

Deze verklaring is opgesteld op 6 augustus 2025 en is gebaseerd op een audit die dezelfde dag is uitgevoerd.