aria-roledescription不能替代role，仅补充说明角色名称；适用于原生role已存在但默认名称不直观的场景，如role="slider"配aria-roledescription="音量条"，但不改变语义、不影响焦点与键盘行为。
aria-roledescription 不能替代 role，只起补充说明作用
它不会改变元素的语义角色，只是让屏幕阅读器在朗读时把原生或自定义 role 的名称替换成你写的更自然的词。比如一个 role="button" 的 div，默认被读作“button”，加了 aria-roledescription="发送消息" 后，可能读成“发送消息 button”（具体取决于读屏器实现）。它不解决“没 role 就识别不了”的根本问题，也不影响键盘行为或焦点管理。
哪些场景适合用 aria-roledescription
适用于原生 role 已存在、但默认名称对用户不够直观的情况，尤其是中文语境下翻译生硬或歧义时：
- 自定义滑块控件用了
role="slider"，但业务里叫“音量条”，可加aria-roledescription="音量条" - 用
role="tablist"做的导航栏，实际是“频道切换栏”，可加aria-roledescription="频道切换栏" - 一个
role="application"区域封装了复杂编辑器，加aria-roledescription="图文编辑器"比单纯读“application”更有意义
注意：不要用于原生语义已足够清晰的元素，比如 <button></button> 或 <input type="checkbox"> —— 浏览器会忽略它的 aria-roledescription，因为原生标签的 role 是不可覆盖的。
常见错误和兼容性限制
这个属性支持度有限，目前仅部分读屏器（如 NVDA 2023.3+、VoiceOver on macOS 13+）能稳定识别，JAWS 对它的处理尚不稳定。容易踩的坑包括：
- 写成
aria-role-description或roledescription—— 正确名必须是aria-roledescription - 值为空字符串或纯空格 —— 大多数读屏器会跳过，不报错但无效
- 配合未设置
role的元素使用 —— 比如给普通div加aria-roledescription="搜索框"，毫无作用，必须先有role="searchbox"或类似 - 值太长（超过 50 字）或含特殊符号（如「」、•）—— 部分读屏器截断或静音
和 aria-label / aria-labelledby 的关键区别
三者定位完全不同：
-
aria-label替换的是整个元素的“可访问名称”（accessible name），即读屏器聚焦时读出的主文本 -
aria-labelledby是引用页面中其他可见文本作为该元素的名称来源 -
aria-roledescription只修饰 role 名称本身，不参与可访问名称计算，也不影响焦点逻辑或表单提交
比如一个发送按钮：<button aria-label="发送私信" aria-roledescription="快捷操作按钮">→</button>，NVDA 可能读作“发送私信 快捷操作按钮 button”，而 VoiceOver 可能只读“发送私信”。实际效果依赖读屏器策略，不能当作主要无障碍手段依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
