One Script. Instant Accessibility.
The a11yfirst Toolkit is a lightweight, drop-in accessibility widget that gives every visitor control over font size, contrast, dark mode, reading guides, and more - without touching your codebase.
18
Accessibility Features
< 35 KB
Bundle Size
0
Dependencies
100%
Free & Open Source
Try It Live
Click the accessibility button in the bottom-right corner to open the toolkit and experience every feature in real time - right here on this page.
Widget Active
Look for the blue accessibility button in the bottom-right corner of the screen. Click it to open the panel and try every feature - changes apply to this page in real time.
Keyboard shortcut: Alt + A to toggle • Esc to close
All changes are applied to this page instantly. Refresh to reset, or use the "Reset All" button inside the panel. Your preferences persist across page loads via localStorage.
18 Accessibility Features, One Widget
Every feature is built as an independent module - easy to extend, easy to customise.
Content Adjustments
Font Size
Scale text from 80% to 200% for improved readability
Line Height
Increase line spacing for easier reading between lines
Letter Spacing
Widen space between characters to reduce visual crowding
Word Spacing
Increase space between words for clearer text separation
Text Alignment
Switch between left, center, or right alignment
Content Scaling
Zoom the entire page layout proportionally
Readable / Dyslexia Font
Switch to a font optimised for readability or dyslexia
Colour & Contrast
Dark Mode
Invert page colours to a dark background with light text
High Contrast
Boost contrast ratio for better text/background distinction
Monochrome
Remove all colour for users with colour-vision deficiencies
Low Saturation
Reduce colour intensity to soften harsh hues
Navigation & Orientation Tools
Reading Guide
A horizontal line follows the cursor to help track lines
Reading Mask
Dims the page except for a strip around the cursor
Highlight Links
Make all hyperlinks visually stand out with outlines
Highlight Headings
Outline all heading elements to show page structure
Big Cursor
Enlarge the mouse cursor for easier tracking on screen
Stop Animations
Freeze all motion for users sensitive to animations
Focus Highlight
Enhance the focus ring so keyboard users always see where they are
Get Started in Under a Minute
Works with every stack - static HTML, WordPress, Next.js, React, Angular, Shopify, and more.
CDN (Quickest)
<!-- Add before </body> -->
<script src="https://unpkg.com/@a11yfirst/toolkit"></script>
<script>
A11yFirst.init();
</script>NPM / ESM
npm install @a11yfirst/toolkit
import { init } from '@a11yfirst/toolkit';
init({
position: 'bottom-right', // optional: bottom-right | bottom-left | top-right | top-left
});React Component
import { useEffect } from 'react';
import { init, destroy } from '@a11yfirst/toolkit';
export function A11yWidget() {
useEffect(() => {
const tk = init({ position: 'bottom-right' });
return () => destroy();
}, []);
return null;
}Frequently Asked Questions
- What is a website accessibility widget?
- A website accessibility widget is a tool that adds user-facing controls to a website, letting visitors adjust font size, colours, contrast, spacing, and more. It empowers users to customise their browsing experience based on their individual accessibility needs - such as low vision, colour blindness, dyslexia, or motor impairments.
- Does the a11yfirst Toolkit replace manual accessibility remediation?
- No. The toolkit complements - not replaces - proper accessibility practices like semantic HTML, ARIA landmarks, keyboard navigation, and WCAG-conformant design. It gives end-users immediate control while your team works on deeper accessibility improvements.
- How does a11yfirst compare to UserWay, accessiBe, or EqualWeb?
- a11yfirst is open-source, free for unlimited sites, and ships under 35 KB. Unlike commercial overlays, there is no vendor lock-in, no tracking, and no recurring subscription. It supports Shadow DOM isolation so it never breaks your existing styles, and offers React/Angular wrappers out of the box.
- How long does integration take?
- Under a minute. Add a single <script> tag or install via npm. The toolkit renders its own UI inside a Shadow DOM, so it works alongside any framework - Next.js, WordPress, Shopify, static HTML, and more.
- Is the toolkit WCAG 2.2 compliant?
- The toolkit itself is built following WCAG 2.2 AA best practices - full keyboard navigation, ARIA labels, focus management, and prefers-reduced-motion support. It helps end-users personalise their experience, which addresses several WCAG success criteria around text resizing, contrast, and focus visibility.
- Does it affect page performance?
- The entire bundle is under 35 KB (minified + gzip). It loads asynchronously, renders inside a Shadow DOM, and injects zero global styles until a user activates a feature. Lighthouse performance impact is negligible.
- Are user preferences saved?
- Yes. All settings are persisted in localStorage so returning visitors see their preferred configuration instantly - without cookies or server calls.
- Does the toolkit collect any data?
- The toolkit sends anonymous, aggregated usage events (panel open, feature change, reset) to Google Analytics so the a11yfirst team can understand which features are most valuable and improve the toolkit. Every event includes only the host site's domain name - no personal or visitor-identifiable data is ever collected. If your site already uses GA, the toolkit's tracking operates independently and does not interfere with your analytics.
Make Your Website Accessible Today
One line of code. 18 features. Free forever. No vendor lock-in. Start building inclusive experiences for every visitor.