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>사례
스와이프와 함께 이전·다음 버튼 제공
<div class="gallery">
<button type="button">이전 사진</button>
<img src="1.jpg" alt="…">
<button type="button">다음 사진</button>
</div>핀치 줌으로만 확대
// pinch 이벤트로만 확대 배율 변경
el.addEventListener('gesturechange', zoom);자주 하는 실수
- 이미지 비교 슬라이더를 끌어야만 쓸 수 있습니다.
- 목록 순서 변경이 드래그 앤 드롭으로만 됩니다.
- 휴대폰 화면에서 두 손가락 탭이 필요한 기능에 대체 버튼이 없습니다.
검사 방법
- 스와이프, 드래그, 핀치, 그리기 등 여러 지점·경로가 필요한 기능을 찾습니다.
- 같은 기능을 한 번의 탭·클릭(버튼 등)으로 수행할 수 있는지 확인합니다.
- 필수적인 동작(서명 등)이나 브라우저·운영체제 제공 동작인지 판단해 예외 여부를 확인합니다.