aria-grabbed

설명

aria-grabbed는 드래그 앤 드롭에서 끌 수 있는 항목에 붙여, 지금 집혀 있는지(true), 집을 수 있지만 집혀 있지 않은지(false), 끌 수 없는 항목인지(undefined)를 알리던 상태입니다. 놓을 대상에는 aria-dropeffect를 함께 쓰도록 설계되었습니다.

이 상태는 ARIA 1.1에서 사용 중단(deprecated)되었고 ARIA 1.2에서도 같습니다. 명세는 향후 새로운 기능으로 대체될 예정이라고 안내합니다. 실제 화면낭독기 지원도 거의 없어, 넣어도 대부분의 사용자는 "집힘" 상태를 듣지 못합니다.

드래그 앤 드롭의 접근성 문제는 상태 정보가 아니라 조작 방법에 있습니다. 키보드 사용자와 화면낭독기 사용자, 손 떨림이 있는 사용자는 정확한 드래그가 어렵습니다. WCAG 2.2의 2.5.7 드래그 동작(AA)은 드래그 없이 한 번의 포인터 동작으로 같은 기능을 할 수 있게 요구하고, 2.1.1 키보드(A)는 키보드만으로 조작할 수 있게 요구합니다.

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

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

검수할 때는 이 상태가 남아 있다면 제거를 권고하고, 항목 순서 바꾸기·목록 간 이동 같은 드래그 기능에 키보드·클릭 대체 수단이 있는지, "집기" 모드를 토글 버튼으로 만들었다면 aria-pressed가 상태와 함께 바뀌는지 확인합니다.

값

사용 예

<!-- 비권장: ARIA 1.1부터 사용 중단 -->
<li draggable="true" aria-grabbed="false">사과</li>

<ul aria-label="장보기 목록" id="shop">
  <li>
    <span>사과</span>
    <button type="button" aria-label="사과 위로 이동">↑</button>
    <button type="button" aria-label="사과 아래로 이동">↓</button>
  </li>
</ul>
<p role="status" id="shop-status"></p>

<button type="button" aria-pressed="false" aria-describedby="grab-help">사과 옮기기</button>
<p id="grab-help">누른 뒤 위·아래 방향키로 위치를 바꾸고, 다시 누르면 내려놓습니다.</p>

function moveUp(li) {
  const prev = li.previousElementSibling;
  if (!prev) return;
  li.parentNode.insertBefore(li, prev);
  const pos = [...li.parentNode.children].indexOf(li) + 1;
  document.getElementById('shop-status').textContent =
    li.querySelector('span').textContent + '을(를) ' + pos + '번째로 옮겼습니다.';
  li.querySelector('button').focus(); // 포커스 유지
}

화면낭독기에서는

사용 지침

사용할 수 있는 역할

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

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

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