터치 대상
24px 버튼은 충분할까? 클릭 영역과 아이콘 크기 구분하기
WCAG 2.2 성공 기준 2.5.8(Target Size Minimum)과 WCAG 2.1 2.5.5(Target Size)의 차이, 시각적 아이콘 크기와 실제 클릭 영역(Hit Area) 확장 구현법을 분석합니다.
실무 검증 기록
실무 판단 기준 및 판정 조건
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 기반 재현 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 터치 대상 클릭 영역(Hit Area) vs 아이콘 크기 분리 검증 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 시각 아이콘 크기와 실제 조작 영역을 혼동 ➔ [수정 목표] getBoundingClientRect()와 실제 터치 영역을 별도 기록 |
검증에 사용된 실제 픽스처 / 재현 조건
16px SVG를 포함한 24px button- 부모 요소의 CSS overflow:hidden 또는 clip-path에 의한 실제 터치 불가 영역은 DOM 좌표 분석 병행 필요
- CSS transform: scale() 축소 변환 시 렌더링 좌표 변화 추적 한계
24×24px 크기의 버튼 내부에 16×16px 크기의 작은 SVG 아이콘이 배치된 경우, 시각적인 아이콘 크기만 보고 대상 크기 기준에 미달한다고 오판하거나 반대로 클릭 가능한 실제 조작 영역(Bounding Box)을 측정하지 않는 오류가 발생합니다. 시각적 그래픽 크기와 getBoundingClientRect() 기반 조작 영역의 분리 측정 원리를 분석합니다.
WCAG 2.2 SC 2.5.8 (24px) vs WCAG 2.1 SC 2.5.5 (44px) 차이점
WCAG 2.1의 성공 기준 2.5.5 (Target Size)는 Level AAA 기준으로 44x44 CSS px 이상의 터치 영역을 권장했습니다. 반면 WCAG 2.2에서 신규 도입된 성공 기준 2.5.8 (Target Size Minimum)은 Level AA 준수 요구사항으로 최소 24x24 CSS px 크기를 의무화합니다.
24x24 CSS px 규정은 아이콘 자체의 시각적 크기만을 의미하지 않습니다. 요소의 Bounding Client Rect가 최소 24px 직경 이상이거나, 인접 터치 대상과의 간격을 합산한 여백 직경이 24px 오프셋을 충족해야 합니다.
시각적 크기와 클릭 영역(Hit Area) 분리 기술
디자인 요구사항으로 인해 16x16px 또는 20x20px 크기의 작은 아이콘 버튼을 배치해야 할 때, 시각적 크기를 유지하면서 클릭 영역만 24px 또는 44px로 확장해야 합니다.
CSS padding을 적용하거나, button::before 가상 요소를 생성하여 inset: -8px 여백을 부여하는 방식으로 시각 디자인 변경 없이 클릭 가능 영역(Hit Area)을 확장할 수 있습니다.
CSS 기반 클릭 영역 확장 구현 코드
다음은 시각적 16px 아이콘의 클릭 반응 영역을 24px 이상으로 확장하는 권장 CSS 패턴입니다.
- padding 방식: button { width: 16px; height: 16px; padding: 4px; box-sizing: content-box; }
- 가상 요소 방식: button { position: relative; width: 16px; height: 16px; } button::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; }
실무 판단 흐름 및 적용 순서
- 개발자 도구(Inspect Element)로 모바일 인터페이스 내 주요 버튼 요소의 getBoundingClientRect() 크기를 측정합니다.
- 24x24px 미만인 아이콘 버튼 요소를 파악합니다.
- CSS padding 또는 ::before 가상 요소를 추가하여 렌더링 타깃 영역을 최소 24px 이상으로 수정합니다.
예외 조건 및 수동 검토 범위
- 인라인 텍스트 문장 내부의 텍스트 링크는 WCAG 2.5.8 인라인 예외(Inline Exception)가 적용되므로 24px 크기 강제 대상이 아닙니다.
- 실제 손가락 터치 정확도는 기기 화면의 물리적 밀도(DPI)와 터치 센서 오차에 영향을 받으므로 44×44px 이상을 권장합니다.
실무 핵심 질문과 답변 (FAQ)
16px 아이콘 버튼도 CSS 여백으로 터치 영역을 24px로 만들면 통과되나요?
네, WCAG 2.2 SC 2.5.8 규정은 아이콘의 시각적 크기가 아닌 실제 터치 반응 영역(Hit Area)의 Bounding Box 크기를 판단하므로 CSS padding 또는 ::before 가상 요소로 24px 이상을 확보하면 합격입니다. FAQ 전체 보기
WCAG 2.2의 24px 기준과 WCAG 2.1의 44px 기준의 차이는 무엇인가요?
WCAG 2.2 SC 2.5.8(Target Size Minimum)은 Level AA 의무 준수 기준(24x24 CSS px)이며, WCAG 2.1 SC 2.5.5(Target Size)는 Level AAA 권장 최고 수준 기준(44x44 CSS px)입니다. FAQ 전체 보기
문장 안에 포함된 텍스트 링크도 24px 터치 크기를 맞춰야 하나요?
아닙니다. 문단이나 문장 내부에 인라인(Inline)으로 들어간 텍스트 링크는 WCAG 2.2 SC 2.5.8의 Inline Exception(인라인 예외) 항목에 해당하여 24px 최소 크기 규정이 적용되지 않습니다. FAQ 전체 보기