European Accessibility Act
EAA compliance for Webflow: WCAG 2.1 AA checklist & fixes
Webflow gives designers exact control over markup, which is both a blessing and a curse for accessibility. Most Webflow accessibility failures come from custom interactions (lightboxes, accordions, mega menus) that do not implement keyboard and ARIA support. The good news: every fix is doable inside the Designer, no code export required. Used by 200K+ design-led agencies and SMBs; many EAA-affected B2C sites are on Webflow.
- Category
- Website builder
- Standard
- WCAG 2.1 Level AA via EN 301 549
- Deadline
- 28 June 2025 (EU consumer services)
- Risk for B2C
- High — public-facing, consumer-billed
What the EAA actually requires from a Webflow site
The European Accessibility Act (Directive 2019/882) applies to consumer-facing online services from 28 June 2025. For a Webflow site selling to EU consumers, that means the storefront, checkout, account area, and any embedded payment flow have to meet WCAG 2.1 Level AA via the harmonised standard EN 301 549. Microenterprises with under 10 employees and below €2 million in turnover are exempt for services, but not for products.
Fines vary by member state. Germany caps individual penalties at €100,000; France can fine up to 4% of group turnover; Spain reaches €600,000 for serious or repeated breaches. None of those numbers are theoretical — market surveillance authorities have already started auditing storefronts in Germany and France in the run-up to enforcement.
In practice, the work breaks down into three buckets: theme-level fixes (focus styles, contrast, semantics), interaction-level fixes (carousels, modals, drawers, gallery widgets), and content-level fixes (alt text, headings, descriptive link text). The list below covers the Webflow-specific failure points we see most often during scans.
Top WCAG failures we see on Webflow sites
Across hundreds of Webflow scans, the same handful of issues show up over and over. None of them require ripping the theme apart — most are fixable in a few hours by someone comfortable in the platform's editor or template files.
Custom Interactions break keyboard support
Designer-built tabs, accordions, and dropdowns rely on click triggers and skip Enter/Space. Without "trigger on key press" or custom JS, keyboard users cannot operate them.
2.1.1 Keyboard — Level AHeadings used for visual size, not document outline
Designers often reach for H2/H3 for their default size, leaving pages with multiple H1s or skipped levels.
1.3.1 Info and Relationships, 2.4.6 Headings and Labels — Level A/AAImage-only buttons and link-only icons
Webflow exposes alt text per image; designers regularly leave it blank or set it to the filename.
1.1.1 Non-text Content — Level ALightbox component is mouse-driven
Webflow's built-in lightbox does not consistently restore focus on close and lacks role="dialog" semantics.
2.4.3 Focus Order, 4.1.2 — Level A
Concrete code fixes for Webflow
Below are copy-paste fixes for the most common Webflow issues. They assume you have access to your theme code or the platform's custom-code injection panel. If you cannot edit code directly, share these snippets with whoever maintains the site — every one of them is a ten-minute change.
Designer: enable "Trigger on key press" for tabs, accordions, dropdowns
// Settings → Interactions → Trigger:
// Mouse click → also add Key press (Enter, Space)
// Settings → Element → Tag:
// Set the trigger to <button> not <div>.A clickable <div> is invisible to keyboard users. Switching the trigger element to <button> gives free keyboard and ARIA defaults.
Embed code: improve lightbox semantics
<script>
document.querySelectorAll('.w-lightbox').forEach(lb => {
lb.setAttribute('role', 'button');
lb.setAttribute('aria-haspopup', 'dialog');
});
</script>Use a custom embed before </body> to give the lightbox triggers proper semantics until Webflow ships native ARIA.
Tools and plugins worth installing first
Webflow Audit panel (built-in) flags missing alt text and heading order
Memberstack and other auth plugins need separate review for forms and modals
Certvo public scan crawls the live URL and reports per-section regressions
How to scan a Webflow site without missing anything
Automated scanners catch about 30–40% of WCAG issues; the rest need manual review. The good news is that the 30–40% includes the most expensive issues to remediate after the fact, so an automated scan is the cheapest way to get unstuck. Run one before you change a line of theme code.
Publish to a staging subdomain, scan there, then push to production after fixes.
Test interactions with the keyboard alone (Tab, Enter, Esc, Arrows) before relying on automated scans.
Run a free public scan against any Webflow URL right now — no signup, results in 60 seconds.
Frequently asked questions
Is a Webflow site automatically WCAG compliant?
No. Webflow ships an accessibility-friendly framework but the burden is still on the designer to set headings, alt text, focus states, and keyboard interactions correctly.
How does Webflow compare to Shopify or WordPress for accessibility?
Webflow gives you more direct control over HTML, which makes it easier to fix issues — but it also lets you produce inaccessible markup faster. Discipline in the Designer matters more than the platform choice.
Other website builder platforms
EAA compliance for Squarespace
Popular among SMBs, restaurants, and creators in the EU — many EAA-affected B2C sites.
EAA compliance for Wix
Popular among DIY business sites; many EU SMBs subject to EAA.
EAA compliance for Framer
Designer-favourite for marketing sites; rapidly growing among startups.
EAA compliance for Bubble
No-code platform popular with non-technical founders building B2B SaaS.
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.