A11y MCP Server
웹 접근성 테스트 MCP 서버(A11y MCP)
A11y MCP는 LLM이 웹 접근성 테스트 API에 액세스할 수 있도록 하는 MCP(Model Context Protocol) 서버입니다.
이 서버는 Deque Axe-core API와 Puppeteer를 사용하여 LLM이 웹 콘텐츠를 분석하여 WCAG 규정을 준수하고 접근성 문제를 식별할 수 있도록 합니다.
참고: 이것은 Deque Labs의 공식 MCP 서버가 아닙니다.
프로젝트가 마음에 드셨다면 별점을 남겨주세요! 🌟
특징
웹 페이지 테스트 : 모든 공개 URL의 접근성 문제를 테스트합니다.
HTML 스니펫 테스트 : 접근성 문제에 대한 원시 HTML 문자열 테스트
WCAG 준수 테스트 : 다양한 WCAG 표준(2.0, 2.1, 2.2)에 따라 콘텐츠를 확인합니다.
사용자 정의 가능한 테스트 : 테스트할 접근성 태그/표준을 지정합니다.
규칙 탐색 : 사용 가능한 접근성 규칙에 대한 정보 얻기
색상 대비 분석 : WCAG 규정 준수를 위한 색상 조합 확인
ARIA 검증 : ARIA 속성의 적절한 사용 테스트
방향 잠금 감지 : 특정 화면 방향을 강제로 지정하는 콘텐츠 식별
Related MCP server: Web Accessibility MCP Server
설치
Claude Desktop과 함께 이 서버를 사용하려면 MCP 설정에서 다음과 같이 구성해야 합니다.
macOS의 경우: '~/Library/Application Support/Claude/claude_desktop_config.json' 파일을 편집하세요.
지엑스피1
Windows의 경우: %APPDATA%\Claude\settings\claude_mcp_settings.json 파일을 편집하세요.
Linux의 경우: ~/.config/Claude/settings/claude_mcp_settings.json 파일을 편집합니다. /path/to/axe-mcp-server/build/index.js 컴파일된 서버 파일의 실제 경로로 바꿉니다.
사용 가능한 도구
테스트_접근성
URL의 접근성 문제를 테스트합니다.
매개변수:
url(필수): 테스트할 웹 페이지의 URLtags(선택 사항): 테스트할 WCAG 태그 배열(예: ["wcag2aa"])
예
{
"url": "https://example.com",
"tags": ["wcag2aa"]
}테스트_html_문자열
HTML 문자열의 접근성 문제를 테스트합니다. 매개변수:
html(필수): 테스트할 HTML 콘텐츠
태그(선택 사항): 테스트할 WCAG 태그 배열(예: ["wcag2aa"])
예
{
"html": "<div><img src='image.jpg'></div>",
"tags": ["wcag2aa"]
}get_rules
선택적 필터링을 통해 사용 가능한 접근성 규칙에 대한 정보를 얻으세요.
색상 대비 확인
전경색과 배경색 조합이 WCAG 대비 요구 사항을 충족하는지 확인하세요.
매개변수:
foreground(필수): 16진수 형식의 전경색(예: "#000000")background(필수): 16진수 형식의 배경색(예: "#FFFFFF")fontSize(선택 사항): 픽셀 단위의 글꼴 크기(기본값: 16)isBold(선택 사항): 텍스트를 굵게 표시할지 여부(기본값: false)
예
{
"foreground": "#777777",
"background": "#EEEEEE",
"fontSize": 16,
"isBold": false
}색상 대비 확인
HTML에서 ARIA 속성이 올바르게 사용되었는지 확인하세요.
매개변수:
html(필수): ARIA 속성 사용을 테스트할 HTML 콘텐츠
예
{
"html": "<div role='button' aria-pressed='false'>Click me</div>"
}방향 잠금 확인
콘텐츠가 특정 방향을 강제로 표시하는지 확인하세요.
매개변수:
html(필수): 방향 잠금 문제를 테스트하기 위한 HTML 콘텐츠
예
{
"html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}응답 형식
서버는 구조화된 JSON 형식으로 접근성 테스트 결과를 반환합니다.
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
"target": ["div"],
"failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
}
]
}
],
"passes": 1,
"incomplete": 0,
"inapplicable": 2,
"timestamp": "2025-04-25T16:45:33.655Z",
"url": "about:blank",
"testEngine": {
"name": "axe-core",
"version": "4.10.3"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
"windowWidth": 800,
"windowHeight": 600,
"orientationAngle": 0,
"orientationType": "portrait-primary"
}
}종속성
@modelcontextprotocol/sdk
인형극 배우
@axe-core/인형극단
도끼심
Maintenance
Appeared in Searches
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ronantakizawa/a11ymcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server