Framer Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

Last updated: 2026-03-22

Framer is a visual website builder that allows designers to create production-ready websites without writing traditional code. Built on React under the hood, Framer generates the final HTML, CSS, and JavaScript automatically based on the visual design. While this approach enables rapid prototyping and beautiful designs, it creates significant accessibility challenges because designers have limited control over the generated semantic HTML structure. Framer's visual-first approach means that elements are often positioned based on visual layout rather than logical document flow, heading levels may be assigned based on font size rather than content hierarchy, and interactive elements may lack proper keyboard accessibility. The platform has been improving its accessibility features, adding options for alt text, ARIA labels, and semantic element types, but many designers are unaware of these settings or do not know when to use them. Since Framer sites are popular among startups, design agencies, and product landing pages that serve global audiences, European Accessibility Act compliance is directly relevant. This checklist identifies the most impactful accessibility issues specific to Framer and provides practical guidance for designers working within the platform's visual builder constraints.

Common Accessibility Issues

critical

Non-Semantic HTML Structure Generated by Visual Builder

WCAG 1.3.1

Framer's visual builder generates nested div elements for most layout components by default. Page sections that should use semantic HTML elements like header, nav, main, section, and footer are rendered as generic div containers with CSS-based visual styling. Screen reader users cannot navigate by landmarks and have no structural context for the page content.

How to fix:

In Framer's component settings, use the 'Semantic tag' option to assign appropriate HTML elements to each section of your page. Set the top navigation frame to 'nav', the hero section container to 'header', the main content area to 'main', and the bottom section to 'footer'. For content sections, use 'section' with an aria-label. Access these settings by selecting a frame and looking for the HTML tag option in the right panel.

Before 
<!-- Framer default output -->
<div class="framer-abc123">
  <div class="framer-def456">
    <div class="framer-nav">Navigation links...</div>
  </div>
  <div class="framer-ghi789">Main content...</div>
  <div class="framer-jkl012">Footer content...</div>
</div>
After 
<!-- Framer with semantic tags configured -->
<div class="framer-abc123">
  <header class="framer-def456">
    <nav aria-label="Main navigation">Navigation links...</nav>
  </header>
  <main class="framer-ghi789">Main content...</main>
  <footer class="framer-jkl012">Footer content...</footer>
</div>
serious

Heading Levels Based on Visual Size Rather Than Hierarchy

WCAG 1.3.1

In Framer, text elements are styled visually and heading tags are assigned manually. Designers frequently use H1 for the largest text on the page regardless of document structure, skip heading levels for visual reasons (H1 to H4), or use multiple H1 tags. Some text that functions as a heading may not be marked as a heading at all, using a paragraph tag with large font styling instead.

How to fix:

Establish a heading hierarchy plan before building in Framer. Assign exactly one H1 per page (the main title), then use H2 for major sections, H3 for subsections, and so on. In Framer, select each text element and set the appropriate heading tag in the element settings regardless of the visual size. Use Framer's text styles to control visual appearance independently from the semantic heading level.

serious

Animations Without Reduced Motion Respect

WCAG 2.3.3

Framer is known for its animation capabilities, and many Framer sites use extensive scroll-triggered animations, hover effects, page transitions, and auto-playing animated content. These animations can cause discomfort, nausea, or seizures for users with vestibular disorders or photosensitive epilepsy. Framer does not automatically honor the prefers-reduced-motion media query.

How to fix:

In Framer's code components or custom CSS, add media queries that disable or reduce animations when the user's system preferences indicate reduced motion. For scroll-triggered animations, provide a static fallback. Test your site with the prefers-reduced-motion setting enabled in your operating system's accessibility preferences.

Before 
.framer-animated-element {
  animation: slide-in 0.8s ease-out;
  transition: transform 0.5s, opacity 0.5s;
}
After 
.framer-animated-element {
  animation: slide-in 0.8s ease-out;
  transition: transform 0.5s, opacity 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .framer-animated-element {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}
critical

Interactive Elements Not Keyboard Accessible

WCAG 2.1.1

Framer allows adding click interactions to any visual element, including frames and images that are rendered as div elements. These clickable div elements cannot be reached or activated by keyboard users because they are not in the natural tab order and do not respond to Enter or Space key presses. Custom button designs that use frames instead of actual button elements have the same problem.

How to fix:

For any interactive element in Framer, use the semantic tag setting to change it to a 'button' element (for actions) or 'a' element (for navigation). This ensures the element is keyboard focusable, appears in the tab order, and responds to keyboard activation. If a frame must remain a div, add tabindex='0' and appropriate role and keyboard event handling through a code override.

critical

Missing Alt Text on Images and Background Images

WCAG 1.1.1

Framer allows adding images as image elements or as background fills on frames. Image elements support alt text through the component settings, but this field is often left empty. Background images rendered via CSS have no mechanism for alt text at all, meaning any informative content conveyed through background images is completely inaccessible.

How to fix:

For every image element in Framer, open the element settings and enter descriptive alt text in the alt text field. For decorative images, explicitly set the alt text to empty. For informative background images, consider replacing them with image elements that support alt text, or add a visually hidden text element within the frame that provides the same information conveyed by the background image.

Framer-Specific Tips

  • Always configure the semantic HTML tag for every major frame in your Framer layout. By default Framer outputs div elements, but you can change the tag to header, nav, main, section, article, aside, or footer in the frame settings panel to create a proper document landmark structure.
  • Use Framer's built-in code overrides to add accessibility attributes that are not available in the visual builder, such as aria-expanded on toggle buttons, aria-live on dynamic content regions, and custom keyboard event handlers for non-standard interactive components.
  • Test your Framer site with the browser's accessibility tree inspector (Chrome DevTools > Elements > Accessibility) to verify that the generated HTML structure matches your intended semantic hierarchy, as the visual layout in Framer's canvas does not always reflect the DOM order.
  • When using Framer's CMS features for dynamic content, ensure that each CMS field that feeds into an image component has a corresponding alt text field, and make it required in the CMS collection settings to prevent editors from publishing images without descriptions.

Recommended Tools

axe DevTools

A browser extension that audits the generated output of your Framer site for WCAG violations, essential since the visual builder does not show the underlying accessibility issues in the HTML output.

WAVE

A web-based accessibility evaluation tool and browser extension that provides visual feedback about accessibility issues directly overlaid on your published Framer site, making it easy to identify and locate problems.

Stark for Figma

An accessibility design tool that integrates with Figma (commonly used alongside Framer), checking color contrast, simulating vision impairments, and generating accessibility annotations during the design phase before building in Framer.

Further Reading

Other CMS Checklists