wcag-audit-patterns은(는) 무엇을 하나요?
자동화된 테스트, 수동 검증 및 수정 지침을 통해 WCAG 2.2 접근성 감사를 수행합니다. 웹사이트 접근성 감사, WCAG 위반 사항 수정 또는 접근 가능한 디자인 패턴 구현 시 사용하세요.
개요
이 스킬은 웹 애플리케이션의 접근성 감사를 체계적으로 수행하고 결과를 보고하며 수정을 안내하는 도구입니다. WCAG 2.2 가이드라인을 기반으로 하며, 자동화된 검사와 수동 검증 영역을 명확히 구분합니다.
주요 기능
- 자동화된 검사: axe-core와 같은 도구를 사용하여 일반적인 접근성 위반 사항(예: 누락된 대체 텍스트, 낮은 색상 대비, 잘못된 ARIA 속성)을 자동으로 탐지합니다.
- 수동 검증 가이드: 자동화로 탐지하기 어려운 영역(예: 키보드 탐색 논리, 스크린 리더 호환성, 의미론적 마크업)에 대한 단계별 수동 검증 절차를 제공합니다.
- 수정 지침: 각 위반 사항에 대해 구체적인 코드 예시(HTML, CSS, JavaScript)와 함께 최선의 수정 방법을 제시합니다.
- 표준화된 보고서: 감사 결과를 JSON 또는 마크다운 형식으로 생성하여 팀 내 공유 및 이슈 추적에 활용할 수 있습니다.
- 디자인 패턴 라이브러리: 접근 가능한 UI 컴포넌트(예: 모달, 드롭다운, 탭)에 대한 구현 예제와 패턴을 제공합니다.
사용 방법
- 감사 시작: 스킬을 호출하여 감사 대상 URL 또는 로컬 파일 경로를 제공합니다.
- 자동 검사 실행: 스킬이 자동화된 접근성 검사를 실행하고 결과를 요약합니다.
- 수동 검증 수행: 스킬의 안내에 따라 수동 검증 항목을 확인합니다.
- 위반 사항 수정: 제시된 코드 예시와 가이드라인을 참고하여 위반 사항을 해결합니다.
- 재검증: 수정 후 감사를 다시 실행하여 변경 사항이 접근성에 미치는 영향을 확인합니다.
지원 환경
- VSCode: Claude Code 확장 프로그램을 통해 사용 가능합니다.
- CLI: 명령줄 인터페이스를 통해 직접 실행할 수 있습니다.
- CI/CD: GitHub Actions, Jenkins 등과 통합하여 지속적인 접근성 테스트를 수행할 수 있습니다.
예제
# 기본 감사 실행
wcag-audit https://example.com
# 특정 규칙만 검사 (예: 색상 대비, 키보드 접근성)
wcag-audit https://example.com --rules color-contrast,keyboard
# 보고서 파일로 저장
wcag-audit https://example.com --output report.json
참고 사항
- 이 스킬은 WCAG 2.2 레벨 A 및 AA 기준을 검사합니다.
- 자동화된 검사만으로는 모든 접근성 문제를 발견할 수 없습니다. 수동 검증을 반드시 병행해야 합니다.
- 각 프로젝트의 특정 요구 사항에 따라 가이드라인을 조정할 수 있습니다.
라이선스
이 스킬은 MIT 라이선스 하에 배포됩니다.