ARIA 접근성 가이드

WCAG 2.2 · 2. 운용의 용이성 · 2.5 입력 방식

2.5.5 대상 크기(향상)

Target Size (Enhanced)

포인터 입력 대상은 44×44 CSS 픽셀 이상이어야 합니다.

수준 AAAWCAG 2.1

한눈에 보기

성공 기준
2.5.5 대상 크기(향상)
수준
수준 AAA
원칙
2. 운용의 용이성
지침
2.5 입력 방식
도입
WCAG 2.1

요구 사항

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

  • 동등한 대상: 같은 페이지에 같은 기능을 하는 44×44 이상의 다른 대상이 있습니다.
  • 인라인: 대상이 문장이나 텍스트 블록 안에 있습니다(본문 속 링크).
  • 사용자 에이전트 제어: 대상 크기를 브라우저가 정하고 작성자가 바꾸지 않았습니다.
  • 필수: 특정 크기로 표시하는 것이 정보 전달에 필수입니다.

왜 필요한가요

손 떨림이 있거나 손가락이 큰 사용자, 움직이는 환경에서 한 손으로 쓰는 사용자도 정확하게 누를 수 있습니다.

도움받는 사용자

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

적용 방법

CSS
.icon-btn { min-width: 44px; min-height: 44px; }

아이콘이 작아도 padding으로 누를 수 있는 영역을 넓힙니다.

자주 하는 실수

  • 24px 아이콘 버튼에 여백 없이 아이콘 크기만큼만 누를 수 있습니다.

검사 방법

  • 개발자 도구로 버튼·링크 등 포인터 대상의 크기를 측정해 44×44 CSS 픽셀 이상인지 확인합니다(예외 확인).

참고 자료