EAA compliance for Framer: WCAG 2.1 AA checklist & fixes

What the EAA actually requires from a Framer site

Framer excels at animation-heavy marketing sites, so under the EAA the obligation centres on taming the very motion and visual-design features that make Framer sites distinctive. EN 301 549 conformance forces you to give animations an explicit prefers-reduced-motion variant, use heading elements for document structure rather than visual sizing, and add role, label, and state to components built in the code-component editor. Framer CMS images also need the alt-text field explicitly added to collections and bound to image components, or every CMS-driven image ships without a description.

Framer sites are predominantly startup and SaaS marketing sites built by designers, so a large share are B2B marketing surfaces that sit in the EAA's lighter, later-transition B2B scope rather than the immediate 2025 consumer deadline. Where a Framer site is a consumer-facing service or uses commerce, it is fully in scope and the operator (usually a small, funded startup) faces fixed national fines, with added ADA litigation risk if US users are served. The practical risk here is motion-related: vestibular-triggering animations are both a legal failure and a direct harm to real users.

Remediation is handled by the designer or a front-end developer inside Framer, wrapping motion components with useReducedMotion so no animation plays when the OS preference is set, fixing heading semantics, and adding ARIA to custom code components. Bind a required alt field in every CMS image collection to enforce descriptions at the content layer. Publish to a Framer subdomain, scan there, and ship after fixes; for a typical marketing site this is a focused day or two of work.

Top WCAG failures we see on Framer sites

Across hundreds of Framer 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.

• Animations that bypass prefers-reduced-motion

  Framer animations need an explicit reduced-motion variant or they will trigger vestibular issues.

  2.3.3 — Level AAA, often required by law

• Headings sized visually rather than semantically

  Designers reach for H2/H3 for typography rather than outline.

  1.3.1 — Level A

• Custom code components without ARIA

  Components built via the code-component editor often miss role, label, and state.

  4.1.2 — Level A

Concrete code fixes for Framer

Below are copy-paste fixes for the most common Framer 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.

import { useReducedMotion, motion } from 'framer-motion';

export function HeroBox() {
  const reduce = useReducedMotion();
  return (
    <motion.div
      animate={reduce ? undefined : { y: [0, -10, 0] }}
      transition={{ repeat: reduce ? 0 : Infinity, duration: 2 }}
    >...</motion.div>
  );
}

Tools and plugins worth installing first

• Framer code components for accessibility wrappers

• Framer's built-in alt-text panel for images

How to scan a Framer 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 Framer subdomain, scan there, ship to production after fixes.