접근성

안드로이드와 iOS는 모두 VoiceOver(iOS)와 TalkBack(안드로이드) 같은 기본 제공 화면 읽기 어시스턴트 기술과 앱을 통합할 수 있는 API를 제공한다. 리액트 네이티브는 이러한 API를 보완하여 모든 사용자가 앱을 편리하게 사용할 수 있도록 지원한다.

info

안드로이드와 iOS는 접근 방식에서 약간의 차이가 있기 때문에, 리액트 네이티브 구현도 플랫폼에 따라 다를 수 있다.

접근성 속성

accessible

true로 설정하면 뷰가 접근성 엘리먼트임을 나타낸다. 뷰가 접근성 엘리먼트일 때, 자식 엘리먼트들을 하나의 선택 가능한 컴포넌트로 그룹화한다. 기본적으로 모든 터치 가능한 엘리먼트는 접근성이 활성화된다.

Android에서는 react-native View의 accessible={true} 속성이 네이티브 focusable={true}로 변환된다.

tsx

<View accessible={true}>
  <Text>text one</Text>
  <Text>text two</Text>
</View>

위 예제에서 접근성 포커스는 accessible 속성이 있는 부모 뷰에서만 사용 가능하며, 'text one'과 'text two'에는 개별적으로 적용되지 않는다.

accessibilityLabel

뷰를 접근 가능하게 표시할 때, accessibilityLabel을 설정하는 것이 좋다. 이렇게 하면 VoiceOver나 TalkBack을 사용하는 사람들이 어떤 엘리먼트를 선택했는지 알 수 있다. 화면 리더는 해당 엘리먼트가 선택될 때 이 문자열을 음성으로 읽어준다.

사용하려면 View, Text, Touchable에 accessibilityLabel 속성을 커스텀 문자열로 설정하면 된다:

tsx

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

위 예제에서 TouchableOpacity 엘리먼트의 accessibilityLabel은 기본적으로 "Press me!"가 된다. 이 레이블은 모든 Text 노드 자식을 공백으로 구분해 연결하여 구성된다.

accessibilityLabelledBy

Android

accessibilityLabelledBy는 복잡한 폼을 구성할 때 다른 엘리먼트의 nativeID를 참조하는 데 사용된다. 이 속성의 값은 관련된 엘리먼트의 nativeID와 일치해야 한다:

tsx

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput
    accessibilityLabel="input"
    accessibilityLabelledBy="formLabel"
  />
</View>

위 예제에서는 스크린 리더가 TextInput에 포커스를 맞출 때 Input, Edit Box for Label for Input Field라고 알려준다.

accessibilityHint

accessibilityHint는 접근성 레이블만으로는 명확하지 않은 경우, 사용자에게 동작의 결과에 대한 추가적인 맥락을 제공하기 위해 사용한다.

View, Text, 또는 Touchable에 accessibilityHint 속성에 커스텀 문자열을 제공한다:

tsx

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Go back"
  accessibilityHint="Navigates to the previous screen"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Back</Text>
  </View>
</TouchableOpacity>

iOS

위 예제에서 VoiceOver는 사용자가 기기의 VoiceOver 설정에서 힌트를 활성화한 경우, 레이블 뒤에 힌트를 읽는다. accessibilityHint에 대한 가이드라인은 iOS Developer Docs에서 더 자세히 확인할 수 있다.

Android

위 예제에서 TalkBack은 레이블 뒤에 힌트를 읽는다. 현재 Android에서는 힌트를 비활성화할 수 없다.

accessibilityLanguage

iOS

accessibilityLanguage 속성을 사용하면 화면 리더가 엘리먼트의 라벨, 값, 힌트를 읽을 때 어떤 언어를 사용해야 하는지 이해할 수 있다. 제공된 문자열 값은 BCP 47 사양을 따라야 한다.

tsx

<View
  accessible={true}
  accessibilityLabel="Pizza"
  accessibilityLanguage="it-IT">
  <Text>🍕</Text>
</View>

accessibilityIgnoresInvertColors

iOS

