role属性应加在语义缺失的非原生元素上，如用div模拟按钮、模态框或无对应标签的结构区域；禁用于已具明确语义的原生元素（如button、nav），避免覆盖导致辅助技术行为异常。
role属性该加在哪些元素上
不是所有HTML元素都需要、也并非都能合理使用 role。浏览器对原生语义已明确的元素（如 <button>、<nav>、<main>）会自动赋予对应角色，强行覆盖可能破坏辅助技术行为。
真正需要手动加 role 的场景通常是：
- 用
<div>或<span>模拟交互控件（比如手写的下拉菜单、模态框） - 原生HTML没有直接对应语义，但逻辑上需表达结构意图（如
role="feed"表示动态内容流） - 需要修正某些旧版框架或CMS输出的语义缺失标记
哪些role值不能乱用
role 值必须来自 WAI-ARIA 1.2 规范定义的合法枚举，且要符合元素的“可访问名称计算规则”和“隐含属性”。常见误用包括：
- 给
<a>加role="button"：它已是可聚焦、可键盘触发的交互元素，加了反而让屏幕阅读器重复播报“button” - 给
<h1>加role="heading"：冗余，且若漏写aria-level，部分读屏会默认 level=2 - 用
role="tooltip"却没配aria-describedby或正确控制显隐逻辑：会导致信息不被朗读或持续干扰
role="dialog" 和 aria-modal 的配合要点
模态对话框是 role 使用中最易出错的场景之一。仅设 role="dialog" 不足以让屏幕阅读器暂停浏览主页面内容。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
aria-modal="true"（注意：IE 不支持，需降级处理） - 对话框需有唯一
aria-labelledby指向标题元素，或aria-label提供简明描述 - 焦点必须程序化地 trap 在对话框内（用 JavaScript 监听
Tab键并循环聚焦） - 关闭按钮应有
aria-label="Close"或类似可访问名称，不能只靠图标
示例片段：
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title"> <h2 id="dialog-title">确认删除</h2> <button aria-label="Close">×</button> </div>
role更新后为什么屏幕阅读器没反应
动态修改 role（比如从 role="button" 改成 role="alert"）不会触发语义重计算——大多数辅助技术只在元素插入DOM时读取一次 role。
- 不要运行时改
role，改用aria-live+ 动态文本更新来传达状态变化 - 如果真需切换角色（极少见），应销毁旧元素、重建新元素并重新聚焦
- 检查是否在
display: none或visibility: hidden元素上设置了role：这些元素本就不在可访问树中，设了也无效
最常被忽略的是：role 是静态契约，不是运行时指令。它定义“这个元素**是什么**”，而不是“它**现在正在做什么**”。
