React Native Props          iOS                         Android
─────────────────          ─────────                   ─────────
accessibilityLabel    →    accessibilityLabel      →   contentDescription
accessibilityRole     →    accessibilityTraits     →   className
accessibilityState    →    accessibilityTraits     →   AccessibilityNodeInfo state
accessibilityValue    →    accessibilityValue      →   RangeInfo / text

<Pressable
  accessible
  accessibilityRole="button"
  accessibilityLabel="Add to cart"
  accessibilityHint="Adds this item to your shopping cart"
  onPress={handleAddToCart}
>
  <Icon name="cart-plus" />
  <Text>Add</Text>
</Pressable>

<Pressable
  accessible
  accessibilityRole="checkbox"
  accessibilityLabel="Accept terms and conditions"
  accessibilityState={{
    checked: isChecked,
    disabled: isSubmitting,
  }}
  onPress={() => setChecked(!isChecked)}
>
  <Checkbox checked={isChecked} disabled={isSubmitting} />
  <Text>Accept terms and conditions</Text>
</Pressable>

<View
  accessible
  accessibilityRole="adjustable"
  accessibilityLabel="Volume"
  accessibilityValue={{
    min: 0,
    max: 100,
    now: volume,
    text: `${volume} percent`,
  }}
>
  <Slider value={volume} onValueChange={setVolume} />
</View>

function SwipeableMessage({ message, onDelete, onArchive }: Props) {
  return (
    <View
      accessible
      accessibilityRole="button"
      accessibilityLabel={`Message from ${message.sender}: ${message.subject}`}
      accessibilityActions={[
        { name: 'delete', label: 'Delete message' },
        { name: 'archive', label: 'Archive message' },
        { name: 'activate', label: 'Open message' },
      ]}
      onAccessibilityAction={(event) => {
        switch (event.nativeEvent.actionName) {
          case 'delete':
            onDelete(message.id);
            break;
          case 'archive':
            onArchive(message.id);
            break;
          case 'activate':
            navigation.navigate('MessageDetail', { id: message.id });
            break;
        }
      }}
    >
      <MessageRow message={message} />
    </View>
  );
}

<View
  // Android only: controls whether the view fires accessibility events
  importantForAccessibility="yes" // 'yes' | 'no' | 'no-hide-descendants' | 'auto'

  // Android only: live region announces content changes
  accessibilityLiveRegion="polite" // 'polite' | 'assertive' | 'none'

  // iOS only: hides the element and all children from VoiceOver
  accessibilityElementsHidden={false}
/>

import { Pressable, Text, StyleSheet, type AccessibilityState } from 'react-native';

interface ToggleProps {
  label: string;
  value: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
}

export function Toggle({ label, value, onChange, disabled = false }: ToggleProps) {
  const a11yState: AccessibilityState = {
    checked: value,
    disabled,
  };

  return (
    <Pressable
      accessible
      accessibilityRole="switch"
      accessibilityLabel={label}
      accessibilityState={a11yState}
      onPress={() => {
        if (!disabled) onChange(!value);
      }}
      style={[styles.container, disabled && styles.disabled]}
    >
      <Text style={styles.label}>{label}</Text>
      <View
        style={[
          styles.track,
          value ? styles.trackOn : styles.trackOff,
        ]}
      >
        <View style={[styles.thumb, value && styles.thumbOn]} />
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: { flexDirection: 'row', alignItems: 'center', padding: 12 },
  disabled: { opacity: 0.5 },
  label: { flex: 1, fontSize: 16 },
  track: { width: 48, height: 28, borderRadius: 14, justifyContent: 'center', padding: 2 },
  trackOn: { backgroundColor: '#34C759' },
  trackOff: { backgroundColor: '#E5E5EA' },
  thumb: { width: 24, height: 24, borderRadius: 12, backgroundColor: '#fff' },
  thumbOn: { alignSelf: 'flex-end' },
});

