Chrome 自带 Accessibility Inspector 是验证语义化角色最直接的入口，通过 Cmd+Shift+P 或 Ctrl+Shift+P 输入“Accessibility”打开，嵌在 Elements 面板右侧，实时显示选中元素的 Computed Role、Name 和 States；Role 为 generic 表示对屏幕阅读器不可见，需用原生 button 或添加 role="button"、tabindex="0" 和 aria-label；aria-hidden、display: none 等会使其退出可访问性树，右键“Inspect Accessibility Properties”将不生效；Name 和 States 必须准确同步，否则影响无障碍体验。
Chrome DevTools 里直接打开 Accessibility Inspector
不用装插件、不跑脚本，Chrome 自带的 Accessibility Inspector 就是验证语义化角色最直接的入口。按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows），输入 “Accessibility”，选中 “Show Accessibility” 面板即可打开。它不是独立窗口，而是嵌在 Elements 面板右侧的一个标签页，选中任意元素后立刻显示其在可访问性树中的计算结果。
重点看 Computed Role 这一列是否符合预期
比如一个视觉上像按钮的 <div>，如果 Computed Role 显示为 <code>generic，那它对屏幕阅读器就是“不可见”的按钮——即使加了点击事件也没用。正确做法是：优先用原生 <button></button>，或至少加 role="button" 并确保可聚焦（tabindex="0"）、有名称（aria-label 或文本内容）。常见陷阱包括：
<div onclick="..."> 没加 <code>role和tabindex，Computed Role 仍是generic-
<nav></nav>被 CSS 设为display: none或 JS 移除，直接从可访问性树中消失，Role 列为空 -
<input type="checkbox">多余加role="checkbox"，反而可能干扰浏览器默认行为 - 在 Elements 面板中确认该节点未被
aria-hidden标记 - 检查 computed 样式中
display是否为none，或visibility是否为hidden - 动态渲染的元素（如 React 组件）需等真实 DOM 插入后再右键，否则菜单不出现
- 一个手风琴标题用了
<div role="button" aria-expanded="false">，但 JS 切换状态时只改了 class，没同步更新 <code>aria-expanded属性 → States 列不会变 -
<img src="icon.svg" alt="怎么在HTML中通过浏览器的Accessibility Tree查看元素的语义化角色信息" >没加alt或aria-label→ Name 列为空，屏幕阅读器跳过该图 -
<select></select>的option元素没有文本内容，仅靠value属性 → Name 不会被读出
为什么右键“Inspect Accessibility Properties”有时不生效
这个右键菜单项只对「可访问性树中存在」的元素可用。如果元素被 aria-hidden="true"、display: none、visibility: hidden 或 opacity: 0（且无交互属性）隐藏，右键就不会出现该选项。此时需先检查元素是否真的进入了可访问性树：
Computed Name 和 States 同步更新才算真正可用
Role 对了只是第一步。Name 为空或含糊（比如 “click me”、“button1”）会让屏幕阅读器用户完全不知道作用；States（如 disabled、expanded）不同步则会导致操作反馈错乱。例如：
立即学习“前端免费学习笔记（深入）”；
可访问性树不是静态快照，它是实时计算的。任何 DOM 变更、属性更新、样式切换都可能影响 Role/Name/States 的最终值——所以得在交互发生后重新 inspect。
