Open Source

Accessibility Widget

A drop-in accessibility preferences panel for any web application. Give your users control over text size, contrast, motion, fonts, and spacing — in one line of code.

View on GitHub Get Started

pnpm add @emmabyteeng/accessibility

Five Accessibility Modes

Each preference persists in localStorage and applies instantly — no page reload needed.

High Contrast

Boosts text and border contrast for users with low vision or bright environments.

Reduced Motion

Disables all CSS animations and transitions for users sensitive to motion.

Dyslexia-Friendly Font

Switches to OpenDyslexic, designed to increase readability for readers with dyslexia.

Large Spacing

Increases letter, word, and line spacing for improved readability.

Quick Start

Install the package and add it to your app in seconds.

1. Install

pnpm add @emmabyteeng/accessibility

2. Add to your app

import { mount } from '@emmabyteeng/accessibility';

mount();

Configuration

Customize position, colors, and behavior to match your app.

import { mount } from '@emmabyteeng/accessibility';

mount({
  position: 'bottom-left',     // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  accentColor: '#2563eb',      // Any valid CSS color
  storagePrefix: 'myapp',      // localStorage key prefix
  minFontSize: 80,             // Minimum font size %
  maxFontSize: 130,            // Maximum font size %
  fontSizeStep: 5,             // Increment/decrement step
});

Options Reference

Option	Type	Default	Description
`position`	`WidgetPosition`	`'bottom-right'`	Corner placement on the page
`accentColor`	`string`	`'#b93a54'`	Active toggle color
`storagePrefix`	`string`	`'a11y'`	localStorage key prefix
`minFontSize`	`number`	`75`	Minimum font size percentage
`maxFontSize`	`number`	`150`	Maximum font size percentage
`fontSizeStep`	`number`	`10`	Font size increment/decrement step

API Reference

`mount(options?)`

Creates and appends the widget to document.body. Returns the widget element.

const widget = mount({
  position: 'bottom-left',
  accentColor: '#2563eb'
});

// Later: remove the widget
widget.remove();

`register(tagName?)`

Registers the <accessibility-widget> custom element. Called automatically by mount(). Safe to call multiple times.

`getPreferences(prefix?)`

Reads current preferences from localStorage without mounting the widget. Useful for SSR or conditional logic.

import { getPreferences } from '@emmabyteeng/accessibility';

const prefs = getPreferences();
if (prefs.reducedMotion) {
  // Skip animations
}

Events

The widget dispatches a typed a11y-change CustomEvent whenever preferences change. The event bubbles and crosses Shadow DOM boundaries.

document.addEventListener('a11y-change', (e) => {
  console.log(e.detail);
  // { fontSize: 110, highContrast: true, reducedMotion: false, ... }
});

CSS Classes

These classes are applied to <html> and can be used in your own stylesheets:

Class	Mode
`a11y-high-contrast`	High contrast
`a11y-reduced-motion`	Reduced motion
`a11y-dyslexia-font`	Dyslexia-friendly font
`a11y-large-spacing`	Large spacing

Why We Built This

Accessibility shouldn't be an afterthought or a premium add-on. Every website should give users the ability to adjust their experience to their needs — whether that's larger text, higher contrast, or a dyslexia-friendly font.

We built this widget for our own projects at Emmabyte Engineering, and decided to open-source it because we believe the internet should be accessible to everyone. If this tool helps even one site become more usable for people with disabilities, it's worth sharing.

Unlike overlay widgets that try to "fix" broken sites, this tool gives users genuine control over their experience. It works with your existing code, not against it.

Built Right

Lightweight, standards-compliant, and designed to work everywhere.

Framework-Agnostic

Works with Svelte, React, Vue, Angular, or plain HTML. Built as a Web Component.

Dark Mode

Automatically adapts to the user's preferred color scheme.

Keyboard Accessible

Full keyboard navigation, ARIA labels, roles, and focus management.

Responsive

Looks great on any screen size. Position it in any corner.

Customizable

Accent color, position, storage prefix, and font size range are all configurable.

Zero Dependencies

Lightweight (~15 KB minified). No runtime dependencies.

Make Your Site Accessible Today

It takes one line of code. Your users will thank you.

Contribute

Found a bug? Have a feature idea? Contributions are welcome — open an issue or submit a pull request.

Open on GitHub

Need Help With Accessibility?

We offer accessibility audits, WCAG compliance consulting, and full-stack development with accessibility built in from day one.

Get in Touch