aria-roledescription仅在原生role语义基本正确但读屏朗读过于笼统时微调角色名称，不改变元素身份或行为，兼容性差且易误用，多数场景应优先使用aria-label等更可靠方案。
aria-roledescription 不能替代 role，也不是“给 role 起别名”
它只在极少数场景下有用：当原生 role 语义基本正确，但读屏器朗读结果过于笼统、用户容易混淆时，用它做微调。比如 role="button" 默认读作“按钮”，但你实现的是一个“播放/暂停切换按钮”，加 aria-roledescription="播放暂停控制" 才能让 NVDA 或 VoiceOver 读成“播放暂停控制 按钮”。它不改变元素身份，也不触发任何行为或状态同步逻辑。
常见误用现象：
- 给
<button>加aria-roledescription试图覆盖默认语义——无效，<button>的 role 是隐含的，且不可覆盖 - 用它代替
aria-label或aria-labelledby来描述功能——错，aria-roledescription只修饰“角色类型”，不描述“这个按钮是干啥的” - 在 Safari + VoiceOver 下发现它不生效——正常，该属性支持度差，Chrome + NVDA 最稳定，Firefox 基本忽略
哪些 role 值配合 aria-roledescription 才可能被读出来
必须满足两个前提：role 值本身被读屏器识别为“可描述角色”，且浏览器未将其映射为更具体的原生语义。以下常见组合中，只有部分实际有效：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
role="region"+aria-roledescription="筛选条件"→ 可能读作“筛选条件 区域”（需配aria-labelledby否则无上下文） -
role="application"+aria-roledescription="绘图画布"→ 在部分读屏器中会叠加朗读 -
role="img"+aria-roledescription="信息图标"→ 比纯alt=""多一层语义提示，但不如直接写alt="信息图标"可靠 -
role="button"、role="link"、role="checkbox"等基础控件——几乎从不读出aria-roledescription，因为它们已有强共识名称
比 aria-roledescription 更可靠的做法
绝大多数时候，你应该放弃这个属性，转而用更成熟、兼容性更好的方式表达意图：
立即学习“前端免费学习笔记（深入）”；
- 优先用
aria-label或aria-labelledby：明确告诉用户“这是什么”，而不是“它像什么”。例如<div role="button" aria-label="关闭侧边栏"> - 用真实文本节点 + 视觉隐藏：比如
<span class="visually-hidden">播放暂停控制</span>，比依赖aria-roledescription更稳 - 对自定义组件，确保
role选型准确：用role="switch"而不是role="button"+aria-roledescription="开关"，前者自带状态同步和读屏器识别 - 避免在
<input type="range">或<select>上硬加aria-roledescription——原生控件已有完整语义，加了反而干扰
测试时最容易忽略的兼容性断层
aria-roledescription 在 iOS VoiceOver + Safari 中基本不触发朗读；Android TalkBack 对它的支持也极不稳定。这意味着你在 macOS + Chrome + NVDA 下测得再好，也无法代表真实用户环境。真正需要它的时候极少，一旦用了，必须手动在至少三套组合（Windows/NVDA、macOS/VoiceOver、Android/TalkBack）中验证是否真被读出。多数团队最后都删掉了它——不是因为不会写，而是因为它根本不可信。
