2.5.7 드래그 동작

요구 사항

드래그 동작을 사용하는 모든 기능은 드래그 없이 단일 포인터(탭, 클릭)로도 할 수 있어야 합니다. 예외: 드래그가 필수인 경우(예: 자유 그리기), 또는 기능을 사용자 에이전트가 정하고 작성자가 수정하지 않은 경우(예: 브라우저 기본 <input type="range">).

이 기준은 포인터 조작에 대한 요구로, 키보드 지원(2.1.1)과는 별개입니다. 키보드로 조작할 수 있더라도 포인터 사용자가 드래그 없이 조작할 수 있는 방법이 있어야 합니다.

왜 필요한가요

누른 채로 정확히 끌어서 놓는 동작은 손 떨림, 근력 약화가 있는 사용자나 헤드 포인터·트랙볼·음성으로 포인터를 조작하는 사용자에게 매우 어렵거나 불가능합니다.

도움받는 사용자

• 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
• 헤드 포인터·트랙볼 사용자
• 음성 인식 사용자
• 고령자

적용 방법

• 정렬 목록: 각 항목에 [위로], [아래로] 버튼이나 “이동” 메뉴를 제공합니다.
• 칸반 보드: 카드를 선택한 뒤 이동할 칸을 누르는 방식, 또는 상태 선택 메뉴를 제공합니다.
• 슬라이더: 트랙의 원하는 지점을 클릭하면 값이 바뀌게 하거나, 값 입력 필드·[+]/[−] 버튼을 함께 둡니다.
• 파일 업로드: 끌어서 놓기 영역과 함께 [파일 선택] 버튼을 제공합니다.

<li>
  보고서 초안
  <button type="button" aria-label="보고서 초안 위로 이동">▲</button>
  <button type="button" aria-label="보고서 초안 아래로 이동">▼</button>
</li>

사례

<div class="dropzone">여기로 파일을 끌어다 놓으세요</div>

<div class="dropzone">
  <p>파일을 끌어다 놓거나</p>
  <label class="btn" for="f">파일 선택</label>
  <input type="file" id="f" class="sr-only">
</div>

자주 하는 실수

• 목록 순서를 드래그로만 바꿀 수 있습니다.
• 사용자 정의 슬라이더의 손잡이를 끌어야만 값을 바꿀 수 있습니다.
• 지도·캔버스를 끌어야만 이동할 수 있고 이동 버튼이 없습니다.

검사 방법

• 드래그로 동작하는 기능(정렬, 슬라이더, 지도 이동, 업로드, 칸반)을 찾습니다.
• 같은 기능을 클릭·탭만으로 할 수 있는지 확인합니다.
• 예외(필수, 브라우저 기본 컨트롤)에 해당하는지 판단합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.5.7 (새 창)