Chrome DevTools Accessibility Inspector可诊断80%可访问性问题，关键看Computed Role、Name、States三列：Role应为预期语义（非generic），Name需非空有意义（优先级aria-label≈aria-labelledby>label>文本），States须实时同步（如disabled、checked）。
不用装 NVDA 或 VoiceOver 也能测出 80% 的可访问性问题，关键在 Chrome DevTools 里打开 Accessibility Inspector 后看三列：Computed Role、Name、States。
Chrome DevTools 里怎么快速验证可访问性树
打开任意网页，按 Ctrl+Shift+P（Windows）或 Cmd+Shift+P（Mac），输入 “Accessibility”，选中 “Show Accessibility” 面板；或者右键目标元素 → “Inspect Accessibility Properties”。面板会立刻显示该元素在可访问性树中的计算结果。
重点盯住这三列：
-
Computed Role：是否是你预期的角色？比如按钮是button而不是generic -
Name：是否非空、有意义？来自alt、aria-label、label或可见文本内容 -
States：如disabled、expanded、checked是否实时同步
看到 role="generic" 基本等于语义缺失——常见于用 div onclick 模拟按钮但没加 role="button" 和 tabindex="0"，或 input 没配 label 导致 Name 为空。
立即学习“前端免费学习笔记（深入）”；
为什么表单字段 Name 显示为空
屏幕阅读器聚焦 input 时只读 “编辑文本”，根本原因是它没拿到名称。修复优先级如下：
- 首选显式关联：
<label for="email">邮箱</label><input id="email" type="email">—— 兼容性最好，NVDA/Chrome/VoiceOver 全支持 - 次选隐式包裹：
<label>邮箱<input type="email"></label>—— 注意中间不能插div等块级元素打断父子关系 - 仅当无可见标签时才用
aria-label，比如搜索图标按钮：<button aria-label="搜索"></button> - 禁用
title替代label：部分读屏不读title，且它不参与焦点逻辑
混用 label for 和 aria-label 会导致行为不一致：Chrome 优先取 aria-label，NVDA 可能忽略，最终 Name 取决于实现而非你控制。
动态内容更新后屏幕阅读器不读怎么办
NVDA/VoiceOver 默认不监听 DOM 变化，JS 插入的错误提示、加载状态、搜索建议不会自动播报。必须主动“喊话”：
- 中断式消息（如表单校验失败）：给容器加
role="alert"，它会立即打断当前朗读 - 非中断式更新（如搜索建议、分页加载）：用
aria-live="polite"，等用户空闲时再读 -
aria-live容器不能是display: none或hidden，必须真实渲染且未被aria-hidden="true"掩盖 - 若 JS 插入后仍不播报，可手动调用
element.setAttribute('aria-live', 'assertive')强制刷新，或对role="alert"元素执行focus()
验证方式：打开 Chrome DevTools → Elements 面板 → 右键该元素 → “Inspect Accessibility Tree”，确认节点是否出现在可访问性树中。
main 标签和标题嵌套为什么必须严格守规
<main> 不是装饰性标签，它是屏幕阅读器按 M 键跳转的唯一锚点。违反规则会直接导致用户听完整页都找不到正文：
- 全页只能有一个
<main>，且必须包裹真正核心内容（如文章正文、商品列表），不能含广告、推荐位、客服入口 -
<header>和<footer>内部禁止塞非本区域职责的内容——比如页脚里放<nav aria-label="热门分类">，会被当成页脚导航，M 键跳入后第一句听到的是“热门分类”，而非“版权信息” - 标题必须严格递进：
<h1>→<h2>→<h3>；<h1>后接<h4>就会破坏大纲，NVDA/VoiceOver 会跳过中间层级，直接把<h4>当成新章节起点 - 伪语义结构如
<div class="content-wrap">必须删掉或换成<main>，否则对屏幕阅读器完全静默
最易被忽略的是：所有自定义交互控件（开关、折叠面板、分页按钮）都得手动加 tabindex="0" 并监听 Enter 和 Space，否则键盘用户根本无法操作。
