ape-accessibility

Plug-and-play accessibility widget for any web application. Works with React, Next.js, Vue, Nuxt, Angular, vanilla JS — zero configuration required.

The widget renders inside a Shadow DOM, so its styles are fully isolated and will never interfere with your application's CSS.

Installation

npm install ape-accessibility
# or
pnpm add ape-accessibility
# or
yarn add ape-accessibility

Usage

Auto-mount (zero config)

import 'ape-accessibility/auto'
// Widget appears automatically in the bottom-left corner

That's it. No CSS imports, no providers, no wrappers.

With configuration

import { accessibility } from 'ape-accessibility'

const widget = accessibility.init({
  position: 'bottom-right', // 'bottom-left' | 'bottom-right'
  zIndex: 9999,
})

accessibility.configure({
  theme: {
    primary500: '#0ea5e9',
    primary600: '#0284c7',
    primary700: '#0369a1',
    panelBackground: '#f8fafc',
    fabActive: '#fde68a',
    fabInactive: '#f1f5f9',
    backdrop: 'rgba(2, 6, 23, 0.4)',
  },
})

// Remove the widget
widget.destroy()

React component (recommended)

If you're using React/Next.js, you can mount and configure the widget as a component:

import { AccessibilityWidget } from 'ape-accessibility'

export default function Layout() {
  return (
    <>
      {/* ...your app layout... */}
      <AccessibilityWidget
        config={{
          position: 'bottom-right',
          zIndex: 9999,
          theme: {
            primary500: '#0ea5e9',
            primary600: '#0284c7',
            primary700: '#0369a1',
            panelBackground: '#f8fafc',
            fabActive: '#fde68a',
            fabInactive: '#f1f5f9',
            backdrop: 'rgba(2, 6, 23, 0.4)',
          },
        }}
      />
    </>
  )
}

Script tag (no bundler)

<script src="https://unpkg.com/ape-accessibility/dist/index.global.js"></script>

The widget auto-mounts when the script loads. For manual control:

<script>
  const widget = ApeAccessibility.init({ position: 'bottom-right' })
</script>

API

| Function | Description | | -------------------- | ------------------------------------------ | | accessibility.init(config?) | Mounts the widget. Returns { destroy() } | | accessibility.destroy() | Removes the widget from the DOM | | accessibility.configure(config?) | Updates runtime widget config (including theme) | | accessibility.getConfig() | Returns current widget config | | accessibility.getSettings() | Returns current accessibility settings | | accessibility.resetAllSettings() | Resets all settings to their defaults |

Config options

| Option | Type | Default | | ------------- | ------------------------------------- | --------------- | | position | 'bottom-left' | 'bottom-right' | 'bottom-left' | | zIndex | number | 9999 | | containerId | string | 'ape-accessibility-root' | | theme | Partial<WidgetTheme> | default theme values |

Theme options

| Option | Type | Default | | ------ | ---- | ------- | | primary500 | string | #005dca | | primary600 | string | #004faf | | primary700 | string | #003b8a | | panelBackground | string | #f9fafb | | fabActive | string | #ffd54f | | fabInactive | string | #f6f6f6 | | backdrop | string | rgba(0, 0, 0, 0.2) |

Features

| Feature | Description | | -------------------- | -------------------------------------------------------- | | Font size | Increase/decrease (90%–120%) | | High contrast | High contrast mode for improved readability | | Saturation | High, low, or monochrome modes | | Dyslexia font | Switches to OpenDyslexic font | | Letter spacing | Adjust letter spacing for better readability | | Line height | Adjust line height / leading | | Highlight headings | Visually highlights all headings on the page | | Highlight links | Visually highlights all links on the page | | Bold text | Applies bold weight to all body text | | Pause animations | Stops all CSS animations and transitions | | Large cursor | Increases cursor size for easier tracking | | Reading guide | Horizontal line that follows the cursor | | Read aloud | Text-to-speech using the Web Speech API | | Page structure | Navigate the page by heading hierarchy | | Hide images | Hides images, videos, and SVGs | | Text alignment | Force left, center, or right alignment | | Accessibility profiles | Presets for visual, cognitive, motor, and senior needs |

How it works

• Widget UI (panel, buttons, animations) renders inside a Shadow DOM, completely isolated from the host page. Your styles won't break, and the widget's styles won't leak.
• Accessibility tools (high contrast, dyslexia font, large cursor, etc.) are injected into the host document intentionally, since they need to affect the entire page.
• React is bundled internally — no peer dependencies, no version conflicts with your app.

Framework compatibility

| Framework | Status | | ---------- | ------ | | React | Works | | Next.js | Works | | Vue | pending | | Nuxt | pending | | Angular | pending | | Vanilla JS | Works | | Any other | pending |

Bundle size

~265 KB minified (~75 KB gzipped). Includes React internally — no external dependencies required.

Development

git clone https://github.com/APE-SENA-2025/ape-accessibility.git
cd ape-accessibility
pnpm install
pnpm dev

Opens a dev server at http://localhost:3333 with hot reload.

License

All rights reserved.