chrome devtools 的 accessibility inspector 可完成 80% 自检，关键看 computed role、name、states 是否符合预期：role 为 generic 表示结构错误；name 为空多因命名源冲突或隐藏；动态更新需触发事件或 aria-live；结构性错误（如灰斜体节点）必须优先修复。
直接用 Chrome DevTools 的 Accessibility Inspector 就能完成 80% 的自检，不需要装插件、不依赖第三方服务——关键不是“扫出多少错误”，而是看可访问性树里 Computed Role、Name、States 这三列是否真实符合预期。
怎么打开 Chrome 的 Accessibility Inspector 并精准定位问题
Mac 按 Cmd+Shift+P，Windows/Linux 按 Ctrl+Shift+P，输入 “Accessibility”，回车选 Show Accessibility；更推荐右键目标元素（比如一个按钮、表格单元格或表单输入框）→ Inspect Accessibility Properties，这样直接跳到该节点，避免在整棵树里手动翻找。
- 点开后重点盯三列：
Computed Role（它被识别成什么）、Name（屏幕阅读器读什么）、States（比如expanded、checked是否同步） - 如果
Role显示generic，说明语义链断裂——不是 ARIA 写得少，而是基础结构错了（比如<input>没配<label></label>，或<div role="button"></div>没加tabindex="0"） - 悬停页面任意元素时，确保左上角
Inspect按钮是蓝色激活态，这样会实时弹出覆盖层，标出对比度、键盘可聚焦性等信息
Elements 面板里看到灰色斜体节点就是结构性错误信号
Chrome DevTools 的 Elements 面板中，字体灰、斜体、缩进异常的节点不是样式问题，是浏览器被迫修复非法 HTML 后留下的痕迹——比如你写了 <div><p>文字</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>
<div><p>文字</p></div>，但中间那段“修复残留”就会显示为灰色斜体。
- 这类节点往往伴随语义丢失：
<main></main>被吞进<div> 里、<code><nav></nav>嵌在<p></p>中、<table> 外层套了 <code><div role="table"> <li>W3C Validator 报的 <code>Element X is not allowed as child of element Y类提示，基本都对应这类灰斜体节点 - 修复优先级：先删掉非法嵌套，再补 ARIA；别在结构错乱的基础上硬加
aria-labelledby或role，读屏器根本看不到 -
aria-label和<label></label>同时存在：Chrome 优先取aria-label，NVDA 可能只读<label></label>内容，行为不一致 → 删掉一个，保留语义最清晰的那个 -
aria-labelledby指向的 ID 不存在，或目标元素被display: none、aria-hidden="true"隐藏 → 可访问性树里该节点不可见，Name 计算失败 - 图标按钮只靠视觉符号（如
<button>✕</button>）且无任何命名属性 → Role 是button，Name 却为空 → 必须加aria-label或包裹<span aria-hidden="true">✕</span>+aria-label -
<img>缺alt，或alt=""用在非装饰图上 → 名称缺失或误判为“无内容” - 表单控件状态变化：改
input.checked后，必须触发change事件，或调用input.click()；只设aria-checked不同步原生checked，会导致逻辑和读屏不一致 - 折叠面板展开/收起：切
class="open"不够，必须同步更新aria-expanded，且建议配合aria-controls指向目标区域 - 错误提示、搜索建议等动态插入内容：用
aria-live="polite"包裹容器，不要依赖 CSS 显示/隐藏切换 - 禁用态按钮颜色变灰后对比度跌破 3:1，DevTools 覆盖层不会主动提醒“这是禁用态”，得你心里有数去 hover 那一刻看对比度值
为什么 aria-label 加了还是没名称？Name 列为空的常见链路
Name 列为空，90% 不是因为漏写属性，而是多个命名来源冲突或被屏蔽。Chrome DevTools 的 Accessibility Inspector 直接显示最终计算结果，比看源码更可靠。
动态内容更新后读屏器不朗读？JS 改 DOM 不等于可访问性更新
单纯用 textContent、innerHTML 或 JS 属性（如 input.checked = true）更新状态，读屏器大概率沉默——它需要明确的“通知信号”或 DOM 状态变更事件。
真正卡住人的不是某个属性怎么写，而是结构错误导致整个可访问性树失真——比如 <main></main> 嵌在 <div> 里、<code><table> 被 <code>display: grid 替代、lang 缺失让 VoiceOver 用英文朗读中文页面。这些底层断裂，加再多 ARIA 也补不回来。
