role属性仅在原生HTML语义不足时补充逻辑角色，必须配合对应aria状态与行为，否则会误导辅助技术；安全常用值包括alert、dialog（需配aria-modal="true"）、navigation等。
role 属性不是用来“让元素变成功能”的，而是告诉辅助技术“这个元素在逻辑上是什么”。加了但没配套行为或状态，反而会让屏幕阅读器用户更困惑。
role 属性什么时候必须用？
只在原生 HTML 语义无法表达组件意图时才补 role：
- 用
<div>实现的下拉菜单 → 需要role="listbox"+aria-expanded+aria-activedescendant - 自定义模态框（非
<dialog>）→ 必须同时设role="dialog"和aria-modal="true" - 纯图标按钮（如
<svg>+<button>无文字）→ 补aria-label或aria-labelledby，role="button"反而冗余（<button>已有隐式 role） - 表格中动态插入的筛选行 → 不要给
<tr>加role="search"，这会破坏表格结构，触发aria-requires-children报错
哪些 role 值真安全、真常用？
WAI-ARIA 定义了 60+ 个 role，但日常开发中稳定、兼容、AT 支持好的不到 10 个。优先选这些：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
role="alert"：用于中断性提示（如表单校验失败），需配合aria-live="assertive" -
role="dialog"+aria-modal="true"：模态框标配，缺一不可 -
role="navigation"：包裹主导航，比仅用<nav>多一层老版本 JAWS 兼容保障 -
role="application"：慎用！它会让 VoiceOver/NVDA 切换到“应用模式”，键盘导航逻辑全变，普通网页加了反而难操作 -
role="status"：适合非中断性更新（如“已保存”），但注意：部分读屏器只读首次内容，应清空后重设，而非反复innerHTML赋值
常见踩坑点：role 加了但不起作用甚至起反作用
原因几乎都指向「语义与行为不一致」或「覆盖原生语义」：
立即学习“前端免费学习笔记（深入）”；
- 给
<button>加role="button"：冗余，可能干扰 AT 解析；想让它像链接跳转，该改 JS 逻辑，而不是骗读屏器 -
role="button"的<div>不响应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-* 状态/属性一起落地，否则就是半截路。
