aria-roledescription仅在标准role不足以表达具体业务含义时使用，如“夜间模式开关”按钮；不可替代role或aria-label，且须配合合法role、避免用于核心功能提示。
aria-roledescription 什么时候该用，什么时候不该用
它不是用来替代 role 的，而是给已有语义角色“加注释”的——仅当标准 ARIA role（比如 button、slider）不足以表达控件的**具体业务含义**时才考虑。例如一个切换“夜间模式”的按钮，语义是 button，但光说“按钮”没说明用途；加 aria-roledescription="夜间模式开关"，屏幕阅读器会读成“夜间模式开关 按钮”。
常见误用：给 div 加 role="button" 再配 aria-roledescription——这不如直接用原生 button 元素，既语义正确又无需额外描述。
- ✅ 合理场景：自定义日历组件中的“今日按钮”，role 是
button，描述设为"跳转到今天日期" - ❌ 不合理场景：给纯展示的
span加aria-roledescription却不设role—— 屏幕阅读器根本不会把它当控件，描述无效 - ⚠️ 注意：ChromeVox 和部分旧版 NVDA 对该属性支持较弱，不能依赖它传递核心功能信息
语法和取值限制必须严格遵守
aria-roledescription 的值是纯字符串，不能含 HTML 标签、不能有换行、不能为空，且长度建议控制在 30 字以内。过长会导致截断或读出异常。
实操中容易忽略的是：它只对设置了有效 role 的元素生效，且该 role 必须是 WAI-ARIA 规范中定义的可命名角色（如 button、checkbox、combobox 等），像 role="presentation" 或未定义的 role="mywidget" 都不支持。
- ✅ 正确：
<button role="button" aria-roledescription="音量调节滑块">?</button> - ❌ 错误：
<div aria-roledescription="搜索框"></div>（缺role） - ❌ 错误：
<input type="text" role="textbox" aria-roledescription="请输入用户名和密码">（描述混淆了多个字段，且超出单控件职责）
与 aria-label / aria-labelledby 的区别和协作方式
aria-roledescription 只修饰“角色类型”，不替代名称（name）。控件的可访问名称仍由 aria-label、aria-labelledby 或原生标签（如 label for）决定。三者组合读出来是：“[名称] [角色描述] [角色名]”，顺序固定。
比如：<button aria-label="静音" role="button" aria-roledescription="音频状态切换"></button>，主流读屏会读作“静音 音频状态切换 按钮”。如果去掉 aria-label，只靠视觉图标，那么“静音”这个关键信息就丢失了——aria-roledescription 填不回这个空。
- 名称（name）决定“这是什么内容”，必须存在且准确
- 角色（role）决定“这是什么类型控件”，必须合法且必要
- 角色描述（roledescription）只是补充“它在这个上下文里具体干什么”，属于锦上添花，非必需
- 不要用它绕过写
aria-label的责任
浏览器和读屏兼容性现状很现实
目前只有较新版本的 Chrome + NVDA、Safari + VoiceOver 支持稳定读出 aria-roledescription，JAWS 2022+ 才开始有限支持，而旧版 JAWS、Orca 和部分移动读屏基本忽略该属性。这意味着：它不能用于传达关键操作意图，比如“删除”“提交”“退出登录”这类动作词，必须通过 aria-label 或可见文本体现。
- ✅ 可用：增强理解，如把“播放”按钮描述为“播放当前播客集数”
- ❌ 不可用：替代动作提示，如把“×”图标仅靠
aria-roledescription="关闭"而无aria-label - ? 测试建议：用 NVDA + Firefox 和 VoiceOver + Safari 实际听一遍，别只信文档
真正起作用的永远是 name + role 的组合，aria-roledescription 是个窄带增强项，用之前先确认它解决的是真问题，而不是掩盖语义缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