화면 색상 반전은 iOS와 iPadOS에서 색맹, 저시력 또는 시각 장애가 있는 사용자를 위한 접근성 기능이다. 이 설정이 활성화되었을 때 반전하고 싶지 않은 뷰(예: 사진)가 있다면, 이 속성을 true로 설정한다.

accessibilityLiveRegion

Android

컴포넌트가 동적으로 변경될 때 TalkBack이 최종 사용자에게 이를 알리도록 하고 싶다면 accessibilityLiveRegion 속성을 사용한다. 이 속성은 none, polite, assertive로 설정할 수 있다:

• none: 접근성 서비스가 이 뷰의 변경 사항을 알리지 않는다.
• polite: 접근성 서비스가 이 뷰의 변경 사항을 알린다.
• assertive: 접근성 서비스가 현재 진행 중인 음성을 중단하고 즉시 이 뷰의 변경 사항을 알린다.

tsx

<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {count} times
</Text>

위 예제에서 addOne 메서드는 상태 변수 count를 변경한다. TouchableWithoutFeedback이 트리거되면, accessibilityLiveRegion="polite" 속성 때문에 TalkBack은 Text 뷰의 텍스트를 읽는다.

accessibilityRole

accessibilityRole은 보조 기술을 사용하는 사용자에게 컴포넌트의 목적을 전달한다.

accessibilityRole은 다음 중 하나가 될 수 있다:

• adjustable 요소가 조절 가능할 때 사용 (예: 슬라이더).
• alert 요소가 사용자에게 중요한 텍스트를 포함할 때 사용.
• button 요소를 버튼으로 취급해야 할 때 사용.
• checkbox 요소가 체크, 언체크, 혹은 혼합 상태를 가질 수 있는 체크박스를 나타낼 때 사용.
• combobox 요소가 여러 선택지 중 하나를 고를 수 있는 콤보박스를 나타낼 때 사용.
• header 요소가 콘텐츠 섹션의 헤더 역할을 할 때 사용 (예: 네비게이션 바의 제목).
• image 요소를 이미지로 취급해야 할 때 사용. 버튼이나 링크와 결합 가능.
• imagebutton 요소를 버튼으로 취급해야 하면서 동시에 이미지일 때 사용.
• keyboardkey 요소가 키보드 키 역할을 할 때 사용.
• link 요소를 링크로 취급해야 할 때 사용.
• menu 컴포넌트가 선택지 메뉴일 때 사용.
• menubar 컴포넌트가 여러 메뉴를 포함하는 컨테이너일 때 사용.
• menuitem 메뉴 내의 항목을 나타낼 때 사용.
• none 요소가 아무 역할이 없을 때 사용.
• progressbar 작업의 진행 상태를 나타내는 컴포넌트일 때 사용.
• radio 라디오 버튼을 나타낼 때 사용.
• radiogroup 라디오 버튼 그룹을 나타낼 때 사용.
• scrollbar 스크롤 바를 나타낼 때 사용.
• search 텍스트 필드 요소를 검색 필드로도 취급해야 할 때 사용.
• spinbutton 선택지 목록을 열 수 있는 버튼을 나타낼 때 사용.
• summary 앱이 처음 실행될 때 현재 상태를 빠르게 요약할 수 있는 요소일 때 사용.
• switch 켜고 끌 수 있는 스위치를 나타낼 때 사용.
• tab 탭을 나타낼 때 사용.
• tablist 탭 목록을 나타낼 때 사용.
• text 요소를 변경할 수 없는 정적 텍스트로 취급해야 할 때 사용.
• timer 타이머를 나타낼 때 사용.
• togglebutton 토글 버튼을 나타낼 때 사용. accessibilityState의 checked와 함께 사용해 버튼이 토글된 상태를 표시해야 한다.
• toolbar 툴바(액션 버튼이나 컴포넌트의 컨테이너)를 나타낼 때 사용.
• grid ScrollView, VirtualizedList, FlatList, SectionList와 함께 사용해 그리드를 나타낼 때 사용. 안드로이드의 GridView에 그리드 내/외부 알림을 추가한다.

