MCP 접근성 스캐너 🔍
Playwright와 Axe-core를 사용하여 자동화된 웹 접근성 검사를 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 통해 LLM은 WCAG 준수 검사를 수행하고, 주석이 달린 스크린샷을 캡처하고, 상세 접근성 보고서를 생성할 수 있습니다.
특징
✅ 전체 WCAG 2.1/2.2 규정 준수 검사
🖼️ 위반 사항 강조 표시 기능이 있는 자동 스크린샷 캡처
📄 수정 지침이 포함된 자세한 JSON 보고서
Related MCP server: Cursor A11y MCP
설치
다음 방법 중 하나를 사용하여 패키지를 설치할 수 있습니다.
npm 사용하기:
지엑스피1
도커 설치
이 프로젝트에는 Node.js v22와 Python 3.13을 포함한 모든 필수 종속성을 설정하는 Dockerfile이 포함되어 있습니다.
Docker 이미지를 빌드합니다.
docker build -t mcp-server .
컨테이너를 실행합니다.
docker run -it -e MCP_PROXY_DEBUG=true mcp-server
백그라운드에서 실행할 수도 있습니다.
docker run -d -p 3000:3000 mcp-server
VS Code에 설치
VS Code CLI를 사용하여 VS Code에 접근성 스캐너를 설치하세요.
VS 코드의 경우:
code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'
VS Code Insider를 위한:
code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'
구성
Claude Desktop 구성은 다음과 같습니다.
{
"mcpServers": {
"accessibility-scanner": {
"command": "npx",
"args": ["-y", "mcp-accessibility-scanner"]
}
}
}
용법
스캐너는 다음을 허용하는 단일 도구 scan_accessibility 제공합니다.
url : 스캔할 웹페이지 URL(필수)
violationsTag : 확인할 접근성 위반 태그 배열(필수)
viewport : 뷰포트 크기를 사용자 정의하는 선택적 객체
width : 숫자 (기본값: 1920)
height : 숫자 (기본값: 1080)
shouldRunInHeadless : 헤드리스 모드를 제어하는 선택적 부울 값(기본값: true)
참고: 검사를 실행하면 접근성 위반 사항을 강조한 주석이 달린 스크린샷이 자동으로 다운로드 폴더에 저장됩니다.
Claude에서의 사용 예:
Could you scan example.com for accessibility issues related to color contrast?
사용자 정의 옵션을 사용한 고급 예제:
Could you scan example.com for accessibility issues with a viewport of 1280x720 and show the browser window?
개발
프로젝트를 복제하고 설정합니다.
git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install
감시 모드에서 TypeScript 컴파일러를 시작합니다.
MCP 서버를 로컬로 테스트합니다.
도커 개발
Docker를 사용하여 개발하는 경우:
개발 이미지 빌드:
docker build -t mcp-server-dev .
라이브 코드 변경에 대한 볼륨 마운팅을 실행합니다.
docker run -it -v $(pwd):/app -p 3000:3000 -e MCP_PROXY_DEBUG=true mcp-server-dev
프로젝트 구조
├── src/ # Source code
│ ├── index.ts # MCP server setup and tool definitions
│ └── scanner.ts # Core scanning functionality
├── build/ # Compiled JavaScript output
├── Dockerfile # Docker configuration for containerized setup
├── package.json # Project configuration and dependencies
└── tsconfig.json # TypeScript configuration
특허
MIT
