lighthouse可在chrome devtools中直接运行，无需修改html代码；但html结构质量直接影响accessibility和seo得分，因其无障碍审计仅静态扫描dom及属性，如img缺alt、表单无label、语义化错误等均会扣分。

Lighthouse 分析不需要改 HTML 代码，直接在 Chrome DevTools 里运行即可；但 HTML 结构质量会直接影响 Accessibility（无障碍）和 SEO 类别的得分。

怎么在 Chrome DevTools 里打开 Lighthouse

新版 Chrome（≥ v110）已完全集成 Lighthouse，无需插件或命令行：

• 打开目标网页（确保已加载完成，不是空白页或重定向中）
• 按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）唤出 DevTools
• 点击顶部活动栏的 Lighthouse 标签 —— 如果没看到，点右上角 ⋯ → More tools → Lighthouse
• 确认配置：设备选 Mobile 或 Desktop（移动模式会触发 UA 切换和 viewport 模拟，影响渲染结果）
• 只勾选 Accessibility（如果只关心无障碍），或按需组合其他类别
• 点击 Analyze page load（不是“Generate report”旧文案）

为什么 HTML 写法会拉低 Accessibility 分数

Lighthouse 的无障碍审计不跑 JS，只静态扫描 DOM 和属性。常见扣分点全来自 HTML 层面：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• img 缺少 alt 属性，或 alt="" 用于装饰图但未加 role="presentation"
• button、a 等可交互元素没有可读文本内容（例如仅靠 iconfont 或 SVG 无 aria-label）
• 表单控件（input、select）缺失关联的 label，或用了 for/id 但 ID 不匹配
• 语义化错误：用 div 模拟 button 却没加 role="button" tabindex="0"
• 颜色对比度不足：Lighthouse 会提取 color 和 background-color 计算，但前提是文本节点有明确的 CSS 继承链

哪些 HTML 修改能快速提分

不改逻辑、不加 JS，只动 HTML 就能修复 70% 的无障碍警告：

• 给所有功能性图片补 alt，纯装饰图统一用 alt="" + role="presentation"
• 把 <div onclick="...">提交</div> 改成 <button type="button">提交</button>
• 表单字段旁加 <label for="email">邮箱</label><input id="email">（ID 必须严格一致）
• 导航菜单用 <nav></nav> 包裹，主标题用 <h1></h1>，不要跳级（如 h1 后直接 h3）
• 避免内联样式写死颜色，改用 CSS 类，方便后期统一调对比度

容易被忽略的关键细节

很多人跑完报告就关掉，但真正卡分的往往藏在配置和上下文里：

• 测试前必须禁用所有浏览器扩展（尤其广告屏蔽、Dark Mode 插件），它们可能注入 DOM 或劫持样式
• 不要在隐身窗口测试 —— 某些扩展在隐身模式下仍生效，且 Lighthouse 无法捕获 Service Worker 缓存行为
• “快照模式”（Snapshot）不适用常规 HTML 审计，它只抓当前 DOM 快照，不会触发页面 reload，导致动态生成的内容、JS 渲染后的无障碍属性全被忽略
• 移动端测试时，Lighthouse 会强制启用 viewport meta，如果 HTML 里漏写了，分数会异常偏低且报错不明显

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！