aria-dropeffect

설명

aria-dropeffect는 드래그 앤 드롭에서 놓을 대상(drop target)에 붙여, 끌어 온 객체를 놓았을 때 일어나는 동작을 알리던 속성입니다. aria-grabbed와 짝을 이루어 "집은 항목"과 "놓을 수 있는 곳"을 표현하도록 설계되었습니다.

이 속성은 ARIA 1.1에서 사용 중단(deprecated)되었고 ARIA 1.2에서도 같은 상태입니다. 명세는 향후 버전에서 새로운 기능으로 대체될 예정이니 사용 중단된 것으로 취급하라고 안내합니다. 주요 화면낭독기와 브라우저는 이 속성을 거의 지원하지 않았기 때문에, 넣더라도 사용자에게 전달되는 정보가 사실상 없습니다.

더 근본적인 이유는 이 속성이 정보를 전달할 뿐 조작 방법을 제공하지 않는다는 점입니다. 키보드 사용자나 화면낭독기 사용자는 마우스로 끌 수 없으므로, "여기에 놓으면 이동됩니다"라는 정보보다 끌지 않고도 같은 결과를 얻는 방법이 필요합니다. WCAG 2.2의 2.5.7 드래그 동작(AA)은 드래그로 하는 기능에 한 번의 포인터 동작으로 할 수 있는 대체 방법을 요구합니다.

대체 방법은 다음과 같습니다.

• 버튼으로 옮기기: 각 항목에 "위로 이동"·"아래로 이동" 버튼이나 "다른 목록으로 이동" 메뉴를 둡니다. 가장 단순하고 지원이 확실합니다.
• 키보드 조작 제공: APG "Rearrangeable Listbox" 예제처럼 listbox에서 항목을 선택한 뒤 버튼이나 단축키로 순서를 바꿉니다. 선택 상태는 aria-selected, 집기·놓기 상태가 필요하면 aria-pressed를 가진 토글 버튼으로 표현합니다.
• 결과 알리기: 이동이 끝나면 status 라이브 리전으로 "사과를 3번째로 옮겼습니다"처럼 알립니다(aria-live).
• 필요하면 이름·설명 보충: 사용 방법은 aria-describedby로, 단축키는 aria-keyshortcuts로 알립니다.

검수할 때는 이 속성이 남아 있다면 제거를 권고하고, 드래그 앤 드롭 기능이 키보드만으로도 실행되는지, 드래그 없이 클릭(탭)만으로 같은 결과를 얻을 수 있는지(WCAG 2.5.7), 결과가 화면낭독기에 안내되는지 확인합니다.

값

사용 예

<!-- 비권장: ARIA 1.1부터 사용 중단, 보조기술 지원 거의 없음 -->
<ul aria-label="할 일">
  <li draggable="true" aria-grabbed="true">보고서 작성</li>
</ul>
<ul aria-label="완료" aria-dropeffect="move">...</ul>

<ul aria-label="할 일">
  <li>
    보고서 작성
    <button type="button" aria-describedby="move-help">완료로 이동</button>
  </li>
</ul>
<p id="move-help" hidden>항목을 완료 목록으로 옮깁니다.</p>
<p role="status" id="move-status"></p>

function moveToDone(item) {
  doneList.appendChild(item);
  document.getElementById('move-status').textContent =
    item.firstChild.textContent.trim() + ' 항목을 완료로 옮겼습니다.';
}

화면낭독기에서는

사용 지침

사용할 수 있는 역할

전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-dropeffect (새 창)
• APG: Rearrangeable Listbox 예제 (새 창)
• WCAG 2.2 이해하기: 2.5.7 드래그 동작 (새 창)
• MDN: aria-dropeffect (새 창)