accessibilityShowsLargeContentViewer

iOS

이 값은 사용자가 엘리먼트를 길게 눌렀을 때 대형 콘텐츠 뷰어를 표시할지 여부를 결정하는 불리언 값이다.

iOS 13.0 이상에서 사용할 수 있다.

accessibilityLargeContentTitle

iOS

큰 콘텐츠 뷰어가 표시될 때 사용할 제목 문자열이다.

이 기능을 사용하려면 accessibilityShowsLargeContentViewer를 true로 설정해야 한다.

tsx

<View
  accessibilityShowsLargeContentViewer={true}
  accessibilityLargeContentTitle="Home Tab">
  <Text>Home</Text>
</View>

accessibilityState

컴포넌트의 현재 상태를 보조 기술 사용자에게 설명한다.

accessibilityState는 객체다. 이 객체는 다음 필드를 포함한다:

이름	설명	타입	필수 여부
disabled	엘리먼트가 비활성화 상태인지 여부를 나타낸다.	boolean	아니요
selected	선택 가능한 엘리먼트가 현재 선택 상태인지 여부를 나타낸다.	boolean	아니요
checked	체크 가능한 엘리먼트의 상태를 나타낸다. 이 필드는 boolean 값이나 "mixed" 문자열을 받아 혼합된 체크박스를 표현할 수 있다.	boolean 또는 'mixed'	아니요
busy	엘리먼트가 현재 바쁜 상태인지 여부를 나타낸다.	boolean	아니요
expanded	확장 가능한 엘리먼트가 현재 확장되었는지 접혀 있는지 여부를 나타낸다.	boolean	아니요

사용하려면 accessibilityState를 특정 정의를 가진 객체로 설정한다.

accessibilityValue

컴포넌트의 현재 값을 나타낸다. 컴포넌트 값에 대한 텍스트 설명이거나 슬라이더나 진행률 표시줄과 같은 범위 기반 컴포넌트의 경우 범위 정보(최소값, 현재값, 최대값)를 포함한다.

accessibilityValue는 객체다. 이 객체는 다음 필드를 포함한다:

이름	설명	타입	필수 여부
min	컴포넌트 범위의 최소값.	integer	now가 설정된 경우 필수.
max	컴포넌트 범위의 최대값.	integer	now가 설정된 경우 필수.
now	컴포넌트 범위의 현재값.	integer	아니오
text	컴포넌트 값에 대한 텍스트 설명. 설정된 경우 min, now, max를 덮어쓴다.	string	아니오

accessibilityViewIsModal

iOS

이 불리언 값은 VoiceOver가 현재 뷰와 같은 레벨에 있는 다른 뷰의 엘리먼트를 무시해야 하는지 여부를 결정한다.

예를 들어, 윈도우에 A와 B라는 뷰가 있다고 가정하자. B 뷰에 accessibilityViewIsModal을 true로 설정하면, VoiceOver는 A 뷰의 엘리먼트를 무시한다. 반면에, B 뷰 안에 C라는 자식 뷰가 있고, C 뷰에 accessibilityViewIsModal을 true로 설정하면, VoiceOver는 A 뷰의 엘리먼트를 무시하지 않는다.

accessibilityElementsHidden

iOS

이 속성은 현재 접근성 엘리먼트 내에 포함된 접근성 엘리먼트들이 숨겨져 있는지 여부를 나타내는 불리언 값이다.

예를 들어, A와 B라는 형제 뷰를 포함한 윈도우에서 뷰 B의 accessibilityElementsHidden을 true로 설정하면, VoiceOver가 뷰 B 내의 엘리먼트들을 무시하게 된다. 이는 안드로이드의 importantForAccessibility="no-hide-descendants" 속성과 유사한 동작이다.

aria-valuemax

범위 기반 컴포넌트(예: 슬라이더, 진행 표시줄)에서 사용할 수 있는 최대값을 나타낸다.

aria-valuemin

