사용자가 클릭, 터치 등의 방법으로 상호작용할 수 있는 화면상의 요소는 안정적으로 상호작용할 수 있을 정도로 커야 합니다. 머티리얼 디자인 접근성 가이드라인에 설명된 것처럼 이러한 요소의 너비 및 높이는 48dp 이상으로 지정하는 것이 좋습니다.
구현
뷰
Compose
디자인
터치 영역은 사용자 입력에 반응하는 영역을 포함하며 요소의 시각 경계 너머까지 확장됩니다. 아이콘 같은 요소는 24x24dp로 표시될 수 있으나 요소 주변의 패딩은 48x48dp로, 터치 영역 전체를 포함합니다. Jetpack Compose에서, Checkbox나 Switch 같은 Material 구성요소는 자동으로 패딩을 추가하여 최소 48x48dp가 되도록 합니다. 아주 작고 서로 가까이 있는 버튼과 같이 터치 가능한 영역이 겹치지 않으면 요소를 확장할 수 없는 경우도 있습니다.
터치 영역을 최소 48x48dp로 설정하고 8dp 이상의 공간으로 구분하여 정보의 밀도와 사용성이 균형을 이루도록 합니다. 화면 크기와 관계없이 터치 영역이 48x48dp이면 실제 크기는 약 9mm입니다. 터치스크린 객체에 권장되는 영역 크기는 7~10mm입니다.
예시는 머티리얼 디자인 접근성 가이드라인을 참조하세요.
테스트
앱의 사용자 인터페이스에 작은 터치 영역이 포함되지 않았는지 직접 확인하려면 다음 단계를 따르세요.
- 앱을 엽니다.
- 인터페이스 내의 클릭, 터치, 상호작용 가능한 모든 요소를 파악합니다.
- 각 요소의 크기가 48x48dp(약 9mm)인지 확인합니다.
Android의 자동 테스트 도구는 작은 터치 영역까지도 감지할 수 있습니다. 기기에서 앱을 수동으로 테스트하려면 Android용 접근성 검사기를 사용해 보세요. 자동 테스트를 이용하려면 Espresso 및 Robolectric에서 접근성 확인을 사용 설정하세요.