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