더욱 접근성 높은 앱 만들기

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

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

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

텍스트 가시성 향상

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

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

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

컬러 배경에 'Text'라는 단어가 있는 두 가지 예 왼쪽 예는 텍스트와 배경 간의 색상 대비가 낮고 오른쪽 예는 색상 대비가 충분합니다.
그림 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)
        )
    }
}

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

각 UI 요소 설명

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

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

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

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

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

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

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

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

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

추가 리소스

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

Codelab

동영상

콘텐츠 보기