웹 · KWCAG 2.2
한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003)를 이 시스템의 컴포넌트·토큰에 대응시킨 표. 각 항목에 '무엇으로 충족하는지'가 적혀 있어 새 화면을 만들 때 그대로 점검합니다.
인식운용이해견고4.5:1
원칙 1 · 인식의 용이성
| 검사항목 | 이 시스템에서 | 컴포넌트 · 토큰 |
|---|---|---|
| 1.1.1 적절한 대체 텍스트 | 아이콘 버튼 aria-label, 서명 이미지 alt "김현장 서명", 차트 aria-label + 표 보기, 장식 SVG aria-hidden | 모든 컴포넌트 "접근성" 절 |
| 1.2.1 자막 제공 | 영상 없음. 교육 영상이 추가되면 자막 필수 | — |
| 1.3.1 표의 구성 | th scope, caption, 행 제목 th scope=row | 표 |
| 1.3.2 콘텐츠의 선형 구조 | DOM 순서 = 시각 순서. 사이드바 → 본문 → 목차. 폰 드로어는 DOM 끝에 두되 포커스 이동 | Layout |
| 1.3.3 명확한 지시사항 | "오른쪽 빨간 버튼" 대신 "확인 및 조치 기록 버튼". 위치·색·모양만으로 지시하지 않는다 | UX Writing |
| 1.4.1 색에 무관한 콘텐츠 인식 | 상태 = 색 + 라벨 + 모양(점·아이콘·바). 차트 직접 라벨·표 보기 | 배지 · Data Viz |
| 1.4.2 자동 재생 금지 | 소리 자동 재생 없음(경보음은 OS 알림) | — |
| 1.4.3 텍스트 콘텐츠의 명도 대비 | 글자 4.5:1, 큰 글자 3:1 — 모든 토큰 조합 검증. placeholder 3.5:1(정보 없음) | check-contrast.js · Color |
| 1.4.4 콘텐츠 간의 구분 | 카드 1px 선 + 그림자, 표 행 선, 배너 1.5px 테두리. 다크는 표면 단계 | Elevation |
원칙 2 · 운용의 용이성
| 검사항목 | 이 시스템에서 | 컴포넌트 · 토큰 |
|---|---|---|
| 2.1.1 키보드 사용 보장 | 모든 컨트롤 button/a/input. 서명 패드는 대체 경로(관리자 등록) | 서명 패드 |
| 2.1.2 초점 이동과 표시 | :focus-visible 2px primary 링, offset 2. 모달 포커스 트랩·복귀 | --fna-focus |
| 2.1.3 조작 가능 | 터치 44 × 44 이상(시니어 64). 표 안 sm 버튼은 데스크톱 전용 | --fna-size-touch-min |
| 2.1.4 문자 단축키 | 단축키는 조합키만(Ctrl+S). 이 문서 사이트의 "/" 검색은 입력 밖에서만 | — |
| 2.2.1 응답시간 조절 | 세션 만료 5분 전 배너 + 연장. 오류 토스트 자동 닫힘 없음 | 세션 만료 |
| 2.2.2 정지 기능 제공 | 펄스·로더는 reduced-motion 정지. 자동 갱신 차트는 "일시정지" 제공(관제) | Motion |
| 2.3.1 깜빡임과 번쩍임 제한 | 펄스 1.4초(0.7Hz), 3Hz 이하. 화면 전체 점멸 금지 | fna-pulse |
| 2.4.1 반복 영역 건너뛰기 | "본문으로 건너뛰기" 링크 | Layout |
| 2.4.2 제목 제공 | 페이지 title "화면명 · FNA 스마트해썹", 화면 h1 = 앱바 제목, 카드 h3 | 헤더 |
| 2.4.3 적절한 링크 텍스트 | "여기"·"더보기" 단독 금지. "전체 변경 이력 →" | UX Writing |
| 2.4.4 고정된 참조 위치 정보 | 인쇄 PDF 쪽 번호 · 문서 ID | 인쇄 양식 |
| 2.5.1 단일 포인터 입력 지원 | 멀티터치·경로 제스처 없음. 스와이프 삭제 없음 | — |
| 2.5.2 포인터 입력 취소 | click(up) 에서 실행, 드래그 중 벗어나면 취소 | 버튼 |
| 2.5.3 레이블과 네임 | 보이는 라벨 = 접근 가능한 이름(aria-label 이 보이는 글자를 덮지 않음) | 버튼 · 텍스트 필드 |
| 2.5.4 동작 기반 작동 | 흔들기·기울이기 없음 | — |
원칙 3 · 이해의 용이성
| 검사항목 | 이 시스템에서 | 컴포넌트 · 토큰 |
|---|---|---|
| 3.1.1 기본 언어 표시 | <html lang="ko"> | — |
| 3.2.1 사용자 요구에 따른 실행 | 포커스·입력만으로 화면 전환 없음. 세그먼트는 클릭으로만 | 선택 |
| 3.2.2 찾기 쉬운 도움 정보 | 설정 > 정보 > 담당자 연락처, 오류 문구에 담당자 | UX Writing |
| 3.3.1 오류 정정 | 오류 위치(aria-invalid) + 원인 + 방법. 첫 오류로 포커스 | 텍스트 필드 |
| 3.3.2 레이블 제공 | 모든 입력 label for. placeholder 는 라벨이 아님 | 텍스트 필드 |
| 3.3.3 접근 가능한 인증 | 인지 테스트(CAPTCHA) 없음. 일회용 코드는 붙여넣기 허용, autocomplete one-time-code | 로그인 |
| 3.3.4 반복 입력 정보 | 업체 코드·아이디 기억, 재로그인 시 아이디 채움 | 세션 만료 |
원칙 4 · 견고성
| 검사항목 | 이 시스템에서 |
|---|---|
| 4.1.1 마크업 오류 방지 | 중복 id 없음, 닫힘 태그, 빌드 시 검사(이 사이트: check-links.js) |
| 4.1.2 웹 애플리케이션 접근성 준수 | 커스텀 컨트롤은 role + 상태(aria-selected/checked/expanded/sort/current) — 각 컴포넌트 "코드" 절 |
새 화면 점검 순서
node check-contrast.js— 새 색 조합이 있으면 여기에 추가.- 키보드만으로 화면 끝까지: Tab 순서, 포커스 보임, ESC 로 닫힘.
- 큰글씨(×1.25) + 폰 폭 390 에서 잘림·겹침 없음.
- 스크린리더(NVDA/VoiceOver)로 표·배지·결재 상태 낭독 확인.
- 색각 시뮬레이션(protan/deutan)으로 상태·차트 구분.
- 접근성 체크리스트 체크 후 화면 ID 문서에 첨부.
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 KWCAG 2.2 (33개 검사항목) · check-contrast.js · components.cssRules · FNA 디자인 시스템 v1.0