모바일 앱 접근성 지침 · 5. 인식의 용이성 · 5.3 적응성
5.3.2 콘텐츠의 선형구조
콘텐츠는 보조기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 합니다.
KS X 3253:2025신규
한눈에 보기
- 검사 항목
- 5.3.2 콘텐츠의 선형구조
- 원칙
- 5. 인식의 용이성
- 지침
- 5.3 적응성
- 도입
- KS X 3253:2025
요구 사항
모바일 앱에서 제공하는 모든 콘텐츠는 보조기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 합니다. 화면의 시각적 배치와 관계없이, 보조기술이 읽는 순서(선형구조)가 내용을 이해할 수 있는 순서여야 합니다.
개정 내역: 2025년 개정에서 새로 추가된 검사 항목입니다.
왜 필요한가요
읽는 순서가 논리적이면 화면낭독기 사용자뿐 아니라 지적장애, 언어장애, 학습장애가 있는 사용자도 콘텐츠를 이해하기 쉽습니다.
도움받는 사용자
- 화면낭독기 사용자
- 지적·학습장애인
적용 방법
뷰 계층(코드상의 순서)을 읽는 순서와 일치시키는 것이 가장 좋습니다. 겹쳐 그리는 레이아웃(ConstraintLayout, ZStack 등)에서 순서가 어긋나면 탐색 순서를 명시합니다.
<!-- 제목 다음에 가격이 읽히도록 순서 지정 -->
<TextView android:id="@+id/title" android:accessibilityTraversalBefore="@id/price" />
<TextView android:id="@+id/price" />Box(Modifier.semantics { isTraversalGroup = true }) {
Text("상품명", Modifier.semantics { traversalIndex = 0f })
Text("12,000원", Modifier.semantics { traversalIndex = 1f })
}// 컨테이너의 접근성 요소 순서를 직접 지정
cardView.accessibilityElements = [titleLabel, priceLabel, buyButton]VStack {
Text("12,000원").accessibilitySortPriority(1)
Text("상품명").accessibilitySortPriority(2) // 값이 클수록 먼저 읽힘
}
.accessibilityElement(children: .contain)Semantics(sortKey: const OrdinalSortKey(0), child: Text('상품명'))
Semantics(sortKey: const OrdinalSortKey(1), child: Text('12,000원'))사례
시각 배치와 읽는 순서가 다름
화면: [상품명] [가격] [구매]
TalkBack: "구매, 버튼" → "12,000원" → "상품명"논리적인 읽기 순서
TalkBack: "상품명" → "12,000원" → "구매, 버튼"자주 하는 실수
- 화면을 겹쳐 그려 화면낭독기의 읽는 순서가 시각 순서와 뒤섞입니다.
- 설명 문구가 관련 입력 서식보다 한참 뒤에 읽힙니다.
- 하단 고정 버튼이 화면 내용보다 먼저 읽혀 맥락을 잃습니다.
검사 방법
- Android에서 TalkBack을 켜고 한 손가락 오른쪽/왼쪽 쓸기로 화면의 모든 요소를 차례로 탐색하며 낭독 내용을 확인합니다.
- iOS에서 VoiceOver를 켜고 오른쪽/왼쪽 쓸기로 모든 요소를 탐색하며 낭독 내용을 확인합니다.
- 한 손가락 쓸기로 읽는 순서가 화면의 논리적 순서(제목 → 본문 → 관련 컨트롤)와 일치하는지 확인합니다.