The Accessibility Widget provides your website visitors with personal viewing preferences, allowing them to adjust text sizing, contrast, font readability, and motion directly in their browser. Available both built natively into the Edlio CMS and as a standalone add-on for non-CMS websites, the widget appears as a floating accessibility badge on every page of your site and includes a customizable Accessibility Statement to communicate your district's accessibility goals, contacts, and response timelines.
⚠️ Critical Compliance Note — Visitor Preferences vs. Underlying Code: The Accessibility Widget changes how your website looks for individual visitors in their specific web browser (settings are saved locally on their device). It does not fix underlying accessibility issues in your website's content, templates, or HTML code. The widget should never be treated as a standalone compliance fix or a substitute for ongoing web accessibility practices (such as writing descriptive alt text, maintaining proper heading hierarchies, and providing accessible documents).
💡 Best-Practice Adoption Tip: Pair with Accessible Documents:
• Use the Accessibility Widget alongside Edlio Accessible Documents to provide both customizable screen viewing preferences and accessible HTML overlays for all site PDFs.
• Publish a responsive statement: Always configure and publish your Accessibility Statement with a monitored contact email and realistic response timeframe (e.g., 2–3 business days). This ensures visitors with assistive technology have a clear, immediate escalation path if they encounter inaccessible legacy content.
• Coordinate with AI Chatbot: If your site uses the Edlio AI Chatbot, position both buttons intentionally in the same corner or opposite corners so neither icon obscures the other.
Opening the Accessibility Widget Dashboard
The Accessibility Widget is managed directly from the Edlio CMS dashboard:
In the CMS navigation, open the main dashboard and locate the Accessibility Widget tile under the Accessibility row.
Click the tile to open the widget configuration panel.
Enabling and Styling the Widget
In the Accessibility Widget admin panel, you can control the widget's public visibility, position, and color branding.
1. Turning the Widget On or Off
Show on My Site: Toggle the switch to ON to display the floating accessibility button across every public page of your site. Toggle to OFF if you need to temporarily hide the button during testing or redesigns.
When active, the top card displays a green • LIVE badge confirming that the widget is visible to visitors.
2. Button Position and Color Branding
Button Position: Choose between Bottom Left or Bottom Right. If your school has enabled the Edlio AI Chatbot in the same corner, the Accessibility button automatically docks right beside it so both tools remain easily accessible without overlapping.
Button Color: Select from four high-contrast color styles to match your school's visual identity: Site Primary (theme primary color), Site Secondary (theme secondary color), Dark Gray (
#1f2937), or Blue (#1d4ed8). The accessibility person icon automatically switches between white and black to guarantee high-contrast visibility on any selected background.Click Save Changes to apply your appearance settings immediately.
The Visitor Experience: 12 Assistive Viewing Tools
When a visitor clicks the floating accessibility button on your website, a floating Accessibility preferences card opens with 12 assistive tools arranged in a clean grid:
Visitor Tool Catalog
Read Aloud: Text-to-speech engine that reads webpage content aloud to the visitor.
Text Size: Multi-level stepper to enlarge or reduce page font size.
Readable Font: Replaces decorative or custom site typefaces with a clear, highly legible font designed for readability and dyslexia support.
Text Alignment: Adjusts text justification (left, center, right) to aid visual tracking.
Text Spacing: Increases letter and line spacing to improve text separation.
Highlight Links: Underlines and highlights all active hyperlinks across the page.
Contrast: Changes color contrast between light, dark, and inverted color modes to aid visually impaired readers.
Saturation: Lets visitors adjust color saturation between full color, low saturation, and monochrome/grayscale.
Hide Images: Conceals all page imagery to minimize cognitive load and visual distractions.
Reading Guide: Displays an on-screen horizontal reading bar that follows the cursor across the page to assist reading focus.
Big Cursor: Enlarges the mouse cursor for easier tracking.
Pause Animations: Freezes rotating carousels, video backgrounds, and scrolling banners to assist visitors sensitive to motion.
At the bottom of the preference card, visitors also have access to:
Reset all settings: Instantly restores all tools and styling back to the original default format.
Accessibility statement: Opens your official school accessibility statement configured in the Accessibility Statement editor.
All preferences are stored strictly in the visitor's local browser session and do not alter the website for anyone else.
Using the Accessibility Widget on Non-Edlio Websites (Standalone)
Schools and districts that do not use the Edlio CMS can purchase the Edlio Accessibility Widget as a standalone solution to provide the exact same assistive visitor tools and customization capabilities on their third-party websites.
Same powerful tools: Visitors on your external site have access to the exact same 12 visual adjustment tools, custom accessibility statement, and responsive mobile viewing panel.
Easy script embed: The widget is added to your external CMS or web template by adding a lightweight script embed tag provided during onboarding.
How to get started: If your school or district is interested in adding standalone accessibility support to your non-Edlio website, reach out to your account representative or email [email protected].
Frequently Asked Questions
Can we use the Accessibility Widget if our website is not hosted with Edlio?
Yes! Standalone support for the Edlio Accessibility Widget allows schools on third-party website platforms to license and embed the widget on their own sites without switching to the Edlio CMS.
Does turning on the Accessibility Widget make my site 100% ADA compliant?
No. The widget provides assistive visual adjustments for individual visitors, but does not remediate inaccessible content, untagged images, missing alt text, or inaccessible PDF documents. Schools must continue following WCAG 2.1/2.2 best practices for all published content.
Where does the button sit if we also use the Edlio AI Chatbot?
If both the Accessibility Widget and the AI Chatbot are configured in the same corner, the Accessibility button automatically docks right beside the chatbot bubble so visitors can comfortably click either tool.
Can visitors on mobile devices use the widget?
Yes. The floating button and preference panel are fully responsive and adapt cleanly to mobile phones, tablets, and desktop displays.
Related Articles