NGP Accessibility

React accessibility package with translation, text sizing, contrast modes, and voice commands.

Features

• 🌐 Multi-language support (English, Tagalog, Cebuano/Visayan)
• 📏 Text size adjustment (increase/decrease)
• 🎨 High contrast mode
• 🔄 Negative contrast mode
• 💡 Light background mode
• 🔗 Links underline toggle
• 📖 Readable font mode
• 🎤 Voice command support
• ✅ TypeScript & JavaScript compatible
• 📦 Zero dependencies (peer: React)

Installation

npm install ngp-accessibility

Usage

Option 1: Toolbar (Horizontal)

import { AccessibilityProvider, AccessibilityToolbar } from "ngp-accessibility";
import "ngp-accessibility/dist/styles.css";

function App() {
  return (
    <AccessibilityProvider>
      <AccessibilityToolbar />
      <YourContent />
    </AccessibilityProvider>
  );
}

Option 2: Dropdown Button

import {
  AccessibilityProvider,
  AccessibilityDropdown,
} from "ngp-accessibility";
import "ngp-accessibility/dist/styles.css";

function App() {
  return (
    <AccessibilityProvider>
      <div style={{ textAlign: "right", padding: "10px" }}>
        <AccessibilityDropdown />
      </div>
      <YourContent />
    </AccessibilityProvider>
  );
}

Voice Commands

When voice command is enabled, you can use:

• "increase text" / "palakihin"
• "decrease text" / "paliitin"
• "high contrast" / "mataas"
• "negative contrast" / "negatibo"
• "light background" / "maliwanag"
• "underline" / "guhit"
• "readable font" / "madaling"

API

AccessibilityProvider

Wrap your app with this provider.

useAccessibility()

Hook that returns:

• language, setLanguage(lang)
• textSize, increaseText(), decreaseText()
• highContrast, toggleHighContrast()
• negativeContrast, toggleNegativeContrast()
• lightBackground, toggleLightBackground()
• underlineLinks, toggleUnderlineLinks()
• readableFont, toggleReadableFont()
• voiceEnabled, toggleVoice()
• translate(key) - Get translated text

AccessibilityToolbar

Pre-built toolbar component with all controls.

Redesign And Theming

You can fully redesign the package UI in 3 ways:

1. Override CSS variables (fastest)

:root {
  --ngp-a11y-bg: #101418;
  --ngp-a11y-surface: #1b232c;
  --ngp-a11y-surface-hover: #243241;
  --ngp-a11y-text: #f2f6fa;
  --ngp-a11y-border: #2d3a48;
  --ngp-a11y-accent: #16a34a;
  --ngp-a11y-accent-hover: #15803d;
  --ngp-a11y-accent-text: #ffffff;
  --ngp-a11y-radius: 999px;
}

2. Pass custom classes to sub-elements

<AccessibilityToolbar
  className="my-toolbar"
  classes={{
    button: "my-btn",
    activeButton: "my-btn-active",
    select: "my-select",
  }}
/>

<AccessibilityDropdown
  classes={{
    toggle: "my-toggle",
    menu: "my-menu",
    section: "my-section",
    button: "my-btn",
    activeButton: "my-btn-active",
  }}
/>

3. Replace the dropdown trigger UI entirely

<AccessibilityDropdown
  renderTrigger={({ isOpen, toggle, className }) => (
    <button className={`${className} custom-trigger`} onClick={toggle}>
      {isOpen ? "Close Tools" : "Open Accessibility"}
    </button>
  )}
/>

TypeScript users can import the prop types directly:

• AccessibilityToolbarProps
• AccessibilityToolbarClasses
• AccessibilityDropdownProps
• AccessibilityDropdownClasses

Full Documentation

For complete documentation including:

• Full page translation guide
• Custom toolbar examples
• TypeScript support
• CSS customization
• Advanced usage examples

See DOCUMENTATION.md

License

MIT