Accessibility Pro adds a polished accessibility preferences panel to your Framer site, giving visitors immediate control over how they read and navigate your content. It’s built to reduce friction for real users in real conditions, including low vision, dyslexia, migraines, glare, fatigue, vestibular sensitivity, and ageing eyesight.
WCAG is the global benchmark for accessible digital experiences. While no single widget can make a site “WCAG compliant” on its own, Accessibility Pro supports WCAG-aligned usability by improving readability, operability, and user control.
Improve usability for more people: Visitors can tailor text, contrast, and motion settings to their needs, which can reduce bounce and improve engagement.
Support WCAG-aligned best practice: A practical preference layer that complements accessible design, audits, and good semantic structure.
Build trust quickly: A visible accessibility control signals care and professionalism, especially for public sector, education, healthcare, and enterprise audiences.
Ship faster: One component delivers a consistent, tested set of controls that otherwise require custom code and edge-case handling.
Bigger Text (cycles 1.1x, 1.2x, 1.3x)
Contrast
Grayscale
Dyslexic Font (OpenDyslexic)
Spacing (line height, letter spacing, word spacing)
Highlight Links
Focus Outline (strong focus visibility for keyboard users)
Reading Mask
Read Page Aloud (text-to-speech, browser dependent)
Hide Images
Pause Animations (CSS pause plus optional aggressive freeze)
Page Structure Overlay (visualise key semantic regions)
Draggable and persistent: Users can reposition the button. Preferences and position persist using localStorage.
Keyboard-friendly: Escape closes the panel and returns focus to the trigger button.
Safe and robust: Guarded window/document usage and scoped styling to avoid affecting the toolbar UI itself.
Accessibility Pro is a user preference layer. It supports WCAG-oriented usability, but it does not guarantee WCAG compliance by itself. Your site still needs accessible structure, meaningful link text, correct form labels, appropriate colour contrast, alt text, and logical keyboard navigation.
Some features depend on browser support:
Contrast/Grayscale use backdrop-filter, which varies across browsers.
Read Page Aloud uses SpeechSynthesis. Available voices differ by device/OS.
Pause Animations can affect time-based scripts, embeds, analytics, or third-party widgets on some sites.
Add one instance of Accessibility Pro to your site (typically your main layout or top-level page). Configure Accent, Button size, and Start position. Publish, then test on desktop and mobile to ensure it does not overlap key navigation.
The website shown in preview imagery is a demo website used for illustrative purposes only.
Dave Curtin
