Web Accessibility Testing MCP
Ronan Takizawa · 코딩
Web Accessibility Testing MCP는 AI 클라이언트에 웹 페이지의 접근성 문제를 검사하는 능력을 부여하는 오픈소스 Model Context Protocol 서버다. Deque의 Axe-core 엔진과 Puppeteer를 결합해, Claude Desktop이나 Cursor 같은 어시스턴트가 실제 URL이나 원시 HTML 조각을 테스트하고 WCAG 2.0, 2.1, 2.2 준수 여부를 보고할 수 있게 한다. 페이지를 주면, 무엇이 어떻게 깨졌는지 목록으로 돌려준다.
Web Accessibility Testing MCP 소개
Web Accessibility Testing MCP란
Web Accessibility Testing MCP는 흔히 a11y MCP로 줄여 부른다. AI 코딩 어시스턴트를, 이미 많은 전문 감사 팀이 쓰는 엔진에 연결하는 작은 MCP 접근성 테스트 서버다. Deque Labs의 Axe-core 라이브러리를 감싸고 Puppeteer로 실제 헤드리스 브라우저를 구동한다. 그래서 검사는 정적 마크업이 아니라 렌더링된 페이지를 대상으로 돌아간다.
핵심은 위치다. 별도 대시보드가 없다. 탭 사이로 결과를 복사할 필요도 없다. 대신 URL을 봐 달라고 어시스턴트에 요청하면, 결과가 평범한 채팅 응답으로 돌아온다. 컴포넌트를 출시하기 직전, 풀 리퀘스트 전에 WCAG 준수 확인을 빠르게 하고 싶을 때 이점이 드러난다.
가장 큰 한계는 솔직히 말해 둘 가치가 있다. 이건 커뮤니티 프로젝트이지 Deque의 공식 제품이 아니다. 지원은 GitHub 저장소에서 오고, 벤더 헬프데스크가 아니다. 또 Axe-core가 자동으로 탐지할 수 있는 것만 테스트한다. 많은 실제 문제를 커버하지만, 사람 검토자가 보는 모든 것을 잡아내지는 못한다.
시작하기
- 컴퓨터에 Node.js 18 이상이 있는지 확인하고, Claude Desktop, Claude Code, VS Code, Cursor 같은 MCP 호환 클라이언트를 고른다.
- 클라이언트의 MCP 설정 파일을 연다. 이 파일의 위치는 macOS, Windows, Linux에서 각각 다르다.
- mcpServers 아래에 a11y-accessibility라는 항목을 추가하고, 명령에는 npx, 인수에는 -y a11y-mcp-server를 넣는다.
- 새 도구가 등록되도록 클라이언트 세션을 재시작한 뒤, 도구 목록에 서버가 뜨는지 확인한다.
- wcag2aa 같은 태그로 URL을 테스트해 달라고 어시스턴트에 요청하고, 필요하면 모바일 또는 데스크톱 확인을 위해 viewport의 너비와 높이를 설정한다.
제품 정보
Web Accessibility Testing MCP의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프런트엔드 개발자
- QA 및 접근성 테스터
- 전담 감사자 없는 소규모 팀
작업
- 실제 페이지 테스트
- HTML 조각 테스트
- 색 대비 분석
- ARIA 검증
활용 상황
- 커밋 전 검사
- 반응형 검토
- 회귀 추적
주요 기능
URL 및 HTML 조각 테스트
서버는 모든 공개 URL이나 원시 HTML 문자열을 테스트한다. 손으로 확인하기 어려운 실제 페이지와, 에디터에 아직 남아 있는 조각을 모두 커버한다. 실행할 때마다 구조화된 보고서가 돌아온다. 스크린샷은 없다. 어시스턴트가 위반 내용을 곧바로 요약할 수 있다.
Axe-core와 Puppeteer 통합
검사는 Deque의 Axe-core 엔진을 거쳐, Puppeteer가 구동하는 실제 헤드리스 브라우저 안에서 실행된다. 이는 Axe-core 접근성 검사이며, 전문 감사 팀이 돌리는 것과 같은 종류다. 페이지가 완전히 렌더링되므로 결과는 소스 HTML만이 아니라 사용자가 실제로 불러오는 내용을 반영한다. 많은 전문 도구가 의존하는 것과 같은 탐지 로직이다.
WCAG 2.0, 2.1, 2.2 준수 테스트
wcag2aa 같은 태그로 어떤 표준에 대해 테스트할지 고른다. 서버는 콘텐츠를 2.0, 2.1, 2.2 규칙에 비춰 검사하므로, 전부 돌리는 대신 프로젝트가 실제로 목표하는 등급에 맞출 수 있다.
사용자 지정 가능한 viewport 크기
너비와 높이를 설정할 수 있고, 기본값은 1280 x 800이다. 휴대폰 크기 viewport를 지정하면 작은 화면에서만 나타나는 문제가 드러난다. 예컨대 빡빡한 탭 영역. 또는 좁은 너비에서 깨지는 콘텐츠.
색 대비 및 ARIA 검사
흔한 실패 영역 두 곳에는 전용 도구가 있다. 색 대비 분석기는 텍스트와 배경 짝을 검증하고, ARIA 검증은 속성이 올바르고 완전하게 쓰였는지 본다. 둘 다 눈으로 확인하기 번거로운 문제를 잡는다.
규칙 탐색
규칙 탐색 도구는 어떤 접근성 규칙이 있고 그것이 무엇을 뜻하는지 설명한다. 보고서가 낯선 항목을 지적했을 때, 그것이 진짜 문제인지 판단하기 전에 맥락을 알고 싶을 때 유용하다.
화면 방향 고정 감지
서버는 특정 화면 방향을 강제하는 콘텐츠를 지적한다. 태블릿 사용자나 운동 기능에 제약이 있는 사람에게 중요하다. 방향이 고정되면 페이지가 쓸모없어질 수 있기 때문이다.
장단점
장점
- 기존 AI 클라이언트 안에서 돌아가므로 별도 대시보드나 계정을 관리할 필요가 없다.
- 무료이며 오픈소스이고, 전체 코드가 GitHub에 공개돼 있다.
- 널리 신뢰받는 접근성 규칙 엔진 Axe-core 위에 세워졌다.
- 실제 URL과 원시 HTML을 모두 테스트해 개발의 이른 단계와 늦은 단계를 아우른다.
- 설정 가능한 WCAG 태그와 viewport 크기로 테스트 범위를 조절할 수 있다.
단점
- 자동 검사는 사람의 판단이 필요한 문제를 놓치므로 수동 감사를 대체하지 못한다.
- Node.js 18+ 와 MCP 지원 클라이언트가 필요해, 가볍게 쓰려는 비기술 사용자는 배제된다.
- 커뮤니티 프로젝트이지 Deque의 공식 제품이 아니라서 벤더 지원 창구가 없다.
자주 묻는 질문
AI 어시스턴트를 Deque의 Axe-core 엔진에 연결하는 AI 접근성 테스트 도구다. 그래서 어시스턴트가 웹 페이지와 HTML 조각의 접근성 문제와 WCAG 준수 여부를 테스트할 수 있다. 에디터를 벗어나고 싶지 않은 개발자를 위한 접근성 테스트에 유용하다. 물어보면 위반 목록을 구조화된 형태로 돌려준다.
관련 콘텐츠
Web Accessibility Testing MCP와 관련된 도구, 스킬, 아티클을 살펴보세요.
Web Accessibility Testing MCP 대안
Forefront
Forefront · 코딩Forefront는 오픈소스 AI로 무언가를 만드는 웹 플랫폼이다. 대표적인 오픈소스 언어 모델을 자신의 데이터로 미세 조정하고, 성능을 평가하고, API로 실행하거나 내보내 직접 호스팅할 수 있다. 폐쇄형 플랫폼의 편의를 원하면서도 모델과 데이터의 소유권은 놓지 않으려는 개발자가 대상이다.
Startkit
StartKit.AI · 코딩Startkit은 AI SaaS와 AI 래퍼 제품을 만들기 위한 보일러플레이트다. 지루한 부분을 미리 연결해 둔 AI 스타트업 보일러플레이트라고 생각하면 된다. 인증, Stripe와 Lemon Squeezy 결제, 사용량 제한, 트랜잭션 이메일, 그리고 OpenAI, Anthropic, Groq, Llama와 통신하는 AI API 스타터 키트가 포함된다. 저장소를 복제하고 가격을 정한 뒤 사용자가 실제로 돈을 내는 부분에 착수하면 된다. React와 Tailwind 위의 Next.js로 만들어졌기 때문에 보일러플레이트 코드의 상당 부분이 이미 익숙하게 느껴진다.
Testim
Tricentis · 코딩Testim은 웹, 모바일, Salesforce 애플리케이션 전반에 걸쳐 엔드투엔드 테스트를 만들고 실행하는 AI 기반 테스트 자동화 플랫폼이다. 머신러닝에 기대어 인터페이스가 바뀌어도 테스트를 안정적으로 유지하므로, 팀은 깨진 셀렉터를 고치는 데 쓰는 시간을 줄인다. 오늘부터 쓸 수 있는 자동화 테스트 도구치고 나쁘지 않다. 브라우저에서 동작을 녹화해 테스트를 만들고, 더 세밀한 제어가 필요하면 JavaScript를 더한다. 바쁜 QA 팀에게 탄탄한 선택이다.