검사항목 2.4 컨트롤의 충분한 크기
컨트롤의 터치 영역은 충분한 크기로 제공해야 한다.
필요성
버튼의 터치 간격이 좁고 버튼의 크기가 작으면 모든 사용자가 불편을 느끼게 된다.
특히 뇌병변, 뇌성마비 등 지체장애인은 상지의 움직임이 자유롭지 않고 손 떨림이 있어, 의도한 만큼 정확한 터치 동작을 취하기가 어렵다. 저시력 시각장애인도 터치 영역이 작으면 실수로 다른 영역을 잘못 누르는 경우가 많아진다. 따라서 의도하지 않은 영역을 터치하는 실수를 방지하기 위해 터치 영역을 충분한 크기로 제공하는 것이 매우 중요하다.
결제, 뱅킹 앱에서는 실수를 돌이킬 수 없는 경우가 많으므로 컨트롤의 크기가 매우 중요하다.
대상
- 지체장애 (상지)
- 저시력
체크리스트
- 터치 동작을 원활히 수행할 수 있도록 컨트롤 간 터치 간격을 유지하고, 컨트롤 크기는 가로와 세로 각 9mm 이상으로 제공하고 있는 지 확인
- 터치 영역의 주변에는 터치 동작이 없는 영역을 확보되지 않는 경우, 사용자가 실수로 다른 컨트롤을 터치하게 되므로 충분한 간격을 유지하고 있는지 확인
예외사항
- 쿼티 키보드 등 운영체제에서 제공하는 기본 사용자 인터페이스 컴포넌트는 예외로 한다.
테스트 방법
디바이스에서 직접 측정하는 경우
- 각 서비스에서 정한 기준 디바이스를 준비한다
- 기준 디바이스의 화면에서 자로 객체의 크기를 측정한다.
- 기능이 없는 간격이 충분하지 않아 사용자 의도와 다르게 다른 컨트롤이 눌리는 곳이 있는지 확인한다.
QA 지표
오류 수
- 컨트롤(터치 영역)의 크기가 가로/세로 모두 9mm 미만인 객체 수
- 9mm 이내의 공간에 2개 이상의 컨트롤이 배치된 수
- 기능이 없는 간격이 충분하지 않아 사용자 의도와 다르게 다른 컨트롤이 눌리는 객체 수
적용기술
- 컨트롤의 크기(터치 영역)는 9mm * 9mm 이상을 보장해야 한다.
- 터치 영역의 주변에는 터치 동작이 없는 영역을 확보해서 사용자가 실수로 다른 컨트롤을 터치하지 않도록 하는 것이 바람직하다.
디바이스별 9mm 환산크기 기준표
공식 : 9.0mm X (디바이스화면크기 / 5.7(디바이스화면크기)) = 환산크기
화면크기 | 디바이스 | 비율 | 9mm 환산크기 |
---|---|---|---|
4 inch (10.16cm) | 아이폰5S, 5C, SE | 70.2% | 6.3mm |
4.7 inch (11.938cm) | 아이폰6, 6S, 7 | 82.5% | 7.4mm |
5 inch (12.7cm) | 넥서스5, Pixel | 87.7% | 7.9mm |
5.1 inch (12.954cm) | 갤럭시S5, S6, S7 (edge) | 89.5% | 8.1mm |
5.2 inch (13.208cm) | 넥서스5X | 91.2% | 8.2mm |
5.3 inch (13.462cm) | G5 | 93.0% | 8.4mm |
5.5 inch (13.97cm) | 아이폰6+, 6S+, 7+, G4, Pixel XL | 96.5% | 8.7mm |
5.7 inch (14.478cm) | 갤럭시노트4, 노트5, 노트7, S6edge+, G6, V10, V20, 넥서스6P | 100% | 9.0mm |
관련 문서
- Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
- Providing adequate touch target size / Ensuring that touch targets are large enough to touch accurately without magnification