EAA-toegankelijkheid — Widget en WCAG-correcties (dfaccessibility)

DF Accessibility brengt uw PrestaShop-winkel in overeenstemming met de Europese toegankelijkheidsrichtlijn (EAA, Richtlijn (EU) 2019/882) door drie bouwstenen te combineren: een toegankelijkheidswidget voor uw bezoekers, een engine met automatische WCAG-correcties die bij het laden van elke pagina worden toegepast, en een generator voor een meertalige wettelijke toegankelijkheidsverklaring.

Installatie

1. Open in uw PrestaShop-backoffice Modules > Modulebeheer.
2. Klik op Een module uploaden en sleep het bestand dfaccessibility.zip erin.
3. Klik na de installatie op Configureren.

De module registreert zich op drie hooks (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) en maakt één enkele statistiektabel aan. Direct na de installatie is de widget actief in de frontoffice met de standaardinstellingen en zijn alle automatische correcties ingeschakeld, met uitzondering van de contrastcorrectie.

Configuratie

Toegankelijkheidswidget

• Widget inschakelen: toont de zwevende knop op alle pagina’s van de frontoffice.
• Positie van de knop: rechtsonder of linksonder.
• Accentkleur: gebruikt voor de knop, de actieve opties in het paneel en de opgelegde focusrand. Kies een kleur met voldoende contrast tegen wit (het standaardblauw #2563EB voldoet aan de AA-ratio).
• Knop verbergen op mobiel: verbergt de zwevende knop onder 768px. Reeds opgeslagen voorkeuren van de bezoeker blijven van toepassing.

Automatische correcties

Elke correctie kan afzonderlijk worden ingeschakeld. Ze worden uitgevoerd in de browser van de bezoeker bij het laden van de pagina: uw themabestanden worden nooit gewijzigd en een deïnstallatie herstelt de oorspronkelijke staat volledig.

• Ontbrekende alternatieve teksten: zie de details van de heuristieken verderop.
• Formuliervelden zonder label: voegt een aria-label toe, afgeleid van de placeholder of de veldnaam.
• Links die een nieuw venster openen: voegt rel=noopener toe en een hoorbare waarschuwing voor schermlezers.
• Iframes zonder titel: voegt een title-attribuut toe, afgeleid van het brondomein.
• ARIA-landmarks: voegt de rollen banner en contentinfo toe en een aria-label voor de navigatie wanneer die ontbreken.
• Skiplink: injecteert een link “Naar de hoofdinhoud” die zichtbaar wordt bij de eerste druk op Tab.
• Zichtbare focusrand: legt een rand op bij toetsenbordfocus (WCAG-criterium 2.4.7).
• Automatische contrastcorrectie: standaard uitgeschakeld, zie de aparte sectie.

Statistieken

Wanneer het verzamelen is ingeschakeld, stuurt de browser na het toepassen van de correcties een anonieme teller per correctietype (via sendBeacon). Deze tellers worden per dag en per winkel geaggregeerd: geen cookies, geen identificatoren, geen persoonsgegevens.

De widget aan bezoekerszijde

De zwevende knop opent een paneel met:

• Tekstgrootte: 5 stappen van 100% tot 135%.
• Hoog contrast: slimme modus die effen achtergronden oplicht met behoud van afbeeldingen (zie hieronder).
• Leesbaar lettertype: schakelt over naar een Verdana/Arial-stack.
• Ruimere afstanden: regelafstand 1.8, grotere letter- en woordafstand (WCAG-criterium 1.4.12).
• Links markeren: gele achtergrond en systematische onderstreping.
• Grote cursor: vergrote cursor met hoog contrast.
• Leesliniaal: horizontale balk die de muis volgt.
• Animaties stoppen: schakelt CSS-animaties en -overgangen uit (WCAG-criterium 2.3.3).
• Afbeeldingen verbergen: verbergt afbeeldingen, video’s en achtergrondafbeeldingen.
• Alle instellingen resetten: terug naar de oorspronkelijke staat.

Het paneel is volledig met het toetsenbord bruikbaar: focus trap, sluiten met Escape, aria-pressed-statussen op elke optie. De voorkeuren worden uitsluitend opgeslagen in de localStorage van de browser en voor de eerste render van volgende pagina’s opnieuw toegepast: geen visuele flits, geen gegevens naar uw servers verstuurd.

Slim hoog contrast

In tegenstelling tot klassieke widgets die op alle elementen een witte achtergrond forceren (waardoor sliders en banners verdwijnen), analyseert de modus de DOM bij activering:

• opake achtergronden met een effen kleur worden wit gemaakt;
• elementen met een achtergrondafbeelding blijven behouden: hun teksten krijgen een halftransparante witte plaat die de leesbaarheid bovenop het beeld garandeert;
• teksten worden zwart, links donkerblauw en onderstreept, interactieve elementen krijgen een zwarte rand van 2px.

Bij het uitschakelen worden alle toegepaste stijlen verwijderd en wordt het thema volledig hersteld.

De automatische correcties in detail

Alternatieve teksten (WCAG 1.1.1)

Voor elke afbeelding zonder alt-attribuut past de module in deze volgorde toe:

1. als de afbeelding in een link staat die al tekst bevat: lege alt (decoratieve afbeelding);
2. anders de figcaption-onderschrift of het title-attribuut;
3. anders de producttitel van de omliggende miniatuur;
4. als laatste redmiddel de opgeschoonde bestandsnaam (streepjes vervangen, cijferreeksen verwijderd) als het resultaat betekenisvol is.

Formulieren (WCAG 1.3.1, 4.1.2)

Velden zonder gekoppeld label, zonder aria-label en zonder title krijgen een aria-label, afgeleid van de placeholder of anders van de leesbaar gemaakte veldnaam.

Links en iframes (WCAG 3.2.5, 4.1.2)

Links met target=_blank krijgen rel=noopener en een aria-label aangevuld met de vermelding “opent in een nieuw venster”. Iframes zonder titel krijgen een title met het ingesloten domein.

Structuur en navigatie (WCAG 1.3.1, 2.4.1, 2.4.7)

ARIA-rollen worden toegevoegd wanneer het thema ze niet declareert, een skiplink wordt helemaal aan het begin van de pagina geïnjecteerd, en op alle interactieve elementen wordt via :focus-visible een focusrand opgelegd.

Automatische contrastcorrectie (WCAG 1.4.3)

De engine doorloopt de zichtbare teksten, berekent de relatieve luminantie van de tekst en de effectieve achtergrond, en maakt kleuren met een ratio lager dan 4,5 stapsgewijs donkerder of lichter. De analyse is begrensd op 1500 elementen en wordt uitgevoerd via requestIdleCallback tijdens de rustmomenten van de browser.

EAA-toegankelijkheidsverklaring

Het publiceren van een toegankelijkheidsverklaring is een formele verplichting van de richtlijn. Klik in de moduleconfiguratie op Verklaringspagina genereren: er wordt een CMS-pagina aangemaakt in elke actieve taal van uw winkel (sjablonen FR, EN, ES, DE, IT inbegrepen, Engelse fallback voor de overige talen), met:

• de conformiteitsstatus ten aanzien van Richtlijn (EU) 2019/882 en de norm EN 301 549;
• de lijst van aangeboden toegankelijkheidsfuncties;
• het meldingskanaal dat naar uw contactformulier verwijst;
• de beroepsmogelijkheden bij de bevoegde nationale autoriteit.

De link naar de verklaring verschijnt automatisch onderaan het widgetpaneel. Klik na een module-update of een naamswijziging van de winkel op Verklaringspagina bijwerken om de bestaande pagina te actualiseren zonder de URL te wijzigen.

Statistieken en bewijs van zorgvuldigheid

De tabel op de configuratiepagina toont, over de laatste 30 dagen en per type, het aantal toegepaste correcties: alternatieve teksten, formulierlabels, externe links, iframe-titels, ARIA-landmarks, skiplinks en contrastcorrecties. Bij een controle of een melding documenteren deze tellers de genomen technische maatregelen. De knop Statistieken resetten wist de tellers van de huidige winkel.

In een multistore-omgeving worden de statistieken en de verklaring per winkelcontext beheerd.

Goede praktijken en beperkingen

De module corrigeert de meest voorkomende technische gebreken, maar sommige WCAG-criteria blijven redactioneel van aard en vallen onder uw verantwoordelijkheid:

• logische hiërarchie van de koppen h1-h6 in uw CMS-inhoud en productpagina’s;
• redactionele kwaliteit van de alternatieve teksten van uw belangrijkste afbeeldingen;
• ondertiteling van uw video’s;
• begrijpelijkheid van de labels van uw knoppen en links.

Probleemoplossing

• De knop verschijnt niet: controleer of de widget is ingeschakeld, of de hook displayBeforeBodyClosingTag niet door uw thema is uitgeschakeld, en leeg de PrestaShop-cache (Geavanceerde instellingen > Prestaties).
• De voorkeuren blijven niet bewaard: de bezoeker surft waarschijnlijk in privémodus of zijn browser blokkeert de localStorage; de widget blijft bruikbaar, alleen de persistentie gaat verloren.
• Het hoge contrast laat een inconsistente zone achter: sommige elementen die na het laden dynamisch worden geïnjecteerd (widgets van derden) ontsnappen aan de analysepass. Schakel de modus uit en weer in, of meld het geval aan de support met de betreffende URL.
• Er komen geen statistieken binnen: controleer of het verzamelen is ingeschakeld en of geen serverblokkering de requests naar de track-controller van de module filtert.

Deïnstallatie

De deïnstallatie verwijdert de statistiektabel en de configuratiesleutels. De CMS-pagina met de toegankelijkheidsverklaring wordt bewust behouden (ze blijft een wettelijke verplichting): verwijder haar handmatig via Weergave > Pagina’s als u haar niet wilt bewaren.