在需要审计和修复 Web 可访问性（语义、ARIA、焦点…

适用于通过 Chrome DevTools MCP 对网页进行可访问性自动化审计、可访问性树检查、键盘/焦点测试、点击目标和颜色对比度验证。

适用场景

解决思路

1. 对页面级工具（take_snapshot、list_console_messages、evaluate_script、press_key、take_screenshot、lighthouse_audit 等）调用时传入 pageId；用 list_pages 或 new_page 获取可用 pageId。
2. 用 take_snapshot 返回的可访问性树作为辅助技术“看到”的语义结构依据；注意视觉隐藏（例如 CSS opacity: 0）与 display: none 或 aria-hidden="true" 对屏幕阅读器行为不同。
3. 研究 web.dev 可访问性指南时，在 URL 后追加 .md.txt 获取干净原始 markdown，例如 https://web.dev/articles/accessible-tap-targets.md.txt。
4. 运行 lighthouse_audit 做初始全面审计：将 mode 设为 "navigation" 刷新页面并捕获加载问题，将 outputDirPath（例如 /tmp/lh-report）设为保存完整 JSON 报告。
5. 分析 Lighthouse 摘要：检查 scores（0-1 范围），分数 < 1 表示存在违规；查看 audits.failed 数量。
6. 审查报告（关键）：不要逐行读取整个文件；用 jq 或 Node.js 一行命令过滤失败项，例如：node -e "const r=require('./report.json'); Object.values(r.audits).filter(a=>a.score!==null && a.score<1).forEach(a=>console.log(JSON.stringify({id:a.id, title:a.title, items:a.details?.items})))"；这样可高效提取失败元素的 selector 和 snippet，而无需把完整报告加载进上下文。
7. 用 list_console_messages 检查 Chrome 原生常见可访问性问题：types 设为 ["issue"]，includePreservedMessages 设为 true（捕获页面加载时发生的问题）；这常能发现缺少标签、无效 ARIA 属性等关键错误。
8. 导航到页面。
9. 用 take_snapshot 捕获可访问性树。
10. 检查标题层级：确保 h1、h2、h3 等逻辑合理且不跳级；快照会包含标题角色。
11. 内容重排序：验证 DOM 顺序（驱动可访问性树）与视觉阅读顺序一致；用 take_screenshot 检查视觉布局，并与快照结构比较，捕获 CSS float 或 absolute positioning 导致逻辑流混乱的问题。
12. 在 take_snapshot 输出中定位按钮、输入框和图片。
13. 确保交互元素有可访问名称（例如仅含图标的按钮不能只是空名称 ""）。
14. 孤立输入框：验证所有表单输入都有相关标签；使用 references/a11y-snippets.md 中的 “Find Orphaned Form Inputs” 片段配合 evaluate_script。
15. 检查图片 alt 文本。
16. 用 press_key 按 "Tab" 或 "Shift+Tab" 移动焦点。
17. 用 take_snapshot 捕获更新后的可访问性树。
18. 在快照中定位标记为 focused 的元素，验证焦点移动到预期的交互元素。
19. 如果打开模态框，焦点必须移入模态框，并在关闭前“困”在其中。
20. 根据 web.dev，点击目标应至少 48x48 像素且有足够间距。
21. 由于可访问性树不显示尺寸，使用 references/a11y-snippets.md 中的 “Measure Tap Target Size” 片段配合 evaluate_script。
22. 将快照中元素的 uid 作为参数传给 evaluate_script。
23. 验证颜色对比度时，先检查原生可访问性问题：调用 list_console_messages，types 设为 ["issue"]。
24. 在输出中查找 “Low Contrast” 问题。
25. 如果原生审计未报告问题（某些 headless 环境可能如此），或需要手动检查特定元素，使用 references/a11y-snippets.md 中的 “Check Color Contrast” 片段配合 evaluate_script。
26. 用 references/a11y-snippets.md 中的 “Global Page Checks” 片段验证文档级可访问性设置，这些设置在组件测试中常被遗漏。
27. 如果标准 a11y 查询失败，或 evaluate_script 片段返回意外结果，进行视觉检查：当自动脚本无法判断对比度（例如文字位于渐变图片或复杂背景上）时，用 take_screenshot 捕获该元素；模型不能从图像测量精确对比度，但可以目测可读性并识别明显问题。

适用边界 · 注意事项

• 未配置或无法使用 Chrome DevTools MCP 时不适用。
• 需要精确测量渐变或复杂背景上的颜色对比度数值时，不能仅依赖截图目测。
• 非 Web 页面或没有可控制的 Chrome 页面时不适用。