Accessibility 본문

14.1 컨트롤간 충분한 간격

컨트롤은 충분한 간격으로 배치하는 것이 바람직하다.

필요성

비장애인도 각 버튼간의 터치 간격이 좁게 되어 있고 버튼의 크기가 작으면 불편한데 뇌성마비 장애인의 경우 손 떨림 등이 많이 있고 이로 인하여 정확한 터치 동작을 취하기가 어렵다. 따라서 터치 동작을 원활히 수행할 수 있도록 터치 간격을 적절히 유지하는 것이 매우 중요하다. 저시력인의 경우도 터치 타겟이 작을 경우 많은 어려움을 겪게 되는데 특히 중요한 결제 정보를 입력하거나 은행용 모바일 애플리케이션을 사용하는 경우 실수로 잘못 터치하는 경우 되돌이킬 수 없는 문제가 발생할 수 도 있다.

대상

  • 지체장애
  • 저시력
  • 비장애

적용기술

  • 컨트롤 중심간의 간격은 13mm * 13mm 이상 권장 함
  • 선택해야 하는 컨트롤 영역의 크기는 8.5mm * 8.5mm 이상 권장 함
mm 단위 pixel 변환 표
mm px
13mm 49.1px
8.5mm 32.1px

검사방법 및 QA 지표 산정방법

iOS, Android
  • 사용자 의도와 무관하게 다른 컨트롤을 눌러지지 않는지 체크
  • 컨트롤 중심간의 간격이 13mm * 13mm 이상인지 체크
  • 선택해야 하는 컨트롤 영역 크기가 8.5mm * 8.5mm 이상인지 체크
오류수(건)
  • 컨트롤 중심간의 간격이 13mm * 13mm 미만인 컨트롤 수
  • 선택해야 하는 컨트롤 영역의 크기가 8.5mm * 8.5mm 미만인 경우 (쿼티 입력 등 운영체제에서 제공하는 기본 사용자 인터페이스의 경우에는 예외)

사례

오류사례

하단 메뉴바의 간격이 13mm 이상 유지하지 못함 (320의 해상도를 가지고 있는 기기의 경우 메뉴가 6개 이상이면 중심 간의 간격이 충분하지 않음)

오류사례이미지
개선방법

탭바 및 메뉴 아이콘 등은 한 줄에 6개 이하로 만들어야 함 (px로 환산시 약 98px 이상이면 13mm 간격을 유지할 수 있음)

우수사례

컨트롤 및 메뉴 간 충분한 간격(13mm 이상)을 유지하고 있음

우수사례이미지