접근성

Android와 iOS는 모두 VoiceOver(iOS)와 TalkBack(Android)과 같은 내장된 스크린 리더를 포함한 보조 기술과 앱을 통합할 수 있는 API를 제공한다. React Native는 이러한 API를 보완하여 모든 사용자가 앱을 사용할 수 있도록 돕는다.

info

Android와 iOS는 접근 방식이 약간 다르기 때문에 React Native의 구현도 플랫폼에 따라 차이가 있을 수 있다.

접근성 속성

accessible

true로 설정하면 해당 뷰를 접근성 엘리먼트로 인식한다. 뷰가 접근성 엘리먼트일 때, 자식 요소들을 하나의 선택 가능한 컴포넌트로 묶는다. 기본적으로 모든 터치 가능한 엘리먼트는 접근성을 갖는다.

안드로이드에서는 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을 사용하는 사람들이 어떤 엘리먼트를 선택했는지 알 수 있다. 스크린 리더는 해당 엘리먼트가 선택될 때 이 문자열을 음성으로 읽어준다.

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

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

복잡한 폼을 구성할 때 다른 엘리먼트의 nativeID를 참조하는 데 사용된다. accessibilityLabelledBy의 값은 관련된 엘리먼트의 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" 속성이 설정된 Text 뷰의 내용을 TalkBack이 읽는다.

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와 함께 그리드를 나타낼 때 사용한다. Android의 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	선택 가능한 엘리먼트의 상태를 나타낸다. 이 필드는 불리언 값이나 "mixed" 문자열을 받아 혼합된 체크박스를 표현할 수 있다.	boolean or 'mixed'	아니오
busy	엘리먼트가 현재 사용 중인지 여부를 나타낸다.	boolean	아니오
expanded	확장 가능한 엘리먼트가 현재 확장되었는지 접혀 있는지 여부를 나타낸다.	boolean	아니오

사용하려면, accessibilityState를 특정 정의가 포함된 객체로 설정한다.

accessibilityValue

컴포넌트의 현재 값을 나타낸다. 컴포넌트 값에 대한 텍스트 설명일 수도 있고, 슬라이더나 프로그레스 바와 같은 범위 기반 컴포넌트의 경우 범위 정보(최소값, 현재값, 최대값)를 포함한다.

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

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

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-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자 모양을 그리는 "escape" 제스처를 수행할 때 해당 함수가 호출된다. escape 함수는 사용자 인터페이스에서 계층적으로 뒤로 이동하는 동작을 수행해야 한다. 이는 네비게이션 계층에서 위로 이동하거나 뒤로 가기, 혹은 모달 사용자 인터페이스를 닫는 동작을 의미할 수 있다. 선택된 엘리먼트에 onAccessibilityEscape 함수가 없으면, 시스템은 해당 함수를 가진 뷰를 찾을 때까지 뷰 계층을 탐색하거나, 찾지 못했을 경우 bonk 소리를 내서 알린다.

onAccessibilityTap

iOS

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

onMagicTap

iOS

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

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

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을 활성화하려면 Android 기기 또는 에뮬레이터의 설정 앱으로 이동한다. 접근성 메뉴를 탭한 후 TalkBack을 선택한다. "서비스 사용" 스위치를 토글하여 활성화 또는 비활성화한다.

Android 에뮬레이터는 기본적으로 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 앱 접근성 구현하기