KWCAG 2.2 가이드라인

웹 접근성 가이드라인

한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2 기준의 모든 가이드라인을 확인하고 학습하세요.

인식의 용이성

(9개 지침)

1.1.1

적절한 대체 텍스트 제공

텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

주요 포인트:

정보성 이미지는 의미 있는 alt 텍스트 제공
장식용 이미지는 alt="" 사용
복잡한 이미지는 상세 설명 추가

예시:

<img src="logo.png" alt="회사 로고" />

자막 제공

멀티미디어 콘텐츠에는 자막, 대본 또는 수어를 제공해야 한다.

주요 포인트:

동영상에 자막 파일 제공
오디오 콘텐츠에 대본 제공
실시간 방송은 수어 제공

예시:

<video><track kind="captions" src="captions.vtt" /></video>

1.3.1

표의 구성

표는 이해하기 쉽게 구성해야 한다.

주요 포인트:

데이터 테이블에는 <th>와 scope 속성 사용
<caption>으로 표 제목 제공
복잡한 표는 headers 속성으로 연결

예시:

<table><caption>요금 안내</caption><thead><tr><th scope="col">항목</th></tr></thead></table>

관련 챌린지:

표 헤더 미제공 (th/scope 누락)

1.3.2

콘텐츠의 선형구조

콘텐츠는 논리적인 순서로 제공해야 한다.

주요 포인트:

DOM 순서와 시각적 순서 일치
레이어 팝업은 첫 번째 요소로
논리적 마크업 순서 유지

예시:

<header>...</header><main>...</main><footer>...</footer>

1.3.3

명확한 지시사항 제공

지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

주요 포인트:

색상만으로 지시하지 않기
위치(위/아래) 대신 명칭 사용
크기/모양 대신 정확한 이름 사용

예시:

<p>빨간색 버튼 대신 "제출 버튼" 사용</p>

1.4.1

색에 무관한 콘텐츠 인식

콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

주요 포인트:

색상만으로 정보 전달 금지
텍스트, 아이콘, 패턴 등 추가 단서 제공
필수 항목은 색상 외 수단으로 표시

예시:

<span class="required" aria-label="필수">*</span>

관련 챌린지:

색상만으로 필수 항목 표시 (필수 안내 누락)

1.4.2

자동 재생 금지

자동으로 소리가 재생되지 않아야 한다.

주요 포인트:

자동 재생 소리는 3초 미만
정지 컨트롤 제공
음소거 상태로 시작

예시:

<audio controls muted><source src="audio.mp3" /></audio>

1.4.3

텍스트 콘텐츠의 명도 대비

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

주요 포인트:

본문 텍스트: 4.5:1 이상
큰 텍스트(18pt 이상): 3:1 이상
대비 계산 도구 활용 권장

예시:

color: #111111; background: #ffffff; /* 16.6:1 */

관련 챌린지:

텍스트 대비 부족 (저대비 본문)

콘텐츠 간의 구분

이웃한 콘텐츠는 구분될 수 있어야 한다.

주요 포인트:

이웃한 콘텐츠 구분
테두리, 구분선 제공
여백으로 시각적 분리

예시:

<div style="border: 1px solid #ccc; padding: 1rem;">콘텐츠</div>

운용의 용이성

(11개 지침)

2.1.1

키보드 사용 보장

모든 기능은 키보드만으로도 사용할 수 있어야 한다.

주요 포인트:

모든 기능은 키보드로 접근 가능
div/span에 onClick만 사용 금지
role과 tabIndex 적절히 사용

예시:

<div role="button" tabIndex={0} onKeyDown={handleKeyDown}>클릭</div>

관련 챌린지:

키보드 접근 불가 (div onClick)

2.4.7

초점 이동과 표시

키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

주요 포인트:

포커스 표시는 시각적으로 명확
outline 제거 시 대체 스타일 제공
focus-visible 사용 권장

예시:

button:focus-visible { outline: 2px solid blue; }

관련 챌린지:

포커스 표시 제거 (focus:outline-none)

2.5.8

조작 가능

사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 한다.

주요 포인트:

컨트롤 크기 최소 6mm (대각선)
PC: 17px × 17px 이상
모바일: 24px × 24px 이상

예시:

<button style="min-width: 44px; min-height: 44px;">클릭</button>

2.1.4

문자 단축키

문자 단축키는 오동작으로 인한 오류를 방지하여야 한다.

주요 포인트:

단일 문자 단축키 비활성화 옵션
기능키 조합 사용
초점 받은 요소에서만 작동

예시:

<button onKeyDown={(e) => e.key === "s" && e.ctrlKey && handleSave()}>저장</button>

2.2.1

응답시간 조절

시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

주요 포인트:

시간 제한 연장 기능
최소 20초 남았을 때 경고
제한 해제 옵션 제공

예시:

<button onClick={extendTime}>시간 연장</button>

2.2.2

정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

주요 포인트:

자동 변경 콘텐츠 정지 버튼
캐러셀 이전/다음 버튼
인디케이터 제공

예시:

<button onClick={pauseCarousel}>정지</button>

2.3.1

깜빡임과 번쩍임 사용 제한

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

주요 포인트:

초당 3~50회 깜빡임 금지
사전 경고 제공
피할 수 있는 방법 제공

예시:

/* CSS 애니메이션 제한: animation-duration: 0.3s 이상 */

2.4.1

반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

주요 포인트:

반복 영역 건너뛰기 링크 제공
본문 바로가기 링크는 첫 번째 요소
tabindex="-1"로 초점 이동

예시:

<a href="#main">본문 바로가기</a>

관련 챌린지:

반복 영역 건너뛰기 링크 누락 (Skip link)

2.4.2

