2.5.8 대상 크기(최소)

요구 사항

포인터 입력 대상의 크기는 최소 24×24 CSS 픽셀이어야 합니다. 다음은 예외입니다.

• 간격: 24×24보다 작은 대상이라도, 각 대상의 경계 상자 중심에 지름 24 CSS 픽셀의 원을 그렸을 때 그 원이 다른 대상이나 다른 작은 대상의 원과 겹치지 않으면 됩니다.
• 동등한 대상: 같은 페이지에서 이 기준을 만족하는 다른 대상으로 같은 기능을 쓸 수 있습니다.
• 인라인: 대상이 문장 안에 있거나, 텍스트 줄 높이 때문에 크기가 제한됩니다.
• 사용자 에이전트 제어: 대상 크기를 브라우저가 정하고 작성자가 바꾸지 않았습니다.
• 필수: 특정 크기·배치가 필수이거나 법적으로 요구됩니다(예: 지도의 위치 핀).

AAA인 2.5.5(44×44)보다 낮은 최소 기준입니다. 플랫폼 권장 크기(Apple 44pt, Android 48dp)를 따르면 대부분 자연스럽게 만족합니다.

왜 필요한가요

작은 버튼이 다닥다닥 붙어 있으면 손 떨림이 있는 사용자는 옆 버튼을 잘못 누르기 쉽습니다. 실수로 “삭제”를 누르거나 엉뚱한 페이지로 이동하는 일을 줄여 줍니다.

도움받는 사용자

• 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
• 저시력 사용자(화면 확대 사용자)
• 고령자
• 모바일 터치 사용자

적용 방법

• 아이콘 버튼은 min-width/min-height를 24px 이상(권장 44px)으로 줍니다.
• 작은 대상이 필요하면 대상 사이 간격을 넉넉히 둡니다.
• 페이지 번호, 별점, 닫기 버튼, 태그 삭제 버튼처럼 작은 대상이 모이는 곳을 특히 확인합니다.

.icon-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;          /* 아이콘보다 누를 수 있는 영역을 넓힙니다 */
}
.pagination a { min-width: 2.75rem; min-height: 2.75rem; }

사례

.tag-remove { width: 16px; height: 16px; margin: 0; }

.tag-remove { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; }

자주 하는 실수

• 16px 아이콘 버튼을 간격 없이 나란히 배치합니다.
• 페이지 번호 링크가 작고 서로 붙어 있습니다.
• 모달의 닫기(X) 버튼이 아이콘 크기만큼만 눌립니다.

검사 방법

• 개발자 도구로 버튼·링크·폼 컨트롤의 크기를 측정합니다.
• 24×24 미만인 대상은 중심에서 지름 24px 원을 그려 다른 대상과 겹치는지 확인합니다(접근성 검사 도구의 대상 크기 오버레이 활용).
• 예외(인라인 링크, 브라우저 기본 컨트롤 등)에 해당하는지 판단합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.5.8 (새 창)