Skip to main content
WCAGBrief
Framer Sites

Framer WCAG 2.2 Accessibility Checker for Designers & Studios

Framer makes shipping animated marketing pages effortless, yet default frame wrappers often export as nested div tags without semantic landmarks, accessible button labels, or visible keyboard focus rings.

REGULATORY BENCHMARK

WCAG 2.2 Level AA requires clear keyboard focus indicators (SC 2.4.7), minimum 24x24px pointer targets (SC 2.5.8), and 4.5:1 text contrast (SC 1.4.3).

TYPICAL AGENCY RETAINER TICKET
$450 - $1,100 per Framer marketing site

High-frequency compliance traps & source remediations

Missing Main, Nav, and Footer Accessibility Tags on Frames

WCAG 1.3.1 Landmark Regions

Assistive technology users cannot jump past header links straight to main content.

<a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>
<main id="main-content">...</main>

Low-Contrast Muted Zinc Copy Over Translucent Cards

WCAG 1.4.3 Contrast (Minimum)

Subtle 45% opacity body copy drops below 3.1:1 contrast on dark glass surfaces.

<p class="text-zinc-700 dark:text-zinc-300">
  Guaranteed >= 7:1 body text readability across themes.
</p>

3-Step Studio Handoff Workflow

  • Assign semantic HTML tags (`header`, `nav`, `main`, `section`, `footer`) in Framer's Accessibility panel.
  • Add descriptive `alt` text to every CMS and hero image layer.
  • Run WCAGBrief's 5-minute keyboard check to confirm focus order matches visual layout.