Compose 접근성 가이드 — a11y-Ready UI 구축

Source: Dev.to

소개

접근성은 선택 사항이 아닙니다. Jetpack Compose는 포괄적인 인터페이스를 구축하기 위한 강력한 도구를 제공합니다.

코드 예시

Image(
    painter = painterResource(R.drawable.ic_profile),
    contentDescription = "User profile picture"
)

Icon(
    imageVector = Icons.Filled.Check,
    contentDescription = "Task completed"
)

규칙: 장식용이 아닌 모든 이미지는 설명이 필요합니다.

Text(
    text = "Settings",
    modifier = Modifier.semantics {
        heading()
    }
)

Button(
    onClick = { },
    modifier = Modifier.semantics {
        role = Role.Button
        stateDescription = "Enabled"
    }
) {
    Text("Submit")
}

Card(
    modifier = Modifier.semantics(mergeDescendants = true) {
        contentDescription = "User card: Alice, 5 followers"
    }
) {
    Column {
        Text("Alice")
        Text("5 followers")
    }
}

스크린 리더는 각 자식 대신 병합된 설명을 읽습니다.

Button(
    modifier = Modifier.semantics {
        customActions = listOf(
            CustomAccessibilityAction("Swipe left to delete") { true }
        )
    },
    onClick = { }
) {
    Text("Delete")
}

제스처 기반 상호작용에 대한 키보드 대안을 제공합니다.

Text(
    text = "Loading: $progress%",
    modifier = Modifier.semantics {
        liveRegion = LiveRegionMode.Assertive
    }
)

변경 사항을 스크린 리더에 알립니다.

Button(
    modifier = Modifier.size(48.dp),
    onClick = { }
) {
    Text("Tap")
}

터치 대상은 최소 48 dp( WCAG 2.1 기준)이어야 합니다.

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    modifier = Modifier.semantics {
        contentDescription = "Email address required"
        error = if (email.isEmpty()) "Email cannot be empty" else null
    }
)

폼 검증을 위해 오류 시맨틱을 포함합니다.

체크리스트

• ✓ 모든 이미지에 contentDescription이 있음
• ✓ semantics { heading() } 로 마크된 헤딩
• ✓ 카드에 mergeDescendants = true 사용
• ✓ 최소 48 dp 터치 대상 확보
• ✓ 동적 업데이트에 liveRegion 사용
• ✓ 폼에 오류 시맨틱 포함
• ✓ TalkBack(안드로이드) 또는 VoiceOver(iOS) 로 테스트

결론

접근성은 모두에게 이점을 제공합니다: 더 나은 스크린 리더 지원, 명확한 시맨틱, 향상된 사용성. 처음부터 포괄적으로 설계하세요.

모바일 앱 개발에 관심이 있나요? Gumroad에서 8개의 Android 앱 템플릿을 확인해 보세요!