role属性仅在原生html语义不足时补充逻辑角色，必须配合对应aria状态与行为，否则会误导辅助技术；安全常用值包括alert、dialog（需配aria-modal="true"）、navigation等。
WAI-ARIA role 属性不能替代语义化 HTML 元素，它只是在无法使用原生语义标签时的补救手段；滥用或覆盖原生语义反而会让屏幕阅读器更困惑。
什么时候必须用 role？
只有当 HTML 没有对应语义元素、且组件行为已超出默认可访问范围时才考虑。比如自定义下拉菜单、树形控件、实时更新的仪表盘区域。
常见误用场景：
- 给
<button></button>加role="button"—— 原生按钮已有完整角色和键盘行为，加了反而可能干扰焦点管理 - 用
<div role="navigation"> 包裹导航栏，却不提供 <code>aria-label或aria-labelledby—— 屏幕阅读器只读出“navigation”，无法说明这是“主菜单”还是“页脚链接” - 对
<table> 手动添加 <code>role="grid"—— 表格本身已有明确语义，加 grid 会覆盖默认表格遍历逻辑，导致表头关联失效role和原生元素冲突的典型表现浏览器会按优先级处理语义：原生 HTML 元素语义 > ARIA
role> ARIAaria-*属性。但某些组合会触发未定义行为。例如：
-
<input type="checkbox" role="switch">：Chrome + NVDA 下可能读作“switch”，但空格键无法切换状态（switch要求手动实现aria-checked和键盘事件） -
<h2 role="heading" aria-level="3"></h2>：冗余，<h2></h2>已隐含 level=2，强行设为 3 会导致大纲错乱 -
<ul role="listbox"></ul>：列表框需要tabindex、方向键支持、aria-activedescendant等一整套逻辑，仅改 role 不足以满足可访问性要求
哪些
role值必须配aria-*属性？部分
role是“抽象角色”或“复合角色”，单独使用无效，屏幕阅读器直接忽略。必须搭配的最小属性集：
-
role="dialog"→ 至少需aria-modal="true"或aria-labelledby（否则不被识别为模态对话框） -
role="tree"→ 必须有aria-expanded、aria-selected等状态属性，且子节点需为role="treeitem" -
role="tabpanel"→ 必须与role="tablist"中的tab通过aria-controls/aria-labelledby显式关联 -
role="application"→ 已基本弃用，现代应用应避免；若真要用，必须接管全部键盘交互并声明aria-keyshortcuts
最常被忽略的一点：
role的值一旦动态变更（比如从role="button"切到role="alert"），多数屏幕阅读器不会主动 announce 新角色——得靠aria-live或焦点重置来触发播报。这使得“角色切换”在实际体验中几乎不可靠。 -
