@niclasbork/area11y
v1.1.1
Published
Area11y is a powerful, embeddable accessibility widget built with React, TypeScript, and Tailwind CSS. It enables comprehensive text and readability controls including text scaling, line height, letter spacing, dyslexia-friendly fonts, large cursor suppor
Downloads
41
Maintainers
niclasborkReadme
Area11y
Area11y is a powerful, embeddable accessibility widget built with React, TypeScript, and Tailwind CSS. It enables comprehensive text and readability controls including text scaling, line height, letter spacing, dyslexia-friendly fonts, large cursor support, reading mask, link highlighting with focus rings, reduce-motion preferences, and read-aloud functionality with screen reader support. It also offers dark mode, high-contrast, and night-shift reading modes, media hiding with accessible placeholders, keyboard navigation enhancements, and persistent user settings.
The widget menu is available in German, English, French, Spanish, Italian, Dutch, Portuguese, Polish, Turkish, Russian, Arabic, Simplified Chinese, and Japanese.
All features can be integrated into any website with a single line of code — in under five minutes.
Area11y uses a subscription-based licensing model. A valid license key is required for production use. Available plans include Basic (up to 5 websites) and Pro (up to 20 websites), with a 7-day free trial.
🌐 Official Website & Demo: area11y.vercel.app
Installation
Script Tag
<script
src="https://area11y-engine.vercel.app/loader.js"
data-key="YOUR-LICENSE"
data-primary-color="#2563eb"
data-position="bottom-right"
data-hotkey="Alt+A"
data-locale="de"
defer
></script>Locale behavior:
- If
data-localeis set, the widget uses that locale and ignores document language changes. - If
data-localeis omitted, the widget follows the website language (<html lang>) and updates automatically on language switches.
NPM
npm install @niclasbork/area11yReact:
import { loadA11Y } from '@niclasbork/area11y'
loadA11Y({
apiBaseUrl: 'https://area11y-engine.vercel.app',
licenseKey: 'YOUR-LICENSE',
position: 'bottom-right',
primaryColor: '#2563eb',
hotkey: 'Alt+A',
locale: 'de',
})Vue/Vanilla (no React dependency):
import { loadA11Y } from '@niclasbork/area11y/loader'
loadA11Y({
apiBaseUrl: 'https://area11y-engine.vercel.app',
licenseKey: 'YOUR-LICENSE',
position: 'bottom-right',
primaryColor: '#2563eb',
hotkey: 'Alt+A',
locale: 'de',
})Default options:
apiBaseUrl:https://area11y-engine.vercel.appposition:bottom-rightprimaryColor:#2563eblocale: follows<html lang>when omitted
API Options
| Option | Type | Default | Description |
| -------------- | ---------------------------------------------------- | --------------------------------- | ---------------------------------------------------------- |
| selector | string | 'body' | DOM selector where the widget container mounts. |
| position | 'bottom-right' \| 'bottom-left' \| 'bottom-center' | 'bottom-right' | Placement of the floating action button. |
| primaryColor | string | '#2563eb' | Background color for button and accents. |
| licenseKey | string | YOUR-LICENSE | Validates the install with the engine. |
| apiBaseUrl | string | 'https://area11y-engine.vercel.app' | Base URL for API and core asset requests (no /loader.js). |
| hotkey | string | undefined | Keyboard shortcut to toggle the panel (e.g. Alt+A). |
| locale | string | undefined | Fixed locale; omit to follow <html lang>. |
Features
- Text scaling from 100% to 200%.
- Controls for line height and letter spacing.
- High-contrast palettes.
- Dyslexia-friendly fonts.
- Reduce Motion to soften heavy animations and transitions.
- Link highlighting with focus rings.
- Shadow DOM isolation with persisted preferences.
- Hide images and videos with subtle placeholders.
- Reading mask for calmer focus.
- Oversized cursor for better visibility.
- Read-aloud in the active language.
- One-click reset returns to defaults.
- Persistence: all settings stored in localStorage under a11y-core:*
Engine URLs
- Loader:
https://area11y-engine.vercel.app/loader.js - Core:
https://area11y-engine.vercel.app/core/core.v<version>.js - Token API:
https://area11y-engine.vercel.app/api/token
CSP Requirements
Make sure your host site allows:
script-src https://area11y-engine.vercel.appconnect-src https://area11y-engine.vercel.app
License
MIT