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/ko/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