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 whose options you choose, an automatic WCAG fix engine applied on every page, and a legal accessibility statement generator in 8 languages.

Installation and updates

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 the displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag and displayFooter hooks (the last one is a fallback for themes that do not call the previous one) and creates a statistics table. Right after installation, the widget is live with all its options, and every automatic fix is enabled except the contrast correction.

To update, simply upload the new ZIP over the installed module, without uninstalling it: the upgrade scripts add the new settings and keep your configuration.

Configuration

Accessibility widget

• Enable widget: displays the floating button on the front office. Disabling the widget also stops applying the preferences visitors saved earlier.
• 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.
• Hide button on cart and checkout: removes the button from the cart and order pages, including one page checkout modules that keep the order page name.
• Options shown in the widget: one checkbox per option (text size, high contrast, readable font, spacing, link highlighting, big cursor, reading guide, animation stop, image hiding). With no option checked, the floating button is hidden.

Automatic fixes

Each fix can be toggled individually. They run in the visitor browser at page load and on content added afterwards: your theme files are never modified.

• Missing image alt texts: see the details 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, each browser adds up the fixes applied and sends them at most once a minute, when the page is closed or left. 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 the options you checked:

• Text size: 5 steps from 100 to 150%.
• High contrast: smart mode detailed below.
• Readable font: switches to a Verdana, Tahoma, Arial stack.
• Increase spacing: letters 0.12em, words 0.16em, line height 1.6 and 2em between paragraphs, the test values of WCAG criterion 1.4.12.
• Highlight links: yellow background and systematic underline.
• Big cursor: enlarged arrow, and an enlarged hand on links and buttons.
• Reading guide: horizontal bar following the mouse.
• Stop animations: neutralizes CSS animations and transitions, pauses autoplay videos and Bootstrap, Swiper, Slick and Owl sliders (WCAG criteria 2.2.2 and 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 the next pages, with no visual flash and no data sent to your servers.

Icon fonts (Material Icons in the Classic theme, Font Awesome) are excluded from the readable font and spacing modes, so icons never turn into plain words.

Text size

The module scales the page root size from the value set by your theme, which enlarges every text sized in rem and em, including themes with a 62.5% root. Texts sized in pixels, which do not follow the root, are enlarged one by one. Each text is enlarged only once, whatever its sizing unit.

Smart high contrast

Classic widgets force a white background and full opacity on every element, which wipes out slider visuals and brings back hidden slides, collapsed menus and modal backdrops. Here the module analyzes the whole page, in chunks so it never freezes:

• solid backgrounds and gradients turn white;
• elements carrying a background image, and captions laid over a slider picture, are kept: their texts get a semi-opaque white plate;
• texts turn black, links dark blue and underlined (yellow on hover), buttons and fields get a white background and a 2px black border;
• nothing hidden by the theme reappears.

Forced colors only apply once the analysis is done, to avoid black text on a dark background while loading. Turning it off restores the original styles, including inline styles set by a page builder.

On mobile

Below 768px, the button shrinks to 44px (the touch target size of WCAG criterion 2.5.5) and sits 14px from the edges. The panel uses the screen width, up to 320px.

Automatic fixes in detail

Alt texts (WCAG 1.1.1)

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

1. image hidden from assistive technologies, tracking pixel, or image 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, when it is meaningful.

If none of these sources is reliable, the image is left untouched rather than wrongly hidden from screen readers by an empty alt.

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 from the 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 “opens in a new window”. 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, focus outline enforced through :focus-visible. On the Classic theme, where the <main> tag also wraps the header and footer, the skip link targets the #content-wrapper content column. If your theme already ships a skip link, the module does not add one.

Automatic contrast correction (WCAG 1.4.3)

The engine computes the relative luminance of each text and its actual background, then progressively darkens or lightens colors below the required ratio: 4.5, or 3 for large text (24px, or 18.66px bold). It runs during browser idle time.

Texts over an image, a gradient, a semi-transparent background or inside a slider are skipped: their actual background cannot be computed and a correction could make them harder to read. Disabled texts are skipped too.

Content loaded after the page

Fixes also apply to content inserted after load: faceted search product lists, quick view, add to cart modal, infinite scroll. High contrast and text size are applied there the same way.

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 language of your store (FR, EN, ES, DE, IT, NL, PL and PT 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, in the page language;
• the enforcement procedure towards the competent national authority.

The link to the statement automatically appears at the bottom of the widget panel, only when the page exists and is active. After a module update or a shop name change, click Update the statement page: a confirmation warns you that manual edits will be replaced, then the page is refreshed 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 to 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 at least one option is checked, that you are not on a page where it is hidden (mobile, cart, checkout), then clear the PrestaShop cache (Advanced Parameters > Performance).
• An option disappeared for a visitor: it was unchecked in the configuration, which also removes the saved preference.
• 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.
• An area stays dark in high contrast: an element changes its background later through a script (for example a sticky header that darkens on scroll). Toggle the mode off and on, or report the case to support with the affected URL.
• Installation or update fails: upload the latest ZIP over the module, without uninstalling. Versions before 1.2.1 could fail with “Undefined array key DFACCESS_WIDGET_OPTIONS”.
• No statistics coming in: check that collection is enabled and that no firewall filters requests to the module track controller. Counters arrive in batches, possibly a few minutes late.

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 Design > Pages if you do not want to keep it.