A11y Debugging
技能 活跃使用 Chrome DevTools MCP 对可访问性 (a11y) 进行调试和审计，基于 web.dev 指南。在测试语义 HTML、ARIA 标签、焦点状态、键盘导航、点击目标和颜色对比度时使用。
使开发人员和测试人员能够使用自动化检查和手动检查方法，彻底审计和调试网页的可访问性。
功能
- 自动化可访问性审计 (Lighthouse)
- 检查可访问性树以了解语义结构
- 验证表单标签和图像 alt 文本
- 测试键盘导航和焦点管理
- 测量点击目标大小
- 颜色对比度比例检查
- 分析控制台消息以了解可访问性问题
使用场景
- 在确保语义 HTML 结构和标题层次结构正确时。
- 在验证交互式元素具有可访问名称和表单输入具有关联标签时。
- 在测试键盘导航和焦点管理以帮助行动不便的用户时。
- 在根据 WCAG 指南审计点击目标大小和颜色对比度比例时。
非目标
- 执行常规的网页抓取或数据提取。
- 测试与可访问性无关的性能瓶颈。
- 自动化超出可访问性检查范围的复杂用户交互流程。
Compliance
- warning:Telemetry opt-in使用统计信息收集默认启用，但已记录并在文档中说明，可以通过标志或环境变量选择退出。收集字段的模式未明确发布。
安装
请先添加 Marketplace
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp/plugin install chrome-devtools-mcp@chrome-devtools-plugins质量评分
类似扩展
使用我的浏览器
100当工作依赖于用户实时浏览器会话或可见的渲染状态，而不是静态抓取时使用，尤其是在浏览器调试上下文或 DevTools 选择的元素或请求、登录仪表板或 CMS 流程、localhost 应用、上传、下载、媒体检查、DOM 或 iframe 检查、Shadow DOM，或看起来像软 404、身份验证墙、反机器人检查或速率限制的浏览器故障时。
Fixing Accessibility
100审计和修复 HTML 可访问性问题，包括 ARIA 标签、键盘导航、焦点管理、颜色对比度和表单错误。在添加交互式控件、表单、对话框或审查 WCAG 合规性时使用。
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
Noob Mode
100Plain-English translation layer for non-technical Copilot CLI users. Translates every approval prompt, error message, and technical output into clear, jargon-free English with color-coded risk indicators.
Android Design Guidelines
100Material Design 3 和 Android 平台指南。在构建使用 Jetpack Compose 或 XML 布局的 Android 应用、实现 Material You、导航或可访问性时使用。在涉及 Android UI、Compose 组件、动态颜色或 Material Design 合规性的任务上触发。
Design Audit
100Full project design audit that orchestrates all agents, scores across 12 dimensions, generates prioritized action plan