접근성 테스트를 위한 Pa11y 및 axe

Pa11y와 axe-core는 WCAG에 맞춰진 접근성 테스트를 자동화하는 오픈 소스 도구입니다. 두 도구 모두 페이지를 분석하고 DOM에 규칙을 적용한 뒤 위반 사항을 보고합니다. 접근성 문제의 대부분은 자동으로 찾아내고 나머지는 수동 테스트로 확인하십시오.

axe-core는 Chrome DevTools, Lighthouse, Jest, Cypress, Playwright 및 여러 도구의 접근성 감사를 구동하는 JavaScript 라이브러리입니다. 폭넓은 규칙 적용 범위와 낮은 오탐률을 갖춘 자동화된 접근성 테스트의 사실상 표준입니다.

axe DevTools 브라우저 확장 프로그램(Chrome, Firefox, Edge)은 DevTools에 "접근성" 탭을 추가합니다. "모든 페이지 스캔"을 클릭하면 영향을 받는 요소, 심각도, 해결 안내와 함께 모든 위반 사항이 표시됩니다. 개발 중 일회성 감사에 가장 적합합니다.

Pa11y는 Node.js CLI입니다. npx pa11y https://example.com으로 URL을 감사할 수 있습니다. 문제 목록을 터미널에 출력합니다. 빠른 감사, 셸 스크립트 또는 부담이 적은 지속적 통합 연동에 사용하십시오.

axe-core를 Playwright와 결합하여 종단 간 접근성 테스트를 수행하십시오. const results = await new AxeBuilder({ page }).analyze()를 사용하고 results.violations.length === 0인지 단언하십시오. 회귀가 운영 환경에 도달하기 전에 찾아낼 수 있습니다.

jest-axe는 Jest 테스트에서 렌더링된 컴포넌트에 axe를 실행합니다. React Testing Library로 컴포넌트를 렌더링하고 컨테이너를 axe에 전달하십시오. expect(await axe(container)).toHaveNoViolations()를 사용하면 됩니다. 이제 각 컴포넌트 테스트에 접근성 확인이 포함됩니다.

두 도구 모두 프로젝트별로 규칙을 비활성화하거나 수정할 수 있습니다. 의도적인 설계 결정과 충돌하는 규칙은 끄고, 중요하다고 알려진 규칙에는 더 엄격한 기준을 적용하십시오. 비활성화한 모든 규칙에는 이유를 설명하는 주석을 남기십시오. 이는 미래의 개발자에게 필요한 맥락입니다.

자동화 도구는 WCAG 문제의 약 30~40%를 찾아냅니다. 나머지 문제(의미 있는 포커스 순서, 읽기 쉬운 대체 텍스트, 의미론적인 제목 계층, 실제 UI 동작을 반영하는 ARIA 사용)는 사람이 검토해야 합니다. 자동화는 접근성에 필요하지만 충분하지는 않습니다.

Windows에서는 NVDA, Mac에서는 VoiceOver, 기업 사용자를 대상으로 할 때는 JAWS로 테스트하십시오. 실제 스크린 리더 테스트를 통해 자동화로는 찾아낼 수 없는 문제, 즉 혼란스러운 안내, 깨진 랜드마크, 비논리적인 포커스 순서를 발견할 수 있습니다. 주요 SR마다 릴리스당 한 번 테스트하는 것이 합리적인 기준선입니다.

가장 가치 있는 접근성 검증은 장애가 있는 사용자가 실제 제품을 사용하는 과정에서 얻을 수 있습니다. 접근성 컨설팅 기관, 대학 장애인 지원 부서 또는 UserTesting.com과 같은 테스트 플랫폼을 통해 참여자를 모집하십시오. 실제 환경에서 얻은 이들의 피드백은 자동화 도구가 발견하지 못하는 문제를 찾아냅니다.

접근성 회귀(새로운 위반 사항)가 발생하면 PR을 차단하되, 레거시 위반 사항(기존 기준선)은 차단하지 마십시오. 이렇게 하면 출시를 막지 않으면서도 기준을 계속 높일 수 있습니다. 전체 위반 사항 수를 시간에 따라 추적하여 전반적인 접근성 상태를 보여 주는 선행 지표로 활용하십시오.

여러 도구를 사용하십시오. 포괄적인 자동 검사는 axe로 수행하고, Pa11y를 두 번째 의견으로 활용하며, 정성적인 공백은 수동 스크린 리더 테스트로 확인하십시오. 도구 간 중복은 적으므로 함께 사용하면 단일 도구보다 더 많은 문제를 찾아낼 수 있습니다.

axe와 Pa11y 같은 자동화 도구가 안정적으로 찾아낼 수 있는 WCAG 접근성 문제는 몇 퍼센트입니까?

axe-core는 대부분의 접근성 감사를 구동합니다. 브라우저 확장 프로그램은 일회성 검사에, jest-axe와 Playwright 연동은 지속적인 테스트에 적합합니다. Pa11y는 이를 보완하는 CLI입니다. 자동화는 문제의 약 30~40%를 찾아내므로 수동 스크린 리더 테스트(NVDA, VoiceOver) 및 실제 장애 사용자 테스트와 함께 사용하여 전체 범위를 확인하십시오. 레거시 기준선 때문에 작업을 차단하지 않으면서 지속적 통합에서 새로운 회귀를 차단하십시오.