Skip to main content
AccessibilityInfo allows you to query the current state of accessibility features and register to be notified when they change.

​
Methods

​
isScreenReaderEnabled()

static isScreenReaderEnabled(): Promise<boolean>
Query whether a screen reader is currently enabled (VoiceOver on iOS, TalkBack on Android). Returns:
  • Promise that resolves to true when a screen reader is enabled, false otherwise
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isScreenReaderEnabled().then(enabled => {
  console.log('Screen reader enabled:', enabled);
});

​
isBoldTextEnabled()

static isBoldTextEnabled(): Promise<boolean>
iOS only. Query whether bold text is currently enabled. Returns:
  • Promise that resolves to true when bold text is enabled, false otherwise
  • On Android, always resolves to false
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isBoldTextEnabled().then(enabled => {
  if (enabled) {
    // Adjust font weights
  }
});

​
isGrayscaleEnabled()

static isGrayscaleEnabled(): Promise<boolean>
Query whether grayscale is currently enabled. Returns:
  • Promise that resolves to true when grayscale is enabled, false otherwise
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isGrayscaleEnabled().then(enabled => {
  console.log('Grayscale enabled:', enabled);
});

​
isInvertColorsEnabled()

static isInvertColorsEnabled(): Promise<boolean>
Query whether inverted colors are currently enabled. Returns:
  • Promise that resolves to true when invert colors is enabled, false otherwise
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isInvertColorsEnabled().then(enabled => {
  console.log('Inverted colors:', enabled);
});

​
isReduceMotionEnabled()

static isReduceMotionEnabled(): Promise<boolean>
Query whether reduced motion is currently enabled. Returns:
  • Promise that resolves to true when reduce motion is enabled, false otherwise
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
  if (enabled) {
    // Disable or simplify animations
  }
});

​
isReduceTransparencyEnabled()

static isReduceTransparencyEnabled(): Promise<boolean>
iOS only. Query whether reduced transparency is currently enabled. Returns:
  • Promise that resolves to true when reduce transparency is enabled, false otherwise
  • On Android, always resolves to false
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isReduceTransparencyEnabled().then(enabled => {
  if (enabled) {
    // Reduce or remove transparency effects
  }
});

​
isHighTextContrastEnabled()

static isHighTextContrastEnabled(): Promise<boolean>
Android only. Query whether high text contrast is currently enabled. Returns:
  • Promise that resolves to true when high text contrast is enabled, false otherwise
Example: 
import { AccessibilityInfo, Platform } from 'react-native';

if (Platform.OS === 'android') {
  AccessibilityInfo.isHighTextContrastEnabled().then(enabled => {
    if (enabled) {
      // Increase text contrast
    }
  });
}

​
isDarkerSystemColorsEnabled()

static isDarkerSystemColorsEnabled(): Promise<boolean>
iOS only. Query whether darker system colors are currently enabled. Returns:
  • Promise that resolves to true when darker system colors are enabled, false otherwise
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isDarkerSystemColorsEnabled().then(enabled => {
  if (enabled) {
    // Use darker system color variants
  }
});

​
prefersCrossFadeTransitions()

static prefersCrossFadeTransitions(): Promise<boolean>
iOS only. Query whether the user prefers cross-fade transitions. Returns:
  • Promise that resolves to true when cross-fade transitions are preferred, false otherwise
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.prefersCrossFadeTransitions().then(enabled => {
  if (enabled) {
    // Use cross-fade instead of slide transitions
  }
});

​
isAccessibilityServiceEnabled()

static isAccessibilityServiceEnabled(): Promise<boolean>
Android only. Query whether any accessibility service is currently enabled. Returns:
  • Promise that resolves to true when any accessibility service is enabled, false otherwise
Example: 
import { AccessibilityInfo, Platform } from 'react-native';

if (Platform.OS === 'android') {
  AccessibilityInfo.isAccessibilityServiceEnabled().then(enabled => {
    console.log('Accessibility service enabled:', enabled);
  });
}

​
addEventListener()

static addEventListener(
  eventName: AccessibilityEventName,
  handler: Function
): EventSubscription
Add an event handler that fires when accessibility settings change. Supported Events: Cross-platform:
  • 'screenReaderChanged': Screen reader state changed
  • 'reduceMotionChanged': Reduce motion setting changed
iOS only:
  • 'boldTextChanged': Bold text setting changed
  • 'grayscaleChanged': Grayscale setting changed
  • 'invertColorsChanged': Invert colors setting changed
  • 'reduceTransparencyChanged': Reduce transparency setting changed
  • 'announcementFinished': Screen reader finished an announcement
  • 'darkerSystemColorsChanged': Darker system colors setting changed
Android only:
  • 'highTextContrastChanged': High text contrast setting changed
  • 'accessibilityServiceChanged': Accessibility service state changed
