pretty-accessibility-widget

Universal accessibility widget for visually impaired users. Adds a floating button that opens a settings panel with font, contrast, and text-to-speech controls. Works with vanilla JS, React, Vue, and Angular.

Features

• Font size — scale from 100% to 200% in 10% steps
• Line height — increase spacing from 1.0× to 2.5×
• Bold text — toggle font weight across the page
• Color themes — 5 high-contrast presets (black/white, green/brown, brown/beige, blue/light-blue)
• Hide images — remove visual distractions
• Read aloud — click-to-speak mode using the Web Speech API; highlights the paragraph being read
• Persistent state — settings saved to localStorage and restored on next visit
• i18n — Russian and English built-in; switch locale at runtime without recreating the widget

Installation

npm install pretty-accessibility-widget

Or include directly via CDN (UMD bundle, no build step required):

<script src="https://unpkg.com/pretty-accessibility-widget/dist/accessibility-widget.umd.js"></script>

<script>
  new AccessibilityWidget.AccessibilityWidget({
    position: 'bottom-right',
    locale: 'ru'
  });
</script>

Usage

Vanilla JS / TypeScript

import { AccessibilityWidget } from 'pretty-accessibility-widget';

const widget = new AccessibilityWidget({
  position: 'bottom-right', // 'bottom-right' | 'bottom-left'
  locale: 'ru',             // 'ru' | 'en'
});

// Switch language at runtime without resetting user settings
widget.updateLocale('en');

// Remove widget when no longer needed
widget.destroy();

React

import { AccessibilityWidgetComponent } from 'pretty-accessibility-widget/react';

function App() {
  return (
    <>
      <AccessibilityWidgetComponent position="bottom-right" locale="en" />
      {/* rest of your app */}
    </>
  );
}

Changing the locale prop calls updateLocale() internally — the widget is not recreated and user settings are preserved.

Vue 3

<script setup>
import { AccessibilityWidgetComponent } from 'pretty-accessibility-widget/vue';
</script>

<template>
  <AccessibilityWidgetComponent position="bottom-right" locale="ru" />
</template>

Angular

Because Angular requires decorators applied by the Angular compiler, the package exports a base class that you extend in your own project:

// accessibility-widget.component.ts
import { Component, Input } from '@angular/core';
import { AccessibilityWidgetAngular } from 'pretty-accessibility-widget/angular';

@Component({
  selector: 'accessibility-widget',
  template: '',
})
export class AccessibilityWidgetComponent extends AccessibilityWidgetAngular {
  @Input() override position: 'bottom-right' | 'bottom-left' = 'bottom-right';
  @Input() override locale: 'ru' | 'en' = 'ru';
}

// app.module.ts
import { NgModule } from '@angular/core';
import { AccessibilityWidgetComponent } from './accessibility-widget.component';

@NgModule({
  declarations: [AccessibilityWidgetComponent],
  exports: [AccessibilityWidgetComponent],
})
export class AccessibilityWidgetModule {}

<!-- template -->
<accessibility-widget [position]="'bottom-right'" [locale]="'en'"></accessibility-widget>

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Position of the trigger button | | locale | string | 'ru' | Language of the widget UI ('ru' or 'en'; unknown values fall back to 'en') | | maxFontSize | number | 150 | Maximum font size as a percentage (e.g. 200 for 200%). Must be ≥ 110. | | maxLineHeight | number | 2.5 | Maximum line-height multiplier (e.g. 3.0). |

API

| Method | Signature | Description | |--------|-----------|-------------| | updateLocale | (locale: string) => void | Switch language at runtime; preserves current user settings | | destroy | () => void | Remove the widget and clean up all DOM and event listeners |

Color Themes

| Value | Description | |-------|-------------| | default | No theme override | | black-on-white | Black text on white background | | white-on-black | White text on black background | | green-on-brown | Green text on brown background | | brown-on-beige | Brown text on beige background | | blue-on-lightblue | Dark blue text on light blue background |

License

MIT