Widget · Live now
Assistive Toolbar
A single JavaScript embed adds powerful user-facing accommodations to any website in minutes: read-aloud, text resizing, dyslexia-friendly fonts, contrast and color themes, reading aids, and keyboard enhancements.
- One-line embed - works on any CMS
- Screen-reader and keyboard enhancements
- Contrast, font, spacing, and motion controls
- Compliance badge and accessibility statement
♿
A strong first step - not the finish line.
The widget delivers real accommodations and demonstrates good-faith effort, but full WCAG conformance also means fixing the underlying code. That's what AI Remediation and our audits handle.
Install it
Free forever. No account, no API key, no card. The toolbar is a single self-contained file with no dependencies.
1. Add one line before </body>
<script src="https://ax4e.com/ax4e-toolbar.js" defer></script>2. Optional: match your brand
Set these before the toolbar script loads. Every value is optional.
<script>
window.AX4E = {
color: "#1d4ed8",
position: "right",
launchLabel: "Accessibility"
};
</script>
<script src="https://ax4e.com/ax4e-toolbar.js" defer></script>| Option | Accepts | Default |
|---|---|---|
color |
Any CSS color for the launcher and accents | #0b5cff |
position |
"left" or "right" |
"right" |
launchLabel |
Text on the launcher button | "Accessibility" |
Where it goes on your platform
- WordPress: Appearance → Theme File Editor → footer.php, or any header/footer script plugin.
- Drupal: Add as an external library, or paste into the site-wide footer block.
- Shopify: Online Store → Themes → Edit code → theme.liquid, before
</body>. - Squarespace: Settings → Advanced → Code Injection → Footer.
- Custom builds: Anywhere before the closing body tag. The
deferattribute keeps it off your render path.
Verify it loaded.
Open your site and look for the launcher button in the corner you configured. Each visitor's preferences are remembered on their own device, so the toolbar comes back the way they left it.