접근성 점검
참조: ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md 및 ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md.
WCAG 2.2 AA는 모든 기능의 완료 조건(definition of done)에 포함됩니다. 이 점검은 그 위에 수행되는 전체 스윕(sweep)입니다.
1. 설정
- 제품 외부에 도구를 고정(pin)하여 설치합니다:
npm i --prefix <폴더> playwright@<고정된버전> axe-core@<고정된버전>;A11Y_TOOLS=<폴더>. - 앱을 로컬에서 데모 데이터로, 임시 데이터베이스(scrat ch database)와 자체 포트에서 실행합니다.
tests/a11y/pages.json에 모든 주요 페이지 (그리고open을 통한 대화상자)를 나열하고, 페이지별로lang을, 로그인된 페이지용signIn모듈을 포함합니다.- 다른 에이전트가 거의 실행되지 않을 때 점검을 실행합니다. 공유 컴포넌트를 작고 대상화된 편집으로 수정합니다.
2. 측정("이전")
node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <넓은 페이지들>
node --test "tests/contracts/*.test.mjs" # 라이트와 다크에서 테마 대비
앱 패턴에 대한 키보드 스크립트(스킵 링크 → 메인, 대화상자 트랩 및 포커스 반환, 최상위 Escape, 탭 목록에서 화살표 키, 클릭 가능한 행에서 Enter)와 수동 검사: 텍스트 간격(1.4.12), 200% 확대/축소, 드래그 대안(2.5.7), 중복 입력(3.3.7), 접근 가능한 인증(3.3.8), 표가 있는 차트, 이메일(언어, 프레젠테이션 표, 대체 텍스트, 다크 모드).
3. 발견 사항 및 수정
표: # | 기준 | 위치 | 심각도(심각/보통/경미) | 수정됨?. 공유 컴포넌트 수준에서 수정(하나의 포커스 링 토큰, 하나의 대화상자-키 도우미, 클릭 가능한 행, 복합 키, 스크롤 영역, 라이브 영역, 스크롤 패딩). 새로운 접근 가능한 이름을 구성된 모든 언어로 번역합니다. 새로운 색상 조합에 대한 대비 쌍을 추가합니다.
4. 보호 장치(Guard)
- 공유 컴포넌트에 대한 계약 테스트(이름, 메시지 전에 존재하는 라이브 영역, 토큰 쌍, 동작 감소, 스킵 링크).
tests/a11y/known.json에 남은 발견 사항을 이유와 함께 기록합니다. 이는 접근성 명세서 페이지의 알려진 제한 사항과 동일해야 합니다(대상 WCAG 2.2 AA, 제한 사항, 연락처; 구성된 모든 언어로; 모든 푸터에서 링크됨).
5. 보고서
표면별 위반 건수(이전 → 이후), 심각도별 건수(수정됨/안됨), 스크린샷, 수행되지 않은 작업(스크린 리더, 네이티브 셸, 외부 감사). 새로운 기능(What's new) 항목 하나. STATE.md 섹션.