접근성(a11y) — 모든 사용자를 위한 앱 만들기

// 기본 접근성 속성
<Pressable
  accessible={true}
  accessibilityLabel="프로필 편집"              // 스크린 리더가 읽는 텍스트
  accessibilityHint="프로필 정보를 수정합니다"    // 추가 설명
  accessibilityRole="button"                    // 요소의 역할
  accessibilityState={{ disabled: false }}       // 상태
  onPress={handleEdit}
>
  <Image source={editIcon} style={styles.icon} />
</Pressable>

// 이미지에 대체 텍스트
<Image
  source={{ uri: profileImage }}
  accessibilityLabel="홍길동님의 프로필 사진"
  accessible={true}
/>

// 장식용 이미지 (스크린 리더 무시)
<Image
  source={decorativeImage}
  accessible={false}
  accessibilityElementsHidden={true}
/>

import { AccessibilityInfo, Platform } from 'react-native';

// 스크린 리더에게 변경사항 알림
function announceChange(message: string) {
  if (Platform.OS === 'ios') {
    AccessibilityInfo.announceForAccessibility(message);
  }
  // Android는 accessibilityLiveRegion 사용
}

// 사용 예: 장바구니에 상품 추가 시
function addToCart(item: Product) {
  cart.add(item);
  announceChange(`${item.name}이(가) 장바구니에 추가되었습니다`);
}

// 실시간 업데이트 영역 (Android)
<View accessibilityLiveRegion="polite">
  <Text>장바구니: {count}개</Text>
</View>

function AccessibleComponent() {
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

  useEffect(() => {
    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);

    const subscription = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      setScreenReaderEnabled
    );
    return () => subscription.remove();
  }, []);

  return screenReaderEnabled ? (
    // 스크린 리더용 간소화된 UI
    <SimpleLayout />
  ) : (
    // 일반 UI
    <RichLayout />
  );
}

import { useReducedMotion } from 'react-native-reanimated';

function AnimatedComponent() {
  const reducedMotion = useReducedMotion();

  // 사용자가 동작 줄이기를 설정했으면 애니메이션 비활성화
  const animationDuration = reducedMotion ? 0 : 300;
}