chromedevtools/a11y-debugging

Chrome DevTools MCP を使用して、web.dev ガイドラインに基づくアクセシビリティ(a11y)のデバッグと監査を行います。セマンティック HTML、ARIA ラベル、フォーカス状態、キーボードナビゲーション、タップターゲット、カラーコントラストのテスト時に使用します。

a11y-debugging とは?

このスキルは、Chrome DevTools MCP を活用してウェブアプリケーションのアクセシビリティ(a11y)を包括的にデバッグ・監査するためのツールです。web.dev のガイドラインに準拠し、セマンティック HTML の正確性、ARIA ラベルの適切な設定、フォーカス状態の視覚的明示、キーボードナビゲーションの完全性、タップターゲットの十分なサイズ、そしてカラーコントラスト比の要件など、様々な観点から問題を検出します。このスキルは Chrome DevTools MCP に対応する環境(Claude Code、Coder、その他の MCP 対応エージェント)で動作し、自動化されたテストや継続的なアクセシビリティ監査のワークフローに組み込むことができます。開発者はコードを変更しながら即座にフィードバックを得られるため、アクセシビリティの問題を早期に発見・修正し、すべてのユーザーにとって使いやすいウェブサイトを構築することが可能になります。

対応~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に質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

a11y-debugging は何をしますか?

Chrome DevTools MCP を使用して、web.dev ガイドラインに基づくアクセシビリティ(a11y)のデバッグと監査を行います。セマンティック 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.

関連スキル