Framer WCAG 2.1 Checker

WCAG 2.1 for Framer Sites

WCAG 2.1 became a W3C Recommendation in June 2018. It added criteria for mobile, low vision and cognitive accessibility to WCAG 2.0, and it is the standard named in the US Department of Justice rule for state and local government websites, in EN 301 549 V3.2.1 and in most accessibility settlements.

This checker runs the free scan with the WCAG 2.1 AA preset, so the results match the standard your contract, policy or regulator is most likely to name for a Framer site.

On Framer, WCAG 2.1 issues often come from layout settings: sections with fixed heights that cut off text when spacing increases, pale button borders, and hover effects that hide content from keyboard users.

Who Should Run the Framer WCAG 2.1 Checker

• Framer site owners whose contracts or policies name WCAG 2.1 AA.
• State and local government bodies, under the ADA Title II rule.
• Businesses responding to an ADA demand letter, which usually cites WCAG 2.1 AA.
• Public sector bodies in the EU, under the Web Accessibility Directive.

WCAG 2.1 Criteria That Often Fail on Framer

• 1.3.5 Identify Input Purpose

  Form fields that collect personal data, such as name, email and address, need the right autocomplete attribute.

• 1.4.10 Reflow

  Content must reflow at 320 CSS pixels wide, the same as 400% zoom, without scrolling in two directions.

• 1.4.11 Non-text Contrast

  Buttons, form borders, icons and focus indicators need a contrast ratio of at least 3:1.

• 1.4.12 Text Spacing

  Text must stay readable when users increase line, paragraph, letter and word spacing.

• 1.4.13 Content on Hover or Focus

  Tooltips and menus that appear on hover or focus must be dismissible, hoverable and stay visible.

• 4.1.3 Status Messages

  Messages such as “added to cart” or form errors must be announced to screen readers without moving focus.

Where Framer Sites Usually Fail WCAG 2.1

These problems come up again and again on Framer sites, and each one fails WCAG 2.1. The Framer accessibility checker explains how to fix them in Framer.

• Text that looks like a heading. Large styled text layers become headings only when you choose a heading tag, so pages can end up with no h1 or with levels in the wrong order.
• Icon-only buttons and links. Social icons, menu toggles and arrow buttons made from a vector frame have no name until you add an ARIA label.
• Tickers, marquees and autoplay. Scrolling logo tickers, looping carousels and background video move constantly, with no way for a visitor to pause them.
• Hover-only interactions. Menus and cards that reveal content only on hover are out of reach for keyboard and touch users unless the same state is available on focus and tap.
• Contrast and focus over imagery. Text over photos and gradients can fail contrast, and custom components often hide or replace the default focus indicator.

Worried about ADA claims as well? The Framer ADA compliance checker covers the Framer risks behind most complaints.

What to Test by Hand on Framer

Automated testing finds many, but not all, WCAG 2.1 failures. Check these yourself after the scan:

1. Zoom to 400% and check nothing is cut off or needs scrolling in two directions (1.4.10).
2. Apply increased text spacing with a bookmarklet and check text is still readable (1.4.12).
3. Open hover menus and tooltips and check you can dismiss them with Escape (1.4.13).
4. Rescan after each fix. Continuous monitoring rescans up to 500 URLs per domain daily and keeps a dated record in the Compliance Vault.

Start 3-day free trial

Related Guides

• WCAG 2.1 AA CheckerThe WCAG 2.1 standard in full, for any website.
• WCAG 2.2.2 Pause, Stop, Hide Explained in Plain EnglishWCAG 2.2.2 Pause, Stop, Hide explained simply: what moving and auto-updating content needs, the 5-second rule, carousel fixes and how to test your pages.
• WCAG 2.4.12 Focus Not Obscured (Enhanced) Explained in Plain EnglishWCAG 2.4.12 Focus Not Obscured (Enhanced) explained simply: how it differs from 2.4.11, who it helps, CSS scroll-padding fixes and how to test for it.
• WCAG 4.1.2 Name, Role, Value Explained in Plain EnglishWCAG 4.1.2 Name, Role, Value explained simply: give every control a name, role and state with native HTML and ARIA, with code examples and how to test.
• WCAG Success Criteria LibraryLook up any criterion the scan flags, in plain language.

Framer WCAG 2.1 Checker: Frequently Asked Questions