바이브코딩으로 뚝딱 만든 화면, 눈으로 보기엔 예쁜데 Tab 키로 넘겨보면 포커스가 어디 가 있는지도 모르겠고 이미지엔 alt 텍스트도 없는 경우가 흔합니다. 접근성은 후순위로 밀리기 딱 좋은 항목이죠.
뭔가
axe-core라는, 업계에서 표준처럼 쓰이는 접근성 테스트 엔진을 MCP로 감싼 오픈소스 서버입니다. Cline, Cursor, GitHub Copilot 같은 에이전트에서 자연어로 접근성 감사를 요청할 수 있게 해줍니다.
뭘 해결하나
이렇게 물어보면 됩니다.
```
http://localhost:3000 접근성 문제 확인해줘
```
WCAG 위반 항목을 리스트로 뽑아주고, 이어서 "저 문제들 고쳐줘"라고 하면 Claude가 바로 수정에 들어갈 수 있습니다. `audit_webpage`로 상세 감사를, `get_summary`로 요약만 받을 수도 있습니다.
어떻게 시작하나
```
npm install -g a11y-mcp
```
또는 그냥 `npx a11y-mcp`로 바로 실행해도 됩니다. MCP 클라이언트 설정에 커맨드만 등록하면 끝이라 별도 API 키가 필요 없습니다.
언제 쓰고 언제 쓰지 마세요
배포 직전 마지막 점검 용도로 부담 없이 쓰기 좋습니다. 완전 무료라 일단 돌려보는 데 진입장벽이 없습니다. 공공기관이나 커머스처럼 접근성이 법적 요구사항인 프로젝트라면 초기 단계부터 습관처럼 돌려보는 걸 추천합니다.
다만 진짜 엄격한 WCAG AA 인증이 목표라면 이걸로 끝냈다고 안심하면 안 됩니다. axe-core류 자동 검사는 원래 자동으로 잡을 수 있는 이슈만 잡아주고, 색 대비나 실제 스크린리더 사용성처럼 사람이 직접 확인해야 하는 부분은 여전히 남습니다. 그 정도로 진지하게 갈 프로젝트라면 Deque에서 나온 유료 플러그인(axe-accessibility, Axe DevTools 구독 필요)이 스크린샷 기반 AI 판단까지 해주니 그쪽도 고려해볼 만합니다.
한계
README가 짧아서 문서화가 충분하지 않고, 유지보수가 얼마나 활발한지도 확실치 않습니다. 브라우저 실행 관련 사전 요구사항도 명시가 부족해서, 막상 써보면 환경에 따라 삽질이 필요할 수 있습니다.
댓글 0
첫 댓글을 남겨보세요!