Accessibility widget for Framer

Framer sites are designed visually, but the published result is a real website that anyone might visit, including people who need larger text, more contrast, or keyboard-friendly navigation. ClearPath adds those controls without changing your design.

Framer has a Custom Code panel that injects HTML into every page of your published site. You paste the ClearPath script there once, publish, and the widget is live everywhere, with 8 disability profiles and an auto-generated accessibility statement.

How to add ClearPath to Framer

  1. Open your project in Framer and go to Project Settings, then the Custom Code section.
  2. Paste the ClearPath snippet into the End of body tag box rather than the start of head, so it loads after your content.
  3. Save the custom code, then click Publish to push the change to your live site.
  4. Open your published URL and confirm the ClearPath button appears on the page.

Where Framer sites usually fail

  • Framer's animated text layers and scroll-triggered components often exist as styled divs rather than semantic headings, so screen reader users get a wall of unlabeled text with no way to jump between sections.
  • The Stack and Layout components that make Framer's drag-and-drop builder work frequently rearrange visual order without matching the underlying DOM order, which means keyboard and screen reader navigation follows a different sequence than what sighted users see.
  • Framer's built-in form component ships with placeholder text standing in for real labels, so once a visitor starts typing, the field's purpose disappears for anyone using a screen reader or zoom.
  • Icon buttons pulled from Framer's asset packs, like menu toggles and social links in the header component, are commonly inserted as bare SVGs with no accessible name, leaving keyboard and screen reader visitors unable to tell what the control does.

Why Framer sites choose ClearPath

  • The End of body custom code field adds ClearPath to every page of your Framer site from one place.
  • You do not need a code component or plugin, so your visual workflow stays the same.
  • Visitors can pick from 14 languages, which helps if your Framer site reaches an international audience.
  • Per-site analytics show which accessibility tools people use on your published pages.

Questions

Do I need to republish for the widget to appear?

Yes. Framer custom code only goes live when you publish, so paste the snippet, save, and hit Publish. The widget shows up on the live site, not the editor canvas.

Start of head or end of body?

Use the End of body tag box. The snippet is deferred and does not need to run before your content, so loading it at the end keeps the page fast.

Will this make my Framer site fully compliant?

No. ClearPath gives visitors 25 adjustment tools and generates an accessibility statement from a live scan of your published Framer site, which covers real needs like text size, contrast, and keyboard-friendly navigation. It does not rewrite the DOM order created by Framer's Stack components, add real labels inside the form module, or fix bare SVG icon buttons from your asset packs. Those live in your Framer project itself. No widget, on Framer or any other platform, makes a site compliant on its own.