web-accessibility-widget

A comprehensive web accessibility widget for any website. Adds a floating accessibility panel with features like text resizing, screen reader, high contrast, reading line, keyboard navigation, and more.

Installation

npm install web-accessibility-widget

Usage

React

import { init } from 'web-accessibility-widget';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    init();
  }, []);

  return <div>Your app content</div>;
}

Angular

import { Component, OnInit } from '@angular/core';
import { init } from 'web-accessibility-widget';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() {
    init();
  }
}

Vue

<script setup>
import { onMounted } from 'vue';
import { init } from 'web-accessibility-widget';

onMounted(() => {
  init();
});
</script>

<template>
  <div>Your app content</div>
</template>

Vanilla JavaScript (ES Module)

<script type="module">
  import { init } from './node_modules/web-accessibility-widget/dist/web-accessibility-widget.esm.js';
  init();
</script>

Script Tag (CDN)

No setup needed — the widget auto-initializes:

<script src="https://unpkg.com/web-accessibility-widget"></script>

To prevent auto-initialization (e.g. to call init() manually later):

<script>window.__WAW_NO_AUTO_INIT__ = true;</script>
<script src="https://unpkg.com/web-accessibility-widget"></script>
<script>
  // init when ready
  WebAccessibilityWidget.init();
</script>

Project Structure

web-accessibility-widget/
├── src/
│   └── index.js              # Source code — all widget logic
├── dist/                      # Built output (generated by npm run build)
│   ├── web-accessibility-widget.umd.js       # UMD build (script tags)
│   ├── web-accessibility-widget.umd.min.js   # UMD build minified (CDN)
│   ├── web-accessibility-widget.esm.js       # ES module build (import/export)
│   └── web-accessibility-widget.cjs.js       # CommonJS build (require)
├── package.json               # Package config and entry points
├── rollup.config.mjs          # Rollup bundler configuration
└── .npmignore                 # Files excluded from npm package

File Details

| File | Purpose | |------|---------| | src/index.js | The full widget source. Contains the init() function that creates the accessibility panel, injects styles, and attaches all event listeners. This is the only source file. | | dist/web-accessibility-widget.umd.js | UMD build — works with <script> tags, AMD loaders, and CommonJS. Exposes window.WebAccessibilityWidget. Auto-initializes by default. | | dist/web-accessibility-widget.umd.min.js | Minified UMD build — same as above but minified with Terser. Use this for production CDN usage via unpkg or jsdelivr. | | dist/web-accessibility-widget.esm.js | ES module build — use with import { init } from 'web-accessibility-widget'. Best for React, Angular, Vue, and modern bundlers (Webpack, Vite, Rollup). | | dist/web-accessibility-widget.cjs.js | CommonJS build — use with const { init } = require('web-accessibility-widget'). For Node.js-based tooling or older bundlers. | | rollup.config.mjs | Rollup config that produces all four dist builds from src/index.js. | | package.json | Defines entry points: main (CJS), module (ESM), browser/unpkg/jsdelivr (UMD min). | | .npmignore | Ensures only dist/ and package.json are included when publishing to npm. |

Which build should I use?

| Scenario | Build | How to use | |----------|-------|------------| | React / Angular / Vue / Vite / Webpack | ESM | import { init } from 'web-accessibility-widget' | | Vanilla JS with bundler | ESM or CJS | import or require | | Plain HTML, no bundler | UMD | <script src="https://unpkg.com/web-accessibility-widget"> | | CDN (production) | UMD min | <script src="https://cdn.jsdelivr.net/npm/web-accessibility-widget"> |

API

init()

Initializes the accessibility widget. Creates the floating panel and attaches all functionality.

import { init } from 'web-accessibility-widget';
init();

window.__WAW_NO_AUTO_INIT__

Set to true before loading the UMD script to prevent auto-initialization.

License

MIT