Compose로 접근성 높은 포커스 표시기 구현하기

Compose를 사용하여 키보드 포커스 표시기를 구현하는 방법 소개

접근성 가이드라인(Accessibility Guidelines)에 따라 포커스 표시기의 가시성을 높이는 방법 제시

Indication API와 DrawModifierNode를 활용하여 사용자 정의 포커스 표시기 구현

터치 모드(Touch Mode)에서 포커스 표시기를 숨기는 방법 설명

접근성(Accessibility)을 고려한 포커스 표시기 설계

본문은 웹 접근성 가이드라인(Web Content Accessibility Guidelines, WCAG)의 SC 2.4.13 Focus Appearance를 준수하는 포커스 표시기 구현을 강조한다. 이는 키보드 및 키보드 에뮬레이션 기기 사용자가 UI를 쉽게 탐색하도록 돕기 위함이다.

최소 두께 2픽셀 이상, 3:1 이상의 명암비(Contrast Ratio)를 충족해야 함

Android 기본 Ripple 효과는 기술적으로는 통과되지만, 가시성 개선 필요

Indication API와 DrawModifierNode를 활용하여 사용자 정의 스타일 적용

Indication API를 활용한 포커스 표시기 구현

Compose에서 사용자 정의 포커스 표시기를 구현하기 위해 Indication API를 활용한다. 이 API는 DrawModifierNode를 통해 복잡한 시각 효과를 그릴 수 있도록 지원한다.

Modifier, IndicationNodeFactory, DrawModifierNode를 사용하여 표시기 구현

FocusNode 클래스에서 interactionSource를 통해 포커스 상태 감지

drawContent()를 호출 후, isFocused 상태에 따라 표시기 그림

이러한 방식을 통해, 컴포즈 코드에서 표시기 사용을 간소화한다.

Modifier를 활용한 컴포넌트 통합

포커스 표시기 구현을 위해 Modifier를 활용하여 컴포넌트의 재사용성을 높인다. 특히, Button, TextField와 같이 자체 interactionSource를 가진 컴포넌트의 경우, Modifier.focusIndication()을 통해 간단하게 적용할 수 있다.

MutableInteractionSource를 생성하여 컴포넌트의 interactionSource로 전달

사용자 정의 컴포넌트의 경우, toggleable, clickable과 같은 Modifier에 interactionSource를 전달

Ripple 효과와 같은 시각적 피드백을 함께 제공하여 사용자 경험 향상