Accessibility overlay vs fixing your Shopify theme code
Last reviewed: .
Short answer
An overlay is a script that runs on top of your storefront: it adds a toolbar and tries to repair the page in the shopper's browser. A theme fix changes the Liquid, CSS or JavaScript that builds the page, so every visitor gets corrected markup. Many common WCAG 2.1 AA issues on Shopify start in theme code, so that is where they are fixed most directly. Neither approach alone shows that a store conforms. In 2025 the US Federal Trade Commission (FTC) issued an order against one overlay vendor over WCAG compliance claims.
What does an overlay actually do?
On Shopify an overlay usually comes from an app. Apps can add elements that float or display as an overlay through app embeds, turned on in the theme editor under App embeds. A typical overlay offers:
- A toolbar for text size, contrast, spacing and similar display options.
- Automated repairs at runtime: the script reads the page in the browser and adds attributes it thinks are missing.
It doesn't change your theme files and can only repair what it can infer. A script can add an alt attribute, but WCAG 1.1.1 asks for a text alternative "that serves the equivalent purpose", which needs someone who knows the product. The W3C says of automated tools generally, scanners included: "Web accessibility evaluation tools can not determine accessibility, they can only assist in doing so."
Which WCAG 2.1 AA issues live in your theme code?
Our EAA guide maps where issues come from across a store. These are the theme-level ones:
| Issue | WCAG 2.1 success criterion (level) | Where it lives in the theme |
|---|---|---|
| Images without a text alternative | 1.1.1 Non-text Content (A) | <img> tags in sections and snippets. Liquid's image_tag fills alt from the media alt text entered in the admin |
| Fields without labels (search, newsletter, quantity) | 3.3.2 Labels or Instructions (A); 1.3.1 Info and Relationships (A) | Form markup |
| Icon buttons without a name (cart, close, menu) | 4.1.2 Name, Role, Value (A) | Header, drawer and modal snippets |
| Focus outline removed | 2.4.7 Focus Visible (AA) | CSS, often outline: none |
| Low contrast | 1.4.3 Contrast (Minimum) (AA): 4.5:1, 3:1 for large text; 1.4.11 Non-text Contrast (AA): 3:1 for interface components | Colour scheme settings and CSS |
| Skipped or decorative headings | 1.3.1 (A); 2.4.6 Headings and Labels (AA) | Section templates |
| Drawers and modals not usable by keyboard | 2.1.1 Keyboard (A); 2.1.2 No Keyboard Trap (A); 2.4.3 Focus Order (A) | JavaScript for cart drawers, menus, quick view, pop-ups |
| Zoom blocked | 1.4.4 Resize Text (AA): text resizable to 200% | viewport meta tag in the layout |
| No page language or skip link | 3.1.1 Language of Page (A); 2.4.1 Bypass Blocks (A) | theme.liquid layout |
Shopify's accessibility best practices for themes say that when a drawer or modal opens, focus moves into it and keyboard navigation stays inside while it is open; Esc closes it and returns focus to the launcher. That containment is intended. A keyboard trap under 2.1.2 is when focus can't move away at all.
What does the European Accessibility Act ask for?
Directive (EU) 2019/882 covers e-commerce services. Article 4(3) and Annex I, Section III require websites to be accessible "by making them perceivable, operable, understandable and robust". The directive sets requirements for the result and doesn't mention overlays. Scope, exemptions, dates and EN 301 549 are in our EAA guide.
What did the FTC say about accessiBe?
From the FTC's own pages, checked on 11 October 2026:
- 3 January 2025: the FTC announced a complaint and proposed consent order against accessiBe Inc. and accessiBe Ltd., accepted by a 5–0 vote. The complaint alleged that accessiBe claimed its accessWidget plug-in could make any website WCAG-compliant, while it "did not make all user websites WCAG-compliant", so the claims were false, misleading or unsubstantiated. It also alleged that third-party articles and reviews were formatted to look independent without disclosing accessiBe's material connections.
- 22 April 2025: after public comment, the Commission approved the final order 3–0 (Docket No. C-4817).
- The order: accessiBe must pay $1,000,000. It must not claim that its products, including accessWidget's artificial intelligence and other automated technology, can make any website compliant with WCAG or ensure continued automatic compliance as content changes, unless the claim is non-misleading and backed by competent and reliable evidence. It also must not misrepresent reviews or endorsers as independent.
- Limits: accessiBe neither admitted nor denied the allegations. The order binds accessiBe; it is not a ruling on overlays in general, and it is a US decision.
Overlay or theme fix: how do they compare?
| Overlay widget | Fix in theme code | |
|---|---|---|
| Where the fix lives | Script that changes the page in the browser after load | Theme Liquid, CSS and JavaScript files |
| Survives theme updates | Not stored in theme files; runs while the app is installed and its embed is on | Code edits carry into an updated theme when they don't conflict with the update; otherwise Shopify shows "code edits could not be included" and you copy them over |
| Works without JavaScript | No, repairs need the script to load and run | HTML and CSS fixes (alt, labels, focus, contrast) are in the page. Drawers need JavaScript either way |
| Content added by other apps | May change app widgets at runtime, within the same limits | Doesn't reach app widgets; ask the app developer |
| Who maintains it | The vendor maintains the script; you still own content and theme | You or your developer |
| Typical effort | Quick to switch on, ongoing subscription | Developer time up front, then checks after updates |
| Neither one | Proves conformance or replaces manual keyboard and screen reader testing | Same |
When can an overlay toolbar still make sense?
As a user-preference feature, for visitors who like a quick switch for text size or contrast. If you offer one, add it on top of a theme that already works with a keyboard and screen reader, not instead of fixing it. Check that the toolbar itself has a name, opens and closes by keyboard and doesn't hide content at 200% zoom. Test key journeys with it on and off, and don't describe it to customers as making the store accessible or compliant.
How do you fix issues in a Shopify theme?
- Back up. In the admin, go to Online Store, click ... on your theme and choose Duplicate.
- Find issues. Run an automated check, for example our free accessibility checker, then test by hand.
- Edit code. On the duplicate, click ... and choose Edit code. Fix labels, button names, focus styles, the viewport tag and headings in sections and snippets; output images with
image_tag. - Fix content. Product images: Products, open the product, click a media item, Add alt text, Save alt text. Other images: Content > Files, click the thumbnail and add alt text; it applies wherever the file is used.
- Fix colours in the theme editor's colour settings.
- Test by keyboard only (menu, search, filters, product options, cart drawer, checkout button) and at 200% zoom.
- Publish, and re-check after every theme update or new app.
What to check in your store
- Informative images have meaningful alt text.
- Every field has a label and every icon button has a name.
- Focus is visible on every link, button and field.
- Every colour scheme meets 4.5:1 for text and 3:1 for controls.
- Drawers, menus and pop-ups take focus, close with Esc and return focus.
- Zoom isn't blocked; pages work at 200%.
- Any overlay is tested by keyboard and screen reader, and the theme works without it.
- Code fixes are recorded so you can re-apply them after a theme update.
- Your accessibility information makes no compliance claim you can't support.
How Lektoro helps (and what it doesn't do)
Lektoro: Accessibility Audit is a Shopify app that reads your theme's code and settings and checks them against part of WCAG 2.1 AA. It adds no overlay or script to your storefront.
What it does:
- Scans Liquid, CSS and colour settings for missing alt text, labels and button names, missing page language, blocked zoom, removed focus styles, autoplaying media, duplicate IDs, heading order, skip links and contrast.
- Shows the file, line and WCAG criterion of each issue, with a fix hint and often a patch you review and apply yourself.
- Compares scans to show new and fixed issues, and can run as a GitHub Actions check.
What it doesn't do:
- It doesn't render pages, so it doesn't test drawer focus handling, app scripts or the alt text you enter for products.
- It has no rules for criteria added in WCAG 2.2.
- It is not a legal audit, a full manual audit or a declaration of conformity.
The free accessibility checker reads rendered pages, including app content, with the app's element rules.
Sources
- W3C, Web Content Accessibility Guidelines (WCAG) 2.1, W3C Recommendation — https://www.w3.org/TR/WCAG21/
- W3C WAI, Selecting Web Accessibility Evaluation Tools — https://www.w3.org/WAI/test-evaluate/tools/selecting/
- Directive (EU) 2019/882, Article 4(3) and Annex I, Section III — https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng
- FTC, press release of 3 January 2025 on accessiBe — https://www.ftc.gov/news-events/news/press-releases/2025/01/ftc-order-requires-online-marketer-pay-1-million-deceptive-claims-its-ai-product-could-make-websites
- FTC, "FTC Approves Final Order Requiring accessiBe to pay $1 Million", 22 April 2025 — https://www.ftc.gov/node/88115
- FTC, case page accessiBe Inc. (file 222-3156) — https://www.ftc.gov/legal-library/browse/cases-proceedings/2223156-accessibe-inc
- FTC, Decision and Order, Docket No. C-4817 — https://www.ftc.gov/system/files/ftc_gov/pdf/d-o.222_3156_-_accessibe_final_consent_package_without_signatures-2.pdf
- Shopify, Accessibility best practices for themes — https://shopify.dev/docs/storefronts/themes/best-practices/accessibility
- Shopify, Liquid
image_tagfilter — https://shopify.dev/docs/api/liquid/filters/image_tag - Shopify Help Center, Editing theme code — https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code
- Shopify Help Center, Updating themes — https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Help Center, Duplicating themes — https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
- Shopify Help Center, Extend your theme with apps — https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps
- Shopify Help Center, Adding alt text to product media — https://help.shopify.com/en/manual/products/product-media/add-alt-text
- Shopify Help Center, Uploading and managing files — https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads
Not legal advice. This page compares technical approaches and summarises public FTC documents as of the date above. It does not assess any vendor's product. Ask a qualified legal advisor how accessibility rules apply to your business.