Community生產力與協作github.com

chromedevtools/a11y-debugging

使用 Chrome DevTools MCP 進行無障礙(a11y)偵錯與稽核,遵循 web.dev 指南。適用於測試語意化 HTML、ARIA 標籤、焦點狀態、鍵盤導覽、點擊目標及色彩對比。

a11y-debugging 是什麼?

這個技能專門為開發者和 AI 代理(如 Claude Code、Cursor、Codex)提供基於 Chrome Devtools MCP 的無障礙(a11y)偵錯與稽核功能。它能自動化檢查網頁的語意化 HTML 結構、ARIA 標籤的正確性、焦點狀態的可視性、鍵盤導覽的流暢性、點擊目標的大小以及色彩對比是否符合 WCAG 標準。此技能遵循 web.dev 的無障礙最佳實踐,幫助開發者快速識別並修復常見的無障礙問題,確保網頁應用能為所有使用者(包括身障人士)提供良好的體驗。它支援多種常見的 AI 編碼代理平台,並透過 MCP 協議與 Chrome DevTools 無縫整合。

相容平台~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.

相關技能