Widget
A widget your visitors control.
Font Size, High Contrast, Dyslexic Font, Reading Mask, Text to Speech and 13 more. 18 adjustments in one panel.
Integration
Accessibility widget for Next.js
Render one next/script component in your root layout, or in _app on the Pages Router, and the widget loads on every route.
7-day free trial on every plan.Installation
Install in four steps.
Need help? Contact us.
Before you start
Next.js 11 or newer, which is where next/script arrived. Works with the App Router and the Pages Router.
Next.js docs- 1
Create your account and add your domain
Sign up, add your site's domain and open the Installation tab. Your script tag is there with your domain ID filled in.
- 2
Add Script to the root layout (App Router)
Import Script from next/script and render it inside the body of app/layout.tsx. The afterInteractive strategy loads it right after hydration, on every route.
// app/layout.tsx import Script from "next/script"; <Script src="https://cdn.accessora.io/embeds/js/latest/autoload.js?domainId=YOUR_DOMAIN_ID" strategy="afterInteractive" /> - 3
Or in _app (Pages Router)
On the Pages Router, render the same Script component in pages/_app.tsx so it loads on every page.
// pages/_app.tsx import Script from "next/script"; <Script src="https://cdn.accessora.io/embeds/js/latest/autoload.js?domainId=YOUR_DOMAIN_ID" strategy="afterInteractive" /> - 4
Deploy and check
Deploy and open your production site to find the widget button in the bottom corner. Verify installation checks the domain you added, so deploy there before you run it.
What you get
The same toolkit on every platform.
The widget, the dashboard and audits work the same however your site was built. What you get depends on your plan, not your platform.
Languages
44 languages.
Pick the widget's language, or let it follow each visitor's browser. Visitors can switch it in the panel.
Profiles
Four one-tap profiles.
Low Vision, Cognitive, ADHD and Motor Impairment each turn on a set of adjustments at once.
Audits
Audits with WCAG criteria.
Scan pages on a schedule or on demand. Each issue shows its WCAG criterion and the elements affected.
AI alt text
Alt text where it's missing.
On Growth and Enterprise, AI writes English alt text for images that have none. You can edit any of it.
Automated fixes
Common issues, patched.
On Enterprise, the widget patches common markup issues in the browser, like buttons and form fields with no label.
App Router or Pages Router?
Both. On the App Router put the Script in app/layout.tsx, on the Pages Router in pages/_app.tsx. Either way it renders once and loads on every route.
Which strategy should I use?
afterInteractive, the default. The widget loads right after hydration and doesn't hold up your page. lazyOnload also works if you'd rather load it when the browser is idle.
Does it survive client-side navigation?
Yes. The widget loads once and stays on screen through route changes. Page-wide settings like High Contrast and Stop Animations carry over to each new route.
Will it slow down my site?
The tag loads async, so your page renders without waiting for it. The widget button is fixed in a corner, so it doesn't shift your layout when it appears.
How do I remove it?
Delete the Script component and redeploy.
More platforms
Works on other platforms too.
The same widget on each one. Pick a platform for its own install guide.
See it on your own site.
7-day free trial on every plan. Install the widget today and cancel any time during the trial.