Run a Quick Automated Scan - Framer

Run a Quick Automated Scan in Framer

1. Publish or update your Framer project so the live preview reflects your latest changes.
2. Open the live site URL or Framer preview link in a new browser tab.
3. Copy the full URL for the page you want to scan.
4. Choose an automated accessibility checker such as WAVE, Axe DevTools (browser extension), or Chrome Lighthouse.
5. If using the WAVE Web Tool:
   • Open the WAVE website,
   • Paste the page URL into the input field,
   • Click Analyze to generate a full report.
6. If using a browser extension (WAVE or Axe DevTools):
   • Navigate to your live Framer page,
   • Click the extension icon in your browser,
   • Run the accessibility scan.
7. If using Chrome Lighthouse:
   • Right-click the page → Inspect,
   • Open the Lighthouse tab,
   • Select Accessibility as the audit category,
   • Run the audit to generate results.
8. Review the results:
   • Look for errors such as low contrast, missing alt text, unlabeled controls, heading structure issues, or inaccessible component states.
   • Expand each issue to see the exact element and recommended fix.
9. Return to Framer and fix the flagged issues:
   • Add or update alt text in the Accessibility panel,
   • Increase contrast using Colors/Fill or Text settings,
   • Correct heading tags under the Tag dropdown in Text settings,
   • Enable Focusable and add ARIA labels for icon-only controls.
10. Publish the updated project.
11. Re-run the automated scan to confirm all major issues are resolved.
12. Repeat the process for any additional pages to maintain accessibility across the entire Framer site.