PrestaShop Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

Last updated: 2026-03-22

PrestaShop is an open-source e-commerce platform particularly popular in Europe, with a strong presence in France, Spain, Italy, and other EU markets. PrestaShop uses Smarty templating for its front-end themes and has a large ecosystem of modules (plugins) that extend store functionality. The default Classic theme provides basic HTML structure, but accessibility has not historically been a primary focus of PrestaShop's development. With the European Accessibility Act now being enforced, PrestaShop store owners face a direct and immediate compliance obligation since a large portion of PrestaShop's user base serves European customers. The platform's Smarty templates give theme developers full control over HTML output, meaning accessibility improvements are achievable but require manual implementation. Third-party modules, which are integral to most PrestaShop stores, frequently introduce accessibility barriers through inaccessible popups, non-keyboard-operable interactive elements, and dynamically loaded content without screen reader notifications. This checklist identifies the most critical accessibility issues found in PrestaShop stores and provides specific, actionable fixes that PrestaShop developers and store owners can implement to meet WCAG 2.1 AA standards, improve the shopping experience for all customers, and satisfy European Accessibility Act requirements.

Common Accessibility Issues

critical

Product Variant Selectors Without Accessible Labels

WCAG 4.1.2

PrestaShop product pages use dropdown selectors or visual swatches for product variants (size, color, material). Many themes render color swatches as small colored div elements with click handlers but no text labels, making them completely inaccessible to screen reader users. Size selectors may use custom-styled dropdowns that override native select element behavior and break keyboard accessibility.

How to fix:

Modify the product template (themes/[theme]/templates/catalog/product.tpl) to render variant swatches as button elements with aria-label attributes that include the variant name and value. For color swatches, the aria-label should describe the color name. Add aria-pressed to indicate the currently selected variant. Use native select elements for dropdown variants or ensure custom dropdowns follow the WAI-ARIA listbox pattern.

Before 
{foreach from=$group.attributes item=attribute}
  <div class="color-swatch" 
    style="background-color: {$attribute.html_color_code}"
    onclick="selectVariant({$attribute.id_attribute})">
  </div>
{/foreach}
After 
{foreach from=$group.attributes item=attribute}
  <button type="button" 
    class="color-swatch"
    style="background-color: {$attribute.html_color_code}"
    aria-label="{$group.name}: {$attribute.name}"
    aria-pressed="{if $attribute.selected}true{else}false{/if}"
    onclick="selectVariant({$attribute.id_attribute})">
    <span class="sr-only">{$attribute.name}</span>
  </button>
{/foreach}
critical

Checkout Steps Without Focus Management

WCAG 2.4.3

PrestaShop's checkout process uses a multi-step flow where each step loads dynamically. When the customer completes one step and moves to the next, focus remains on the previous step's elements rather than moving to the new step's content. Screen reader users may not realize a new section has appeared, and keyboard users must navigate backward through completed steps to reach the new form fields.

How to fix:

Modify the checkout JavaScript (themes/[theme]/assets/js/checkout.js) to manage focus after each step transition. When a new checkout step becomes active, move focus to the heading or first form field of that step. Add aria-live='polite' to the checkout step container to announce the step transition. Mark completed steps with appropriate visual and programmatic indicators.

critical

Missing Alt Text on Product and Category Images

WCAG 1.1.1

PrestaShop stores rely heavily on product images for browsing and purchasing decisions, but the alt text for product images defaults to the product name without any additional description. Category banner images, promotional images, and CMS page images frequently have empty or missing alt text. The image upload interface in the back office does not prominently encourage alt text entry.

How to fix:

In the PrestaShop back office, edit each product and ensure the legend (caption/alt) field is filled with descriptive text for each product image. For category and CMS images, edit the image properties to include meaningful alt text. In your Smarty templates, ensure the alt attribute outputs the image legend: <img src="{$image.url}" alt="{$image.legend}">. For decorative images, set alt to empty.

Before 
<img src="{$product.cover.medium.url}" 
  class="product-image">
After 
<img src="{$product.cover.medium.url}" 
  alt="{if $product.cover.legend}{$product.cover.legend}{else}{$product.name}{/if}"
  class="product-image">
serious

Module-Generated Popups and Overlays Not Accessible

WCAG 2.1.2

Many PrestaShop modules (newsletter popups, cookie consent banners, promotional overlays, product quick-view modals) generate overlays that trap keyboard focus, cannot be dismissed with the Escape key, or place focus behind the overlay so keyboard users interact with the page beneath. These modules frequently use div-based structures without proper dialog ARIA roles.

How to fix:

Audit all module-generated overlays and modals. Ensure each one uses role='dialog' with aria-modal='true' and an aria-label or aria-labelledby. Implement focus trapping within the dialog while it is open, handle the Escape key to close it, and return focus to the triggering element on close. If a module cannot be fixed, contact the module developer or replace it with an accessible alternative.

serious

Search Autocomplete Dropdown Not Keyboard Navigable

WCAG 2.1.1

PrestaShop's search bar often includes an autocomplete dropdown that shows product suggestions as the user types. This dropdown typically only responds to mouse clicks, and keyboard users cannot navigate through the suggestions using arrow keys or select a suggestion with Enter. The dropdown results are not announced to screen reader users as they appear.

How to fix:

Implement the WAI-ARIA combobox pattern for the search autocomplete. Add role='combobox' to the search input, role='listbox' to the suggestions container, and role='option' to each suggestion. Use aria-activedescendant to track the currently highlighted suggestion. Handle Arrow Up/Down keys to navigate suggestions and Enter to select. Add aria-live='polite' to announce the number of results as they appear.

PrestaShop-Specific Tips

  • Since PrestaShop is heavily used in European markets, EAA compliance should be your top priority. Start with the checkout flow, product pages, and navigation, as these are the highest-impact areas for both customer experience and legal compliance under the European Accessibility Act.
  • Use PrestaShop's theme override system (themes/[theme]/modules/[module]/views/templates/) to fix accessibility issues in module templates without modifying the module code directly, ensuring your fixes survive module updates.
  • When selecting modules from the PrestaShop Addons marketplace, test each module's front-end output with keyboard navigation and a screen reader before installing on your production store. Many popular modules introduce accessibility barriers that are difficult to fix after installation.
  • Leverage PrestaShop's Smarty template system to create reusable accessible component partials for common patterns like buttons, form fields with labels, and modal dialogs. Include these partials in your theme to ensure consistent accessibility across all pages.

Recommended Tools

WAVE

A free web accessibility evaluation tool and browser extension that provides visual feedback about accessibility errors on your PrestaShop store pages, helping identify missing labels, contrast issues, and structural problems.

axe DevTools

A browser extension that performs automated WCAG audits against your PrestaShop store's rendered output, particularly valuable for identifying issues in dynamically loaded content from modules and the checkout flow.

Tanaguru

A European-developed accessibility testing tool that supports RGAA (French accessibility standards) in addition to WCAG, particularly relevant for PrestaShop stores serving the French market where RGAA compliance may also be required.

Further Reading

Other CMS Checklists