접근성 체크리스트
새 화면·컴포넌트를 내보내기 전 점검표. KWCAG 2.2 항목을 이 시스템의 언어로 바꾼 것이며, 화면 ID 문서에 결과를 첨부합니다. 자동 검사(check-contrast.js)와 손 검사를 나눴습니다.
- 대비 4.5:1 이상
- 터치 44px 이상
- 키보드로 모든 조작
자동 검사 (빌드에서)
- 색 대비
node check-contrast.js— 텍스트 4.5:1 · 큰 글자 3:1 · 도형 3:1, 라이트·다크 전 조합. exit 0 - 차트 팔레트
scripts/validate_palette.mjs— 인접 계열 CVD ΔE ≥ 8 · 정상 ≥ 15 · 배경 3:1 (WARN 은 직접 라벨로 보완) - 하드코딩 색
scripts/lint-css-vars.js --targets— 잔여 hex 0 · 미정의 변수 0 - 내부 링크
node site/check-links.js— 깨진 링크·앵커 0
손 검사 — 화면마다
구조
- h1 하나 = 앱바 제목 = 화면명카드 제목은 h3, 절은 h2. 건너뛰는 단계 없음
- lang="ko", title "화면명 · FNA 스마트해썹"
- 본문 건너뛰기 링크 (웹)
- DOM 순서 = 시각 순서드로어·모달은 DOM 끝이어도 포커스 이동으로 보완
- 화면 ID 표시
키보드
- Tab 만으로 끝까지모든 컨트롤 도달, 순서가 읽는 순서
- 포커스 보임2px primary 링, 어떤 배경에서도. outline:none 없음
- 모달 · 드로어열면 안으로, ESC 로 닫힘, 닫으면 연 버튼으로 복귀, 뒤는 inert
- 탭 · 세그먼트 · 선택 카드화살표 이동, Space/Enter 선택
- 표 정렬 · 페이지 이동버튼으로, aria-sort · aria-current
- 서명 패드 대체 경로키보드만으로 등록 불가 → 관리자 등록 · 업로드
색 · 형태
- 상태 = 색 + 라벨 + 모양배지 글자 · 점/아이콘 · 행 바. 색 점만 있는 곳 없음
- 차트role="img" aria-label · 표 보기 · 직접 라벨 · 글자는 텍스트 토큰
- 다크 테마hex 직접 사용 없음, 두 테마에서 스크린샷
- 큰글씨 ×1.25잘림·겹침·가로 스크롤 없음 (폰 390 포함)
- 동작 줄이기펄스·로더 정지, 등장 애니메이션 생략
입력 · 메시지
- label for 모든 입력placeholder 는 라벨이 아님
- 오류aria-invalid + describedby, 무엇이 왜 어떻게, 첫 오류로 포커스
- 토스트status/alert, 오류는 자동 닫힘 없음
- 배너alert(경보·부적합) / status(주의·안내)
- 아이콘 버튼 aria-label보이는 글자와 접근 이름 일치
- 시간 제한세션 만료 5분 전 알림 + 연장
터치 · 폰
- 44 × 44 이상 (시니어 64)표 안 sm 버튼은 데스크톱 전용
- 햄버거 우측 상단, 드로어 우측
- 주 버튼 하단 전체폭, 키보드에 가려지지 않음
- 안전 영역하단 탭·시트 푸터 safe-area-inset
- 가로 스크롤은 표만페이지 자체는 가로 스크롤 없음
인쇄 · 심사
- 흑백에서 판정 구분○/✕ 기호 + 글자
- PDF 텍스트 살아 있음, 서명 alt, 쪽 번호, 문서 ID
- 약어 풀어 쓰기첫 등장 "중요관리점(CCP)"
- 열람 모드에서 쓰기 버튼은 비활성 + 이유
스크린리더 시나리오 (분기마다)
| 시나리오 | 기대 낭독 |
|---|---|
| 홈 센서 카드 | "냉동창고 A, 기준 −22~−15, 3분 전, −18.4℃, 정상" |
| 경보 배너 등장 | (즉시) "냉장 1 온도 이탈, 7.3℃, 기준보다 2.3도 높습니다, 12:40 부터, 확인 및 조치 버튼" |
| 표 부적합 행 | "행 3, 09-29 화, 3라인, 40건, 부적합 2, 반려, 보기 버튼" |
| 결재 진행 | "결재 진행, 목록 3개, 제출 완료, 검토 완료, 승인 현재 단계" |
| 시니어 시트 | "대화상자, 결재를 제출할까요?, … 제출하기 버튼, 아직 아닙니다 버튼" |
| 토스트 | (polite) "리포트를 제출했습니다, 검토 대기" |
기록
점검 결과는 화면 ID 문서에 "검사일 · 검사자 · 도구(NVDA/VoiceOver/TalkBack 버전) · 미충족 항목 · 조치 예정일"로 남기고, 미충족 항목이 있으면 화면 상태를 초안으로 둡니다.
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 KWCAG 2.2 · check-contrast.js · 각 컴포넌트 접근성 절Resources · FNA 디자인 시스템 v1.0