모바일 앱 접근성 지침 · 5. 인식의 용이성 · 5.3 적응성

5.3.1 표의 구성

표는 이해하기 쉽게 구성해야 합니다. 표의 용도와 목적, 제목 셀과 내용 셀의 관계를 인식할 수 있어야 합니다.

KS X 3253:2025신규

한눈에 보기

검사 항목: 5.3.1 표의 구성
원칙: 5. 인식의 용이성
지침: 5.3 적응성
도입: KS X 3253:2025

요구 사항

표를 제공할 때는 표의 내용을 이해하는 데 필요한 정보를 함께 제공해야 합니다.

표의 용도와 목적을 알 수 있는 정보(예: 제목, 요약)를 제공합니다.
표의 셀은 제목 셀과 내용 셀의 관계를 인식할 수 있도록 제공합니다.

개정 내역: 2025년 개정에서 새로 추가된 검사 항목입니다.

왜 필요한가요

보조기술 사용자가 표에 들어갈 때 표의 용도를 알 수 있고, 내용 셀을 탐색하면서 대응하는 제목 셀을 함께 들을 수 있어 정보를 이해하기 쉽습니다.

도움받는 사용자

화면낭독기 사용자
인지장애인

적용 방법

네이티브 앱에는 HTML <table> 같은 표 요소가 없으므로, 플랫폼의 컬렉션 정보를 지정하거나 각 셀의 레이블에 제목을 포함해 관계를 전달합니다. 웹뷰라면 데이터 표 패턴처럼 <th>, scope, <caption>을 씁니다.

Android (Kotlin · View)

// 표 컨테이너: 행·열 개수 노출
ViewCompat.setAccessibilityDelegate(table, object : AccessibilityDelegateCompat() {
    override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.setCollectionInfo(
            AccessibilityNodeInfoCompat.CollectionInfoCompat.obtain(rows, cols, false))
    }
})
// 내용 셀: 제목 셀 정보를 포함한 설명
cell.contentDescription = "2월, 매출 150만 원"

Android (Jetpack Compose)

Column(Modifier.semantics { collectionInfo = CollectionInfo(rowCount = 3, columnCount = 2) }) {
    Text("월별 매출", Modifier.semantics { heading() })
    Row(Modifier.semantics(mergeDescendants = true) {
        collectionItemInfo = CollectionItemInfo(1, 1, 0, 1)
    }) { Text("2월"); Text("150만 원") }
}

iOS (Swift · UIKit)

// 행 단위로 묶고 제목 셀을 함께 읽히게 합니다.
rowView.isAccessibilityElement = true
rowView.accessibilityLabel = "2월"
rowView.accessibilityValue = "매출 150만 원, 전월 대비 25% 증가"
// 복잡한 표는 UIAccessibilityContainerDataTable 프로토콜로 행·열 머리글을 제공할 수 있습니다.

Flutter (Dart)

Semantics(
  label: '월별 매출 표, 3행 2열',
  child: Table(children: [
    TableRow(children: [Semantics(header: true, child: Text('월')), Semantics(header: true, child: Text('매출'))]),
    TableRow(children: [Text('2월'), Text('150만 원')]),
  ]),
)

사례

값만 연속해서 읽힘

비권장텍스트

TalkBack: "150만 원" → "90만 원" → "120만 원"
(어느 달의 값인지 알 수 없음)

제목과 함께 읽힘

권장텍스트

TalkBack: "월별 매출, 표, 3행 2열" → "2월, 매출 150만 원"

자주 하는 실수

표 제목이나 요약 없이 셀만 나열합니다.
내용 셀이 제목 셀 정보 없이 값만 읽혀 의미를 알 수 없습니다.
표를 이미지로만 제공하고 대체 텍스트로 내용을 전달하지 않습니다.

검사 방법

표가 있는 화면에서 TalkBack·VoiceOver로 표에 진입할 때 용도(제목·요약)를 알 수 있는지 확인합니다.
각 내용 셀을 탐색할 때 해당 행·열 제목을 함께 알 수 있는지 확인합니다.

다른 지침의 대응 항목

WCAG 1.3.1 정보와 관계 KWCAG 5.3.1 표의 구성

보기 설정