Jetpack Compose의 접근성

접근성은 누구나 사용할 수 있는 포용적인 앱을 만드는 데 필수적입니다. Compose는 모든 사람이 앱을 사용할 수 있도록 하는 접근성이 뛰어난 UI를 빌드하기 위한 기반을 제공합니다.

주요 개념

  • 시맨틱: 접근성 서비스의 UI 요소의 의미를 나타내는 시스템입니다. 여기에는 설명, 상태, 사용자가 취할 수 있는 작업과 같은 속성이 포함됩니다.

  • 순회: TalkBack과 같은 접근성 서비스가 화면의 요소를 탐색하는 순서입니다. 이 순서를 맞춤설정하여 사용자 환경을 개선할 수 있습니다.

  • 접근성 작업: 클릭, 스크롤, 닫기 등 사용자가 UI 요소에서 실행할 수 있는 특정 작업입니다. 앱에서 접근성 서비스에 이를 전달합니다.

시작하기

Compose의 접근성 모델과 도구의 기반은 시맨틱입니다. 자세한 내용은 Compose의 시맨틱 가이드를 참고하세요.

앱을 개발할 때 Compose 앱의 접근성을 개선하려면 다음과 같은 주요 단계를 처음부터 염두에 두어야 합니다.

  • 최소 터치 영역 크기 고려: 클릭 가능한 요소 및 대화형 요소가 48dp 이상인지 확인합니다. 이는 Material Design 접근성 가이드라인을 준수합니다.
  • 클릭 라벨 추가: clickable에 직접 액세스할 수 없는 경우 clickable 수정자 또는 semantics 수정자를 사용하여 클릭 동작을 설명합니다.
  • 시각적 요소 설명: contentDescription 매개변수를 사용하여 아이콘과 이미지를 텍스트로 설명합니다. 장식 요소의 경우 contentDescription를 null로 설정합니다.
  • 제목 정의: semantics 수정자 속성을 사용하여 더 쉽게 탐색할 수 있도록 요소를 제목으로 표시합니다.
  • 순회 순서 제어: isTraversalGroup를 사용하여 함께 읽어야 하는 요소 그룹을 표시합니다. traversalIndex를 활용하여 이러한 그룹 내에서 요소 순서를 추가로 맞춤설정합니다.

자세한 내용은 전용 Compose 접근성 개선을 위한 주요 단계 가이드를 참고하세요.

도구

  • TalkBack: Android용 Google 스크린 리더입니다. 이를 활성화하여 보조 기술에 의존하는 사용자에게 앱의 시맨틱이 어떻게 작동하는지 테스트합니다.
  • Layout Inspector: 앱의 시맨틱 트리를 시각화하고 디버그합니다.
  • Compose 테스트 API: 시맨틱 요소와 상호작용하는 테스트를 작성하여 Compose UI의 접근성을 어설션합니다.

Codelab

Compose 코드의 접근성 지원에 관한 자세한 내용은 Jetpack Compose의 접근성 Codelab을 참고하세요.

추가 리소스