제목 제공

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

주요 포인트:

페이지마다 고유한 <title>
콘텐츠 블록에 <h1>~<h6>
제목 수준 건너뛰지 않기

예시:

<h1>메인 제목</h1><h2>부제목</h2>

관련 챌린지:

헤딩 순서 오류 (Heading Structure)

2.4.4

적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

주요 포인트:

링크 텍스트는 목적을 명확히
"더보기", "클릭" 등 모호한 텍스트 지양
문맥과 함께 이해 가능하도록

예시:

<a href="/news">뉴스 더보기</a>

관련 챌린지:

모호한 링크 텍스트 (더보기 반복)

고정된 참조 위치 정보

전자출판문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공ㆍ유지해야 한다.

주요 포인트:

전자책 페이지 번호 표시
페이지 이동 기능 제공
일관된 위치 정보 유지

예시:

<div>페이지 <span>1</span> / <span>100</span></div>

이해의 용이성

(11개 지침)

2.5.1

단일 포인터 입력 지원

다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.

주요 포인트:

다중 포인터 대신 단일 탭
스와이프 대신 버튼 제공
제스처 대체 UI 제공

예시:

<button onClick={handleAction}>대체 버튼</button>

2.5.2

포인터 입력 취소

단일 포인터 입력으로 실행되는 기능은 취소할 수 있어야 한다.

주요 포인트:

up 이벤트에서 기능 실행
취소 기능 제공
되돌리기 기능 제공

예시:

<button onMouseUp={handleClick}>클릭</button>

2.5.3

레이블과 네임

텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 한다.

주요 포인트:

레이블과 접근 가능한 이름 일치
시각적 텍스트를 네임에 포함
aria-label은 보조적 사용

예시:

<button>저장</button> /* "저장"이 접근 가능한 이름 */

동작기반 작동

동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.

주요 포인트:

동작 기반 기능 비활성화 옵션
UI 구성요소로 대체 제공
설정에서 제어 가능

예시:

<label><input type="checkbox" /> 동작 기반 기능 비활성화</label>

3.1.1

기본 언어 표시

주로 사용하는 언어를 명시해야 한다.

주요 포인트:

<html lang="ko"> 속성 제공
다국어 섹션은 lang 속성
스크린 리더 음성 엔진 선택

예시:

<html lang="ko"><body>한국어 콘텐츠</body></html>

관련 챌린지:

페이지 언어 속성 누락 (Language Attribute)

3.2.1

사용자 요구에 따른 실행

사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

주요 포인트:

새 창 열기 시 title 속성
초점 이동으로 맥락 변화 금지
사용자 의도 확인 후 실행

예시:

<a href="/page" target="_blank" title="새 창에서 열림">링크</a>

3.2.3

찾기 쉬운 도움 정보

도움 정보가 제공되는 경우, 각 페이지에서 동일한 상대적인 순서로 접근할 수 있어야 한다.

주요 포인트:

도움 정보 일관된 위치
각 페이지 동일한 순서
접근 경로 통일

예시:

<nav><a href="/help">도움말</a></nav>

3.3.1

오류 정정

입력 오류를 정정할 수 있는 방법을 제공해야 한다.

주요 포인트:

오류 메시지 명확히 제공
오류 항목으로 초점 이동
입력 내용 유지

예시:

<div role="alert">이메일 형식이 올바르지 않습니다.</div>

3.3.2

레이블 제공

사용자 입력에는 대응하는 레이블을 제공해야 한다.

주요 포인트:

모든 입력 필드에 레이블 제공
<label for="id"> 사용
placeholder는 레이블 대체 불가

예시:

<label for="email">이메일</label><input id="email" type="email" />

관련 챌린지:

폼 레이블 누락 (input label)

3.3.7

접근 가능한 인증

인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.

주요 포인트:

인지 기능 테스트 대체 방법
비밀번호 저장 기능
복사/붙여넣기 허용

예시:

<input type="text" autoComplete="username" />

3.3.7

반복 입력 정보

반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 한다.

주요 포인트:

반복 입력 자동 완성
autocomplete 속성 사용
이전 입력값 선택 가능

예시:

<input type="email" autoComplete="email" />

견고성

(2개 지침)

4.1.1

마크업 오류 방지

마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

주요 포인트:

id 값은 페이지 내 고유
태그 열고 닫기 정확히
중첩 관계 올바르게

예시:

<label for="email1">이메일</label><input id="email1" />

관련 챌린지:

중복 id로 인한 마크업 오류 (label 연결 깨짐)

4.1.2

웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

주요 포인트:

웹 애플리케이션 접근성 준수
ARIA 속성 적절히 사용
키보드 접근성 보장

예시:

<div role="application" aria-label="계산기">...</div>

실전 연습 시작하기

가이드라인을 읽는 것만으로는 부족합니다. 실제 코드를 수정하며 접근성을 익혀보세요.

챌린지 시작하기

KWCAG 2.2란?

KWCAG 2.2 (한국형 웹 콘텐츠 접근성 지침)는 웹 접근성을 위한 한국 표준 가이드라인입니다. WCAG 2.2를 기반으로 하되, 한국의 웹 환경과 사용자 특성을 반영하여 구성되었습니다.

4가지 원칙 (POUR):

인식의 용이성 (Perceivable): 정보와 UI 구성요소는 사용자가 인식할 수 있어야 함
운용의 용이성 (Operable): UI 구성요소와 탐색은 운용 가능해야 함
이해의 용이성 (Understandable): 정보와 UI 운용은 이해할 수 있어야 함
견고성 (Robust): 콘텐츠는 보조 기술을 포함한 넓은 범위의 사용자 에이전트에 의존하여 해석될 수 있어야 함