Integrations
Uses Puppeteer to navigate websites, take screenshots, and analyze web content for accessibility testing purposes
웹 접근성 MCP 서버
axe-core와 Puppeteer를 사용하여 웹 접근성 분석 기능을 제공하는 MCP(Model Context Protocol) 서버입니다.
특징
- axe-core를 사용하여 모든 URL의 웹 접근성을 분석합니다.
- 색상 행렬을 사용하여 색맹(적색맹, 녹색맹, 청색맹)을 시뮬레이션합니다.
- 접근성 위반에 대한 자세한 보고
- 사용자 정의 사용자 에이전트 및 선택기 지원
- 문제 해결을 위한 디버그 로깅
- WCAG 가이드라인을 기반으로 한 포괄적인 접근성 검사
필수 조건
- Node.js(v14 이상)
- 엔피엠
설치
Smithery를 통해 설치
Smithery를 통해 Claude Desktop용 웹 접근성 MCP 서버를 자동으로 설치하려면:
지엑스피1
수동 설치
- 저장소를 복제합니다.
- 종속성 설치:
- 서버를 빌드하세요:
구성
MCP 설정 파일(일반적으로 ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
에 위치)에 서버를 추가합니다.
환경 변수
MCP_OUTPUT_DIR
: 스크린샷 출력이 저장될 디렉토리simulate_colorblind
도구에 필요합니다.- 지정하지 않으면 현재 작업 디렉토리를 기준으로 './output'이 기본값으로 사용됩니다.
- MCP 설정에서 구성할 경우 절대 경로여야 합니다.
용법
이 서버는 웹 접근성을 분석하는 check_accessibility
와 색맹을 시뮬레이션하는 simulate_colorblind
두 가지 도구를 제공합니다.
도구: check_accessibility
axe-core를 사용하여 주어진 URL의 접근성을 확인합니다.
매개변수
url
(필수): 분석할 URLwaitForSelector
(선택 사항): 분석 전 기다릴 CSS 선택기userAgent
(선택 사항): 요청에 대한 사용자 정의 사용자 에이전트 문자열
사용 예
도구: simulate_colorblind
색상 행렬 변환을 사용하여 다양한 유형의 색맹 사용자에게 웹 페이지가 어떻게 표시되는지 시뮬레이션합니다.
색맹 유형
이 도구는 세 가지 유형의 색맹 시뮬레이션을 지원합니다.
- 적색맹 (적색맹) - 매트릭스 사용:Copy
- 녹색맹 (녹색맹) - 매트릭스 사용:Copy
- 삼 색맹 (청맹) - 매트릭스 사용:Copy
매개변수
url
(필수): 캡처할 URLtype
(필수): 시뮬레이션할 색맹 유형('적색맹', '녹색맹' 또는 '청색맹')outputPath
(선택 사항): 스크린샷 출력을 위한 사용자 지정 경로userAgent
(선택 사항): 요청에 대한 사용자 정의 사용자 에이전트 문자열
사용 예
응답 형식
check_accessibility 응답
simulate_colorblind 응답
오류 처리
서버에는 일반적인 시나리오에 대한 포괄적인 오류 처리 기능이 포함되어 있습니다.
- 네트워크 오류
- 잘못된 URL
- 시간 초과 문제
- DNS 확인 문제
오류 응답에는 문제를 진단하는 데 도움이 되는 자세한 메시지가 포함됩니다.
개발
프로젝트 구조
건물
이렇게 하면:
- TypeScript를 JavaScript로 컴파일
- 출력 파일을 실행 가능하게 만들기
- 컴파일된 파일을
build
디렉토리에 넣으세요
디버깅
서버에는 콘솔 출력에서 확인할 수 있는 자세한 디버그 로깅이 포함되어 있습니다. 여기에는 다음이 포함됩니다.
- 네트워크 요청 및 응답
- 페이지 로딩 상태
- 선택기 대기 상태
- 분석된 페이지의 모든 콘솔 메시지
- 색상 시뮬레이션 진행
일반적인 문제 및 솔루션
- 시간 초과 오류
- 코드에서 타임아웃 값을 늘리세요
- 네트워크 연결 확인
- URL에 접근 가능한지 확인하세요
- DNS 확인 오류
- URL이 올바른지 확인하세요
- 네트워크 연결 확인
- www 하위 도메인을 사용해 보세요
- 선택기를 찾을 수 없습니다
- 선택기가 페이지에 있는지 확인하세요
- 동적 콘텐츠가 로드될 때까지 기다리세요
- 올바른 선택기의 페이지 소스를 확인하세요
- 색상 시뮬레이션 문제
- 페이지의 색상이 지원되는 형식(RGB, RGBA 또는 HEX)으로 지정되었는지 확인하세요.
- 페이지에서 동적 색상 변경을 사용하는지 확인하세요(추가 대기 시간이 필요할 수 있음)
- 스크린샷 출력 디렉토리가 존재하고 쓰기 가능한지 확인하세요.
기여하다
- 저장소를 포크하세요
- 기능 브랜치 생성
- 변경 사항을 커밋하세요
- 지점으로 밀어 넣기
- 풀 리퀘스트 만들기
특허
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.
You must be authenticated.
local-only server
The server can only run on the client's local machine because it depends on local resources.
axe-core와 Puppeteer를 사용하여 웹 접근성 분석과 색맹 시뮬레이션을 제공하며, WCAG 가이드라인에 따라 세부적인 접근성 검사와 시각적 시뮬레이션을 가능하게 합니다.
- Features
- Prerequisites
- Installation
- Configuration
- Usage
- Development
- Common Issues and Solutions
- Contributing
- License
Related Resources
Related MCP Servers
- AsecurityAlicenseAqualityEnables automated web accessibility scans for WCAG compliance using Playwright and Axe-core, providing visual and JSON reports with remediation guidance.Last updated -13214TypeScriptMIT License
- AsecurityAlicenseAqualityProvides accessibility testing capabilities through CLI, helping identify accessibility issues in web applications using axe-core and Puppeteer.Last updated -1JavaScriptMIT License
Playwright MCP Serverofficial
AsecurityAlicenseAqualityA Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.Last updated -2157,0269,238TypeScriptApache 2.0- -security-license-qualityAn MCP (Model Context Protocol) server for performing accessibility audits on webpages using axe-core. Use the results in an agentic loop with your favorite AI assistants (Cline/Cursor/GH Copilot) and let them fix a11y issues for you!Last updated -JavaScriptMozilla Public License 2.0