必须先选中一个存在于无障碍树中的元素，再切换到accessibility标签页才能看到computed role/name/states三列数据；若为空，说明该元素因display:none、aria-hidden="true"等被排除在无障碍树外。
Chrome DevTools 的 Accessibility 面板不是“打开就能看到无障碍树”，它只在满足特定条件时才显示有效信息——关键在于元素是否真正在无障碍树中存在，而不是你点了没点开。
如何真正打开 Accessibility 面板并看到数据
很多人输完 “Accessibility” 回车后，右侧面板一片空白，或只有灰色提示。这不是功能失效，而是没选中一个“可进入无障碍树”的元素。
必须先做两件事：
- 用
Ctrl+Shift+C（Win/Linux）或Cmd+Shift+C（Mac）吸管选取页面上一个疑似可交互的元素，或直接在 Elements 面板里点击它 - 确保该元素没有被
display: none、visibility: hidden、aria-hidden="true"或opacity: 0（且无tabindex）彻底排除
之后再切换到右侧面板的 Accessibility 标签页，三列数据（Computed Role / Name / States）才会真实渲染。如果仍为空，说明这个节点压根没进无障碍树——得先解决语义或显隐问题，再谈检查。
Computed Role 显示 generic 就等于失败
generic 不是中性描述，它是 Chrome 给出的明确警告：这个元素对屏幕阅读器不可见、不可操作、不可识别。它不会被纳入焦点链，也不会被朗读。
常见触发场景：
-
<div onclick="submit()">提交</div>—— 缺少role="button"和tabindex="0" -
<input type="checkbox">没配<label for="id"></label>—— 浏览器无法推断其用途，Role 降级为generic -
<nav></nav>被 JS 移除或 CSS 设为display: none—— 直接从无障碍树中消失，面板里连这行都看不到
修复优先级：能用原生语义标签（<button></button>、<input type="checkbox">、<nav></nav>）就别用 div + ARIA；必须自定义时，role + tabindex + aria-label 是最小可行组合。
Name 字段为空或模糊比 Role 错误更危险
Name 是屏幕阅读器实际播报的内容。它为空（显示 “Name: (empty)”）或为 “click me”、“button1” 这类占位符，用户根本不知道这是干啥的按钮。
它的计算有严格优先级，且不按你写的顺序来：
- 第一顺位：
aria-labelledby（多个 ID 拼接，空格分隔）→ 但任一 ID 找不到，整条失效 - 第二顺位：
aria-label→ 会覆盖label关联内容，Chrome 优先读它，NVDA 可能忽略 - 第三顺位：
label[for]或隐式<label>文本<input></label>→ 最稳定，推荐首选 - 最后 fallback：
<img alt="">的alt或纯文本节点 → 但空alt就是 (empty)
特别注意：placeholder 永远不参与 Name 计算，title 也不进无障碍树——它们只服务鼠标悬停，对键盘和读屏器无效。
States 列不同步 = 用户操作反馈错乱
States 显示的是实时状态，比如 disabled、expanded、checked。JS 改了 DOM 属性却没同步更新状态，读屏器就会“说假话”。
典型翻车点：
-
input.checked = true后，没触发change事件，也没手动设input.setAttribute('aria-checked', 'true')→ NVDA 仍读 “未选中” - 下拉菜单展开后，没更新
aria-expanded="true"，或没把焦点移到第一个role="option"→ 用户不知道菜单开了，也不知道怎么选 - 禁用按钮用了
opacity: 0.5却没加aria-disabled="true"→ 视觉灰了，但读屏器仍提示 “可点击”
原则很简单：只要视觉状态变了，无障碍状态就得跟着变。不能只靠 CSS 或 JS 操作 DOM，得补全对应 ARIA 属性或原生属性。
无障碍树不是静态快照，它依赖真实 DOM 结构、CSS 渲染结果、ARIA 声明三者同时成立。DevTools 显示的任何异常，背后大概率是 HTML 语义断裂、CSS 干预过度，或 JS 状态管理缺失——别只盯着面板修，得回到代码里补根。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
