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.

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