role属性非万能，需语义与行为一致：加role="button"必支持Enter/Space、tabindex和焦点；仅原生语义缺失时补用；常用安全role不足10个，如alert、dialog+aria-modal、navigation；role须配对应aria-*属性；动态更新需配合aria-live等通知机制。
role 属性不是万能的，别乱加
很多开发者以为给任意元素加上 role="button" 就能让它“变成按钮”，其实这是危险的错觉。浏览器和读屏软件只认语义+行为的一致性：如果 role="button" 的元素不响应 Enter 和 Space 键、没有 tabindex="0"、也不处理焦点状态，读屏会报“不可操作”，用户反而更困惑。
- 只在原生语义缺失时补
role（比如用div实现的自定义下拉菜单） - 加了
role必须同步实现对应交互逻辑和键盘支持 -
role="presentation"或role="none"用于隐藏装饰性结构，但别用在有内容或功能的容器上 - 避免覆盖原生语义：给
button再加role="button"是冗余且可能干扰 AT（辅助技术）解析
哪些 role 值真正常用且安全
WAI-ARIA 定义了 60+ 个 role，但日常开发中真正常用、兼容性好、AT 支持稳的不到 10 个。优先选语义明确、浏览器原生支持度高的：
-
role="alert"：用于实时、中断性提示（如表单校验失败），触发后自动被读屏朗读 -
role="dialog"+aria-modal="true"：模态框必备组合，否则焦点可能逃逸、背景仍可操作 -
role="navigation"：包裹主导航区域，比单纯用nav标签多一层兼容保障（尤其老版本 JAWS） -
role="application"要慎用——它会让读屏退出标准浏览模式，适合富交互应用（如代码编辑器），普通网页加了反而降低可访问性
role 和 aria-* 属性必须配套使用
role 单独存在往往没意义。比如 role="treeitem" 不配 aria-expanded、aria-level、aria-setsize，读屏根本不知道它是否可展开、在第几层、兄弟节点有几个。
-
role="tablist"必须配合aria-selected（在tab上）和aria-controls（指向对应tabpanel） -
role="checkbox"必须有aria-checked，且值为true/false/mixed，不能用checked这种 HTML 属性替代 -
role="img"必须带aria-label或aria-labelledby，否则读屏直接跳过——它不看alt属性
role 的浏览器兼容性和动态更新陷阱
IE11 对 role 的静态解析还行，但对运行时修改（比如 JS 动态加 role="alert"）支持极差；Safari + VoiceOver 在某些 role 切换时不会重发通知，导致用户错过状态变化。
立即学习“前端免费学习笔记（深入）”；
- 动态添加
role后，用element.setAttribute('aria-live', 'polite')触发一次通告（比单纯改role更可靠） - 不要在
role="status"元素里反复 innerHTML 赋值——部分读屏只读首次内容，应清空后重设 - 测试时务必用真实组合：NVDA + Firefox、VoiceOver + Safari、JAWS + Chrome，同一段代码三者行为可能完全不同
最常被忽略的其实是「role 生命周期」：加了要删，改了要同步，动了要通知。它不像 CSS 类名，挂上就完事——它是一套需要全程维护的状态契约。
