快速打开Chrome Accessibility Inspector：Mac按Cmd+Shift+P、Win/Linux按Ctrl+Shift+P，输入“Accessibility”选择“Show Accessibility”；或右键元素选“Inspect Accessibility Properties”。重点查看Computed Role、Name、States三列。
怎么快速打开 Chrome 的 Accessibility Inspector
不用装插件、不切窗口，直接在当前页面调用：Mac 上按 Cmd+Shift+P，Windows/Linux 上按 Ctrl+Shift+P，输入 “Accessibility”，回车选择 “Show Accessibility” 面板即可。也可以右键任意元素 → “Inspect Accessibility Properties”，立刻看到该节点在可访问性树中的计算结果。
重点看哪三列：Role / Name / States
面板里最核心的是三列数据，它们直接决定屏幕阅读器是否“认得出、读得清、跟得上”：
-
Computed Role：应是你预期的角色，比如button、checkbox、navigation；若显示generic，基本说明语义缺失（常见于没加label的input，或纯div做的按钮） -
Name：必须非空且有意义，来源优先级是aria-label≈aria-labelledby>label[for]>alt> 元素内文本；混用label和aria-label会导致不同读屏器行为不一致 -
States：如disabled、expanded、checked必须实时同步；手动 JS 修改input.checked = true后，若没触发相应 DOM 变更或未用aria-checked补充，读屏器可能仍读“未选中”
为什么 inspect 看到 role 是 generic？常见原因和修复顺序
这几乎总是结构或语义问题，不是 ARIA 写少了——而是基础没搭稳：
- 表单控件没配
label：首选<label for="id">邮箱</label><input id="id" type="email">；次选隐式包裹<label>邮箱<input type="email"></label>（注意不能跨div等块级元素） - 自定义组件用了
div却没补角色：比如下拉菜单容器要加role="combobox"，选项项加role="option"，并配合aria-activedescendant或焦点管理 - CSS 干扰了可访问性树：
display: none、visibility: hidden、aria-hidden="true"都会让元素彻底从可访问性树中消失；用hidden属性比仅靠 CSS 更可靠
动态内容更新后读屏器不朗读？别只改 DOM
单纯用 innerHTML 替换提示文字、或 textContent 更新状态，读屏器大概率沉默——它需要明确的“通知信号”：
立即学习“前端免费学习笔记（深入）”；
- 错误提示区域加
role="alert"（中断式，适合表单提交失败）或aria-live="polite"（非中断式，适合搜索建议、加载状态） - 避免用
display: none切换显隐：隐藏时加aria-hidden="true"+hidden，显示时移除这两项，并确保插入位置在 DOM 中稳定（aria-live区域被移除再重建会丢失监听） - 不要依赖视觉反馈代替可访问性状态：比如仅靠颜色变红标错误，必须同步加
aria-invalid="true"和错误文案关联（aria-describedby）
pointer-events: none 和 tabindex="-1" 双重封锁的按钮，即使写了 role="button"，也会在可访问性树中彻底消失。 
