如何通过HTML的aria-dropeffect属性设置拖放目标为复制或移动操作？

本文共计786个文字，预计阅读时间需要4分钟。

`aria-dropeffect 已被 W3C 正式弃用，现代浏览器不再支持它。因此，不应再用于标注拖放操作类型。

为什么不能用 aria-dropeffect

该属性在 ARIA 1.1 中就被标记为 Deprecated，ARIA 1.2 及后续版本已将其完全移除。主流浏览器（Chrome、Firefox、Safari、Edge）均不解析或暴露该属性，屏幕阅读器也不会据此播报“可复制”“可移动”等语义。

• 它从未在真实辅助技术中形成一致支持
• 规范明确建议用 dataTransfer.effectAllowed + drop 事件逻辑替代语义表达
• 设置 aria-dropeffect="copy" 不会产生任何可访问性收益，反而可能误导开发者以为功能已实现

真正起作用的替代方案：用 dataTransfer.effectAllowed 和视觉反馈

用户能否执行“复制”或“移动”，取决于拖动源设置的 effectAllowed 值，以及目标区域是否在 dragover 中调用 preventDefault() —— 这才是浏览器判定“此处可放置”的唯一依据。

• event.dataTransfer.effectAllowed = "copy" 表示只允许复制（拖动时鼠标显示“+”图标）
• event.dataTransfer.effectAllowed = "move" 表示只允许移动（鼠标显示“→”或禁用符号，依系统而定）
• event.dataTransfer.effectAllowed = "copyMove" 表示两者都允许（用户按 Ctrl 切换模式）
• 目标元素必须监听 dragover 并同步调用 event.preventDefault()，否则 drop 事件永远不会触发

如何向屏幕阅读器传达操作类型

不能靠废弃的 ARIA 属性，而要结合 aria-label、实时 aria-live 区域和状态变更提示：

立即学习“前端免费学习笔记（深入）”；

• 给拖放目标容器设置静态说明：aria-label="拖拽文件到这里上传（将自动复制）"
• 在 dragenter 时动态更新一个 aria-live="polite" 的隐藏消息区，例如：“松开鼠标可复制文件”
• 若支持多操作（如 Ctrl+拖动=复制，Shift+拖动=移动），需在 dragover 中检测修饰键并更新提示文本
• 避免使用 aria-dropeffect 或 aria-grabbed 等已弃用属性，它们已被现代辅助技术忽略

最易被忽略的一点：拖放的可访问性不取决于某个 ARIA 属性是否写上，而取决于是否提供了键盘可聚焦的目标、清晰的状态反馈、以及与 dataTransfer 行为严格同步的语义表达。写一堆废弃属性，不如确保 dragover 里真调用了 preventDefault()，且 aria-live 消息能准确反映当前允许的操作。