<View accessibilityOrder={[headerRef, priceRef, descriptionRef, buyButtonRef]}>
  <View ref={priceRef} style={styles.priceOverlay}>
    <Text>$29.99</Text>
  </View>
  <View ref={headerRef} style={styles.header}>
    <Text accessibilityRole="header">Product Name</Text>
  </View>
  <View ref={descriptionRef}>
    <Text>Product description text.</Text>
  </View>
  <Pressable ref={buyButtonRef} accessibilityRole="button">
    <Text>Buy Now</Text>
  </Pressable>
</View>

import { AccessibilityInfo } from 'react-native';

function showToast(message: string) {
  setToastVisible(true);
  setToastMessage(message);

  // Announce to screen reader users immediately
  AccessibilityInfo.announceForAccessibility(message);
}

import { useEffect, useState } from 'react';
import { AccessibilityInfo } from 'react-native';

function useScreenReader(): boolean {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    AccessibilityInfo.isScreenReaderEnabled().then(setEnabled);
    const subscription = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      setEnabled,
    );
    return () => subscription.remove();
  }, []);

  return enabled;
}

// Usage: provide alternative UI when gestures are not usable
function CardStack() {
  const isScreenReader = useScreenReader();

  if (isScreenReader) {
    // Render a simple list instead of a swipeable card stack
    return <FlatList data={cards} renderItem={renderAccessibleCard} />;
  }

  return <SwipeableCardStack cards={cards} />;
}

// Bad: TalkBack announces "button, double-tap to activate"
<Pressable onPress={handleClose}>
  <Icon name="close" />
</Pressable>

// Good: announces "Close, button, double-tap to activate"
<Pressable
  onPress={handleClose}
  accessibilityRole="button"
  accessibilityLabel="Close"
>
  <Icon name="close" />
</Pressable>

const renderItem = useCallback(({ item }: { item: Order }) => (
  <Pressable
    accessible
    accessibilityRole="button"
    accessibilityLabel={`Order ${item.id}, ${item.status}, ${formatCurrency(item.total)}`}
    accessibilityHint="Opens order details"
    onPress={() => navigation.navigate('OrderDetail', { orderId: item.id })}
  >
    <OrderRow order={item} />
  </Pressable>
), [navigation]);

<Modal
  visible={isVisible}
  onRequestClose={handleClose} // required for Android back button
  accessibilityViewIsModal={true} // iOS: traps VoiceOver focus inside modal
>
  <View
    importantForAccessibility="yes" // Android: ensures modal content is focused
  >
    {/* Modal content */}
  </View>
</Modal>

import { useRef } from 'react';
import { AccessibilityInfo, findNodeHandle, View, Text } from 'react-native';

function OrderConfirmation() {
  const headingRef = useRef<View>(null);

  useEffect(() => {
    // Move focus to the confirmation heading after mount
    const node = findNodeHandle(headingRef.current);
    if (node) {
      AccessibilityInfo.setAccessibilityFocus(node);
    }
  }, []);

  return (
    <View ref={headingRef} accessible accessibilityRole="header">
      <Text style={styles.heading}>Order Confirmed</Text>
    </View>
  );
}

import { useFocusEffect } from '@react-navigation/native';

function SearchScreen() {
  const searchInputRef = useRef<TextInput>(null);

  useFocusEffect(
    useCallback(() => {
      // Focus the search input when this screen comes into view
      const timeout = setTimeout(() => {
        const node = findNodeHandle(searchInputRef.current);
        if (node) {
          AccessibilityInfo.setAccessibilityFocus(node);
        }
      }, 100); // small delay lets the screen transition finish
      return () => clearTimeout(timeout);
    }, []),
  );

  return <TextInput ref={searchInputRef} accessibilityLabel="Search orders" />;
}

import { useRef, useState } from 'react';
import {
  AccessibilityInfo,
  findNodeHandle,
  ScrollView,
  Text,
  TextInput,
  Pressable,
  View,
  StyleSheet,
} from 'react-native';

interface FormErrors {
  email?: string;
  password?: string;
}

