role属性是显式覆盖元素默认语义的开关，仅在无障碍树中生效；必须用于动态渲染、旧浏览器兜底、非标准容器及按钮化非按钮元素等场景，禁用与原生语义冲突的混用。
role 属性不是“补丁”，而是语义覆盖开关
role 的作用是**显式告诉辅助技术（如屏幕阅读器）和浏览器：“这个元素的实际用途，和它默认的标签语义不一致，请按我指定的 role 来理解”**。它不改变 DOM 结构或样式，也不影响搜索引擎对 HTML 标签本身的解析逻辑——搜索引擎仍以原生标签（如 nav、main）为权威依据，role 只在无障碍树中生效。
什么时候必须用 role 而不能只靠语义标签
以下场景中，role 不是可选项，而是必要手段：
- 动态渲染内容：React/Vue 组件返回
<div>，但运行时确定它是导航区 → 补 <code>role="navigation"，不能硬套<nav></nav>（可能破坏 SSR 或服务端结构） - 旧版浏览器兜底：IE11 不识别
<main></main>，需同时写<div role="main"> 并确保其唯一性 <li>非标准交互容器：仪表盘中的“实时指标卡片”，既不是 <code>article（不可独立分发），也不是section（无标题、无章节逻辑）→ 用role="region"+aria-labelledby显式声明意图 - 按钮化非按钮元素：
<div onclick="...">提交</div>必须加role="button"，否则屏幕阅读器不会播报为可操作控件 -
<nav role="banner"></nav>：错。nav默认是navigation，强行覆盖为banner会让屏幕阅读器误判为页头，破坏 landmark 结构 -
<main role="main"></main>：冗余。浏览器已自动附加role="main"，重复写不报错但暴露对机制理解偏差 -
<button role="link"></button>：危险。按钮有键盘焦点和空格/回车响应逻辑，覆盖为 link 后行为与语义脱节，用户会困惑“为什么按空格没跳转” - 未配
aria-*属性：如role="tablist"必须配合aria-label或aria-labelledby，否则屏幕阅读器无法告知用户“这是什么类型的 tab 列表” - Chrome DevTools → Accessibility 面板 → 点击元素，确认
Role字段显示为你设置的值（不是 fallback 的generic或默认值） - NVDA / VoiceOver 开启后，用
D键（NVDA）或Ctrl+Option+U（VoiceOver）打开 landmark 导航，确认你的role="navigation"出现在列表中 - 禁用 CSS 后手动浏览页面结构：如果仅靠
role而没有对应语义标签，纯 HTML 下视觉流仍是一堆div，协作和维护成本反而升高 - 注意 Safari 旧版本（≤12）对
role="complementary"的识别 bug：可能读作 “section”，此时应优先用aside标签而非role模拟
role 和原生标签混用的常见翻车点
错误不是“用了 role 就安全”，而是**冲突覆盖导致语义断裂**：
验证 role 是否生效的关键动作
别只看代码写了没，要进真实环境检查：
role 最容易被当成“万能语义胶水”，但它真正起效的前提是：你清楚知道原生标签的语义边界在哪，以及当前上下文是否真的越过了那个边界。
