8.1.1 사용자 인터페이스 컴포넌트

요구 사항

사용자 인터페이스 컴포넌트는 목적에 맞게 구현되어, 보조기술 사용자가 컴포넌트의 네임과 역할, 값 등을 바르게 인식하고 이용할 수 있어야 합니다.

개정 내역: 강화 — 2016판 「8.2 보조 기술과의 호환성」

2025판은 WCAG 4.1.2(이름, 역할, 값)에 대응해 네임·역할·값 노출을 명확히 요구합니다. 네이티브 앱에서 이는 플랫폼 접근성 API(Android AccessibilityNodeInfo, iOS UIAccessibility)에 정보를 올바르게 전달하는 것을 뜻합니다. 개념은 모바일과 ARIA를 참고하세요.

왜 필요한가요

화면낭독기 등 보조기술과의 호환이 쉬워져 보조기술 사용자가 앱을 제어하고 활용하기 좋아집니다.

도움받는 사용자

• 화면낭독기 사용자
• 스위치 제어 사용자
• 음성 명령 사용자
• 점자정보단말기 사용자

적용 방법

가능하면 플랫폼 표준 컴포넌트(Button, Switch, CheckBox 등)를 씁니다. 사용자 정의 컴포넌트는 역할, 상태, 값을 직접 노출하고, 상태가 바뀔 때 함께 갱신합니다.

// 커스텀 토글을 스위치로 노출
ViewCompat.setAccessibilityDelegate(toggle, object : AccessibilityDelegateCompat() {
    override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.className = Switch::class.java.name   // 역할: 스위치
        info.isCheckable = true
        info.isChecked = isOn                        // 값(상태)
    }
})
toggle.contentDescription = "알림 받기"            // 네임

Row(Modifier.toggleable(value = isOn, role = Role.Switch, onValueChange = { isOn = it })) {
    Text("알림 받기")
}

toggleView.isAccessibilityElement = true
toggleView.accessibilityLabel = "알림 받기"              // 네임
toggleView.accessibilityTraits = .button                  // 역할
toggleView.accessibilityValue = isOn ? "켬" : "끔"        // 값
// iOS 17+: .toggleButton 특성으로 "전환 버튼"으로 노출 가능

Toggle("알림 받기", isOn: $isOn)   // 표준 컴포넌트 사용이 가장 확실

Semantics(label: '알림 받기', toggled: isOn, onTap: toggle, child: customToggle)

<Pressable
  accessibilityRole="switch"
  accessibilityLabel="알림 받기"
  accessibilityState={{ checked: isOn }}
  onPress={() => setIsOn(!isOn)}
/>

사례

TalkBack: "알림 받기" (누를 수 있는지, 켜졌는지 알 수 없음)

TalkBack: "알림 받기, 스위치, 사용 중"
VoiceOver: "알림 받기, 켬, 버튼"

자주 하는 실수

• 이미지나 레이아웃에 클릭만 걸어 버튼 역할이 노출되지 않습니다.
• 탭, 체크박스, 스위치의 선택·체크 상태가 낭독되지 않거나 바뀌어도 갱신되지 않습니다.
• 슬라이더 값이 노출되지 않거나 화면낭독기 제스처로 조절할 수 없습니다.
• 웹뷰·크로스 플랫폼 컴포넌트가 보조기술에 아무 정보도 전달하지 않습니다.

검사 방법

• Android에서 TalkBack을 켜고 한 손가락 오른쪽/왼쪽 쓸기로 화면의 모든 요소를 차례로 탐색하며 낭독 내용을 확인합니다.
• iOS에서 VoiceOver를 켜고 오른쪽/왼쪽 쓸기로 모든 요소를 탐색하며 낭독 내용을 확인합니다.
• 모든 컨트롤에서 네임, 역할(버튼, 스위치, 탭 등), 값·상태(선택됨, 켬/끔, 현재 값)가 낭독되는지 확인합니다.
• 상태를 바꾼 뒤 바뀐 상태가 낭독되는지, 화면낭독기 제스처로 조작할 수 있는지 확인합니다.
• Android Accessibility Scanner, Xcode Accessibility Inspector 같은 자동 점검 도구로 1차 점검한 뒤, 결과를 반드시 보조기술로 다시 확인합니다.
• 인증 심사에서는 대표 화면과 주요 기능 흐름(로그인, 검색, 결제 등)을 실제 보조기술로 사용해 보며 이 항목을 판정하는 것이 일반적이므로, 같은 흐름으로 자체 점검합니다.

관련 ARIA

다른 지침의 대응 항목