개발자가 커스텀 로깅 콜백 없이도 접근성 위반 사항을 컬러 코딩 로그와 HTML 리포트로 확인 가능한 wick-a11y를 소개한다

Context

기존 Cypress 접근성 테스트 도구인 cypress-axe는 axe-core의 위반 사항 배열을 그대로 전달하며, 커스텀 로깅 콜백과 테스크 등록 코드를 직접 작성해야 했다. cypress-axe의 positional arguments 방식은 특정 파라미터만 필요할 때에도 null을 여러 개 입력해야 하는 불편함이 존재했다.

Technical Solution

• [wick-a11y] → [axe-core 기반 Cypress 접근성 테스트 도구 설치] (npm install --save-dev wick-a11y axe-core)
• [cypress.config.js] → [addAccessibilityTasks(on) 호출로 접근성 테스크 등록]
• [cypress/support/e2e.js] → ['wick-a11y' 임포트로 커스텀 커맨드 로드]
• [cy.checkAccessibility()] → [severity별 그룹화된 로그와 DOM 요소 색상 코딩 테두리 자동 표시]
• [onlyWarnImpacts 옵션] → [선택한 심각도만 경고 처리하며 파이프라인 유지]

Impact

14개 이상의 릴리스를 1년内に 배포했으며 Cypress 15 정식 릴리스 후 10일 이내 호환성 업데이트를 제공했다.

Key Takeaway

wick-a11y는 커스텀 코드 작성 부담을 줄이면서 위반 사항을 팀원 누구나 시각적으로 확인할 수 있는 HTML 리포트와 음성 피드백으로 제공한다.