CI에서 접근성 VPAT를 자동화한 방법 CI에서 접근성 VPAT를 자동화한 방법

접근성 감사는 매우 빠르게 구식이 됩니다. 코드 머지 한 번이면 모든 것이 바뀝니다.

저희는 이 문제를 해결했습니다. 접근성 보고서를 지속적인 빌드 아티팩트(artifact)로 전환했습니다.

저희 파이프라인은 오류를 찾기 위해 세 가지 계층을 사용합니다:

  • 정적 검사: Storybook에서 기본 테스트를 위해 axe-core를 사용합니다.
  • 인터랙티브 테스트: 키보드 규칙을 테스트하기 위해 커스텀 Vitest 헬퍼를 사용합니다.
  • 수동 감사: 스크린 리더 결과를 JSON 파일로 저장합니다.

저희 CI 파이프라인은 이 결과들을 병합합니다.

테스트가 실패하면 PR도 실패합니다. 모든 테스트를 통과하면 시스템이 새로운 PDF를 생성합니다. 이 PDF는 릴리스와 함께 배포됩니다.

실패한 시도도 하나 있었습니다.

수동 감사를 대체하기 위해 LLM을 사용해 보았으나, 즉시 중단했습니다. AI 결과는 변동성이 너무 큽니다. CI 게이트(gate)에는 안정적인 결과가 필요합니다.

전체 기술 분석 내용은 여기서 확인하세요:

출처: https://dev.to/yassine_lakhdar_d0226709a/how-we-automated-our-accessibility-vpats-in-ci-46jk

ARTICLE: 한 개발 팀이 접근성 VPAT(Voluntary Product Accessibility Templates) 생성을 지속적 통합(CI) 파이프라인에 직접 자동화하여, 주기적인 수동 보고서를 매 릴리스마다 함께 배포되는 빌드 아티팩트로 전환했습니다. 새로운 워크플로우는 접근성 저하(regression)를 유발하는 풀 리퀘스트(PR)를 차단하며, 빌드가 성공하면 PDF 준수 문서를 자동으로 생성하여 모든 코드 변경 사항이 접근성 표준을 유지하도록 보장합니다.

Why automation matters

새로운 코드가 반영되는 순간 접근성 감사는 쓸모없게 됩니다. 단 한 번의 머지만으로도 대체 텍스트 누락, 부적절한 포커스 순서, 또는 스크린 리더 이슈가 발생하여 이전에 발행된 VPAT가 무효화될 수 있습니다. 수동으로 컴플라이언스를 유지하는 것은 매 변경 사항마다 감사를 다시 실행해야 함을 의미하며, 이는 비용이 많이 들고 오류가 발생하기 쉬우며 개발 속도를 따라가지 못하는 경우가 많습니다. CI에 검사 과정을 내장함으로써 팀은 즉각적인 피드백을 받고, 컴플라이언스를 최신 상태로 유지하며, 접근성이 떨어지는 소프트웨어를 배포함으로써 발생할 수 있는 법적 및 평판 리스크를 방지할 수 있습니다.

The three-layer testing approach

  1. Static checks – 파이프라인은 axe-core를 실행합니다. 이는 Storybook에 렌더링된 컴포넌트를 스캔하여 랜드마크 누락이나 불충분한 색상 대비와 같은 알려진 위반 사항을 찾아내는 오픈 소스 라이브러리입니다. 이 테스트는 상호작용이 일어나기 전에 문제를 포착합니다.

  2. Interactive checks – 커스텀 Vitest 헬퍼를 통해 키보드 탐색 규칙을 실행하여, 포커스가 논리적으로 이동하는지 그리고 인터랙티브 요소가 표준 키보드 이벤트에 반응하는지 확인합니다. 이 단계는 정적 분석을 넘어 실제 사용성을 보장합니다.

  3. Manual audit artifacts – 스크린 리더 테스트 결과는 JSON 파일로 저장됩니다. 개발자는 탐색적 테스트 중에 관찰 내용을 기록하고 코드와 함께 JSON을 커밋합니다. CI 작업은 이러한 아티팩트를 자동화된 결과와 병합하여 VPAT를 위한 단일 진실 공급원(single source of truth)을 생성합니다.

처음 두 단계 중 하나라도 테스트에 실패하면 풀 리퀘스트가 차단되어 변경 사항이 프로덕션에 반영되는 것을 방지합니다. 모든 테스트를 통과하면 파이프라인은 결합된 데이터를 PDF로 조립하여 릴리스에 첨부함으로써, 추가적인 노력 없이 최신 VPAT를 제공합니다.

What didn’t work

팀은 수동 감사 부분을 자동으로 생성하기 위해 대규모 언어 모델(LLM)을 사용하는 실험을 했습니다. AI가 생성한 결과는 변동성이 너무 커서 CI 게이트를 신뢰할 수 없게 만들었습니다. 이진(binary) 통과/실패 체크에는 일관성이 필수적이므로, 실험을 중단하고 JSON 기반의 수동 아티팩트를 사용하는 방식을 택했습니다.

What to watch next

현재로서는 이 3단계 CI 모델이 VPAT를 최신 상태로 유지하고, 수동 오버헤드를 줄이며, 모든 코드 변경 사항에서 접근성을 최우선으로 고려할 수 있는 실용적인 경로를 제공합니다.