6.1.3 조작 가능

요구 사항

웹 페이지의 모든 이웃한 컨트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기로 제공해야 합니다.

• 컨트롤의 크기: 모든 컨트롤은 대각선 방향 길이 6.0mm 이상으로 제공하는 것이 바람직합니다.
• 안쪽 여백: 링크, 사용자 입력, 기타 컨트롤은 테두리 안쪽으로 1픽셀 이상의 여백을 두고, 그 여백에서는 위치 지정 도구 조작에 반응하지 않도록 구현하는 것이 바람직합니다.

WCAG 2.2의 2.5.8 타깃 크기(최소, 24×24 CSS 픽셀)와 목적은 같지만 측정 기준이 다릅니다.

왜 필요한가요

컨트롤이 작거나 너무 붙어 있으면 손 떨림이 있는 사용자, 터치스크린 사용자, 저시력 사용자가 원하는 컨트롤을 정확히 누르기 어렵습니다.

도움받는 사용자

• 손 떨림 등 운동 기능에 제약이 있는 사용자
• 터치스크린 사용자
• 저시력 사용자
• 고령자

적용 방법

작은 아이콘이라도 패딩으로 누를 수 있는 영역을 키웁니다. CSS 단위(1in = 96px)로 환산하면 대각선 6.0mm는 한 변이 약 16px인 정사각형에 해당하지만, 실제 물리적 크기는 기기 화면에 따라 달라집니다. 실무에서는 WCAG 2.5.8의 24×24px 이상, 터치 환경은 44px 안팎을 목표로 하면 여유가 있습니다.

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
.tag-list a { display: inline-block; padding: 6px 10px; margin: 4px; }

사례

<button type="button" class="icon-btn" aria-label="닫기">×</button>

<a href="/prev"><img src="prev.png" width="10" alt="이전"></a><a href="/next"><img src="next.png" width="10" alt="다음"></a>

자주 하는 실수

• 페이지 번호, 닫기(×) 버튼 등이 매우 작고 간격 없이 붙어 있습니다.
• 체크박스·라디오 버튼만 누를 수 있고 레이블을 눌러도 선택되지 않습니다.

검사 방법

• 컨트롤의 크기를 개발자 도구로 측정해 대각선 길이(실제 크기)를 확인합니다.
• 이웃한 컨트롤을 터치·클릭할 때 잘못 눌리지 않는지 확인합니다.
• 체크박스·라디오는 레이블을 눌러도 선택되는지 확인합니다.

다른 지침의 대응 항목