드래그 앤 드롭 속성 - by. UXKM

A11Y
WAI-ARIA
WAI-ARIA 상태 및 속성
드래그 앤 드롭 속성

요약 설명
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)에서 정의한 드래그 앤 드롭 속성(Drag-and-Drop Attributes) 속성은 사용자가 마우스나 터치를 사용하지 않고도 드래그 앤 드롭 기능을 활용할 수 있도록 돕습니다.
특히, 보조 기술을 사용하는 사용자에게 현재 인터페이스에서 발생하는 드래그 앤 드롭과 관련된 상태와 피드백을 제공하여 접근성을 크게 향상시킵니다.

W3C ARIA Drag-and-Drop Attributes
MDN: ARIA Drag & drop attributes

aria-dropeffect 속성(권장되지 않음)

요약 설명
aria-dropeffect 속성은 WAI-ARIA(WAI-Accessible Rich Internet Applications)에서 정의된 속성 중 하나로, 드래그 앤 드롭 인터페이스에서 사용자가 드래그 가능한 객체가 특정 드롭 영역에 놓였을 때 어떤 효과가 발생할지를 나타냅니다.
그러나, WAI-ARIA 1.2에서는 aria-dropeffect 속성이 더 이상 사용되지 않는 것으로 권장됩니다. 대신, HTML5의 네이티브 드래그 앤 드롭 이벤트와 속성을 사용하여 접근성을 관리하는 것이 좋습니다

WAI-ARIA 1.2 Specification (aria-dropeffect)
MDN Web Docs (aria-dropeffect)

aria-dropeffect 속성 값

WAI-ARIA 1.2에서는 aria-dropeffect 속성의 사용이 권장되지 않지만, 이 속성은 여전히 다음과 같은 값들을 가질 수 있습니다.

copy
드래그된 객체가 드롭되면 원본 객체가 복사됩니다.
move
드래그된 객체가 드롭되면 원본 객체가 이동됩니다.
link
드래그된 객체가 드롭되면 원본 객체에 대한 링크가 생성됩니다.
execute
드래그된 객체가 드롭되면 실행 액션이 발생합니다.
popup
드래그된 객체가 드롭되면 새 창이나 팝업이 생성됩니다.
none
드롭 효과가 발생하지 않음을 명시합니다.

연관된 HTML 태그 및 역할

연관된 태그
<div>, <span>, <p>, <li>, <ul>, <section>, <article> 등 대부분의 HTML 요소에서 사용 가능합니다.
연관된 역할
드롭 가능한 요소에 대해 사용될 수 있으며, group, region, listbox, grid, tree, tabpanel 등의 역할과 함께 사용할 수 있습니다.

사용 시 주의사항

더 이상 권장되지 않음
aria-dropeffect는 WAI-ARIA 1.2에서 사용을 피하는 것이 좋습니다. HTML5의 드래그 앤 드롭 API와 같은 네이티브 기능을 사용하는 것이 권장됩니다.
최신 접근성 표준 준수
최신 접근성 표준에 맞춰 드래그 앤 드롭 인터페이스를 설계하고, 가능한 경우 키보드 지원을 포함하는 것이 중요합니다.

예시

잘못된 예시

WAI-ARIA 1.2에서는 aria-dropeffect의 사용이 권장되지 않으므로, 이 속성을 사용하지 않는 것이 좋습니다.

									<div id="dropzone" aria-dropeffect="move">
										드롭 가능한 영역입니다.
									</div>

									<script>
										// 이 예시는 aria-dropeffect 사용을 보여주지만, 현대 접근성 표준에 맞지 않습니다.
										document.getElementById('dropzone').addEventListener('dragover', (event) => {
											event.preventDefault();
										});
										document.getElementById('dropzone').addEventListener('drop', (event) => {
											event.preventDefault();
											console.log('Object moved');
										});
									</script>

올바른 예시

