area11y
v1.1.5
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
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 are Starter (1 website), Basic (up to 5 websites), and Pro (up to 20 websites), each with a 7-day free trial.
🌐 Official Website & Demo: area11y.com
Installation
Script Tag
<script
src="https://engine.area11y.com/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 area11yWorks in React, Vue, Svelte, vanilla JS, and any bundler environment. The /loader subpath is a lightweight script-injector — it adds loader.js to the document and lets the engine handle license verification and core loading. No framework dependencies are bundled.
import { loadA11Y } from 'area11y/loader'
loadA11Y({
licenseKey: 'YOUR-LICENSE',
position: 'bottom-right',
primaryColor: '#2563eb',
hotkey: 'Alt+A',
locale: 'de',
})Default options:
position: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. |
| 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
area11y:*(legacya11y-core:*keys are auto-migrated on first load).
Engine URLs
- Loader:
https://engine.area11y.com/loader.js - Core:
https://engine.area11y.com/core/core.v<version>.js - Token API:
https://engine.area11y.com/api/token
CSP Requirements
Make sure your host site allows:
script-src https://engine.area11y.comconnect-src https://engine.area11y.com
License
MIT