접근성 검사기를 MCP 서버로 변환하여 HTML을 작성하는 에이전트가 수정할 수 있게 하다

지난주에는 WCAG 검사기로 gov.uk를 테스트한 경험에 대해 글을 썼고, 그 결과 발견된 72개의 '위반 사항'이 모두 검사기 자체의 버그라는 것을 알게 되었습니다. 이 버그들을 수정하면서 저는 실제 웹사이트에서 신뢰할 수 있는 엔진을 갖게 되었고, 이를 Chrome 확장 프로그램 형태로 패키징했습니다.

하지만 지금 당장 접근성 검사가 가장 필요한 사람들은 사람이 아닙니다. 바로 코딩 에이전트들입니다. Claude Code, Cursor 등의 도구들이 엄청난 양의 새로운 HTML을 생성하고 있으며, 이들은 우리가 하던 것과 똑같이 alt 속성이 없는 <img> 태그, 회색 배경에 흰색 텍스트 플레이스홀더, 그리고 outline: none 등을 배포합니다. 사람이 클릭하는 확장 프로그램으로는 이러한 문제를 해결할 수 없습니다.

그래서 동일한 엔진을 이제 MCP 서버인 a11yscope-mcp로 만들었습니다.

기능 소개

세 가지 도구로 구성되어 있습니다:

• scan_page: URL 또는 로컬 HTML 파일을 헤드리스 Chrome에서 로드하여 규칙별로 그룹화된 위반 사항을 반환합니다. 모든 발견 항목에는 CSS 선택자, HTML 스니펫, 그리고 무엇을 변경해야 하는지 알려주는 메시지가 포함됩니다.
• scan_html: 마크업 문자열에 대해서도 동일하게 작동하며, 이는 에이전트들이 실제로 필요로 하는 기능입니다. _

Cursor, Claude Desktop 또는 다른 MCP 클라이언트:

{
  "mcpServers": {
    "a11yscope": { "command": "npx", "args": ["-y", "a11yscope-mcp"] }
...

그런 다음 _"http://localhost:3000를 a11yscope로 스캔하고 모든 위반 사항을 수정한 후, 다시 스캔해줘"_와 같은 프롬프트가 루프를 닫습니다. 에이전트는 셀렉터와 메시지를 읽고 파일을 편집하며, 목록이 비어질 때까지 재스캔합니다.

결과의 모습

레이블 없는 이미지와 빈 링크를 가진 컴포넌트의 경우:

{
  "summary": { "violations": 2, "review": 1, "rulesRun": 31, "rulesFailed": 2, "rulesPassed": 28 },
  "rules": [
...

이 면책 조항은 의도적으로 모든 응답에 포함됩니다. 에이전트에게 허용하면 사용자에게