aria-dropeffect 已被 W3C 弃用且现代浏览器与屏幕阅读器均不支持,应改用 dataTransfer.effectAllowed 配合 dragover 中 preventDefault() 及 aria-live 动态提示实现可访问拖放。
已被 W3C 正式弃用,现代浏览器不支持它,也不应再用于标注拖放操作类型。
为什么不能用
该属性在 ARIA 1.1 中就被标记为
Deprecated
,ARIA 1.2 及后续版本已将其完全移除。主流浏览器(Chrome、Firefox、Safari、Edge)均不解析或暴露该属性,屏幕阅读器也不会据此播报“可复制”“可移动”等语义。
它从未在真实辅助技术中形成一致支持
规范明确建议用
+
事件逻辑替代语义表达
设置
不会产生任何可访问性收益,反而可能误导开发者以为功能已实现
真正起作用的替代方案:用
和视觉反馈
用户能否执行“复制”或“移动”,取决于拖动源设置的
值,以及目标区域是否在
中调用
—— 这才是浏览器判定“此处可放置”的唯一依据。
表示只允许复制(拖动时鼠标显示“+”图标)
表示只允许移动(鼠标显示“→”或禁用符号,依系统而定)
表示两者都允许(用户按 Ctrl 切换模式)
目标元素必须监听
并同步调用
,否则
事件永远不会触发
如何向屏幕阅读器传达操作类型
不能靠废弃的 ARIA 属性,而要结合
、实时
区域和状态变更提示:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
给拖放目标容器设置静态说明:
在
时动态更新一个
的隐藏消息区,例如:“松开鼠标可复制文件”
若支持多操作(如 Ctrl+拖动=复制,Shift+拖动=移动),需在
中检测修饰键并更新提示文本
避免使用
或
等已弃用属性,它们已被现代辅助技术忽略
最易被忽略的一点:拖放的可访问性不取决于某个 ARIA 属性是否写上,而取决于是否提供了键盘可聚焦的目标、清晰的状态反馈、以及与
行为严格同步的语义表达。写一堆废弃属性,不如确保
里真调用了
,且
消息能准确反映当前允许的操作。
aria-dropeffectaria-dropeffectdataTransfer.effectAlloweddroparia-dropeffect="copy"dataTransfer.effectAllowedeffectAlloweddragoverpreventDefault()event.dataTransfer.effectAllowed = "copy"event.dataTransfer.effectAllowed = "move"event.dataTransfer.effectAllowed = "copyMove"dragoverevent.preventDefault()droparia-labelaria-livearia-label="拖拽文件到这里上传(将自动复制)"dragenteraria-live="polite"dragoveraria-dropeffectaria-grabbeddataTransferdragoverpreventDefault()aria-live