6.1.1 초점 이동과 표시

요구 사항

• 초점은 사용자가 예측할 수 있는 논리적인 순서(예: 왼쪽에서 오른쪽, 위에서 아래)로 이동해야 합니다.
• 초점은 화면에 보이지 않거나 논리적으로 의미가 없는 요소로 이동하지 않아야 합니다.
• 표시되는 초점 영역은 콘텐츠의 위치와 크기에 맞아야 합니다.
• 누르기 동작만으로 모든 기능을 쓰는 경우에도 초점 이동은 적절한 순서를 따라야 하며, 이 과정에서 조작이 불가능해지거나 갑작스러운 화면 전환이 일어나지 않아야 합니다.

표준은 다음 세부 요구를 둡니다.

• 초점 이동 순서 유지 — 이동 순서가 사용자가 예측하는 순서와 일치해야 합니다.
• 함정 또는 오류 방지 — 더 이상 조작할 수 없어 다음 컨트롤이나 이전 화면으로 초점을 옮길 수 없는 상태가 되지 않아야 합니다.
• 초점의 시각화 및 표시 — 초점을 받은 컨트롤은 시각적으로 구별되어야 하며, 초점을 받는 동안 그 표시가 유지되어야 합니다.
• 사용자가 실행하지 않은 콘텐츠 — 사용자가 띄우지 않은 콘텐츠(예: 자동으로 뜨는 배너, 고정 헤더)가 현재 초점이 있는 요소를 가리지 않아야 합니다.

개정 내역: 유지 — 2016판 「6.1 초점」

왜 필요한가요

화면낭독기 사용자는 주변 배치를 볼 수 없으므로 초점 순서가 논리적이어야 혼란 없이 조작할 수 있습니다. 초점이 눈에 보이면 저시력인, 고령자, 지체장애인(외부 키보드·스위치 사용자)도 현재 위치와 조작 가능 여부를 쉽게 알 수 있습니다.

도움받는 사용자

• 화면낭독기 사용자
• 외부 키보드·스위치 제어 사용자
• 저시력인
• 인지장애인

적용 방법

표준 컴포넌트를 쓰면 대부분 초점이 자동으로 적용됩니다. 직접 만든 컨트롤은 초점을 받을 수 있게 하고, 장식·숨김 요소는 초점에서 제외합니다. 모달이 열리면 초점을 모달 안으로 옮기고, 닫히면 원래 컨트롤로 돌려줍니다(키보드와 초점 참고).

// 카드 전체를 하나의 초점 단위로
card.isFocusable = true
card.contentDescription = "공지, 시스템 점검 안내, 10월 22일"
// 화면 전환 후 첫 요소로 초점 이동
title.post { title.performAccessibilityAction(AccessibilityNodeInfo.ACTION_ACCESSIBILITY_FOCUS, null) }
// 외부 키보드 초점 표시: 상태별 drawable(state_focused)로 테두리 제공

Row(Modifier.semantics(mergeDescendants = true) {}.clickable { open() }) {
    Text("시스템 점검 안내"); Text("10월 22일")
}

// 커스텀 모달을 띄운 뒤
modalView.accessibilityViewIsModal = true          // 뒤 화면 요소 탐색 차단
UIAccessibility.post(notification: .screenChanged, argument: modalTitleLabel)
// 닫을 때 원래 버튼으로 초점 복귀
UIAccessibility.post(notification: .layoutChanged, argument: openButton)

// 의미 단위로 묶고, 장식은 제외
MergeSemantics(child: ListTile(title: Text('시스템 점검 안내'), subtitle: Text('10월 22일')))
ExcludeSemantics(child: decorativeWidget)

const ref = useRef(null);
useEffect(() => {
  const tag = findNodeHandle(ref.current);
  if (tag) AccessibilityInfo.setAccessibilityFocus(tag);
}, [visible]);
<View accessible ref={ref} accessibilityViewIsModal>{/* 모달 내용 */}</View>

사례

팝업이 열려도 TalkBack 쓸기 시 팝업 뒤 화면의 메뉴가 읽힘

팝업 열림 → 초점이 팝업 제목으로 이동 → 팝업 안 요소만 탐색 → 닫으면 여는 버튼으로 복귀

자주 하는 실수

• 기능이 있는 사용자 정의 컨트롤에 초점이 가지 않습니다.
• 하나의 카드가 제목, 날짜, 아이콘으로 쪼개져 의미 없는 초점 이동이 반복됩니다.
• 화면에 보이지 않는 요소(닫힌 메뉴, 뒤 화면)에 초점이 갑니다.
• 팝업이나 바텀시트에서 빠져나올 수 없거나, 닫은 뒤 초점이 화면 맨 처음으로 돌아갑니다.
• 외부 키보드로 조작할 때 초점 표시가 없거나 고정 하단 바에 가려집니다.

검사 방법

• Android에서 TalkBack을 켜고 한 손가락 오른쪽/왼쪽 쓸기로 화면의 모든 요소를 차례로 탐색하며 낭독 내용을 확인합니다.
• iOS에서 VoiceOver를 켜고 오른쪽/왼쪽 쓸기로 모든 요소를 탐색하며 낭독 내용을 확인합니다.
• 의미·기능이 있는 모든 요소에 초점이 가고, 순서가 논리적이며, 숨겨진 요소로 가지 않는지 확인합니다.
• 팝업, 바텀시트, 메뉴를 열고 닫으며 초점이 갇히거나 사라지지 않는지 확인합니다.
• 블루투스 키보드를 연결해 Tab·방향키로 이동하며 초점 표시가 보이고 다른 콘텐츠에 가려지지 않는지 확인합니다.
• 인증 심사에서는 대표 화면과 주요 기능 흐름(로그인, 검색, 결제 등)을 실제 보조기술로 사용해 보며 이 항목을 판정하는 것이 일반적이므로, 같은 흐름으로 자체 점검합니다.

다른 지침의 대응 항목