6.5.2 포인터 입력 취소

요구 사항

단일 포인터 입력이 실수로 실행되는 것을 막기 위해 다음 중 하나 이상을 준수합니다.

• 다운 이벤트만으로 실행 금지: 누르는 순간(mousedown, touchstart 등)에 기능이 실행되지 않습니다.
• 중지 또는 실행 취소: 기능은 업 이벤트(떼는 순간)에 완료되고, 실행 전에 중지하거나 실행 후 취소할 수 있습니다.
• 되돌리기: 다운 이벤트로 실행된 기능은 업 이벤트로 되돌릴 수 있습니다.
• 필수적인 경우: 화면 피아노 건반, 슈팅 게임처럼 다운 이벤트가 반드시 필요한 경우는 예외입니다.

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

왜 필요한가요

손 떨림이 있거나 시력이 낮은 사용자는 원하지 않는 곳을 누르기 쉽습니다. 떼는 순간에 실행되면 누른 상태에서 손가락을 밖으로 옮겨 취소할 수 있어 실수가 줄어듭니다.

도움받는 사용자

• 손 떨림 등 운동 기능에 제약이 있는 사용자
• 저시력 사용자
• 인지장애가 있는 사용자
• 모든 터치스크린 사용자

적용 방법

click 이벤트를 사용하면 업 이벤트 시점에 실행되고, 포인터를 밖으로 옮겨 떼면 실행되지 않습니다. mousedown/pointerdown/touchstart에 중요한 동작을 연결하지 않습니다.

// 비권장: 누르는 순간 실행되어 취소할 수 없음
item.addEventListener('pointerdown', () => removeItem(item));

// 권장: click은 누른 뒤 같은 요소 위에서 뗄 때 실행됨
item.querySelector('.remove').addEventListener('click', () => {
  removeItem(item);
  showUndoToast('항목을 삭제했습니다.', () => restoreItem(item)); // 실행 후 되돌리기
});

끌어서 놓기는 놓는 위치가 원래 자리이거나 유효하지 않은 영역이면 동작을 취소하도록 구현합니다.

사례

deleteBtn.addEventListener('click', confirmDelete);

payBtn.addEventListener('pointerdown', pay);

자주 하는 실수

• 누르는 즉시 메뉴 항목이 실행되어 손가락을 떼기 전에 취소할 수 없습니다.
• 드래그 시작과 동시에 항목이 삭제됩니다.

검사 방법

• 버튼·링크를 누른 상태에서 포인터(손가락)를 밖으로 옮긴 뒤 떼어, 기능이 실행되지 않는지 확인합니다.
• 누르는 순간 실행되는 기능이 있다면 되돌리기·취소 수단이 있는지, 필수적인 경우인지 확인합니다.

다른 지침의 대응 항목