커서 A11y MCP

AI 에이전트의 접근성 테스트 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 도구는 axe-core와 Puppeteer를 사용하여 웹 애플리케이션의 접근성 문제를 식별하는 데 도움이 됩니다.

특징

• 모든 URL 또는 로컬 개발 서버에서 접근성 테스트를 실행합니다.

• 포괄적인 접근성 테스트를 위해 axe-core를 사용합니다.

• 다음을 포함한 자세한 위반 보고서를 제공합니다.

  • 영향 수준

  • 문제 설명

  • 도움말 텍스트 및 문서 링크

  • 영향을 받는 HTML 요소

  • 실패 요약

프로젝트 구조

• src/ - MCP 서버 및 접근성 테스트 도구의 소스 코드

• test-site/ - 테스트를 위해 의도적으로 접근성 문제가 있는 React 애플리케이션

• build/ - 소스 코드의 컴파일된 버전

설치

지엑스피1

그런 다음 테스트 사이트 종속성을 설치합니다.

용법

MCP 서버 시작

테스트 사이트 실행

테스트 사이트는 http://localhost:5000 에서 이용할 수 있습니다.

접근성 테스트 실행

이 도구는 두 가지 유형의 입력을 허용합니다.

1. 테스트를 위한 전체 URL

2. http://localhost:5000 에 추가될 상대 경로

종속성

• @modelcontextprotocol/sdk : ^1.4.1

• puppeteer : ^24.1.1

• zod : ^3.24.1

테스트 사이트 종속성

• react : ^18.2.0

• react-dom : ^18.2.0

• react-scripts : 5.0.1

개발

1. src/ 디렉토리의 소스 코드를 변경합니다.

2. npm run build 실행하여 변경 사항을 컴파일합니다.

3. npm start 로 서버를 시작하세요

커서에서 구성

이 접근성 테스트 도구를 Cursor의 MCP 서버 설정에 추가하려면:

1. 커서 설정 열기(⌘ + ,)

2. "기능" > "MCP 서버"로 이동합니다.

3. 다음 구성으로 새로운 MCP 서버를 추가합니다.

   • 이름: a11y

   • 드롭다운에서 command 선택하세요

   • 명령어: node path/to/cursor-a11y-mcp/index/file/in/build/folder ( path/to/cursor-a11y-mcp/index/file/in/build/folder 빌드 폴더의 index.js 파일에 대한 절대 경로로 바꾸세요.)

4. Add 클릭하세요

5. 접근성 테스트 도구는 이제 Cursor's Composer에서 사용할 수 있습니다.

Composer에서의 사용법

Cursor's Composer에서 접근성 테스트 도구를 사용하려면:

1. 터미널에서 실행하세요:

이렇게 하면 http://localhost:5000 에서 테스트 사이트가 시작됩니다.

2. 커서의 작성기에서 use a11y tool 입력합니다.

3. Composer는 도구를 실행하라는 메시지를 표시합니다.

4. 도구를 실행하면 응답에서 접근성 위반 사항을 확인하고 위반 사항을 수정하기 위한 코드 작업을 확인할 수 있습니다.

5. Composer는 위반 사항이 수정되었는지 확인하기 위해 도구를 다시 사용하라는 메시지를 표시할 수 있습니다.

특허

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

버전

현재 버전: 2.0.1