aria-valuemin은 슬라이더나 진행률 표시줄과 같은 범위 기반 컴포넌트에서 사용할 수 있는 최소값을 나타낸다.

aria-valuenow

aria-valuenow는 슬라이더나 진행률 표시줄과 같은 범위 기반 컴포넌트의 현재 값을 나타낸다. 이 속성은 사용자 인터페이스에서 현재 설정된 값이나 진행 상태를 명확히 전달하는 데 사용된다. 예를 들어, 슬라이더의 현재 위치나 진행률 표시줄의 현재 진행 상태를 표현할 때 이 속성을 활용할 수 있다.

aria-valuetext

컴포넌트의 텍스트 설명을 나타낸다.

aria-busy

이 속성은 엘리먼트가 현재 수정 중임을 나타내며, 보조 기술이 변경이 완료될 때까지 기다린 후 사용자에게 업데이트를 알려야 할 수 있음을 의미한다.

타입	기본값
boolean	false

aria-checked

체크 가능한 엘리먼트의 상태를 나타낸다. 이 필드는 불리언 값이나 "mixed" 문자열을 받아서 혼합된 체크박스를 표현할 수 있다.

타입	기본값
boolean, 'mixed'	false

aria-disabled

해당 엘리먼트가 인식 가능하지만 비활성화되어 있음을 나타낸다. 따라서 편집하거나 조작할 수 없다.

타입	기본값
boolean	false

aria-expanded

확장 가능한 엘리먼트가 현재 확장되었는지 접혀 있는지를 나타낸다.

타입	기본값
boolean	false

aria-hidden

이 속성은 접근성 엘리먼트 내부에 포함된 접근성 요소들이 숨겨져 있는지 여부를 나타낸다.

예를 들어, A와 B라는 형제 뷰를 포함하는 윈도우에서 뷰 B에 aria-hidden을 true로 설정하면, VoiceOver가 뷰 B 내부의 요소들을 무시하게 된다.

타입	기본값
boolean	false

aria-label

상호작용 가능한 엘리먼트에 대한 레이블 문자열 값을 정의한다.

타입
string

aria-labelledby

Android

해당 속성이 적용된 엘리먼트를 설명하는 레이블 엘리먼트를 지정한다. aria-labelledby의 값은 관련된 엘리먼트의 nativeID와 일치해야 한다:

tsx

<View>
  <Text nativeID="formLabel">입력 필드 레이블</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

타입
string

aria-live

Android

엘리먼트가 업데이트될 것임을 나타내며, 사용자 에이전트, 보조 기술, 그리고 사용자가 라이브 영역에서 어떤 업데이트를 기대할 수 있는지 설명한다.

• off 보조 기술이 이 뷰의 변경 사항을 알리지 않아야 한다.
• polite 보조 기술이 이 뷰의 변경 사항을 알려야 한다.
• assertive 보조 기술이 진행 중인 음성을 중단하고 즉시 이 뷰의 변경 사항을 알려야 한다.

타입	기본값
enum('assertive', 'off', 'polite')	'off'

aria-modal

iOS

VoiceOver가 해당 엘리먼트의 형제 뷰 내부의 엘리먼트들을 무시해야 하는지를 나타내는 불리언 값이다.

타입	기본값
boolean	false

aria-selected

선택 가능한 엘리먼트가 현재 선택되었는지 여부를 나타낸다.

타입
boolean

importantForAccessibility

Android

동일한 부모를 가진 두 개의 겹치는 UI 컴포넌트가 있는 경우, 기본 접근성 포커스는 예측할 수 없는 동작을 보일 수 있다. importantForAccessibility 속성은 뷰가 접근성 이벤트를 발생시키는지, 그리고 접근성 서비스에 보고되는지를 제어하여 이 문제를 해결한다. 이 속성은 auto, yes, no, no-hide-descendants로 설정할 수 있다. 마지막 값은 접근성 서비스가 해당 컴포넌트와 모든 자식 컴포넌트를 무시하도록 강제한다.

tsx

