ARIA 접근성 가이드

KWCAG 2.2 · 6. 운용의 용이성 · 6.5 입력 방식

6.5.1 단일 포인터 입력 지원

다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 합니다.

KWCAG 2.2신규

한눈에 보기

검사 항목
6.5.1 단일 포인터 입력 지원
원칙
6. 운용의 용이성
지침
6.5 입력 방식
도입
KWCAG 2.2

요구 사항

두 개 이상의 손가락을 동시에 써야 하는 다중 포인터 동작(핀치 줌, 두 손가락 탭 등)이나 쓸어 넘기기 같은 경로기반 동작(스와이프, 끌기와 놓기, 그리기 등)으로 작동하는 모든 기능은 단일 포인터(한 손가락 탭, 마우스 클릭 등)로도 조작할 수 있어야 합니다.

예외

  • 필수적인 경우: 피아노 앱의 건반 동시 누르기, 서명처럼 그 동작이 반드시 필요한 경우
  • 운영체제, 사용자 에이전트(브라우저), 보조기기가 지원하는 동작(예: 운영체제의 두 손가락 스크롤)

KWCAG 2.2에서 새로 추가된 검사 항목입니다.

왜 필요한가요

한 손가락이나 헤드 포인터·마우스 스틱 같은 포인팅 장치만 쓸 수 있는 사용자, 손 떨림으로 정교한 경로를 그리기 어려운 사용자, 복잡한 동작을 이해하기 어려운 사용자도 같은 기능을 쓸 수 있어야 합니다.

도움받는 사용자

  • 지체장애인(한 손·스틱 포인터 사용자)
  • 손 떨림이 있는 사용자
  • 시각장애인
  • 인지장애·학습장애가 있는 사용자

적용 방법

지도 확대·축소에는 +/− 버튼, 스와이프 캐러셀에는 이전·다음 버튼, 끌어서 순서 바꾸기에는 위·아래 이동 버튼을 함께 둡니다.

제스처의 단일 포인터 대안
<div class="map" id="map" aria-label="매장 위치 지도"></div>
<div class="map-controls">
  <button type="button" aria-label="지도 확대">+</button>
  <button type="button" aria-label="지도 축소">−</button>
</div>

<li>3순위 항목
  <button type="button" aria-label="3순위 항목 위로 이동">▲</button>
  <button type="button" aria-label="3순위 항목 아래로 이동">▼</button>
</li>

사례

스와이프와 함께 이전·다음 버튼 제공

권장HTML
<div class="gallery">
  <button type="button">이전 사진</button>
  <img src="1.jpg" alt="…">
  <button type="button">다음 사진</button>
</div>

핀치 줌으로만 확대

비권장JavaScript
// pinch 이벤트로만 확대 배율 변경
el.addEventListener('gesturechange', zoom);

자주 하는 실수

  • 이미지 비교 슬라이더를 끌어야만 쓸 수 있습니다.
  • 목록 순서 변경이 드래그 앤 드롭으로만 됩니다.
  • 휴대폰 화면에서 두 손가락 탭이 필요한 기능에 대체 버튼이 없습니다.

검사 방법

  • 스와이프, 드래그, 핀치, 그리기 등 여러 지점·경로가 필요한 기능을 찾습니다.
  • 같은 기능을 한 번의 탭·클릭(버튼 등)으로 수행할 수 있는지 확인합니다.
  • 필수적인 동작(서명 등)이나 브라우저·운영체제 제공 동작인지 판단해 예외 여부를 확인합니다.

다른 지침의 대응 항목