Low Vision
Enhances visibility with larger text, higher contrast and clearer focus.
OPEN SOURCE · SELF-HOSTED · PRIVACY FIRST
The web,
The web,
on your terms.
AccessPath is a free, open-source accessibility widget that lets visitors adapt any website to how they see, read and navigate: real controls, not a canned overlay.
The AccessPath button is active on this page. Try it anytime.
The live widget script didn't load. Try the controls to the right, which run the
same @accesspath/core code directly.
Before AccessPath
Designing for everyone.
The web is full of potential, but not everyone experiences it the same way.
Learn more →
With AccessPath
Designing for everyone.
The web is full of potential, but not everyone experiences it the same way.
Learn more →Real Controls
Change text, colors, motion and more. Instantly.
Self-Hosted
Host it anywhere. You're in control.
Privacy First
No tracking. Everything stays on your site.
Open Source
Transparent by design. Built for the community.
Works with any website or stack
9 PROFILES · 30+ TOOLS
One tap reconfigures the page
Start with an accessibility profile built for low vision, dyslexia, ADHD, motor impairments or seizure safety, or fine-tune any setting yourself.
Or fine-tune anything, individually
30+ accessibility tools, including text size, contrast, dyslexia font and reading guide, so you can shape the page exactly how you need it.
Text Size
Contrast
Saturation
Spacing
Line Height
Text Align
Dyslexia Font
Pause Animations
Big Cursor
Highlight Links
Hide Images
Reading Guide
Page Structure
Read Aloud
Dictionary
Accessibility
done the right way.
AccessPath applies real, user-controlled changes to your site: no overlays, no guesswork, no compromises.
HOW IT WORKS
Real changes.
On the real page.
We interact with your site the way assistive technology should.
Smart text scaling
Scales text and UI proportionally.
Focus that stays
Visible focus trap. Works as expected.
Real structure
Uses actual headings and landmarks.
Reading guide
Follows your cursor. Stays out of the way.
Instant lookup
Dictionary on any word.
Read aloud
Natural voices. No tracking. No uploads.
WHY TEAMS TRUST IT
Built on principles.
Made for the long run.
No vendor to depend on, no license to renew.
Preferences that stick
Saved to the visitor's browser, so they keep their settings next time.
Multi-language ready
Five bundled languages, or override any label yourself.
Lightweight
Tiny payload. Zero dependencies.
Themeable
Match your brand. Your way.
Keyboard first
Designed for keyboard users from the ground up.
One core. Any stack.
Same engine across HTML, React, Angular and more.
No collection. No analytics. No third-party calls.
Visitor preferences stay on their device.
One snippet · complete control
Start simple. Make it yours.
Add this accessibility widget to your website in seconds (plain HTML, WordPress, Shopify, React or Angular), then customize colors, icon and placement to match your brand.
Brand & Appearance
Brand color
Placement & Behavior
Trigger behavior
Accessibility Profiles
Language
Language not listed? Use the labels prop to override any string yourself.
See the docs.
Sections Shown
Custom Action Buttons
Rendered in the drawer's Actions section. Clicking one dispatches an
accesspath:action event with its id. Wire up what happens in your own code.
Generated code
Live preview
Your Website
Pick your stack: copy, paste, publish.
<script src="https://cdn.jsdelivr.net/npm/@accesspath/embed@0/dist/embed.js"
data-theme="light"
data-storage-key="accesspath-prefs"
data-position="bottom-right">
</script>Paste this into your theme or a custom-HTML block (WordPress, Shopify, Wix, plain HTML). It loads from jsDelivr — pinned to @0 so a future major release can't change it under you. Prefer to self-host? Download embed.js and point src at your own path.
Download embed.js
npm i @accesspath/embed
npm install @accesspath/reactimport { AccessPathPanel } from '@accesspath/react';
import '@accesspath/core/styles/a11y-effects.css';
import '@accesspath/core/styles/panel.css';
<div className="a11y-target">
<AccessPathPanel storageKey="accesspath-prefs" />
</div>npm install @accesspath/angular<div #root class="a11y-target">
<app-accessibility-panel [container]="root" [storageKey]="'accesspath-prefs'">
</app-accessibility-panel>
</div>All CSS theming tokens Customize every color, radius, shadow and more. Explore tokens
VariableUsed for
--ap-brandHeader band, active states, floating trigger--ap-brand-softIcon chip backgrounds, soft active fills--ap-brand-borderSegmented control & hover borders--ap-tx / --ap-tm / --ap-muPrimary / secondary / muted text--ap-bdBorders and dividers--ap-sf / --ap-sf2Panel surface / control-group surfaceShort answers.
Real clarity.
The most common questions we get from developers and website owners.
AccessPath is a user-controlled accessibility layer. It helps visitors customize their experience, but it doesn't replace good code, semantic HTML, or legal compliance.
No. The whole widget is a tiny script that loads asynchronously and makes no external network calls after that, so it won't block or slow down the rest of your page.
No analytics and no tracking. Visitor preferences are saved only in their own browser's localStorage, under a storage key you control.
Yes. AccessPath is open source and MIT licensed, so you can build it yourself and serve the bundle from your own infrastructure, no external dependency required.
Yes. A framework-agnostic core ships as a script tag for any HTML site, WordPress, Shopify or Wix, plus dedicated React and Angular components for those stacks.
Yes. Free and MIT licensed, with no per-visitor pricing, paid tiers, or premium features held back.
Paid overlay widgets run as a hosted, closed-source script and charge per visitor or per month. AccessPath is free, open source, and self-hosted: you own the code, there's no vendor to depend on, and no recurring fee tied to your traffic.
Still have a question?
Give your visitors
more control.
A more inclusive experience for them. A better web for everyone.
Get AccessPath
One snippet. Instant impact.
Open source. MIT licensed.