React Native Accessibility Toolkit

A comprehensive, production-ready accessibility plugin for React Native applications. This toolkit provides features like text-to-speech, screen reader support, dynamic color adjustments, text scaling, and more to make your React Native apps accessible to all users.

✨ Features

• 🔊 Text-to-Speech (TTS) - Read content aloud with customizable voice controls
• 📱 Native Accessibility - TalkBack (Android) & VoiceOver (iOS) integration
• 🎨 Dynamic Colors - High contrast, grayscale, color inversion, saturation controls
• 📏 Text Controls - Font scaling, line height, letter spacing adjustments
• 👁️ Visual Aids - Hide images, enlarge buttons, reduced motion
• 📖 Reading Features - Text alignment, reading guides, text magnification
• 🎯 Accessibility Profiles - Pre-configured settings for specific needs
• 💾 Persistent Storage - Automatically saves user preferences
• 🌐 Cross-Platform - Works on both iOS and Android

📦 Installation

npm install @accessibility-rn-js/react-native-accessibility-toolkit
# or
yarn add @accessibility-rn-js/react-native-accessibility-toolkit

Install Peer Dependencies

npm install react-native-tts @react-native-async-storage/async-storage react-native-vector-icons

iOS Setup

cd ios && pod install

Add to your Info.plist:

<key>NSSpeechRecognitionUsageDescription</key>
<string>This app uses speech recognition for accessibility features</string>

Android Setup

For react-native-vector-icons, add to android/app/build.gradle:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

🚀 Quick Start

1. Wrap Your App

import { AccessibilityProvider } from '@accessibility-rn-js/react-native-accessibility-toolkit';

export default function App() {
  return (
    <AccessibilityProvider>
      {/* Your app content */}
    </AccessibilityProvider>
  );
}

2. Add Accessibility Button

import { AccessibilityButton } from '@accessibility-rn-js/react-native-accessibility-toolkit';

function MyScreen() {
  return (
    <View>
      {/* Your content */}
      <AccessibilityButton />
    </View>
  );
}

3. Use Accessible Components

import { AccessibleText, useAccessibility } from '@accessibility-rn-js/react-native-accessibility-toolkit';

function MyComponent() {
  const { fontScale, textColor } = useAccessibility();
  
  return (
    <AccessibleText baseFontSize={16}>
      This text respects accessibility settings!
    </AccessibleText>
  );
}

📖 API Documentation

Core Hooks

useAccessibility()

const {
  fontScale,              // Current font scale (1.0 - 2.0)
  textColor,              // Custom text color
  backgroundColor,        // Custom background color
  updateSetting,          // Update single setting
  setProfile,             // Apply accessibility profile
  openModal,              // Open accessibility settings
} = useAccessibility();

useDynamicColors()

const colors = useDynamicColors();
// Returns: { primaryTextColor, defaultBackground, primaryButtonColor, etc. }

usePageRead(textContent)

const { start, pause, resume, stop, isSpeaking } = usePageRead("Text to read");

Components

• <AccessibleText> - Auto-scales and styles text
• <AccessibilityButton> - Floating accessibility menu button

Services

• TTSService - Text-to-speech functionality
• NativeAccessibilityBridge - Native platform integration

Profiles

import { ACCESSIBILITY_PROFILES } from '@accessibility-rn-js/react-native-accessibility-toolkit';

// Available profiles:
ACCESSIBILITY_PROFILES.BLIND          // Screen reader optimized
ACCESSIBILITY_PROFILES.DYSLEXIA       // Increased spacing, reading aids
ACCESSIBILITY_PROFILES.LOW_VISION     // Maximum text, high contrast
ACCESSIBILITY_PROFILES.COGNITIVE      // Simplified, clear layout
ACCESSIBILITY_PROFILES.EPILEPSY_SAFE  // No animations, reduced saturation
ACCESSIBILITY_PROFILES.ADHD_FOCUS     // Reading mask, minimal distractions

🎨 Customization

Update Individual Settings

const { updateSetting } = useAccessibility();

updateSetting('fontScale', 1.5);
updateSetting('colorTheme', 'dark');
updateSetting('textColor', '#FF0000');

Apply Complete Profile

const { setProfile } = useAccessibility();

setProfile(ACCESSIBILITY_PROFILES.DYSLEXIA);

🛠️ Advanced Usage

Custom Styling with Accessibility

import { useAccessibility, getAdjustedFontSize } from '@accessibility-rn-js/react-native-accessibility-toolkit';

function CustomComponent() {
  const { fontScale, backgroundColor, textColor } = useAccessibility();
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: backgroundColor || '#FFFFFF',
    },
    text: {
      fontSize: getAdjustedFontSize(16, fontScale),
      color: textColor || '#000000',
    },
  });
  
  return <View style={styles.container}>...</View>;
}

Screen Reader Announcements

import { NativeAccessibilityBridge } from '@accessibility-rn-js/react-native-accessibility-toolkit';

// Announce important messages
NativeAccessibilityBridge.announce("Form submitted successfully");

📱 Platform Support

• iOS: 12.4+
• Android: API 21+
• React Native: 0.60.0+

📄 License

MIT

🙏 Acknowledgments

Built following WCAG 2.1 accessibility guidelines to ensure apps work for everyone.

📞 Support

• Issues: https://github.com/jayeshgupta3502/react-native-accessibility-toolkit/issues
• Documentation: Full API docs available in the repository

Made with ❤️ for accessibility