<View style={styles.container}>
  <View
    style={[styles.layout, {backgroundColor: 'green'}]}
    importantForAccessibility="yes">
    <Text>First layout</Text>
  </View>
  <View
    style={[styles.layout, {backgroundColor: 'yellow'}]}
    importantForAccessibility="no-hide-descendants">
    <Text>Second layout</Text>
  </View>
</View>

위 예제에서 yellow 레이아웃과 그 자식들은 TalkBack 및 다른 모든 접근성 서비스에 완전히 보이지 않는다. 따라서 동일한 부모를 가진 겹치는 뷰를 사용하면서도 TalkBack을 혼란스럽게 하지 않을 수 있다.

onAccessibilityEscape

iOS

이 속성에 커스텀 함수를 할당하면, 사용자가 두 손가락으로 Z자 모양을 그리는 "탈출" 제스처를 수행할 때 해당 함수가 호출된다. 탈출 함수는 사용자 인터페이스에서 계층적으로 뒤로 이동하는 동작을 수행해야 한다. 이는 네비게이션 계층에서 위로 이동하거나 모달 사용자 인터페이스를 닫는 것을 의미할 수 있다. 선택된 엘리먼트에 onAccessibilityEscape 함수가 없는 경우, 시스템은 해당 함수가 있는 뷰를 찾을 때까지 뷰 계층을 탐색하거나, 함수를 찾지 못했음을 나타내는 신호를 보낸다.

onAccessibilityTap

iOS

이 속성을 사용하면 선택된 접근 가능한 엘리먼트를 더블 탭하여 활성화할 때 호출될 커스텀 함수를 지정할 수 있다.

onMagicTap

iOS

이 속성에 커스텀 함수를 할당하면, 두 손가락으로 더블 탭하는 "매직 탭" 제스처가 수행될 때 해당 함수가 호출된다. 매직 탭 함수는 사용자가 컴포넌트에서 수행할 수 있는 가장 적합한 동작을 실행해야 한다. 예를 들어, 아이폰의 전화 앱에서 매직 탭은 전화를 받거나 현재 통화를 종료한다. 선택된 엘리먼트에 onMagicTap 함수가 없으면, 시스템은 뷰 계층 구조를 따라 올라가며 해당 함수가 있는 뷰를 찾을 때까지 탐색한다.

role

role은 컴포넌트의 목적을 전달하며, accessibilityRole prop보다 우선순위가 높다.

role은 다음 중 하나일 수 있다:

• alert 사용자에게 중요한 텍스트를 표시하는 엘리먼트에 사용한다.
• button 엘리먼트를 버튼으로 취급해야 할 때 사용한다.
• checkbox 엘리먼트가 체크, 언체크 또는 혼합된 상태를 가질 수 있는 체크박스를 나타낼 때 사용한다.
• combobox 엘리먼트가 여러 선택지 중 하나를 고를 수 있는 콤보박스를 나타낼 때 사용한다.
• grid ScrollView, VirtualizedList, FlatList 또는 SectionList와 함께 사용해 그리드를 나타낸다. 안드로이드 GridView에 그리드 내/외부 알림을 추가한다.
• heading 엘리먼트가 콘텐츠 섹션의 헤더 역할을 할 때 사용한다(예: 네비게이션 바의 제목).
• img 엘리먼트를 이미지로 취급해야 할 때 사용한다. 예를 들어 버튼이나 링크와 결합할 수 있다.
• link 엘리먼트를 링크로 취급해야 할 때 사용한다.
• list 항목 목록을 식별할 때 사용한다.
• listitem 목록 내 항목을 식별할 때 사용한다.
• menu 컴포넌트가 선택지 메뉴일 때 사용한다.
• menubar 컴포넌트가 여러 메뉴를 담는 컨테이너일 때 사용한다.
• menuitem 메뉴 내 항목을 나타낼 때 사용한다.
• none 엘리먼트에 역할이 없을 때 사용한다.
• presentation 엘리먼트에 역할이 없을 때 사용한다.
• progressbar 작업 진행 상태를 나타내는 컴포넌트에 사용한다.
• radio 라디오 버튼을 나타낼 때 사용한다.
• radiogroup 라디오 버튼 그룹을 나타낼 때 사용한다.
• scrollbar 스크롤바를 나타낼 때 사용한다.
• searchbox 텍스트 필드 엘리먼트를 검색 필드로도 취급해야 할 때 사용한다.
• slider 엘리먼트를 조정할 수 있을 때 사용한다(예: 슬라이더).
• spinbutton 선택지 목록을 여는 버튼을 나타낼 때 사용한다.
• summary 앱이 처음 실행될 때 현재 상태를 빠르게 요약하는 데 사용할 수 있는 엘리먼트에 사용한다.
• switch 켜고 끌 수 있는 스위치를 나타낼 때 사용한다.
• tab 탭을 나타낼 때 사용한다.
• tablist 탭 목록을 나타낼 때 사용한다.
• timer 타이머를 나타낼 때 사용한다.
• toolbar 툴바(액션 버튼이나 컴포넌트를 담는 컨테이너)를 나타낼 때 사용한다.