이 예시에서는 aria-dropeffect 대신 HTML5의 네이티브 이벤트와 ARIA 역할 및 속성(role="region", aria-label)을 사용하여 접근성을 유지합니다.

									<div id="dropzone" role="region" aria-label="드롭 가능한 영역" ondragover="event.preventDefault()">
										드래그 앤 드롭을 사용해 파일을 여기에 업로드하세요.
									</div>

									<script>
										document.getElementById('dropzone').addEventListener('drop', (event) => {
											event.preventDefault();
											console.log('File dropped');
										});
									</script>

파일을 복사하는 드롭 효과 구현 예시

									<div id="copyzone" role="region" aria-label="복사할 수 있는 드롭 영역" ondragover="event.preventDefault()">
										파일을 여기에 드롭하여 복사하세요.
									</div>

									<script>
										document.getElementById('copyzone').addEventListener('drop', (event) => {
											event.preventDefault();
											console.log('File copied');
										});
									</script>

링크를 생성하는 드롭 효과 구현 예시

									<div id="linkzone" role="region" aria-label="링크 생성 가능한 드롭 영역" ondragover="event.preventDefault()">
										링크를 생성하려면 여기에 드롭하세요.
									</div>

									<script>
										document.getElementById('linkzone').addEventListener('drop', (event) => {
											event.preventDefault();
											console.log('Link created');
										});
									</script>

시멘틱 구조의 예시

이 구조는 접근성을 높이기 위해 HTML5 드래그 앤 드롭 API와 ARIA 속성을 사용하여 파일 드롭 영역을 구현한 예시입니다. aria-dropeffect 대신 최신 접근성 표준을 따릅니다.

									<section role="region" aria-labelledby="drop-title">
										<h2 id="drop-title">파일 드롭 영역</h2>
										<div id="dropzone" ondragover="event.preventDefault()" aria-label="여기에 파일을 드롭하세요">
											드래그 앤 드롭으로 파일을 업로드하세요.
										</div>
									</section>

									<script>
										document.getElementById('dropzone').addEventListener('drop', (event) => {
											event.preventDefault();
											console.log('File dropped');
										});
									</script>

aria-grabbed 상태(권장되지 않음)

요약 설명
aria-grabbed 속성은 WAI-ARIA(Accessible Rich Internet Applications)에서 정의된 속성 중 하나로, 드래그 앤 드롭 인터페이스에서 사용자가 특정 요소를 "잡았는지" (즉, 드래그 중인지) 여부를 나타냅니다. 이 속성은 주로 스크린 리더 사용자에게 현재 요소가 드래그되고 있는 상태임을 알리는 데 사용됩니다.
그러나, WAI-ARIA 1.2에서는 aria-grabbed 속성이 더 이상 권장되지 않습니다. 대신, HTML5 네이티브 드래그 앤 드롭 이벤트를 사용하는 것이 권장됩니다.

WAI-ARIA 1.2 Specification (aria-grabbed)
MDN Web Docs (aria-grabbed)

aria-grabbed 속성 값

true
요소가 현재 사용자가 "잡은" (드래그 중인) 상태임을 나타냅니다.
false
요소가 현재 "잡히지 않은" (드래그되지 않은) 상태임을 나타냅니다.
undefined
aria-grabbed 속성이 없으면, 기본적으로 요소가 드래그되지 않은 상태로 간주됩니다.

연관된 HTML 태그 및 역할

연관된 태그
<div>, <span>, <li>, <img>, <p>, <section>, <acticle> 등 대부분의 HTML 요소에서 사용 가능.
연관된 역할
드래그 가능한 요소와 관련하여 사용할 수 있으며, listitem, treeitem, gridcell, row, option 등의 역할과 함께 사용할 수 있습니다.

사용 시 주의사항

더 이상 권장되지 않음
aria-grabbed는 WAI-ARIA 1.2에서 사용을 피하는 것이 좋습니다. HTML5의 드래그 앤 드롭 API와 같은 네이티브 기능을 사용하는 것이 권장됩니다.
대체 방법
HTML5의 draggable 속성과 드래그 이벤트(dragstart, dragend 등)를 사용하여 드래그 상태를 처리하는 것이 더 나은 접근성 표준을 준수하는 방법입니다.

예시

잘못된 예시

