더욱 접근성 높은 앱 만들기

접근성 기능이 필요한 사용자를 포함하여 모든 사용자가 Android 앱을 사용할 수 있도록 하세요.

시각 장애, 색맹, 청각 장애, 수동기민성 장애, 인지 장애가 있는 사용자를 비롯한 많은 장애인이 Android 기기를 사용합니다. 접근성을 염두에 두고 앱을 개발할 때는 접근성 기능이 필요한 사용자를 고려하여 사용자 환경을 개선해야 합니다.

이 페이지는 모든 사용자가 앱을 더 쉽게 사용할 수 있도록 접근성 기능의 핵심 요소를 구현하기 위한 가이드라인을 제시합니다. 앱의 접근성을 높이는 방법에 관한 자세한 내용은 앱 접근성 개선 원칙을 참고하세요.

텍스트 가시성 향상

앱 내의 텍스트 집합마다 색상 대비(텍스트 색상과 텍스트 뒤의 배경 색상 간의 인지 밝기 차이)가 특정 기준점 이상일 것을 권장합니다. 정확한 기준점은 텍스트의 글꼴 크기와 텍스트가 굵게 표시되는지 여부에 따라 다릅니다.

• 텍스트가 18sp보다 작거나, 텍스트가 굵고 14sp보다 작으면 색상 대비율이 4.5:1 이상인 전경색과 배경색을 사용합니다.
• 다른 텍스트의 경우에는 모두 색상 대비율을 3:1 이상으로 설정합니다.

다음 이미지는 텍스트와 배경 색상 대비의 두 가지 예를 보여줍니다.

앱에서 텍스트와 배경 색상 대비를 확인하려면 온라인 색상 대비 검사기 또는 접근성 검사기 앱을 사용하세요.

크고 간단한 컨트롤 사용

컨트롤을 더 쉽게 보고 탭할 수 있다면 앱의 UI를 더 쉽게 사용할 수 있습니다. 터치 인터페이스의 경우 상호작용이 가능한 각 UI 요소에는 48dpx48dp 이상의 포커스 가능 영역 또는 터치 영역 크기를 포함하는 것이 좋습니다. 크기는 클수록 더 좋습니다.

Jetpack Compose에서 Button, IconButton, ListItem과 같은 많은 기본 Material 구성요소는 이미 이 최소 크기를 적용합니다. 하지만 맞춤 상호작용 요소를 만들 때는 크기를 직접 설정해야 합니다.

다음 스니펫에서 작은 UI 요소에 더 큰 터치 영역을 제공하여 접근성을 높입니다.

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

터치 영역 크기에 관한 자세한 내용은 최소 터치 영역 크기를 참고하세요.

각 UI 요소 설명

앱의 UI 요소마다 요소의 목적에 관한 설명을 포함합니다. 대부분의 경우 다음 코드 스니펫과 같이 요소의 contentDescription 속성에 이 설명을 포함합니다.

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

Text 컴포저블에는 contentDescription을 제공할 필요가 없습니다. Android 접근성 서비스 (예: TalkBack)는 자동으로 텍스트 자체를 알립니다.

앱의 UI 요소에 설명을 추가할 때 다음 권장사항을 염두에 두시기 바랍니다.

• 설명을 사용하여 시각적 세부정보가 아닌 상호작용의 목적과 결과를 전달합니다. Role 시맨틱 속성 (Role.Button 또는 Role.Switch와 같은)을 사용하여 UI 요소의 유형을 노출합니다. 이렇게 하면 스크린 리더가 요소를 올바르게 알릴 수 있습니다.

• 설명에서 중복을 피합니다. 예를 들어 버튼을 선택하면 앱에서 '제출' 작업이 발생하는 경우 버튼의 설명을 "Submit"이 아닌 "Submit button"로 만듭니다.

• 각 설명은 고유해야 합니다. 그래야만 스크린 리더 사용자에게 요소 설명이 반복적으로 표시되는 경우 포커스가 이전에 이미 포커스가 있었던 요소에 있다는 것을 사용자가 올바로 인식할 수 있습니다. 특히 LazyColumn과 같은 목록 내의 각 항목에는 서로 다른 설명이 있어야 하며 각 설명은 위치 목록에 있는 도시 이름과 같이 특정 항목에 고유한 콘텐츠를 반영해야 합니다.

• hideFromAccessibility API를 사용하여 접근성 서비스가 무시할 수 있도록 순전히 장식적인 요소를 표시합니다. UI 요소에 contentDescription 매개변수가 있지만 순전히 장식적인 경우 (예: 다른 UI 요소의 일부인 Icon), 중복 라벨 지정을 피하기 위해 null을 전달합니다. 더 정교한 사용 사례는 병합 및 지우기를 참고하세요.

• 코드 테스트를 통해 콘텐츠 설명이 예상대로 전달되는지 확인합니다. Android Lint, Compose 테스트, 수동 및 자동 테스트 도구 는 일반적인 문제를 신고하고 구현 문제를 노출할 수 있습니다.

추가 리소스

앱의 접근성을 높이는 방법을 자세히 알아보려면 다음 추가 리소스를 참조하세요.

Codelab

• Jetpack Compose의 접근성

동영상

• Jetpack Compose로 접근성이 더 높은 UI 빌드

뷰 콘텐츠

• 더욱 접근성 높은 앱 만들기 (뷰)