접근성 액션

접근성 액션은 보조 기술이 컴포넌트의 액션을 프로그래밍 방식으로 실행할 수 있게 한다. 접근성 액션을 지원하려면 컴포넌트는 두 가지 작업을 수행해야 한다:

• accessibilityActions 속성을 통해 지원하는 액션 목록을 정의한다.
• 액션 요청을 처리할 onAccessibilityAction 함수를 구현한다.

accessibilityActions 속성은 액션 객체 목록을 포함해야 한다. 각 액션 객체는 다음 필드를 포함해야 한다:

이름	타입	필수 여부
name	string	예
label	string	아니오

액션은 버튼 클릭이나 슬라이더 조정과 같은 표준 액션이나, 이메일 메시지 삭제와 같은 특정 컴포넌트에 한정된 커스텀 액션을 나타낸다. name 필드는 표준 액션과 커스텀 액션 모두에서 필수지만, label은 표준 액션에서는 선택 사항이다.

표준 액션을 추가할 때, name은 다음 중 하나여야 한다:

• 'magicTap' - iOS 전용 - VoiceOver 포커스가 컴포넌트에 있거나 내부에 있을 때, 사용자가 두 손가락으로 더블 탭한다.
• 'escape' - iOS 전용 - VoiceOver 포커스가 컴포넌트에 있거나 내부에 있을 때, 사용자가 두 손가락으로 스크럽 제스처(왼쪽, 오른쪽, 왼쪽)를 수행한다.
• 'activate' - 컴포넌트를 활성화한다. 이 액션은 보조 기술 사용 여부와 상관없이 동일한 작업을 수행해야 한다. 스크린 리더 사용자가 컴포넌트를 더블 탭할 때 실행된다.
• 'increment' - 조정 가능한 컴포넌트를 증가시킨다. iOS에서는 컴포넌트가 'adjustable' 역할을 가지고 있을 때, 사용자가 포커스를 맞추고 위로 스와이프하면 VoiceOver가 이 액션을 생성한다. Android에서는 사용자가 컴포넌트에 접근성 포커스를 맞추고 볼륨 업 버튼을 누르면 TalkBack이 이 액션을 생성한다.
• 'decrement' - 조정 가능한 컴포넌트를 감소시킨다. iOS에서는 컴포넌트가 'adjustable' 역할을 가지고 있을 때, 사용자가 포커스를 맞추고 아래로 스와이프하면 VoiceOver가 이 액션을 생성한다. Android에서는 사용자가 컴포넌트에 접근성 포커스를 맞추고 볼륨 다운 버튼을 누르면 TalkBack이 이 액션을 생성한다.
• 'longpress' - Android 전용 - 사용자가 컴포넌트에 접근성 포커스를 맞추고, 더블 탭한 후 한 손가락을 화면에 누르고 있으면 이 액션이 생성된다. 이 액션은 보조 기술 사용 여부와 상관없이 동일한 작업을 수행해야 한다.

label 필드는 표준 액션에서는 선택 사항이며, 보조 기술에서 자주 사용되지 않는다. 커스텀 액션의 경우, 사용자에게 표시할 액션 설명을 포함한 지역화된 문자열이다.

