조작 가능

무엇을 요구하나요?

사용자가 누르는 요소(컨트롤)는 조작할 수 있을 만큼 크고, 이웃한 요소와 구분되어 있어야 합니다. 손 떨림이 있는 사용자, 고령자, 모바일에서 손가락으로 누르는 사용자는 작은 버튼을 정확히 누르기 어렵고 옆 버튼을 잘못 누르기 쉽습니다.

지침은 다음 두 가지를 바람직한 방법으로 안내합니다.

• 크기: 모든 콘트롤의 대각선 길이를 6.0mm 이상으로 제공
• 안쪽 여백: 링크·입력 칸·콘트롤 테두리 안쪽에 1픽셀 이상의 여백을 두고, 그 부분은 눌러도 반응하지 않게 해서 이웃한 콘트롤과 구분

실무에서는 누르는 영역을 넉넉히(모바일 기준 44px 안팎) 잡으면 여유 있게 만족합니다.

자주 틀리는 예

1. 아이콘 크기만 한 버튼

.icon-btn { width: 16px; height: 16px; padding: 0; }

.icon-btn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.icon-btn svg { width: 16px; height: 16px; } /* 아이콘은 작게, 누르는 영역은 크게 */

2. 다닥다닥 붙은 글자 링크

.pagination a { padding: 0; margin: 0 2px; }

.pagination a { display: inline-block; min-width: 40px; padding: 8px 10px; margin: 0 4px; text-align: center; }

3. 작은 체크박스·라디오

체크박스 자체를 키우기보다 label로 감싸서 글자를 눌러도 선택되게 하면 누르는 영역이 크게 늘어납니다.

<label class="check"><input type="checkbox" name="agree"> 약관에 동의합니다</label>

label 전체를 누르기 좋은 높이로 만듭니다.

.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }

확인하는 방법

1. 개발자 도구로 버튼·링크의 실제 크기와 간격을 확인하세요. 특히 닫기(✕), 이전/다음, 페이지 번호, SNS 아이콘을 살펴보세요.
2. 휴대폰에서 직접 눌러 보며 옆 요소를 잘못 누르는지 확인하세요.
3. 자동 검사(axe)에도 국제 기준(24px) 규칙이 있지만 문장 속 링크 등 예외가 많아 놓치는 경우가 많습니다. 크기는 직접 재어 보는 것이 확실합니다.