Chrome DevTools Accessibility Inspector 是验证 role 是否生效的唯一可靠方式，直接显示浏览器计算出的可访问性树；需检查 Computed Role、Name 和 States 三列，并满足 aria-modal、aria-labelledby 及焦点陷阱等 dialog 契约；禁用冗余 role，动态更新应优先用 aria-live 而非重设 role。
Chrome DevTools Accessibility Inspector 怎么看 role 是否生效
直接打开 Chrome DevTools 的 Accessibility 面板，才是验证 role 是否被正确识别的唯一可靠方式。它不依赖读屏软件模拟，也不看你代码写了没，只显示浏览器最终“算出来”的可访问性树结果。
打开方法：Mac 按 Cmd+Shift+P，Windows/Linux 按 Ctrl+Shift+P，输入 Accessibility 回车；或右键目标元素 → 选 Inspect Accessibility Properties。
重点盯三列：
-
Computed Role：必须是你设的值（如dialog），而不是generic或其他默认 fallback -
Name：不能为空；若为button、tab、alert等需名称的角色，必须有aria-label、aria-labelledby、label或可见文本 -
States：比如role="checkbox"必须同步有aria-checked，role="combobox"必须有aria-expanded，否则状态不一致，读屏会误判
role="dialog" 为什么总过不了无障碍校验
只写 role="dialog" 几乎必然失败——校验工具（如 axe、Lighthouse）和辅助技术都会报错，因为这不是一个独立声明，而是一组硬性契约。
立即学习“前端免费学习笔记（深入）”；
必须同时满足：
-
aria-modal="true"：WAI-ARIA 1.1 强制要求，IE 不支持需降级 fallback（如用inert+ 手动焦点管理） -
aria-labelledby指向一个真实存在、可见、未被display: none或aria-hidden="true"隐藏的标题元素 ID - 手动实现焦点陷阱：弹窗打开后
focus()到第一个可交互子元素；Tab 键循环限制在弹窗内；关闭后focus()回触发按钮
漏掉任意一项，校验工具就会报 landmark-no-label、aria-dialog-name 或 aria-modal-dialog-has-title 类错误。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
哪些 role 绝对不能加，加了反而扣分
无障碍校验不是“加得越多越好”，而是“语义与行为一致”。给已有原生语义的元素加 role，等于主动破坏浏览器和读屏器的信任链。
明确禁用场景：
-
<button role="button"></button>：冗余，可能干扰焦点管理或导致重复播报 -
<nav role="navigation"></nav>：覆盖原生nav的 landmark 逻辑，多个导航区可能被合并识别 -
<input type="checkbox" role="switch">：行为不匹配，空格键无法切换，读屏报“不可操作” <tr role="search">：破坏表格结构，触发 <code>aria-requires-children错误（search不是thead合法子元素）校验工具会直接标记为
aria-allowed-role或landmark-conflict。动态更新 role 后校验仍失败，问题出在哪
role是静态契约，不是运行时指令。JS 动态调用element.setAttribute('role', 'alert')不会触发语义重计算——大多数辅助技术只在 DOM 插入时读取一次role。正确做法是：
- 状态变化不用改
role，改用aria-live="polite"或aria-live="assertive"区域配合文本更新 - 真需切换角色（极少见），应销毁旧元素、重建新元素并重新聚焦
- 检查是否在
display: none、visibility: hidden或aria-hidden="true"的父容器里设置了role：这些元素根本不在可访问性树中，设了也无效
最常被忽略的是：校验通过 ≠ 视觉状态同步。JS 改了 class 切换样式，却忘了同步
aria-expanded或aria-selected，DevTools 的States列立刻暴露问题。- 状态变化不用改