액션 요청을 처리하려면 컴포넌트는 onAccessibilityAction 함수를 구현해야 한다. 이 함수의 유일한 인수는 수행할 액션의 이름을 포함하는 이벤트다. 아래 RNTester 예제는 여러 커스텀 액션을 정의하고 처리하는 컴포넌트를 만드는 방법을 보여준다.

tsx

<View
  accessible={true}
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
    {name: 'paste', label: 'paste'},
  ]}
  onAccessibilityAction={event => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

스크린 리더 활성화 여부 확인하기

AccessibilityInfo API를 사용하면 현재 스크린 리더가 활성화되어 있는지 확인할 수 있다. 자세한 내용은 AccessibilityInfo 문서를 참고한다.

접근성 이벤트 전송

Android

UI 컴포넌트에서 접근성 이벤트를 트리거해야 하는 경우가 있다. 예를 들어 커스텀 뷰가 화면에 나타나거나 특정 뷰에 접근성 포커스를 설정할 때가 그렇다. 이를 위해 네이티브 UIManager 모듈은 sendAccessibilityEvent 메서드를 제공한다. 이 메서드는 두 개의 인자를 받는다: 뷰 태그와 이벤트 타입이다. 지원되는 이벤트 타입은 typeWindowStateChanged, typeViewFocused, typeViewClicked이다.

tsx

import {Platform, UIManager, findNodeHandle} from 'react-native';

if (Platform.OS === 'android') {
  UIManager.sendAccessibilityEvent(
    findNodeHandle(this),
    UIManager.AccessibilityEventTypes.typeViewFocused,
  );
}

TalkBack 지원 테스트

Android

TalkBack을 활성화하려면 안드로이드 기기나 에뮬레이터에서 설정 앱으로 이동한다. 접근성 메뉴를 선택한 후 TalkBack을 누른다. "서비스 사용" 스위치를 토글해 활성화하거나 비활성화할 수 있다.

안드로이드 에뮬레이터에는 기본적으로 TalkBack이 설치되어 있지 않다. Google Play 스토어를 통해 에뮬레이터에 TalkBack을 설치할 수 있다. Google Play 스토어가 설치된 에뮬레이터를 선택해야 한다. Android Studio에서 이러한 에뮬레이터를 사용할 수 있다.

볼륨 키 단축키를 사용해 TalkBack을 토글할 수도 있다. 볼륨 키 단축키를 활성화하려면 설정 앱에서 접근성 메뉴로 이동한다. 상단에 있는 볼륨 키 단축키를 켠다.

볼륨 키 단축키를 사용하려면 두 개의 볼륨 키를 3초 동안 누르면 접근성 도구가 시작된다.

또한 원하는 경우 커맨드라인을 통해 TalkBack을 토글할 수 있다:

shell

# 비활성화
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService

# 활성화
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService

VoiceOver 지원 테스트

iOS

iOS 또는 iPadOS 기기에서 VoiceOver를 활성화하려면 설정 앱을 열고, 일반 > 접근성을 선택한다. 여기서 VoiceOver를 포함해 기기를 더 편리하게 사용할 수 있는 다양한 도구를 찾을 수 있다. VoiceOver를 활성화하려면 "시각" 섹션 아래의 VoiceOver를 탭한 후 상단에 나타나는 스위치를 토글한다.

접근성 설정의 가장 하단에는 "접근성 단축키"가 있다. 홈 버튼을 세 번 눌러 VoiceOver를 빠르게 토글할 수 있다.

시뮬레이터에서는 VoiceOver를 사용할 수 없지만, Xcode의 Accessibility Inspector를 통해 macOS VoiceOver를 애플리케이션에서 사용할 수 있다. 다만 macOS의 VoiceOver는 실제 기기와는 다른 경험을 제공할 수 있으므로, 가능하면 실제 기기에서 테스트하는 것이 가장 좋다.

추가 자료

• React Native 앱 접근성 구현하기