用途:借助 Chrome DevTools MCP 对网页做无障碍调试与审计,依据 web.dev 指南检查语义化 HTML、ARIA 标签、焦点管理、键盘导航等。核心概念是区分无障碍树与 DOM:视觉隐藏(如 opacity: 0)与 display: none 或 aria-hidden 对屏幕阅读器效果不同;take_snapshot 返回无障碍树,是语义结构最可靠的依据。查阅 web.dev 文档可在 URL 后加 .md.txt 获取原始 Markdown。
主要能力与用法:1) 自动化审计:运行 Lighthouse 无障碍审计,mode 设为 navigation 以刷新并捕获加载问题,设置 outputDirPath(如 /tmp/lh-report)保存 JSON 报告;查看 0-1 分与 audits.failed 数,用 jq 或 Node 一行命令提取失败项,避免逐行读取。2) 浏览器问题:用 list_console_messages,types: ["issue"]、includePreservedMessages: true,发现缺失标签、无效 ARIA 等。3) 语义与结构:定位页面后 take_snapshot 检查标题层级是否合理、DOM 顺序是否与视觉阅读顺序一致,可用 take_screenshot 对比。4) 标签、表单与替代文本:确认交互元素有可访问名称,表单输入有关联标签(用 references/a11y-snippets.md 中的片段配合 evaluate_script),图片有 alt。5) 焦点与键盘导航:用 press_key 的 Tab/Shift+Tab 移动焦点,take_snapshot 确认焦点落在预期元素;模态框打开后焦点须进入并被困在其中。6) 点击目标与视觉:web.dev 建议点击目标至少 48x48 像素且间距充足,用相应片段测量,传入快照中的 uid。7) 颜色对比:先用 list_console_messages 查“Low Contrast”,必要时用“Check Color Contrast”片段手动检查。8) 全局页面检查:用“Global Page Checks”片段验证文档级设置。
限制:若标准查询失败或片段结果异常,可用 take_screenshot 做视觉评估,但无法从图像精确测量对比度。分类、收费、平台与具体使用步骤等资料未明确提供。