aria-description 是 aria 1.2 新增属性，用于提供非关键的内联补充描述，不能替代 aria-label；后者定义可访问名称，前者仅附加说明，且必须与 aria-label 或天然名称共存才生效。

aria-description 是什么，它能替代 aria-label 吗？

aria-description 是 ARIA 1.2 新增的属性，用于为元素提供补充性、非关键的长文本描述。它不能替代 aria-label —— 后者定义的是元素的“可访问名称”（即屏幕阅读器读出的主名称），而 aria-description 只是附加说明，不参与命名计算。

• 屏幕阅读器通常在读完 aria-label 或元素默认名称后，再读 aria-description（取决于读屏软件和模式）
• 如果只写 aria-description 没写 aria-label，很多情况下屏幕阅读器根本不会读它（因为缺少可访问名称触发点）
• 它不支持 IE，仅现代浏览器（Chrome 92+、Firefox 89+、Safari 15.4+）支持，且需开启 ARIA 1.2 支持

怎么写才真正生效？关键写法和常见失效原因

必须确保目标元素有可访问名称，否则 aria-description 很可能被忽略：

• ✅ 正确组合：<button aria-label="上传文件" aria-description="支持 JPG、PNG、PDF，最大 10MB，上传后自动校验格式与病毒">点击上传</button>
• ❌ 失效写法：<div aria-description="这是侧边栏导航区域">...</div>（<div> 默认无语义、无可访问名称）<li>可修复方式：加 <code>role="region" + aria-labelledby，或改用 <aside></aside> 等语义化标签并配 aria-label

其他易错点：

• 值必须是纯字符串，不能直接写 HTML 标签（如 aria-description="<strong>重要</strong>" 会被当作文本字面量读出）
• 不要重复 aria-label 内容，它是补充，不是复述
• 避免放操作指令（如“按空格键确认”），这类应放在 aria-label 或 aria-describedby 关联的实时提示中

和 aria-describedby 有什么区别？什么时候该选哪个？

aria-description 和 aria-describedby 都提供描述，但机制不同：

• aria-describedby 引用的是页面内其他元素的 ID，适合复用、动态更新或含结构化内容（比如带段落、列表的说明区）
• aria-description 是直接内联字符串，适合简短、静态、无需复用的补充说明

选 aria-description 当：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
• 描述很短（建议 ≤ 200 字符），且不会随状态变化
• 不想额外写一个 <div id="desc-1"> 元素<li>目标元素已有明确 <code>aria-label 或天然名称（如 <input placeholder="邮箱地址">）

选 aria-describedby 当：

• 描述含换行、强调、链接等格式（可通过关联元素渲染）
• 多个控件共用同一段说明（避免重复字符串）
• 描述内容由 JS 动态生成或需局部更新（改 innerHTML 即可）

实际用时最容易被忽略的兼容性细节

即使代码写对了，也得注意运行时行为差异：

• Chrome + NVDA：会读 aria-description，但有时跳过（尤其在快速导航模式下）
• Safari + VoiceOver：需要手动启用“ARIA 1.2 支持”（系统设置 → 辅助功能 → VoiceOver → 高级 → 勾选“使用最新 ARIA 规范”）
• Firefox：对 aria-description 的支持较保守，部分版本仍优先走 aria-describedby 回退逻辑

所以，如果你的描述信息关键（比如安全提示、法律条款摘要），别只依赖 aria-description —— 至少同时提供视觉可见文本，并用 aria-describedby 关联，确保降级可用。

真实项目里，多数长描述还是得靠 aria-describedby + 独立 <div> 控制，<code>aria-description 更适合作为轻量补充。