a11y-debugging

Name: a11y-debugging
Author: chromedevtools

✓

chromedevtools/chrome-devtools-mcpGitHub: chromedevtools/chrome-devtools-mcp ソース: chromedevtools/chrome-devtools-mcp

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

chromedevtools·a11y·debugging

79インストール·6トレンド·@chromedevtools

インストール

GitHub: chromedevtools/chrome-devtools-mcp

$npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging

a11y-debugging のインストール方法

コマンドラインで a11y-debugging AI スキルを開発環境にすばやくインストール

ターミナルを開く: ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます
インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging
インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: chromedevtools/chrome-devtools-mcp。

SKILL.md

原文を見る

Accessibility Tree vs DOM: Visually hiding an element (e.g., CSS opacity: 0) behaves differently for screen readers than display: none or aria-hidden="true". The takesnapshot tool returns the accessibility tree of the page, which represents what assistive technologies "see", making it the most reliable source of truth for semantic structure.

Reading web.dev documentation: If you need to research specific accessibility guidelines (like https://web.dev/articles/accessible-tap-targets), you can append .md.txt to the URL (e.g., https://web.dev/articles/accessible-tap-targets.md.txt) to fetch the clean, raw markdown version. This is much easier to read!

Chrome automatically checks for common accessibility problems. Use listconsolemessages to check for these native audits first:

web.dev ガイドラインに基づいたアクセシビリティ (a11y) のデバッグと監査に Chrome DevTools MCP を使用します。セマンティック HTML、ARIA ラベル、フォーカス状態、キーボードナビゲーション、タップターゲット、色のコントラストをテストするときに使用します。ソース: chromedevtools/chrome-devtools-mcp。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging
ソース: chromedevtools/chrome-devtools-mcp
カテゴリ: </>開発ツール
認証済み: ✓
初回登録: 2026-02-23
更新日: 2026-03-10
URL: https://www.learn-skills.dev/ja/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging

Browse more skills from chromedevtools/chrome-devtools-mcp

クイックアンサー

a11y-debugging とは？

a11y-debugging のインストール方法は？

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きますこのコマンドをコピーして実行します: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか？

https://github.com/chromedevtools/chrome-devtools-mcp

詳細

カテゴリ: </>開発ツール
ソース: skills.sh
初回登録: 2026-02-23