role属性仅在原生html语义不足时补充逻辑角色，必须配合对应aria状态与行为，否则会误导辅助技术；安全常用值包括alert、dialog（需配aria-modal="true"）、navigation等。

role 属性不是用来“让元素变成功能”的，而是告诉辅助技术“这个元素在逻辑上是什么”。加了但没配套行为或状态，反而会让屏幕阅读器用户更困惑。

role 属性什么时候必须用？

只在原生 HTML 语义无法表达组件意图时才补 role：

• 用 <div> 实现的下拉菜单 → 需要 <code>role="listbox" + aria-expanded + aria-activedescendant
• 自定义模态框（非 <dialog></dialog>）→ 必须同时设 role="dialog" 和 aria-modal="true"
• 纯图标按钮（如 <svg></svg> + <button></button> 无文字）→ 补 aria-label 或 aria-labelledby，role="button" 反而冗余（<button></button> 已有隐式 role）
• 表格中动态插入的筛选行 → 不要给 <tr> 加 <code>role="search"，这会破坏表格结构，触发 aria-requires-children 报错

  哪些 role 值真安全、真常用？

  WAI-ARIA 定义了 60+ 个 role，但日常开发中稳定、兼容、AT 支持好的不到 10 个。优先选这些：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • role="alert"：用于中断性提示（如表单校验失败），需配合 aria-live="assertive"
  • role="dialog" + aria-modal="true"：模态框标配，缺一不可
  • role="navigation"：包裹主导航，比仅用 <nav></nav> 多一层老版本 JAWS 兼容保障
  • role="application"：慎用！它会让 VoiceOver/NVDA 切换到“应用模式”，键盘导航逻辑全变，普通网页加了反而难操作
  • role="status"：适合非中断性更新（如“已保存”），但注意：部分读屏器只读首次内容，应清空后重设，而非反复 innerHTML 赋值

  常见踩坑点：role 加了但不起作用甚至起反作用

  原因几乎都指向「语义与行为不一致」或「覆盖原生语义」：

  • 给 <button></button> 加 role="button"：冗余，可能干扰 AT 解析；想让它像链接跳转，该改 JS 逻辑，而不是骗读屏器
  • role="button" 的 <div> 不响应 <code>Enter/Space、没 tabindex="0"、没视觉焦点反馈 → 读屏报“不可操作”，用户卡住
  • aria-hidden="true" 加在父容器上，子元素设 aria-hidden="false" 无效（继承强制隐藏）
  • 动态 JS 添加 role="alert"：IE11 几乎不识别，Safari + VoiceOver 可能不触发朗读 → 更可靠做法是提前写好 <div aria-live="polite"></div>，再往里注入文本

  最易被忽略的是：role 单独存在基本没意义。比如 role="treeitem" 不配 aria-expanded、aria-level、aria-setsize，读屏根本不知道它是否可展开、在第几层、兄弟节点有几个。所有 role 都得和对应 aria-* 状态/属性一起落地，否则就是半截路。