Claude Code에 axe-core MCP를 설치하여 WCAG 위반 사항의 80%를 자동으로 감지하고 패치함으로써, Evinced의 에이전트 기반 a11y 워크플로우를 재현하세요.

변경 사항 — Evinced, 에이전트 기반 a11y 수정이 프로덕션 환경에 준비되었음을 입증

접근성 테스트 기업인 Evinced는 에이전트 기반 코딩 (agentic coding)을 활용하여 대규모의 접근성 문제를 자동적이고 신뢰성 있게 해결할 수 있다고 발표했습니다. 이들의 접근 방식은 AI 에이전트를 사용하여 코드베이스를 스캔하고 WCAG 위반 사항을 찾아낸 다음, 자동화된 패치 (automated patches)를 적용하여 수동 QA 시간을 최대 90%까지 줄입니다.

이것은 새로운 Claude Code 기능은 아닙니다. 하지만 이미 사용 가능한 도구인 axe-core MCP 서버와 Claude Code의 에이전트 루프 (agentic loop)를 사용하여 오늘 바로 재현할 수 있는 **워크플로우 패턴 (workflow pattern)**입니다.

사용자에게 주는 의미 — 귀하의 Claude Code 설정은 이미 준비되어 있습니다

만약 지금까지 접근성 (a11y) 문제(대체 텍스트 (alt text), ARIA 속성, 색상 대비)를 수동으로 수정해 왔다면, 시간을 낭비하고 있는 것입니다. Claude Code는 다음 세 가지 구성 요소를 통해 Evinced와 동일한 방식으로 이를 자동으로 수행할 수 있습니다:

1. MCP 서버: 접근성 스캔 (axe-core)을 실행합니다.
2. Claude Code의 에이전트 루프 (agentic loop): 발견된 사항에 대해 반복 작업을 수행합니다.
3. CLAUDE.md 규칙: 모든 커밋(commit) 시 a11y 표준을 강제합니다.

지금 바로 시도하기 — 5분 만에 Evinced의 워크플로우 재현하기

1단계: axe-core MCP 서버 설치

claude.json에 다음을 추가하거나 직접 실행하세요:

# MCP 서버를 전역으로 설치
npm install -g @axe-core/mcp

...

2단계: 한 번의 명령으로 스캔 및 수정

claude code --mcp axe-core "Scan all HTML and JSX files in this project for WCAG 2.2 violations. For each issue found, apply an automated fix using the axe-core MCP server. Output a summary of fixes applied."

Claude Code는 다음을 수행합니다:

• 귀하의 컴포넌트에 대해 axe-core를 실행합니다.
• 위반 사항(누락된 레이블, 불충분한 대비, 누락된 ARIA)을 식별합니다.
• 소스 파일에 직접 패치를 적용합니다.
• 변경 사항을 요약합니다.

3단계: CLAUDE.md로 자동화하기

모든 코드 변경 시 a11y를 강제하려면 CLAUDE.md에 다음을 추가하세요:

## 접근성 표준 (Accessibility Standards)

UI 컴포넌트를 수정하는 모든 작업을 완료하기 전에:
...

4단계: 전체 코드베이스 일괄 수정하기

기존 프로젝트의 경우, 일회성 스캔을 실행하세요:

claude code --mcp axe-core "Run a full accessibility audit on this project. Group violations by type (missing alt text, missing labels, color contrast). Fix each group in order of severity (critical first). Commit each group separately with descriptive messages."

이것이 작동하는 이유 — 에이전트 패턴 (Agentic Pattern)

Evinced의 비결은 커스텀 모델이 아니라, 바로 피드백 루프 (feedback loop): 스캔(scan) → 진단(diagnose) → 수정(fix) → 검증(verify)입니다. Claude Code의 MCP 아키텍처는 정확히 이 루프를 제공합니다:

• 스캔 (Scan): axe-core가 브라우저 개발자 도구에서 사용하는 것과 동일한 엔진을 실행합니다.
• 진단 (Diagnose): Claude가 문맥(어떤 컴포넌트인지, 몇 번째 라인인지)에 따라 위반 사항을 해석합니다.
• 수정 (Fix): Claude가 올바른 ARIA 속성, 레이블(label) 또는 대비(contrast) 조정을 적용합니다.
• 검증 (Verify): axe-core가 다시 스캔하여 수정 사항이 통과하는지 확인합니다.

이를 통해 일반적인 WCAG 위반 사항의 약 80%를 자동으로 잡아낼 수 있습니다. 나머지 20%(복잡한 포커스 관리, 동적 콘텐츠)는 여전히 사람의 검토가 필요하지만, 여러분은 방금 5개 중 4개의 티켓을 제거한 셈입니다.

전문가 팁 (Pro Tips)

• MCP 방식을 도입하기 전에 ESLint 설정에 jsx-a11y 린트(lint) 규칙부터 시작하세요. 표면적인 문제를 더 빠르게 잡아낼 수 있습니다.
• React 프로젝트의 경우, 프롬프트에 다음 내용을 추가하세요: "React 전용 패턴을 사용하세요: 버튼에는 aria-label, 레이블에는 htmlFor, 시맨틱(semantic) <nav> 및 <main> 요소 사용"
• 디자인 시스템의 경우, 컴포넌트 라이브러리의 접근성(a11y) 패턴을 문서화하는 CLAUDE.md를 작성하여 수정 사항이 일관되게 유지되도록 하세요.
• CI에서 스캔을 실행할 때 axe-core CLI를 직접 사용한 다음, 그 결과를 Claude Code로 전달하여 자동화된 PR(Pull Request) 수정을 진행하세요.

사용하지 말아야 할 경우

다음 사항에 대해서는 자동 수정에 의존하지 마세요:

• 키보드 탐색 흐름 (탭 순서(tab order), 포커스 트래핑(focus trapping))
• 스크린 리더 안내 (라이브 리전(live regions))
• 복잡한 동적 콘텐츠 (SPA 라우팅 안내)

이러한 사항들은 실제 스크린 리더 (screen reader)를 사용한 수동 테스트가 필요합니다. 하지만 정적 위반 사항 (static violations)의 80%에 대해서는 어떨까요? Claude Code에게 맡겨보세요.

출처: news.google.com

원문 게시지: gentic.news