用途:借助 Chrome DevTools MCP 对网页进行无障碍调试与审计,参照 web.dev 指南检查语义化 HTML、ARIA 标签、焦点与键盘导航等。
核心概念:页面级工具(take_snapshot、list_console_messages、evaluate_script、press_key、take_screenshot、lighthouse_audit 等)需传入 pageId,可通过 list_pages 或 new_page 获取。take_snapshot 返回无障碍树,表示辅助技术“看到”的结构,比 DOM 更可靠;视觉隐藏(如 opacity: 0)与 display: none 或 aria-hidden="true" 对屏幕阅读器行为不同。查阅 web.dev 文档时可在 URL 后加 .md.txt 获取原始 markdown。
工作流:先用 Lighthouse 无障碍审计建立基线,mode 设为 navigation、指定 outputDirPath 保存 JSON,再用 jq 或 Node 单行命令筛选失败项,避免整文件读入。用 list_console_messages(types: ["issue"]、includePreservedMessages: true)查看浏览器原生审计发现的缺失标签、无效 ARIA 等。用 take_snapshot 检查标题层级与语义地标,并配合 take_screenshot 比对 DOM 顺序与视觉阅读顺序。检查按钮、输入框、图片的可访问名称与 alt 文本,可用 references/a11y-snippets.md 中的代码片段通过 evaluate_script 查找孤立表单输入。用 press_key 的 Tab / Shift+Tab 与 take_snapshot 跟踪焦点,验证键盘陷阱与模态框焦点约束。点击目标应至少 48x48 像素且间距充足,用“Measure Tap Target Size”片段测量,元素 uid 由快照获得。颜色对比先查 list_console_messages 中的 Low Contrast 问题,必要时用“Check Color Contrast”片段;还可用“Global Page Checks”片段检查文档级设置。
限制:若自动脚本无法判断渐变或复杂背景上的对比度,只能用 take_screenshot 做视觉判断,模型无法从图像测出精确对比度比值。资料未提供其他平台、收费或安装命令信息。