role属性需谨慎使用，仅在原生标签语义不足时添加；button、nav等原生标签禁用冗余role；dialog须配aria-modal、aria-labelledby及焦点陷阱；role必须与配套aria属性及行为同步实现，动态修改无效。
role 属性不是“加了就语义正确”，它只在原生 HTML 标签无法准确表达组件真实用途时才该用；加错、漏配、动态修改，比不加更危险。
哪些元素绝对不该加 role
原生标签自带完整语义和交互行为，强行覆盖会破坏辅助技术识别逻辑：
-
<button></button>已隐式拥有role="button"，再写role="button"或role="link"会导致 NVDA 报“未知按钮”，或让键盘用户按回车无跳转反应 -
<nav></nav>、<main></main>、<header></header>等结构标签已绑定对应 role，显式重复声明是冗余且暴露理解偏差 -
<input type="checkbox">自动管理aria-checked，手动设aria-checked="true"可能导致 JS 状态与读屏器状态不同步 <table> 默认不是 <code>role="grid"，但若强行给<thead> 或 <code><tbody> 单独加 role，会破坏行/列的隐式关联，NVDA 可能无法定位表头<h3>role="dialog" 必须配齐的三项硬性条件</h3> <p>只写 <code>role="dialog"，屏幕阅读器只会读“对话框”，其余行为全失效：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须加
aria-modal="true"（WAI-ARIA 1.1 强制要求），否则焦点仍可 tab 到背景，视障用户感知不到模态上下文 - 必须配
aria-labelledby，且值指向一个真实存在、可见、未被display: none或aria-hidden="true"隐藏的标题元素 ID（如<h2 id="dialog-title">确认删除</h2>） - 必须手动实现焦点陷阱：打开后调用
el.focus()聚焦到第一个可交互子元素；Tab 键需循环限制在弹窗内；关闭后需 focus 回触发按钮
role 和 aria-* 必须成套落地，单写 role 基本无效
role 是契约起点，不是终点。每个角色都依赖配套的 aria 属性和运行时行为：
-
role="listbox"必须配aria-expanded（同步展开状态）、aria-activedescendant（标定当前高亮项）、aria-controls（指向弹出列表 ID） -
role="combobox"下的选项容器必须是role="listbox"，每个选项必须是role="option"并带aria-selected -
role="grid"下每行必须有role="row"，单元格必须明确区分role="gridcell"（数据单元格）和role="columnheader"（表头），<th> 不再自动获得表头语义<li> <code>role="switch"必须配aria-checked+tabindex="0"+onkeydown处理空格键（并preventDefault()） - 想让提示消息被朗读，别改 role，改
aria-live区域内容：提前写好<div aria-live="polite" aria-atomic="true"></div>，再往里textContent = '已保存' - 状态切换（如按钮从“加载中”变“完成”）应复用同一
role="button"，仅更新aria-label和视觉文本，而非删掉再重建带新 role 的元素 - IE11 几乎不识别动态插入的
role="alert"，Safari + VoiceOver 对动态添加的role="dialog"也常漏注册——稳妥做法是 DOM 加载时就存在基础结构，仅控制aria-hidden和显隐样式
动态修改 role 为什么完全没反应
role 是静态声明，辅助技术只在元素插入 DOM 时读取一次。JS 后续修改（比如
el.setAttribute('role', 'alert')）不会触发语义重计算：最易被忽略的是：role 声明本身不提供任何行为。它只是告诉读屏器“这是什么”，而“怎么操作”“当前状态如何”“值是多少”，全靠你手写的 aria 属性、事件监听和焦点管理来兑现。没配齐，就是一张没钥匙的门牌。
- 必须加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
