UserAccessibility.js: Floating Accessibility Widget in Vanilla JS

Authoraaafarrr

Last UpdateSeptember 29, 2026

LicenseMIT

Features

Font scaling from 70% to 200%, plus font weight and text spacing controls.
Left, center, right, and justified text alignment.
Dark, light, inverted, high-contrast, monochrome, and saturation modes.
Link, heading, and keyboard focus highlighting.
Reading guide, reading mask, large cursor, and image hiding.
CSS animation and transition stopping.
Page audio and video muting.
Browser text-to-speech with click-to-read, text selection, playback, navigation, and speed controls.
English and Indonesian panel text and speech locales.
Left or right docking with preferences stored in a 30-day cookie.

How To Use It

Installation

Load the minified version of the UserAccessibility.js library from a CDN:

<script src="https://cdn.jsdelivr.net/gh/aaafarrr/User-Accessibility@main/UserAccessibility.min.js"></script>

Or download the package and load UserAccessibility.js or UserAccessibility.min.js for self-hosting:

<script src="/path/to/UserAccessibility.min.js"></script>

The widget requests Google Material Icons Round from fonts.googleapis.com. Sites with a restrictive Content Security Policy need to account for that external stylesheet and its font resources.

Basic Usage

The default setup needs no JavaScript call:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessibility Widget Demo</title>
</head>
<body>
  <main>
    <h1>Example Page</h1>
    <p>This content can be adjusted through the accessibility panel.</p>
  </main>
  <script src="https://cdn.jsdelivr.net/gh/aaafarrr/User-Accessibility@main/UserAccessibility.min.js"></script>
</body>
</html>

Custom Initialization

Initialize the library with options:

document.addEventListener("DOMContentLoaded", () => {
  window.accessibilityApp = new AccessibilityWidget({
    themeColor: "#7c3aed",
    defaultLang: "en",
    position: "right",
    container: document.body
  });
});

All Configuration Options

themeColor (string, default "#0ea5e9"): Sets the accent color used by active controls and page highlights.
defaultLang (string): Sets the initial language. The bundled initializer uses "en". A manually created instance reads the document language when this option is omitted, with English UI text used when no matching locale exists. The bundled locales are "en" and "id".
position (string, default "left"): Sets the initial dock side. Use "left" or "right".
container (HTMLElement, default document.body): Receives the floating trigger and widget menu. Page adjustments and reading features continue to query the document.

Programmatic API

// Open or close the accessibility menu.
window.accessibilityApp.toggleMenu();
// Move the trigger and panel between the left and right sides.
window.accessibilityApp.togglePosition();
// Clear active adjustments and restore the default font scale.
window.accessibilityApp.reset();
// Start browser text-to-speech.
window.accessibilityApp.startScreenReader();
// Stop browser text-to-speech.
window.accessibilityApp.stopScreenReader();
// Remove the main widget UI and tracked resources.
window.accessibilityApp.destroy();

Keyboard Controls

Alt + A: Open or close the accessibility menu.
Arrow Right or Alt + Arrow Right: Move to the next readable item.
Arrow Left or Alt + Arrow Left: Move to the previous readable item.
Space or Alt + Space: Play or pause speech.
Escape: Stop text-to-speech.

Text-to-Speech

The reader uses the browser’s SpeechSynthesis API. It indexes headings, paragraphs, list items, blockquotes, links, and buttons inside main, #main, article, or [role="main"], with the document body used as a fallback.

Its floating player contains previous, next, play or pause, close, transcript, progress, and speech-rate controls. Available rates cycle through 1x, 1.25x, 1.5x, and 0.8x.

Selecting page text while the reader is active sends that selection to speech. Clicking an indexed heading, paragraph, list item, blockquote, link, or button moves playback directly to that item.

Voice availability and pronunciation depend on the browser and operating system.

Saved Preferences

UserAccessibility.js stores settings in a cookie called asw_premium.

The cookie expires after 30 days and stores active adjustments, language, font scale, and dock position.

reset() clears active adjustments and restores the default font scale. It retains the selected language and dock position.