클릭·터치 대상 크기와 간격 판정기

자동으로 확인하는 범위

• 직사각형 클릭 영역의 너비·높이 검증
• WCAG 2.2 AA 24 CSS px와 AAA 44 CSS px 결과 분리
• 인접 직사각형 중심 거리와 24px 원 중첩 검토
• 인라인·동등 기능·사용자 에이전트·필수 표현 예외는 수동 질문으로 전환

입력값과 단위

x, y

대상 좌상단의 CSS px 좌표

너비, 높이

아이콘 그림이 아닌 실제 hit area의 CSS px

예외 후보

인라인, 동등 기능, 사용자 에이전트 제어, 표현상 필수 여부

판정할 때 지키는 원칙

• 24×24 이상이면 WCAG 2.2 AA 크기 하위검사를 충족합니다.
• 작은 대상의 간격 조건은 대상 주위 24 CSS px 지름 원이 다른 대상 또는 작은 대상의 원과 겹치는지 모델링합니다.
• 44×44 AAA 조건과 AA 예외 결과를 같은 합격 배지로 합치지 않습니다.

자체 검증 도식

수정 전·후 예제

.icon-button { width: 16px; height: 16px; }

.icon-button { width: 24px; height: 24px; padding: 4px; }
.icon { width: 16px; height: 16px; }

.pager a { width: 20px; height: 20px; margin: 0; }

.pager a { min-width: 24px; min-height: 24px; }
.pager { gap: 8px; }

회귀 테스트와 검수 증거

아래 fixture는 실제 고객 사례가 아니라 판정 로직이 같은 입력에 같은 결과를 내는지 확인하는 공개 회귀 자료입니다. 현장 사용 경험으로 과장하지 않습니다.

대표 fixture 검증 기록

검사 환경

브라우저 및 테스트 환경: 대표 fixture 기반 자동 테스트 및 DOM 파서 검증; 실제 화면낭독기 수동 검사는 미검사

예상 결과

두 배치 모두 크기는 24px 미만이며, 간격 조건은 좌표에 따라 독립 결과를 냅니다.

자동 결과

24px 미만 대상에 대해 간격 조건 충족 여부를 기하학적 좌표 계산으로 판정합니다. (실제 모바일 손가락 터치 조작은 수동 검토 필요)

재검사 방법

같은 크기를 유지하고 좌표만 바꿔 간격 결과가 결정적으로 바뀌는지 확인합니다.

자동 결과 뒤에 남는 검사

• 실제 이벤트 hit area
• 반응형 재배치
• 손가락 조작과 예외 정당성

자동 판정의 한계

• pseudo-element와 이벤트 위임을 포함한 실제 hit area를 자동으로 판단하지 않습니다.
• 원형·불규칙 SVG의 정확한 클릭 모양을 자동으로 계산하지 않습니다.
• 줌 및 기기 밀도를 반영한 실제 mm 물리 크기를 측정하지 않습니다.
• 반응형 재배치, 겹침, z-index, pointer-events를 자동으로 식별하지 않습니다.
• 예외 조건의 의미적 정당성은 수동 검토로 판단합니다.

반드시 남는 수동 확인

• 입력한 사각형이 실제 이벤트를 받는 영역인가?
• 화면 폭과 확대가 달라져도 간격이 유지되는가?
• 인라인 또는 동등 기능 예외를 실제 문맥이 충족하는가?
• 손가락 조작 표본에서 오작동이 반복되지 않는가?

공식 상세 근거

• WCAG 2.2 Success Criterion 2.5.8 — Target Size (Minimum)
• WCAG 2.2 Success Criterion 2.5.5 — Target Size (Enhanced)

로직 버전 target-size-1.0.0 · 공개 검수일 2026-08-04 · 검수 책임 서호영 (운영·콘텐츠 검토 책임)

자주 묻는 질문