export function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState<FormErrors>({});

  const emailRef = useRef<TextInput>(null);
  const passwordRef = useRef<TextInput>(null);
  const errorSummaryRef = useRef<View>(null);

  function validate(): boolean {
    const next: FormErrors = {};
    if (!email.includes('@')) next.email = 'Enter a valid email address';
    if (password.length < 8) next.password = 'Password must be at least 8 characters';

    setErrors(next);

    if (Object.keys(next).length > 0) {
      // Move focus to error summary so screen reader announces it
      const node = findNodeHandle(errorSummaryRef.current);
      if (node) AccessibilityInfo.setAccessibilityFocus(node);
      return false;
    }
    return true;
  }

  const errorMessages = Object.values(errors).filter(Boolean);

  return (
    <ScrollView contentContainerStyle={styles.form}>
      {errorMessages.length > 0 && (
        <View
          ref={errorSummaryRef}
          accessible
          accessibilityRole="alert"
          accessibilityLabel={`${errorMessages.length} errors: ${errorMessages.join('. ')}`}
          style={styles.errorSummary}
        >
          <Text style={styles.errorTitle}>Please fix the following:</Text>
          {errorMessages.map((msg) => (
            <Text key={msg} style={styles.errorText}>{msg}</Text>
          ))}
        </View>
      )}

      <Text nativeID="emailLabel" style={styles.label}>Email</Text>
      <TextInput
        ref={emailRef}
        accessibilityLabelledBy="emailLabel"
        accessibilityErrorMessage={errors.email}
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoComplete="email"
        returnKeyType="next"
        onSubmitEditing={() => passwordRef.current?.focus()}
        style={[styles.input, errors.email && styles.inputError]}
      />
      {errors.email && (
        <Text accessibilityRole="alert" style={styles.errorText}>
          {errors.email}
        </Text>
      )}

      <Text nativeID="passwordLabel" style={styles.label}>Password</Text>
      <TextInput
        ref={passwordRef}
        accessibilityLabelledBy="passwordLabel"
        accessibilityErrorMessage={errors.password}
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        autoComplete="password"
        returnKeyType="done"
        onSubmitEditing={() => { if (validate()) handleLogin(); }}
        style={[styles.input, errors.password && styles.inputError]}
      />
      {errors.password && (
        <Text accessibilityRole="alert" style={styles.errorText}>
          {errors.password}
        </Text>
      )}

      <Pressable
        accessible
        accessibilityRole="button"
        accessibilityLabel="Sign in"
        onPress={() => { if (validate()) handleLogin(); }}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Sign In</Text>
      </Pressable>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  form: { padding: 16, gap: 8 },
  label: { fontSize: 16, fontWeight: '600' },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
  inputError: { borderColor: '#D32F2F' },
  errorSummary: { backgroundColor: '#FFEBEE', padding: 12, borderRadius: 8, marginBottom: 8 },
  errorTitle: { fontWeight: '700', color: '#D32F2F', marginBottom: 4 },
  errorText: { color: '#D32F2F', fontSize: 14 },
  button: { backgroundColor: '#007AFF', padding: 16, borderRadius: 8, alignItems: 'center', marginTop: 8 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

// Bad: disabling font scaling breaks accessibility
<Text allowFontScaling={false}>Price: $29.99</Text>

// Good: allow scaling with an upper bound to prevent layout breakage
<Text maxFontSizeMultiplier={1.5}>Price: $29.99</Text>

import { PixelRatio, useWindowDimensions } from 'react-native';

function AdaptiveHeader({ title, subtitle }: Props) {
  const fontScale = PixelRatio.getFontScale();
  const { width } = useWindowDimensions();

  // Switch from horizontal to vertical layout at large text sizes
  const isLargeText = fontScale > 1.3;

  return (
    <View style={[styles.header, isLargeText && styles.headerVertical]}>
      <Text
        style={styles.title}
        accessibilityRole="header"
        numberOfLines={isLargeText ? 2 : 1}
      >
        {title}
      </Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  headerVertical: { flexDirection: 'column', alignItems: 'flex-start' },
  title: { fontSize: 18, fontWeight: '700' },
  subtitle: { fontSize: 14, color: '#666' },
});

import { useColorScheme } from 'react-native';

function useAccessibleColors() {
  const scheme = useColorScheme();

  return {
    text: scheme === 'dark' ? '#E5E5E7' : '#1C1C1E',
    textSecondary: scheme === 'dark' ? '#ABABAB' : '#636366',
    background: scheme === 'dark' ? '#1C1C1E' : '#FFFFFF',
    error: scheme === 'dark' ? '#FF6B6B' : '#D32F2F', // both pass AA contrast
    border: scheme === 'dark' ? '#3A3A3C' : '#C7C7CC',
  };
}

<Image
  source={{ uri: productImageUrl }}
  accessibilityIgnoresInvertColors
  accessibilityLabel="Blue running shoe, side view"
  style={styles.productImage}
/>

// Bad: icon button too small
<Pressable onPress={handleInfo} style={{ padding: 4 }}>
  <Icon name="info" size={16} />
</Pressable>

// Good: adequate touch target with hitSlop
<Pressable
  onPress={handleInfo}
  accessibilityRole="button"
  accessibilityLabel="More information"
  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
  style={{ padding: 8 }}
>
  <Icon name="info" size={24} />
</Pressable>

import { render, screen, fireEvent } from '@testing-library/react-native';

test('toggle changes state and announces correctly', () => {
  const onChange = jest.fn();
  render(<Toggle label="Notifications" value={false} onChange={onChange} />);

  const toggle = screen.getByRole('switch', { name: 'Notifications' });
  expect(toggle).toHaveAccessibilityState({ checked: false });

  fireEvent.press(toggle);
  expect(onChange).toHaveBeenCalledWith(true);
});

test('login form shows accessible error messages', () => {
  render(<LoginForm />);

  fireEvent.press(screen.getByRole('button', { name: 'Sign in' }));

  // Verify errors are announced via role="alert"
  expect(screen.getByRole('alert')).toBeTruthy();

  // Verify fields can be found by their label
  expect(screen.getByLabelText('Email')).toBeTruthy();
  expect(screen.getByLabelText('Password')).toBeTruthy();
});

npm install --save-dev eslint-plugin-react-native-a11y

// .eslintrc.js
module.exports = {
  plugins: ['react-native-a11y'],
  extends: ['plugin:react-native-a11y/all'],
};

// Bad: removes the element from the accessibility tree entirely
<Pressable accessible={false} onPress={handlePress}>
  <Text>Submit</Text>
</Pressable>

// Good: interactive elements must be accessible
<Pressable
  accessible
  accessibilityRole="button"
  accessibilityLabel="Submit"
  onPress={handlePress}
>
  <Text>Submit</Text>
</Pressable>

// Bad: screen reader announces the entire container as one element,
// user cannot navigate to individual items
<View accessible accessibilityLabel="Order list with 3 items">
  <OrderRow order={orders[0]} />
  <OrderRow order={orders[1]} />
  <OrderRow order={orders[2]} />
</View>

// Good: each item is independently focusable
<View>
  {orders.map((order) => (
    <Pressable
      key={order.id}
      accessible
      accessibilityRole="button"
      accessibilityLabel={`Order ${order.id}, ${order.status}`}
      onPress={() => selectOrder(order.id)}
    >
      <OrderRow order={order} />
    </Pressable>
  ))}
</View>

import { useEffect, useState } from 'react';
import { AccessibilityInfo } from 'react-native';
import Animated, { withSpring, withTiming, useSharedValue } from 'react-native-reanimated';

function useReduceMotion(): boolean {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    AccessibilityInfo.isReduceMotionEnabled().then(setEnabled);
    const subscription = AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      setEnabled,
    );
    return () => subscription.remove();
  }, []);

  return enabled;
}

function AnimatedCard({ children }: { children: ReactNode }) {
  const reduceMotion = useReduceMotion();
  const translateY = useSharedValue(100);

  useEffect(() => {
    if (reduceMotion) {
      // Skip animation entirely — just show it
      translateY.value = 0;
    } else {
      translateY.value = withSpring(0, { damping: 15 });
    }
  }, [reduceMotion]);

  return <Animated.View style={{ transform: [{ translateY }] }}>{children}</Animated.View>;
}

// Bad: only works on iOS, TalkBack users get nothing
<View accessibilityElementsHidden={isDecorative} />

// Good: handle both platforms
<View
  accessibilityElementsHidden={isDecorative}                    // iOS
  importantForAccessibility={isDecorative ? 'no-hide-descendants' : 'auto'} // Android
/>