chromedevtools/a11y-debugging

Utilise Chrome DevTools MCP pour le débogage et l'audit d'accessibilité (a11y) basé sur les directives web.dev. À utiliser lors des tests de HTML sémantique, des labels ARIA, des états de focus, de la navigation au clavier, des cibles tactiles et du contraste des couleurs.

Qu'est-ce que a11y-debugging ?

Cette compétence permet aux agents IA (comme Claude Code, Cursor, Codex) d'utiliser le protocole MCP (Model Context Protocol) de Chrome DevTools pour effectuer des audits d'accessibilité complets sur des pages web. Elle s'appuie sur les directives web.dev pour tester la conformité aux normes d'accessibilité, notamment le HTML sémantique, les labels ARIA, les états de focus, la navigation au clavier, la taille des cibles tactiles et le contraste des couleurs. Le principal avantage est de pouvoir identifier et corriger les problèmes d'accessibilité directement depuis le flux de travail de développement, sans quitter l'IDE ou l'interface en ligne de commande. La compétence fonctionne en automatisant les inspections Chrome DevTools via le MCP, ce qui permet à l'agent de récupérer des rapports détaillés et des recommandations correctives, accélérant ainsi le processus de débogage d'accessibilité.

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

Installed? Explore more Productivité et collaboration skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait a11y-debugging ?

Utilise Chrome DevTools MCP pour le débogage et l'audit d'accessibilité (a11y) basé sur les directives web.dev. À utiliser lors des tests de HTML sémantique, des labels ARIA, des états de focus, de la navigation au clavier, des cibles tactiles et du contraste des couleurs.

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.

Skills associés