EAA Accessibility — Widget & WCAG Fixes (dfaccessibility)

DF Accessibility brings your PrestaShop store into compliance with the European Accessibility Act (EAA — Directive (EU) 2019/882) by combining three building blocks: an accessibility widget for your visitors, an automatic WCAG fix engine applied on every page load, and a multilingual legal accessibility statement generator.

Installation

1. In your PrestaShop back office, open Modules > Module Manager.
2. Click Upload a module and drop the dfaccessibility.zip file.
3. Click Configure once the installation completes.

The module registers on three hooks (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) and creates a single statistics table. Right after installation, the widget is live on the front office with default settings and every automatic fix is enabled, except the contrast correction.

Configuration

Accessibility widget

• Enable widget — displays the floating button on every front office page.
• Button position — bottom right or bottom left.
• Accent color — used for the button, the active panel options and the enforced focus outline. Pick a color with enough contrast against white (the default blue #2563EB meets the AA ratio).
• Hide button on mobile — hides the floating button below 768px. Preferences already saved by the visitor keep applying.

Automatic fixes

Each fix can be toggled individually. They run in the visitor browser at page load: your theme files are never modified and uninstalling restores the original state identically.

• Missing image alt texts — see the heuristics detailed below.
• Unlabelled form fields — adds an aria-label derived from the placeholder or field name.
• Links opening a new window — adds rel=noopener and an audible warning for screen readers.
• Untitled iframes — adds a title attribute derived from the source domain.
• ARIA landmarks — adds banner and contentinfo roles and a navigation aria-label when missing.
• Skip link — injects a “Skip to main content” link revealed on the first Tab press.
• Visible focus outline — enforces an outline on keyboard focus (WCAG criterion 2.4.7).
• Automatic contrast correction — disabled by default, see the dedicated section.

Statistics

When collection is enabled, the browser sends anonymous counters per fix type after the fixes run (via sendBeacon). Counters are aggregated per day and per shop — no cookie, no identifier, no personal data.

The widget on the visitor side

The floating button opens a panel offering:

• Text size — 5 steps from 100% to 135%.
• High contrast — smart mode whitening solid backgrounds while preserving images (see below).
• Readable font — switches to a Verdana/Arial stack.
• Increase spacing — 1.8 line height, increased letter and word spacing (WCAG criterion 1.4.12).
• Highlight links — yellow background and systematic underline.
• Big cursor — enlarged high-contrast cursor.
• Reading guide — horizontal bar following the mouse.
• Stop animations — neutralizes CSS animations and transitions (WCAG criterion 2.3.3).
• Hide images — hides images, videos and background images.
• Reset all settings — back to the original state.

The panel is fully keyboard operable: focus trap, Escape to close, aria-pressed states on every option. Preferences are stored only in the browser localStorage and reapplied before first paint on subsequent pages — no visual flash, no data sent to your servers.

Smart high contrast

Unlike classic widgets that force a white background on every element (wiping out sliders and banners), this mode analyzes the DOM when activated:

• opaque solid colored backgrounds are whitened;
• elements carrying a background image are preserved: their texts receive a semi-opaque white plate guaranteeing readability over the visual;
• texts turn black, links turn dark blue and underlined, interactive controls receive a 2px black border.

Deactivating removes every applied style and restores the theme identically.

Automatic fixes in detail

Alt texts (WCAG 1.1.1)

For every image without an alt attribute, the module applies, in order:

1. if the image sits inside a link that already carries text: empty alt (decorative image);
2. otherwise, the figcaption caption or the title attribute;
3. otherwise, the product title of the surrounding miniature;
4. as a last resort, the cleaned file name (dashes replaced, digit runs removed) when the result is meaningful.

Forms (WCAG 1.3.1, 4.1.2)

Fields with no associated label, no aria-label and no title receive an aria-label derived from the placeholder, or the humanized field name as a fallback.

Links and iframes (WCAG 3.2.5, 4.1.2)

target=_blank links receive rel=noopener and an aria-label completed with an “opens in a new window” mention. Untitled iframes receive a title mentioning the embedded domain.

Structure and navigation (WCAG 1.3.1, 2.4.1, 2.4.7)

ARIA roles added when the theme does not declare them, skip link injected at the very top of the page, and focus outline enforced on every interactive element via :focus-visible.

Automatic contrast correction (WCAG 1.4.3)

The engine walks visible texts, computes the relative luminance of the text and its effective background, then progressively darkens or lightens colors whose ratio falls below 4.5. The scan is capped at 1500 elements and runs through requestIdleCallback during browser idle time.

EAA accessibility statement

Publishing an accessibility statement is a formal obligation of the directive. From the module configuration, click Generate the statement page: a CMS page is created in every active language of your store (FR, EN, ES, DE, IT templates included, English fallback for other languages), with:

• the compliance status against Directive (EU) 2019/882 and the EN 301 549 standard;
• the list of available accessibility features;
• the feedback channel pointing to your contact form;
• the enforcement procedure towards the competent national authority.

The link to the statement automatically appears at the bottom of the widget panel. After a module update or a shop name change, click Update the statement page to refresh the existing page without changing its URL.

Statistics and due diligence proof

The table on the configuration page shows, over the last 30 days and per type, the number of applied fixes: alt texts, form labels, external links, iframe titles, ARIA landmarks, skip links and contrast corrections. In case of an audit or a complaint, these counters document the technical measures in place. The Reset statistics button purges the counters of the current shop.

In multistore, statistics and the statement are handled per shop context.

Best practices and limits

The module fixes the most frequent technical failures, but some WCAG criteria remain editorial by nature and stay in your hands:

• logical h1-h6 heading hierarchy in your CMS content and product pages;
• editorial quality of the alt texts of your key images;
• captions for your videos;
• clarity of your button and link labels.

Troubleshooting

• The button does not show — check that the widget is enabled, that the displayBeforeBodyClosingTag hook is not disabled by your theme, and clear the PrestaShop cache (Advanced Parameters > Performance).
• Preferences do not persist — the visitor is probably browsing in private mode or their browser blocks localStorage; the widget stays usable, only persistence is lost.
• High contrast leaves an inconsistent area — some elements injected dynamically after load (third-party widgets) escape the analysis pass. Toggle the mode off and on, or report the case to support with the affected URL.
• No statistics coming in — check that collection is enabled and that no server-side blocker filters requests to the module track controller.

Uninstall

Uninstalling removes the statistics table and the configuration keys. The accessibility statement CMS page is intentionally kept (it remains a legal obligation): delete it manually from Appearance > Pages if you do not want to keep it.