- 버튼/링크/카드를 더 클릭/터치/탭하기 쉽고, 잘못 누르지 않는 사이즈로 만들기
- "타겟 사이즈"를 부르는 명칭은 제각각 : 애플은 hit target, 구글 매터리얼은 Touch target, WAI는 target size, 구글 라이트하우스는 Tap Target, 디자인 커뮤니티에서는 Clickable Area
- WCAG기준 타겟 사이즈는 적어도 44 x 44 CSS 픽셀이상이어야 함 (안드로이드는 48x48)
- 그보다 작으면 터치 써클이 중첩되어 잘못된 클릭이 일어날수 있음
- Google Design for Driving 에서는 최소 76dp x 76dp
- 비쥬얼한 타겟 피드백을 주는게 좋음(엘리먼트에 테두리 혹은 배경 반전)
- 24x24 보다 작은 타겟의 경우 충분한 거리를 두는게 필요함 (Line Height : 1.4, Padding: 1rem 등 )
- ProgressBar도 Height를 키워서 충분한 터치공간을 주는게 좋음
- 같은 액션을 주는 객체 사이에는 Dead Target Area제거하기
-
:before 와 :after 같은 Pseudo 엘리먼트를 이용하여 타켓 사이즈를 더 크게 만들기
- label 에는 꼭 for 붙여서 타겟 사이즈 확장
- 체크박스는 padding-block 을 이용하여 타겟 사이즈 크게 만들기
- 버튼/텍스트 링크에도 padding
- 리스트 아이템에는 padding 과
display:flex로 전체 아이템 크기로 확장
- 타겟 사이즈 테스팅 방법 : DevTools 이용, CSS Outline 적용, Polypane 브라우저 사용