Chrome DevTools Accessibility面板最准，右键元素选“Inspect Accessibility Properties”可直接查看浏览器实际暴露的role、name、level；它反映真实可访问性树，非HTML源码。
Chrome DevTools 的 Accessibility 面板怎么看真实语义
直接右键元素 → “Inspect Accessibility Properties”，比看标签名管用得多。它显示的是浏览器实际暴露给辅助技术的 role、name、level，不是你写的 HTML 字符串。
常见失效点：<h2></h2> 被 CSS 设为 display: none 但没加 aria-hidden="true"，Accessibility 面板里仍会显示 level=2；<img alt=""> 在面板里 role 是 img 但 name 为空，得手动确认是否真为装饰图（只有装饰图才该空）；<time datetime="2023/05/20"></time> 的 datetime 格式错，面板里 value 不会被识别为日期。
用 Lighthouse 跑 Accessibility 审计时哪些项必须修
Lighthouse 的 Accessibility 报告里，带 critical 或 serious 级别的问题不能跳过，它们对应 WCAG A/AA 级强制要求。
-
Document does not have a main landmark：页面缺<main></main>或有多个<main></main>，需确保唯一且包裹全部主体内容 -
Heading levels should only increase by one：比如<h2></h2>后直接<h4></h4>，屏幕阅读器会跳过 h3 导航 -
<img alt="HTML在前端调试时怎么验证标签语义化规范" > elements do not have <code>altattributes：不是“写了 alt 就行”，空字符串alt=""只对纯装饰图合法 -
Form elements do not have associated labels：只检查显式<label for="x"></label>或包裹结构，不认aria-labelledby
W3C Validator 和 axe DevTools 的分工怎么划
W3C Validator（validator.w3.org）只管语法和结构合法性，比如 <main></main> 嵌套在 <header></header> 里、<p></p> 里塞 <section></section>，它会报错；但它完全不查 alt、label、ARIA 属性拼写，也不校验语义合理性。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
axe DevTools 则专注可访问性规则，比如 landmark-one-main（主区域缺失）、heading-order（标题跳级），但它对“结构性建议”类提示（如 “<div> 应替换为语义化标签”）容易误报——仪表盘里的纯装饰容器用 <code><div> 是合理且必要的。
<p>所以：W3C 卡结构底线，axe 卡可访问性落地，二者都过 ≠ 语义正确，还得人工核验业务上下文。</p>
<h3>VS Code 插件自动检查为什么常漏掉关键问题</h3>
<p>HTMLHint 默认不扫描 JS 文件里的模板字符串，比如 <code>innerHTML = <div>${text}</div>，也不会校验 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 注入内容。这些地方的 HTML 片段必须单独提取出来跑校验。
Auto Rename Tag 插件只做字符串匹配，把 <nav></nav> 改成 <footer></footer> 也能成功重命名，但它不管逻辑是否成立；嵌套超过 6 层或文件 >500 行时，VS Code 1.85+ 会主动禁用自动重命名，此时必须手动改。
真正卡住语义落地的，不是工具能不能扫出问题，而是开发者是否理解每条规则背后的用户场景——比如为什么 <h2></h2> 后跟 <h4></h4> 是错的，不是因为语法，而是屏幕阅读器靠层级跳转，跳级等于砍掉导航路径。
