Accessibility Audit

접근성(a11y) 점검 결과

이슈 #92 (M4 · UX 고도화)에서 수행한 첫 접근성 점검 기록. 스크린리더/키보드 전체 플로우를 한 번도 점검하지 않은 상태에서 진행한 베이스라인 점검이다.

점검 범위

1. 모든 인터랙티브 요소의 접근 가능한 이름 (aria-label 등)
2. 키보드만으로 전체 플로우 이동 가능한지 (Tab 순서, 포커스 표시)
3. 모달/드롭다운/사이드바 등 오버레이의 포커스 트랩·ESC 닫기
4. 색상 대비 (특히 StatusLabel 톤, 기한 3단계 색상)
5. 폼 인풋의 label 연결 여부

발견 및 수정 (이번 PR에 포함)

항목	위치	문제	조치
Modal 포커스 미복원	Modal.tsx	닫을 때 트리거 요소로 포커스가 돌아가지 않아 키보드 사용자가 위치를 잃음	열기 전 document.activeElement 저장 후 닫을 때 복원
Dropdown 포커스 미복원	Dropdown.tsx	옵션 선택·Escape로 닫을 때 트리거 버튼으로 포커스가 안 돌아감	closeListAndRefocusTrigger()로 통일, 트리거 ref 추가
Dropdown aria-activedescendant 없음	Dropdown.tsx	화살표 키로 옵션 이동 시 스크린리더가 현재 위치를 알려주지 않음	옵션마다 id 부여, ul에 aria-activedescendant 추가
textarea 포커스 표시 없음	CreateWorkPage.module.css	outline: none만 있고 대체 포커스 스타일이 없어 키보드 포커스가 안 보임	:focus-visible에 outline 추가
탭 패널 ARIA 연결 누락	SettingsPage.tsx, CaseDetailPage.tsx	role="tab"/aria-selected는 있지만 패널에 role="tabpanel"/aria-labelledby, 탭에 aria-controls가 없어 표준 ARIA 탭 패턴 미완성	탭·패널에 id/aria-controls/aria-labelledby/role="tabpanel" 추가

이미 잘 되어 있던 것 (확인만)

• Dropdown: aria-haspopup, aria-expanded, role="listbox", Escape/화살표/Enter 키보드 지원
• Modal: role="dialog", aria-modal, 포커스 트랩(Tab 순환), body 스크롤 잠금
• ToastViewport: role="status" aria-live="polite", 닫기 버튼에 aria-label
• AppLayout 사이드바 nav: aria-label, 모든 버튼/링크가 텍스트 라벨 보유 (아이콘 전용 없음)
• LoginPage/SignupPage: 모든 입력에 <label htmlFor> 정상 연결
• WorkListPage/WorkerListPage/DocumentListPage 검색 인풋: aria-label 보유
• SettingsPage 승인 권한 토글: role="switch", aria-checked, 행별 고유 aria-label

별도 이슈로 분리한 것

• [#97] StatusLabel·기한 색상 토큰 대비(contrast) AA 미달 검토 — --fowoco-amber-600(2.62:1), --fowoco-red-600(4.20:1), --fowoco-green-600(4.29:1)이 흰 배경 텍스트 기준 WCAG AA(4.5:1)에 못 미친다. 브랜드 전역 색상이라 디자인 결정이 필요해 별도 이슈로 분리했다. --fowoco-violet-600(5.29:1), --brand-primary(4.55:1)는 통과.

점검하지 않은 범위 (다음 라운드 후보)

• 실제 스크린리더(NVDA/VoiceOver) 수동 테스트는 하지 않음 — 코드 레벨 정적 점검만 수행
• 모바일 사이드바 접힘/펼침 시 포커스 이동 별도 미점검
• prefers-reduced-motion 외 다른 사용자 설정(prefers-contrast 등) 미고려