Returns:
  • EventSubscription with a remove() method
Example: 
import { AccessibilityInfo } from 'react-native';

const subscription = AccessibilityInfo.addEventListener(
  'screenReaderChanged',
  enabled => {
    console.log('Screen reader is now:', enabled ? 'ON' : 'OFF');
  }
);

// Later, remove the listener
subscription.remove();
Announcement Finished (iOS): 
AccessibilityInfo.addEventListener(
  'announcementFinished',
  ({ announcement, success }) => {
    console.log(`Announced "${announcement}"`, success ? 'successfully' : 'failed');
  }
);

​
announceForAccessibility()

static announceForAccessibility(announcement: string): void
Post a string to be announced by the screen reader. Parameters:
  • announcement: The string to be announced
Example: 
import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.announceForAccessibility('Form submitted successfully');

​
announceForAccessibilityWithOptions()

static announceForAccessibilityWithOptions(
  announcement: string,
  options: {
    queue?: boolean;
    priority?: 'low' | 'default' | 'high';
  }
): void
Post a string to be announced by the screen reader with additional options. Parameters:
  • announcement: The string to be announced
  • options:
    • queue (iOS only): Queue announcement behind existing ones
    • priority (iOS only):
      • 'high': Interrupts ongoing speech, cannot be interrupted
      • 'default': Interrupts ongoing speech, can be interrupted
      • 'low': Won’t interrupt, can be interrupted
Example: 
import { AccessibilityInfo } from 'react-native';

// High priority announcement
AccessibilityInfo.announceForAccessibilityWithOptions(
  'Error: Please check your input',
  { priority: 'high' }
);

// Queued announcement
AccessibilityInfo.announceForAccessibilityWithOptions(
  'Loading complete',
  { queue: true, priority: 'default' }
);

​
sendAccessibilityEvent()

static sendAccessibilityEvent(
  handle: HostInstance,
  eventType: 'click' | 'focus' | 'viewHoverEnter' | 'windowStateChange'
): void
Send a named accessibility event to a component. Parameters:
  • handle: Reference to a host component
  • eventType: Type of event to send
    • 'focus': Set accessibility focus
    • 'click': Announce click (Android only)
    • 'viewHoverEnter': Announce hover (Android only)
    • 'windowStateChange': Announce window change (Android only)
Example: 
import { AccessibilityInfo, View, findNodeHandle } from 'react-native';

function MyComponent() {
  const viewRef = useRef(null);

  const focusElement = () => {
    if (viewRef.current) {
      AccessibilityInfo.sendAccessibilityEvent(
        viewRef.current,
        'focus'
      );
    }
  };

  return <View ref={viewRef}>...</View>;
}

​
getRecommendedTimeoutMillis()

static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>
Android only. Get the recommended timeout for UI changes based on user accessibility settings. Parameters:
  • originalTimeout: Your default timeout in milliseconds
Returns:
  • Promise that resolves to the recommended timeout
Example: 
import { AccessibilityInfo } from 'react-native';

const defaultTimeout = 3000;
AccessibilityInfo.getRecommendedTimeoutMillis(defaultTimeout)
  .then(recommendedTimeout => {
    // Use recommendedTimeout for toast/snackbar duration
    showToast(message, recommendedTimeout);
  });

​
Complete Example

import React, { useState, useEffect } from 'react';
import { View, Text, AccessibilityInfo, Button } from 'react-native';

function AccessibilityDemo() {
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
  const [reduceMotion, setReduceMotion] = useState(false);

  useEffect(() => {
    // Check initial states
    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);
    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);

    // Listen for changes
    const screenReaderSub = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      setScreenReaderEnabled
    );
    
    const reduceMotionSub = AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      setReduceMotion
    );

    return () => {
      screenReaderSub.remove();
      reduceMotionSub.remove();
    };
  }, []);

  const announce = () => {
    AccessibilityInfo.announceForAccessibility(
      'Button was pressed'
    );
  };

  return (
    <View>
      <Text>Screen Reader: {screenReaderEnabled ? 'ON' : 'OFF'}</Text>
      <Text>Reduce Motion: {reduceMotion ? 'ON' : 'OFF'}</Text>
      <Button title="Announce" onPress={announce} />
    </View>
  );
}

​
Best Practices

  1. Respect reduce motion: Disable or simplify animations when isReduceMotionEnabled() returns true
  2. Announce important changes: Use announceForAccessibility() for dynamic content updates
  3. Test with screen readers: Enable VoiceOver (iOS) or TalkBack (Android) during development
  4. Adjust timeouts: Use getRecommendedTimeoutMillis() on Android for dismissible messages
  5. Handle events: Listen to accessibility changes and update your UI accordingly

Build docs developers (and LLMs) love

Get started for freeTalk to us