Chrome DevTools的Accessibility Inspector是最直接可靠的HTML无障碍测试入口，快捷键Mac按Cmd+Shift+P、Win/Linux按Ctrl+Shift+P输入“Accessibility”选择“Show Accessibility”，或右键元素选“Inspect Accessibility Properties”，重点查看Computed Role、Name、States三列以验证屏幕阅读器实际读取内容。
Chrome DevTools 的 Accessibility Inspector 就是当前最直接、最可靠的 HTML 无障碍测试入口，不用装插件、不依赖读屏软件模拟，只要语义写对，它就能立刻告诉你屏幕阅读器“看到”了什么。
怎么快速打开 Chrome 的 Accessibility Inspector
在任意网页中，Mac 按 Cmd+Shift+P，Windows/Linux 按 Ctrl+Shift+P，输入 “Accessibility”，回车选择 “Show Accessibility” 面板；或者右键目标元素 → 选 “Inspect Accessibility Properties”。面板会立刻显示该节点在可访问性树中的计算结果。
注意：这个面板不是“检查 ARIA 写没写”，而是检查浏览器最终“算出来”的角色、名称和状态——这才是辅助技术真正读取的内容。
重点看哪三列：Role / Name / States
打开面板后，只盯这三列：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
Computed Role：应是你预期的角色，比如button、checkbox、navigation。若显示generic，基本说明语义缺失（常见于没配<label for="id"></label>的<input>，或纯<div> 做的按钮） <li> <code>Name：必须非空且有意义。来源优先级是aria-label≈aria-labelledby><label for="id"></label>>alt> 元素内文本。混用<label></label>和aria-label会导致不同读屏器行为不一致（Chrome 优先取后者，NVDA 可能忽略前者） -
States：如disabled、expanded、checked必须实时同步。JS 手动改input.checked = true后，若 DOM 没触发变更，读屏器仍可能读“未选中” - 表单控件没配
<label></label>：首选<label for="id">邮箱</label><input id="id" type="email">；次选隐式包裹<label>邮箱<input type="email"></label>（注意不能跨<div> 等块级元素） <li>自定义组件用了 <code><div> 却没补角色：如下拉菜单容器要加 <code>role="combobox"，选项项加role="option"，并配合aria-activedescendant或焦点管理 - CSS 干扰了可访问性树：
display: none、visibility: hidden、aria-hidden="true"都会让元素彻底从可访问性树中消失；用hidden属性比仅靠 CSS 更可靠 - 错误提示区域加
role="alert"（中断式，适合表单提交失败），或aria-live="polite"（非中断式，适合搜索建议、加载状态） - 避免用
display: none切换显隐：隐藏时加aria-hidden="true"+hidden，显示时移除这两项，并确保插入位置在 DOM 中稳定 - 焦点跳转要谨慎：
focus()到错误字段是好的，但别在 modal 打开后强行focus()到标题以外的位置，容易打断读屏节奏
为什么 inspect 看到 role 是 generic？常见原因和修复顺序
这不是 ARIA 没加够，而是基础结构没搭稳：
动态内容更新后读屏器不朗读？别只改 DOM
单纯用 innerHTML 替换提示文字、或 textContent 更新状态，读屏器大概率沉默——它需要明确的“通知信号”：
真正卡住人的往往不是 ARIA 属性写不写，而是 DOM 结构本身——比如消息区域没被 aria-live 包裹、模态框没做焦点围栏、或表单控件根本没关联 label。这些地方一漏，Accessibility Inspector 里第一眼就暴露为 generic，但很多人还在埋头调 ARIA。
