MCP 접근성 스캐너

MCP 접근성 스캐너 🔍

Playwright와 Axe-core를 사용하여 자동화된 웹 접근성 검사를 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 통해 LLM은 WCAG 준수 검사를 수행하고, 주석이 달린 스크린샷을 캡처하고, 상세 접근성 보고서를 생성할 수 있습니다.

특징

✅ 전체 WCAG 2.1/2.2 규정 준수 검사
🖼️ 위반 사항 강조 표시 기능이 있는 자동 스크린샷 캡처
📄 수정 지침이 포함된 자세한 JSON 보고서

설치

다음 방법 중 하나를 사용하여 패키지를 설치할 수 있습니다.

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 컴파일러를 시작합니다.

npm run watch

MCP 서버를 로컬로 테스트합니다.

npm run inspector

도커 개발

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

MCP Accessibility Scanner