Community生产力与协作github.com

chromedevtools/a11y-debugging

使用 Chrome DevTools MCP 进行无障碍(a11y)调试和审核,遵循 web.dev 指南。适用于测试语义 HTML、ARIA 标签、焦点状态、键盘导航、点击目标和颜色对比度。

a11y-debugging 是什么?

该技能通过 Chrome DevTools MCP 提供无障碍(a11y)调试和审核功能,严格遵循 web.dev 指南。它主要用于检测和修复网页中的语义 HTML 结构、ARIA 标签正确性、焦点状态可见性、键盘导航逻辑、点击目标大小以及颜色对比度等问题。技能支持在 Chrome DevTools 环境下运行,可集成到 AI 代理工具(如 Claude Code、Cursor、Codex)中,帮助开发者快速定位和解决常见的无障碍缺陷。其工作流程通常包括:通过 DevTools 协议获取页面元素和样式信息,运行一系列标准检查规则(如 WCAG 标准),输出详细的报告,并给出具体修复建议。该技能适合前端开发、QA 测试和无障碍审计场景,能显著提升网页的可访问性合规性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp/tree/main/skills/a11y-debugging

Installed? Explore more 生产力与协作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

a11y-debugging 是做什么的?

使用 Chrome DevTools MCP 进行无障碍(a11y)调试和审核,遵循 web.dev 指南。适用于测试语义 HTML、ARIA 标签、焦点状态、键盘导航、点击目标和颜色对比度。

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

chromedevtools/chrome-devtools

Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).

chromedevtools/chrome-devtools-cli

Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.

chromedevtools/cookie-debugging

Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings.

chromedevtools/debug-optimize-lcp

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.

chromedevtools/memory-leak-debugging

Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools.

chromedevtools/troubleshooting

Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

相关技能