aria-roledescription仅用于修正角色名称朗读不准确问题，需配合合法role使用，不可替代role或与aria-label混用，且在部分读屏器中兼容性有限。
aria-roledescription 不是万能补丁，它只在原生语义正确但读屏播报不贴切时才该用；乱加反而干扰辅助技术理解。
什么时候该用 aria-roledescription？
它解决的是「角色名称朗读不准确」的问题，不是「角色缺失」的问题。比如一个用 <div> 实现的滑块，你已经正确设了 role="slider"，但 VoiceOver 默认读作“滑块”，而你的产品术语叫“调节条”，这时才轮到 aria-roledescription 出场。
常见适用场景：
- 自定义组件使用了标准 role（如
role="switch"、role="progressbar"），但业务中需用更具体/本地化的说法（如“开启开关”“加载进度条”） - 同一页面存在多个同类组件（如两个
role="region"），需靠描述区分用途（如“筛选条件区域”“结果预览区域”） - 原生语义已足够（如
<button>），但按钮功能高度上下文相关（如“撤回上一步操作按钮”），且无法用aria-label简洁表达意图
aria-roledescription 和 aria-label 别混用
aria-label 替换的是整个可访问名称（accessible name），会完全覆盖元素内容和 aria-labelledby；而 aria-roledescription 只追加在角色名之后，格式为「[名称]，[角色描述]」。例如：
立即学习“前端免费学习笔记（深入）”；
<button aria-roledescription="撤回操作">↺</button>
读屏器实际播报：“↺，撤回操作按钮”——注意，“按钮”这个词仍由 role 自动带出，不会被覆盖。
容易踩的坑：
- 给
<button>同时加aria-label和aria-roledescription：前者已提供完整名称，后者变成冗余甚至冲突 - 用
aria-roledescription代替role：它不能定义角色类型，必须配合合法 role 使用，否则无效 - 写成中文标点或空格开头（如
aria-roledescription=" —— 撤回"）：部分读屏器会跳过或截断
兼容性与实操限制
这个属性在主流读屏器中支持度尚可（NVDA 2023.1+、JAWS 2022+、VoiceOver macOS 13.3+），但在 Android TalkBack 和旧版 iOS 上表现不稳定，部分版本直接忽略。
关键约束：
- 值必须是纯字符串，不能含 HTML 或动态插入的占位符
- 长度建议控制在 20 字以内，过长会被截断或降低识别率
- 不可用于
role="none"或role="presentation"元素——它们本就不该有角色描述 - 若组件已有
aria-label或aria-labelledby，aria-roledescription仍生效，但播报顺序固定为「名称 + 角色 + 描述」，无法调整
最常被忽略的一点：它不触发任何 DOM 行为或状态同步，只是“说一句话”。如果组件视觉状态变了（比如开关从开变关），你仍得靠 aria-checked 或 aria-pressed 去同步状态，aria-roledescription 什么也干不了。
