KWCAG 2.2 체크리스트
기준: 한국형 웹 콘텐츠 접근성 지침 2.2 (KWCAG 2.2, 2022)
발행: 웹 접근성 연구소(NWIA) / 과학기술정보통신부
구성: 4대 원칙 → 13개 지침 → 24개 검사 항목
WCAG 2.1 Level AA를 기반으로 국내 환경에 맞게 조정
1. 인식의 용이성 (Perceivable)
1.1 대체 텍스트
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 1.1.1 적절한 대체 텍스트 제공 | 텍스트 아닌 콘텐츠에 대체 텍스트 제공. 장식은 null alt | <img alt> 확인, 아이콘 버튼 accessible name 확인 | 1.1.1 |
점검 기준 상세:
[ ]의미 있는 이미지: 내용을 설명하는 alt 텍스트 제공[ ]장식 이미지:alt=""로 AT 무시 처리[ ]복잡한 이미지(차트, 그래프):longdesc또는 본문 내 설명 제공[ ]이미지 버튼: 버튼 기능을 설명하는 alt 텍스트[ ]아이콘 only 버튼:aria-label또는<span class="sr-only">제공
1.2 멀티미디어 대체 수단
| 검사 항목 | 요구사항 | 점검 방법 |
|---|---|---|
| 1.2.1 자막 제공 | 동영상에 자막 제공 | <track kind="captions"> 확인 |
| 1.2.2 음성 해설 제공 | 동영상에 화면 해설 오디오 | 해설 오디오 트랙 확인 |
1.3 적응성
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 1.3.1 표의 구성 | 표에 caption, th/td 구분, scope/id 제공 | <caption>, <th scope> 확인 | 1.3.1 |
| 1.3.2 콘텐츠의 선형화 | CSS 제거 후에도 콘텐츠 순서가 논리적 | DOM 순서 점검 | 1.3.2 |
표 접근성 점검:
[ ]<caption>또는aria-label로 표 제목 제공[ ]열 헤더:<th scope="col">사용[ ]행 헤더:<th scope="row">사용[ ]복잡한 표:id/headers속성으로 셀-헤더 연결[ ]레이아웃 목적 표 사용 금지 (role="presentation"처리)
1.4 명료성
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 1.4.1 색에 무관한 인식 | 색상만으로 정보 전달 금지 | 에러 표시, 상태 표시 점검 | 1.4.1 |
| 1.4.2 명도 대비 | 텍스트 명도 대비 4.5:1 이상 (일반), 3:1 이상 (대형) | 색상 대비 도구 측정 | 1.4.3 |
| 1.4.3 배경음 제어 | 자동 재생 오디오 3초 이상 시 정지 수단 제공 | — | 1.4.2 |
| 1.4.4 텍스트 크기 조절 | 200% 확대 시 콘텐츠 겹침/잘림 없음 | 브라우저 200% 확대 테스트 | 1.4.4 |
명도 대비 기준:
[ ]일반 텍스트 (18px 미만 또는 14px 굵게 미만): 대비 4.5:1 이상[ ]대형 텍스트 (18px 이상 또는 14px 굵게 이상): 대비 3:1 이상[ ]비활성(disabled) 상태 텍스트: 예외 적용 가능[ ]placeholder 텍스트: 4.5:1 권장[ ]UI 컴포넌트 경계선, 아이콘: 3:1 이상 (WCAG 2.1 1.4.11)
2. 운용의 용이성 (Operable)
2.1 입력 장치 접근성
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 2.1.1 키보드 사용 보장 | 모든 기능이 키보드로 조작 가능 | Tab/Enter/Space/Arrow 순환 테스트 | 2.1.1 |
| 2.1.2 초점 이동 | 포커스 이동이 논리적 순서, 갇힘 없음 | Tab 이동 순서 확인, modal Escape 테스트 | 2.1.2, 2.4.3 |
키보드 점검 목록:
[ ]Tab으로 모든 인터랙티브 요소 접근 가능[ ]Shift+Tab으로 역방향 이동 가능[ ]Enter/Space로 버튼·링크 활성화[ ]Arrow keys로 radio group, combobox, date picker 탐색[ ]Escape로 modal/dialog/dropdown 닫기[ ]Modal 열릴 때 포커스가 modal 내부로 이동[ ]Modal 닫힐 때 포커스가 trigger 버튼으로 복귀[ ]tabIndex={-1}측정용 hidden 요소에 올바르게 사용
2.2 충분한 시간
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 2.2.1 응답시간 조절 | 시간 제한 있는 경우 끄기/연장/조정 가능 | 세션 타임아웃 확인 | 2.2.1 |
| 2.2.2 정지 기능 제공 | 자동 재생/갱신 콘텐츠 — 정지 수단 제공 | Carousel 자동재생 정지 버튼 | 2.2.2 |
2.3 광과민성 발작 예방
| 검사 항목 | 요구사항 | 점검 방법 |
|---|---|---|
| 2.3.1 깜빡임 사용 제한 | 초당 3~50회 번쩍임 없음, 화면 10% 이하 | 애니메이션 flash rate 확인 |
2.4 쉬운 내비게이션
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 2.4.1 반복 영역 건너뛰기 | 반복 블록 건너뛰기 링크 제공 | ”본문 바로가기” 링크 확인 | 2.4.1 |
| 2.4.2 페이지 제목 제공 | 각 페이지에 고유한 제목 | <title> 확인 | 2.4.2 |
| 2.4.3 초점 이동 순서 | 의미 있는 포커스 이동 순서 | Tab 순서 DOM과 일치 | 2.4.3 |
| 2.4.4 링크 텍스트 | 링크 목적이 링크 텍스트 또는 문맥으로 파악 | ”여기”, “더보기” 단독 사용 금지 | 2.4.4 |
| 2.4.5 다양한 방법 | 여러 경로로 콘텐츠 탐색 가능 | 사이트맵, 검색, 네비게이션 | 2.4.5 |
| 2.4.6 제목 및 레이블 | heading·label이 내용 설명 | 의미 없는 heading 없음 | 2.4.6 |
| 2.4.7 초점 스타일 | 포커스 요소의 시각적 표시 | outline/ring 스타일 확인 | 2.4.7 |
3. 이해의 용이성 (Understandable)
3.1 가독성
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 3.1.1 기본 언어 표시 | <html lang> 속성 제공 | HTML lang 속성 확인 | 3.1.1 |
3.2 예측 가능성
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 3.2.1 온 포커스 | 포커스만으로 페이지 변경 없음 | Select focus 시 자동 이동 없는지 | 3.2.1 |
| 3.2.2 온 입력 | 입력만으로 자동 컨텍스트 변경 없음 | input onChange auto-navigate 없음 | 3.2.2 |
| 3.2.3 일관된 내비게이션 | 동일 위치의 내비게이션은 일관된 순서 | 페이지 간 nav 순서 일치 | 3.2.3 |
| 3.2.4 일관된 식별성 | 동일 기능의 컴포넌트는 일관된 표현 | 동일 목적 버튼 레이블 통일 | 3.2.4 |
3.3 입력 지원
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 3.3.1 오류 정정 | 입력 오류를 텍스트로 식별·설명 | FieldError 에러 메시지 확인 | 3.3.1 |
| 3.3.2 레이블 또는 지시사항 | 사용자 입력에 레이블·지시사항 제공 | label-input 연결, placeholder 단독 사용 금지 | 3.3.2 |
폼 접근성 점검:
[ ]모든 input/select/textarea에<label>연결 (htmlFor/id 또는 감싸기)[ ]placeholder는 보조 힌트로만 사용, 레이블 대체 금지[ ]필수 입력은required속성 + 시각적 표시 (별표 등)[ ]에러 메시지는role="alert"또는aria-describedby로 연결[ ]연관 폼 그룹은<fieldset>/<legend>또는role="group"+aria-labelledby[ ]날짜 입력 형식 등 입력 형식 안내 제공
4. 견고성 (Robust)
4.1 문법 준수
| 검사 항목 | 요구사항 | 점검 방법 | WCAG 대응 |
|---|---|---|---|
| 4.1.1 마크업 오류 방지 | 요소 중첩, 속성 중복, 태그 닫힘 오류 없음 | HTML validator, React key prop | 4.1.1 |
| 4.1.2 웹 애플리케이션 접근성 | role·name·value가 AT에 전달 | ARIA role·property·state 적절성 | 4.1.2 |
ARIA 점검:
[ ]모든 상호작용 요소에 accessible name 존재[ ]커스텀 위젯에 적절한 role 적용[ ]상태 변화(expanded, selected, checked)를 aria-* 속성으로 전달[ ]aria-hidden=“true” 요소에 포커서블 자식 없음[ ]불필요한 ARIA 사용 없음 (native HTML로 대체 가능한 경우)
참고: 웹 접근성 연구소 — https://www.wah.or.kr
KWCAG 2.2 원문 — https://www.wah.or.kr/board/boardView.asp?brd_sn=5&brd_idx=1019
Last updated on