내가 유럽의 RGAA 접근성 기준 중 62%를 자동화한 방법
Source: Dev.to
소개
유럽에서는 2025년 6월 유럽 접근성 법(EAA)에 따라 웹 접근성이 의무화되었습니다. EU는 준수를 요구하지만 테스트 방법을 규정하지 않으며, 각 회원국은 자체 표준을 따릅니다. 프랑스는 RGAA 4.1을 사용합니다. 이는 정부가 발표한 사양으로 106개의 기준과 상세한 테스트 절차를 포함합니다.
기존 도구(Axe, WAVE, Lighthouse)는 WCAG를 목표로 하며 RGAA와 바로 매핑되지 않으므로, 저는 전용 솔루션을 구축했습니다.
RGAA 4.1 vs. WCAG
- 106개 기준 (WCAG 2.1 AA의 78개와 비교)
- 13개의 주제 영역(이미지, 색상, 링크, 양식, 내비게이션 등)으로 구성
- 정밀한 테스트 방법 제공 – “무엇을 달성해야 하는가”뿐 아니라 “어떻게 검증할 것인가”도 제시
공공기관이나 EAA 적용 대상 기업이 감사를 받아야 할 경우, 요구되는 기준은 WCAG가 아니라 RGAA이다. 이를 위한 SaaS 도구는 존재하지 않았다.
자동화 적용 범위
106개의 RGAA 기준 중 **66개(62 %)**를 자동으로 테스트할 수 있습니다. 테마별 최고 적용 비율:
| Theme | Automatable / Total | % |
|---|---|---|
| 필수 요소 | 9 / 10 | 90 % |
| 내비게이션 | 8 / 11 | 73 % |
| 구조 | 3 / 4 | 75 % |
| 색상 | 2 / 3 | 67 % |
| 양식 | 7 / 13 | 54 % |
| 이미지 | 5 / 9 | 56 % |
| 멀티미디어 | 1 / ? | 23 % (lowest) |
가장 높은 ROI는 필수 요소(누락된 lang 속성, 잘못된 HTML, 누락된 페이지 제목)에서 나옵니다. 한 번 수정하면 모든 페이지에서 위반 사항이 해결됩니다.
구현
핵심 감지 엔진
- axe‑core는 저수준 접근성 검사를 수행하는 데 사용됩니다.
- 사용자 정의 매핑 레이어가 각 axe‑core 규칙을 하나 이상의 RGAA 기준에 연결합니다(다대다 관계).
{
"image-alt": {
"rgaaCriteria": ["1.1", "1.2"],
"theme": "Images",
"testMethod": "automatic"
}
}매핑은 관계형 데이터베이스에 저장되며(기준, 테마, 테스트 방법 및 해당 WCAG 대응 항목), 완전한 참조 무결성을 보장합니다.
패턴 감지
수천 개의 개별 위반을 일일이 출력하는 대신, 도구는 DOM 지문(동일한 CSS 선택자, 컴포넌트 계층 구조, 위반 유형)으로 그룹화합니다.
예시 출력:
“제품 이미지가 동일한 컴포넌트를 사용하고 있습니다 — 이 한 곳에서 alt 속성을 수정하면 50개 페이지에 걸쳐 287개의 위반을 해결할 수 있습니다.”
사이트 크롤링 및 템플릿 감지
- 전체 사이트를 크롤링하고 페이지를 탐색합니다.
- DOM 지문을 이용해 페이지 템플릿을 감지하여 중복 스캔을 방지합니다(예: 동일 템플릿을 공유하는 200개의 제품 페이지 → 하나만 스캔하고 결과를 확장).
- 인증이 필요한 페이지(대시보드, 관리자, 설정)도 지원합니다.
기술 스택
| 구성 요소 | 기술 |
|---|---|
| 프런트‑엔드 (마케팅) | Nuxt 3 – SSR |
| 프런트‑엔드 (대시보드) | Nuxt 3 – SPA |
| 접근성 엔진 | axe‑core + Puppeteer (headless) |
| 데이터 레이어 | Prisma + PostgreSQL |
| 결제 | Stripe (Free → Enterprise tiers) |
| AI 기반 수정 제안 | OpenAI (Vue, React, Angular, WordPress에 맞춤) |
개발 워크플로우에 통합
GitHub 액션
- uses: rgaaudit/action@v1
with:
url: ${{ env.STAGING_URL }}
threshold: 75
api-key: ${{ secrets.RGAA_KEY }}RGAA 점수가 임계값 이하로 떨어지면 풀 리퀘스트가 차단됩니다.
REST API (CI/CD)
curl -X POST https://rgaaudit.fr/api/ci/scan \
-H "X-API-Key: sk_..." \
-d '{"url": "https://staging.mysite.com"}'MCP 서버 (로컬 사용)
npx @rgaaudit/mcp-server
> rgaa_audit https://mysite.com
# Score RGAA: 72/100
# Patterns detected: 6
# Priority fixes: 3혜택
- 62 % 자동화는 반복적인 검사(대비, 대체 텍스트, 헤딩 구조)를 처리합니다.
- 인간 판단이 필요한 나머지 38 %(의미적 관련성, 키보드 내비게이션 품질, 스크린리더 경험)를 위해 전문가 시간을 확보합니다.
- 패턴 그룹화를 통해 방대한 위반 목록을 실행 가능한 계획으로 전환합니다: “이 컴포넌트를 한 번 수정하면 200개의 페이지가 수정됩니다.”
가용성
- 실시간으로 rgaaudit.fr 에서 제공 – 무료 티어: 월 3회 감사, 각 최대 15페이지.
- MCP 서버는 npm에
@rgaaudit/mcp-server로 게시됨.
결론
현지 접근성 표준은 실제 시장 격차를 만들고 있습니다. 대부분의 국제 도구가 WCAG를 지원하지만, 유럽 27개국은 종종 자체 사양(예: 프랑스의 RGAA)을 요구합니다. 감사인과 규제 기관의 언어를 구사하는 도구는 컴플라이언스 워크플로우를 크게 개선할 수 있습니다.
유럽 접근성 요구 사항을 다루고 있거나, 단순히 RGAA와 WCAG의 차이에 대해 궁금하다면 도구를 사용해 보고 피드백을 공유해 주세요.