Skip to main content
Glama
Sign In
enesjakozh

Web Accessibility MCP Server

by bilhasry-deriv
GitHub
JavaScript
MIT License
  • Apple
  • Linux
RedditDiscord
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

local-only server

The server can only run on the client’s local machine because it depends on local resources.

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

수동 설치

  1. 저장소를 복제합니다.
git clone [repository-url] cd mcp-web-a11y
  1. 종속성 설치:
npm install
  1. 서버를 빌드하세요:
npm run build

구성

MCP 설정 파일(일반적으로 ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json 에 위치)에 서버를 추가합니다.

{ "mcpServers": { "web-a11y": { "command": "node", "args": ["/path/to/mcp-web-a11y/build/index.js"], "disabled": false, "autoApprove": [], "env": { "MCP_OUTPUT_DIR": "/path/to/output/directory" } } } }

환경 변수

  • MCP_OUTPUT_DIR : 스크린샷 출력이 저장될 디렉토리
    • simulate_colorblind 도구에 필요합니다.
    • 지정하지 않으면 현재 작업 디렉토리를 기준으로 './output'이 기본값으로 사용됩니다.
    • MCP 설정에서 구성할 경우 절대 경로여야 합니다.

용법

이 서버는 웹 접근성을 분석하는 check_accessibility 와 색맹을 시뮬레이션하는 simulate_colorblind 두 가지 도구를 제공합니다.

도구: check_accessibility

axe-core를 사용하여 주어진 URL의 접근성을 확인합니다.

매개변수

  • url (필수): 분석할 URL
  • waitForSelector (선택 사항): 분석 전 기다릴 CSS 선택기
  • userAgent (선택 사항): 요청에 대한 사용자 정의 사용자 에이전트 문자열

사용 예

<use_mcp_tool> <server_name>mcp-web-a11y</server_name> <tool_name>check_accessibility</tool_name> <arguments> { "url": "https://example.com", "waitForSelector": ".main-content", "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" } </arguments> </use_mcp_tool>

도구: 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 (선택 사항): 요청에 대한 사용자 정의 사용자 에이전트 문자열

사용 예

<use_mcp_tool> <server_name>mcp-web-a11y</server_name> <tool_name>simulate_colorblind</tool_name> <arguments> { "url": "https://example.com", "type": "deuteranopia", "outputPath": "colorblind_simulation.png" } </arguments> </use_mcp_tool>

응답 형식

check_accessibility 응답

{ "url": "analyzed-url", "timestamp": "ISO-timestamp", "violations": [ { "impact": "serious|critical|moderate|minor", "description": "Description of the violation", "help": "Help text explaining the issue", "helpUrl": "URL to detailed documentation", "nodes": [ { "html": "HTML of the affected element", "failureSummary": "Summary of what needs to be fixed" } ] } ], "passes": 42, "inapplicable": 45, "incomplete": 3 }

simulate_colorblind 응답

{ "url": "analyzed-url", "type": "colorblind-type", "outputPath": "path/to/screenshot.png", "timestamp": "ISO-timestamp", "message": "Screenshot saved with [type] simulation" }

오류 처리

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

  • 네트워크 오류
  • 잘못된 URL
  • 시간 초과 문제
  • DNS 확인 문제

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

개발

프로젝트 구조

mcp-web-a11y/ ├── src/ │ └── index.ts # Main server implementation ├── build/ # Compiled JavaScript ├── output/ # Generated screenshots ├── package.json # Project dependencies and scripts └── tsconfig.json # TypeScript configuration

건물

npm run build

이렇게 하면:

  1. TypeScript를 JavaScript로 컴파일
  2. 출력 파일을 실행 가능하게 만들기
  3. 컴파일된 파일을 build 디렉토리에 넣으세요

디버깅

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

  • 네트워크 요청 및 응답
  • 페이지 로딩 상태
  • 선택기 대기 상태
  • 분석된 페이지의 모든 콘솔 메시지
  • 색상 시뮬레이션 진행

일반적인 문제 및 솔루션

  1. 시간 초과 오류
    • 코드에서 타임아웃 값을 늘리세요
    • 네트워크 연결 확인
    • URL에 접근 가능한지 확인하세요
  2. DNS 확인 오류
    • URL이 올바른지 확인하세요
    • 네트워크 연결 확인
    • www 하위 도메인을 사용해 보세요
  3. 선택기를 찾을 수 없습니다
    • 선택기가 페이지에 있는지 확인하세요
    • 동적 콘텐츠가 로드될 때까지 기다리세요
    • 올바른 선택기의 페이지 소스를 확인하세요
  4. 색상 시뮬레이션 문제
    • 페이지의 색상이 지원되는 형식(RGB, RGBA 또는 HEX)으로 지정되었는지 확인하세요.
    • 페이지에서 동적 색상 변경을 사용하는지 확인하세요(추가 대기 시간이 필요할 수 있음)
    • 스크린샷 출력 디렉토리가 존재하고 쓰기 가능한지 확인하세요.

기여하다

  1. 저장소를 포크하세요
  2. 기능 브랜치 생성
  3. 변경 사항을 커밋하세요
  4. 지점으로 밀어 넣기
  5. 풀 리퀘스트 만들기

특허

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

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

Tools

axe-core와 Puppeteer를 사용하여 웹 접근성 분석과 색맹 시뮬레이션을 제공하며, WCAG 가이드라인에 따라 세부적인 접근성 검사와 시각적 시뮬레이션을 가능하게 합니다.

  1. Features
    1. Prerequisites
      1. Installation
        1. Installing via Smithery
        2. Manual Installation
      2. Configuration
        1. Environment Variables
      3. Usage
        1. Tool: check_accessibility
        2. Tool: simulate_colorblind
        3. Response Format
        4. Error Handling
      4. Development
        1. Project Structure
        2. Building
        3. Debugging
      5. Common Issues and Solutions
        1. Contributing
          1. License

            Related Resources

            Appeared in Searches

            ID: mya2mkxy9a