HTML怎么标注拖拽区域可访问说明_HTML dropzone提示文本【介绍】-html教程-PHP中文网

dropzone属性已废弃且无可访问性支持，应改用dragover/drop事件配合tabindex="0"、aria-label和aria-live动态提示。

html怎么标注拖拽区域可访问说明_html dropzone提示文本【介绍】

dropzone 属性本身不支持可访问提示文本

HTML 的 dropzone 是个已被废弃的实验性属性，现代浏览器基本不支持，更不会读给屏幕阅读器听。它既不能触发语音朗读，也无法通过 aria-label 或 aria-describedby 补救——因为浏览器压根不把它当语义化交互区域处理。

常见错误现象：dropzone="copy file://" 写了但 NVDA/JAWS 完全没反应；用户用键盘 Tab 无法聚焦该区域；移动端也无拖拽反馈。

别再用 dropzone，它在 Chrome 81+、Firefox 90+ 已被移除
实际可用的替代方案是原生 dragover/drop 事件 + 手动添加 ARIA 状态
必须配合 tabindex="0" 才能让键盘用户聚焦到拖拽区

怎么让拖拽区对屏幕阅读器“可说”

核心思路：用 ARIA 把拖拽区域声明为一个“有操作意图的控件”，并动态更新状态。不是靠属性“标注”，而是靠 JS 主动管理 aria-live 和 aria-dropeffect（虽然后者已过时，但部分读屏仍识别）。

使用场景：文件上传卡片、编辑器内嵌拖拽区、表单附件区域。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

初始状态加 role="application" 或 role="region" + aria-label="拖拽图片或 PDF 文件到这里上传"
监听 dragenter 时设置 aria-live="polite" 区域并插入提示：“松开鼠标即可上传”，然后立即清空（避免重复播报）
不要用 aria-dropeffect="copy" —— WAI-ARIA 1.2 已弃用，且 Safari VoiceOver 完全忽略

const dropArea = document.querySelector('.upload-drop');
dropArea.setAttribute('tabindex', '0');
dropArea.setAttribute('aria-label', '拖拽图片或 PDF 文件到这里上传');
dropArea.addEventListener('dragenter', () => {
  const msg = document.getElementById('sr-msg') || document.createElement('div');
  msg.id = 'sr-msg';
  msg.className = 'sr-only';
  msg.setAttribute('aria-live', 'polite');
  msg.textContent = '松开鼠标即可上传';
  document.body.appendChild(msg);
});