dropzone 属性已被废弃，现代浏览器不支持且屏幕阅读器无法识别；应改用 tabindex、ARIA 属性与 dragover/drop 事件组合实现可访问拖拽功能。
别用 dropzone 属性，它已被废弃，现代浏览器不支持，屏幕阅读器完全读不到，写了等于白写。
为什么 dropzone 在实际项目里根本不能用
这个属性是 HTML5 早期的实验性功能，2022 年起主流浏览器（Chrome、Firefox、Safari）已停止实现，连基本的 dragenter 触发都不可靠。更关键的是：它不参与 ARIA 语义树，aria-label、aria-describedby 对它完全无效——不是“没写好”，而是浏览器压根不把它当可交互区域解析。
你看到的文档里还写着 dropzone="copy" 或 dropzone="move"，那些全是过时资料。真实环境里，加了这个属性既不会改变拖放行为，也不会提升可访问性，反而会误导团队成员以为“功能已覆盖”。
替代方案必须包含这三件事
要让拖拽区真正可用（键盘可聚焦、屏幕阅读器可读、移动端有 fallback），得手动组合以下能力：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
tabindex="0"：让元素能被键盘Tab聚焦，这是可访问性的起点 -
aria-label或aria-labelledby：明确告诉辅助技术“这是什么”，比如aria-label="拖拽 PDF 或图片上传" -
dragover+drop事件监听 +event.preventDefault()：阻止浏览器默认行为，否则根本进不了drop阶段
示例代码片段：
const dropArea = document.querySelector('.upload-drop');
dropArea.setAttribute('tabindex', '0');
dropArea.setAttribute('aria-label', '拖拽图片或 PDF 文件到这里上传');
dropArea.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！否则 drop 不触发
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
// 后续处理文件
});
移动端和键盘用户的隐藏坑
移动端没有 drag 系列事件，纯靠 drop 是无效的。必须提供点击 fallback：<input type="file" class="visually-hidden">，并用 JS 触发其 click()；同时保留 outline 样式（比如 outline: 2px solid #007aff），否则键盘用户根本不知道当前焦点在哪。
另外，aria-live="polite" 动态提示（如“松开鼠标即可上传”）必须挂到 document.body，且每次 dragenter 都要确保只存在一个提示节点——重复 append 会导致语音重复播报。
真正的难点不在“怎么拖”，而在“谁能看到、谁能操作、出错时是否知道”。dropzone 属性绕开了所有这些责任，所以它被淘汰不是偶然，是必然。
