The module adds a floating button that lets visitors switch on accessibility aids: high contrast, larger text, underlined links and several more. This page covers the settings and — just as important — what the widget does not solve.
What the module does
The module uses two hooks: displayHeader loads the stylesheet and script, displayFooter renders the button and panel. The visitor's choice is stored in their browser, so the settings survive navigation to the next page. The module has no table of its own — the whole configuration lives in nine ps_configuration keys.
Requirements
- PrestaShop 1.7, 8 or 9.
- No ionCube, no extra extensions.
Installation
- Back office → Modules → Module Manager → Upload a module.
- After installing, open the configuration and pick the button position and the set of aids.
- Check on a phone that the button does not cover another element in the same corner — the usual collisions are the cookie consent banner and the back-to-top button.
Configuration
| Setting | Key | Notes |
|---|---|---|
| Widget position | PD_WCAG_POSITION |
Four screen corners: bottom right, bottom left, top right, top left. |
| Button colour | PD_WCAG_COLOR |
Hex notation, e.g. #1a73e8. Worth checking its contrast against the page background. |
| High contrast | PD_WCAG_HIGH_CONTRAST |
Raises text-to-background contrast. |
| Inverted colours | PD_WCAG_INVERT |
Inverts the page palette. |
| Greyscale | PD_WCAG_GRAYSCALE |
Removes colour — helps with some colour vision deficiencies. |
| Larger text | PD_WCAG_FONT_SIZE |
Steps the text size up. |
| Underlined links | PD_WCAG_UNDERLINE |
Links stop being distinguishable by colour alone. |
| Focus highlight | PD_WCAG_FOCUS |
A clear outline on the element selected with the keyboard. |
| Stop animations | PD_WCAG_NO_ANIM |
Disables animations and smooth scrolling. |
What the widget does not solve
This is the most important part of this page. An accessibility widget does not make a shop WCAG compliant, and no widget does. Compliance depends on things that live in the theme code:
- alternative text on product images,
- a correct heading hierarchy (one H1, no skipped levels),
- form labels bound to their fields,
- full keyboard operation of the shop, checkout included,
- text contrast coming from the theme palette rather than from an overlay,
- error messages a screen reader can announce.
The widget helps some visitors and is a visible signal that the shop cares — but a compliance audit judges the page without it. Treat it as a complement to work on the theme, not a replacement for it.
Troubleshooting
The button covers another element
Move it to the opposite corner. In hummingbird the bottom right corner may hold a back-to-top button, and the cookie banner usually sits on the left.
Settings are not remembered between pages
The choice is stored in browser storage. In private mode, or with site data blocked, storing fails — that is a browser limitation, not a module one.
High contrast breaks the layout
Contrast mode overrides theme colours. If the theme uses background images instead of colours, the overlay has nothing to replace — the theme has to be fixed.