웹 접근성 MCP 서버

axe-core와 Puppeteer를 사용하여 웹 접근성 분석 기능을 제공하는 MCP(Model Context Protocol) 서버입니다.

특징

• axe-core를 사용하여 모든 URL의 웹 접근성을 분석합니다.

• 색상 행렬을 사용하여 색맹(적색맹, 녹색맹, 청색맹)을 시뮬레이션합니다.

• 접근성 위반에 대한 자세한 보고

• 사용자 정의 사용자 에이전트 및 선택기 지원

• 문제 해결을 위한 디버그 로깅

• WCAG 가이드라인을 기반으로 한 포괄적인 접근성 검사

필수 조건

• Node.js(v14 이상)

• 엔피엠

설치

Smithery를 통해 설치

Smithery를 통해 Claude Desktop용 웹 접근성 MCP 서버를 자동으로 설치하려면:

지엑스피1

수동 설치

1. 저장소를 복제합니다.

2. 종속성 설치:

3. 서버를 빌드하세요:

구성

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 (필수): 분석할 URL

• waitForSelector (선택 사항): 분석 전 기다릴 CSS 선택기

• userAgent (선택 사항): 요청에 대한 사용자 정의 사용자 에이전트 문자열

사용 예

도구: simulate_colorblind

색상 행렬 변환을 사용하여 다양한 유형의 색맹 사용자에게 웹 페이지가 어떻게 표시되는지 시뮬레이션합니다.

색맹 유형

이 도구는 세 가지 유형의 색맹 시뮬레이션을 지원합니다.

1. 적색맹 (적색맹) - 매트릭스 사용:

   0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758

2. 녹색맹 (녹색맹) - 매트릭스 사용:

   0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7

3. 삼 색맹 (청맹) - 매트릭스 사용:

   0.95, 0.05, 0 0, 0.433, 0.567 0, 0.475, 0.525

매개변수

• url (필수): 캡처할 URL

• type (필수): 시뮬레이션할 색맹 유형('적색맹', '녹색맹' 또는 '청색맹')

• outputPath (선택 사항): 스크린샷 출력을 위한 사용자 지정 경로

• userAgent (선택 사항): 요청에 대한 사용자 정의 사용자 에이전트 문자열

사용 예

응답 형식

check_accessibility 응답

simulate_colorblind 응답

오류 처리

서버에는 일반적인 시나리오에 대한 포괄적인 오류 처리 기능이 포함되어 있습니다.

• 네트워크 오류

• 잘못된 URL

• 시간 초과 문제

• DNS 확인 문제

오류 응답에는 문제를 진단하는 데 도움이 되는 자세한 메시지가 포함됩니다.

개발

프로젝트 구조

건물

이렇게 하면:

1. TypeScript를 JavaScript로 컴파일

2. 출력 파일을 실행 가능하게 만들기

3. 컴파일된 파일을 build 디렉토리에 넣으세요

디버깅

서버에는 콘솔 출력에서 확인할 수 있는 자세한 디버그 로깅이 포함되어 있습니다. 여기에는 다음이 포함됩니다.

• 네트워크 요청 및 응답

• 페이지 로딩 상태

• 선택기 대기 상태

• 분석된 페이지의 모든 콘솔 메시지

• 색상 시뮬레이션 진행

일반적인 문제 및 솔루션

1. 시간 초과 오류

   • 코드에서 타임아웃 값을 늘리세요

   • 네트워크 연결 확인

   • URL에 접근 가능한지 확인하세요

2. DNS 확인 오류

   • URL이 올바른지 확인하세요

   • 네트워크 연결 확인

   • www 하위 도메인을 사용해 보세요

3. 선택기를 찾을 수 없습니다

   • 선택기가 페이지에 있는지 확인하세요

   • 동적 콘텐츠가 로드될 때까지 기다리세요

   • 올바른 선택기의 페이지 소스를 확인하세요

4. 색상 시뮬레이션 문제

   • 페이지의 색상이 지원되는 형식(RGB, RGBA 또는 HEX)으로 지정되었는지 확인하세요.

   • 페이지에서 동적 색상 변경을 사용하는지 확인하세요(추가 대기 시간이 필요할 수 있음)

   • 스크린샷 출력 디렉토리가 존재하고 쓰기 가능한지 확인하세요.

기여하다

1. 저장소를 포크하세요

2. 기능 브랜치 생성

3. 변경 사항을 커밋하세요

4. 지점으로 밀어 넣기

5. 풀 리퀘스트 만들기

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.