WAI-ARIA 1.2에서 더 이상 aria-grabbed의 사용이 권장되지 않습니다. 대신 최신 HTML5 드래그 앤 드롭 API를 사용해야 합니다.

									<div id="draggable-item" aria-grabbed="true">
										이 항목을 드래그 중입니다.
									</div>

									<script>
										document.getElementById('draggable-item').addEventListener('dragend', () => {
											document.getElementById('draggable-item').setAttribute('aria-grabbed', 'false');
										});
									</script>

올바른 예시

이 예시에서는 aria-grabbed를 사용하지 않고 HTML5의 네이티브 드래그 앤 드롭 이벤트를 사용하여 드래그 상태를 관리합니다.

									<div id="draggable-item" draggable="true" aria-label="드래그 가능한 항목">
										이 항목을 드래그하세요.
									</div>

									<div id="dropzone" aria-label="드롭 가능한 영역" ondragover="event.preventDefault()">
										<p>여기에 드롭하세요.</p>
									</div>

									<script>
										const draggableItem = document.getElementById('draggable-item');
										const dropzone = document.getElementById('dropzone');

										draggableItem.addEventListener('dragstart', () => {
											draggableItem.setAttribute('aria-grabbed', 'true');
											draggableItem.style.opacity = '0.5'; // 드래그 중 아이템 반투명
										});

										draggableItem.addEventListener('dragend', () => {
											draggableItem.setAttribute('aria-grabbed', 'false');
											draggableItem.style.opacity = '1'; // 드래그 끝난 후 다시 불투명
										});

										dropzone.addEventListener('dragover', (event) => {
											event.preventDefault();
											dropzone.classList.add('drag-over'); // 드래그 중일 때 시각적 피드백
										});

										dropzone.addEventListener('dragleave', () => {
											dropzone.classList.remove('drag-over'); // 드래그가 영역을 벗어날 때
										});

										dropzone.addEventListener('drop', (event) => {
											event.preventDefault();
											dropzone.classList.remove('drag-over');
											dropzone.innerHTML = '<p>아이템이 성공적으로 드롭되었습니다!</p>';
											console.log('Item dropped');
										});
									</script>

드래그 상태를 나타내는 예시 (권장되지 않음)

WAI-ARIA 1.2에서는 이 방법이 더 이상 권장되지 않습니다.

									<div id="item" aria-grabbed="true">
										이 항목은 드래그 중입니다.
									</div>

									<script>
										document.getElementById('item').addEventListener('dragend', () => {
											document.getElementById('item').setAttribute('aria-grabbed', 'false');
										});
									</script>

HTML5 드래그 앤 드롭을 사용한 드래그 상태 관리 예시

이 예시는 최신 접근성을 고려한 구현 방법을 보여줍니다.

									<div id="draggable" draggable="true" aria-label="드래그 가능한 항목">
										이 항목을 드래그하세요.
									</div>

									<script>
										const draggable = document.getElementById('draggable');
										draggable.addEventListener('dragstart', () => {
											draggable.setAttribute('aria-grabbed', 'true');
										});
										draggable.addEventListener('dragend', () => {
											draggable.setAttribute('aria-grabbed', 'false');
										});
									</script>

시멘틱 구조의 예시

이 예시는 접근성을 고려한 드래그 앤 드롭 인터페이스를 구현하는 예시로, aria-grabbed 대신 HTML5 네이티브 드래그 앤 드롭 API를 사용합니다.

									<section role="region" aria-labelledby="drag-drop-section">
										<h2 id="drag-drop-section">드래그 앤 드롭 영역</h2>
										<div id="draggable" draggable="true" aria-label="드래그 가능한 항목">
											드래그하여 이동할 항목
										</div>
										<div id="dropzone" aria-label="드롭 가능한 영역" ondragover="event.preventDefault()">
											여기에 드롭하세요.
										</div>
									</section>

									<script>
										const draggable = document.getElementById('draggable');
										draggable.addEventListener('dragstart', () => {
											draggable.setAttribute('aria-grabbed', 'true');
										});
										draggable.addEventListener('dragend', () => {
											draggable.setAttribute('aria-grabbed', 'false');
										});
									</script>