npm package: @niclasbork/area11y
Description: 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
Author: Area11yCore
Latest version: 1.1.1

# 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](https://area11y.vercel.app)

<img
    src="https://area11y.vercel.app/readme/AREA11Y-1-EN.png"
    alt="Area11y Accessibility Widget Preview"
    width="720"
/>

## Installation

### Script Tag

```html
<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-locale` is set, the widget uses that locale and ignores document language changes.
- If `data-locale` is omitted, the widget follows the website language (`<html lang>`) and updates automatically on language switches.

### NPM

```bash
npm install @niclasbork/area11y
```

React:

```ts
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):

```ts
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.app`
- `position`: `bottom-right`
- `primaryColor`: `#2563eb`
- `locale`: 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.app`
- `connect-src https://area11y-engine.vercel.app`

## License

MIT