# LasMind Vision – Accessibility Widget for Any Website

A drop-in accessibility menu for any website, by [LasMind](https://lasmind.com/tools/lasmind-vision). It is the same preference menu as the LasMind website and the LasMind Vision browser extension, because all three run on [`@lasmind/website-accessibility-core`](https://www.npmjs.com/package/@lasmind/website-accessibility-core).

- Colour blind filter for protanopia, deuteranopia and tritanopia, plus greyscale, with a strength slider
- Text size, high contrast, link underlines, text spacing, reduced motion, strong focus indicators
- Read aloud: click any text to hear it (text to speech). Tech words can be explained in simple English, with Hindi and Tamil in beta when the device has that voice
- Spoken guide: short spoken instructions when the menu opens
- Settings are saved in the visitor's browser (`localStorage`). Nothing is sent anywhere

The colour vision test is not part of this package. It lives at [lasmind.com/tools/color-blind-test](https://lasmind.com/tools/color-blind-test).

## Install

```bash
npm install @lasmind/website-accessibility
```

```ts
import { init } from "@lasmind/website-accessibility";

init(); // floating button in the bottom-right corner
```

Or as a web component:

```ts
import { defineElement } from "@lasmind/website-accessibility";

defineElement();
```

```html
<lasmind-a11y side="left"></lasmind-a11y>
```

### Without a build step

```html
<script src="https://cdn.jsdelivr.net/npm/@lasmind/website-accessibility/dist/lasmind-a11y.global.js" data-auto defer></script>
```

## Options

| Option | Default | |
| --- | --- | --- |
| `side` | `"right"` | Corner for the floating button: `"left"` or `"right"` |
| `storageKey` | `"lasmind-a11y-settings"` | `localStorage` key for saved settings. The old default `"lasmind-a11y-widget"` is read once and copied over. |
| `container` | `document.body` | Element the widget is added to |
| `showCredit` | `true` | Show the "Powered by LasMind" link |
| `updateCheck` | `false` | Check for a newer version of this package once a day (see below). Web component: `update-check` attribute. Script tag: `data-update-check`. |

`init()` returns `{ open, close, getSettings, setSettings, destroy }`. The installed version is exported as `VERSION` and shown at the bottom of the menu.

### Update check (opt-in)

With `updateCheck: true`, the widget asks `lasmind.com` for the latest published version at most once every 24 hours (cached in `localStorage`). The request is an anonymous GET with no settings or personal data. If a newer version exists:

- it is logged once to the browser console, with the npm link;
- on `localhost` only, the menu also shows a "Version x.y.z is available" card, which can be dismissed. Your visitors never see it.

To update, run `npm install @lasmind/website-accessibility@latest`, or change the version in your CDN link.

## Good to know

- This is a visitor preference menu. It helps people adjust your pages. It does not make a website WCAG or ADA compliant. Build to [WCAG 2.2](https://www.w3.org/WAI/fundamentals/accessibility-intro/) as well.
- If a visitor has the LasMind Vision extension, it marks the page and the widget leaves colour correction to it, so colours are never corrected twice.
- The colour vision screening is not part of the widget. Results are health data; if you build it with `@lasmind/website-accessibility-core/screening`, cover it in your privacy policy and say it is a screening, not a diagnosis.

## License

- **Versions 0.2.0 and earlier: MIT**, by [LasMind Technologies](https://lasmind.com). Those MIT rights are permanent.
- **Version 0.3.0 onward: LasMind Commercial License.** Free for personal, non-commercial use. Commercial or production use by an organization needs a license.

Full terms: <https://lasmind.com/license>. For a commercial license, talk to sales at <https://lasmind.com/contact-us?interest=lasmind-vision-license#enquiry> or [info@lasmind.com](mailto:info@lasmind.com).