웹 접근성 가이드
WCAG 2.2와 KWCAG 2.2를 기반으로 한 웹 접근성 개발 가이드입니다.
개요
웹 접근성(Web Accessibility)은 장애인, 고령자 등 모든 사용자가 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 보장하는 것을 의미합니다. 대한민국에서는 「장애인차별금지법」에 따라 웹 접근성 준수가 법적 의무입니다.
15%
전 세계 장애인 비율
96%
접근성 오류 있는 웹사이트
2.2M
국내 시각장애인 수
법적 요구사항
「장애인차별금지법」 제21조에 따라 공공기관 및 일정 규모 이상의 사업자는 웹 접근성을 준수해야 합니다. 미준수 시 손해배상 책임이 발생할 수 있습니다.
WCAG 2.2
WCAG(Web Content Accessibility Guidelines)는 W3C에서 제정한 국제 웹 접근성 표준입니다. 2023년 10월에 발표된 WCAG 2.2가 최신 버전입니다.
| 등급 | 수준 | 설명 |
|---|---|---|
| Level A | 최소 | 기본적인 접근성 요구사항 |
| Level AA | 권장 | 대부분의 법적 요구사항 충족 |
| Level AAA | 향상 | 최고 수준의 접근성 |
WCAG 4대 원칙 (POUR)
visibility
1. 인식의 용이성 (Perceivable)
모든 콘텐츠는 사용자가 인식할 수 있어야 합니다.
- • 이미지에 대체 텍스트 제공
- • 동영상에 자막 제공
- • 충분한 색상 대비
touch_app
2. 운용의 용이성 (Operable)
UI 구성요소와 내비게이션은 조작 가능해야 합니다.
- • 키보드로 모든 기능 사용 가능
- • 충분한 시간 제공
- • 발작 유발 콘텐츠 금지
psychology
3. 이해의 용이성 (Understandable)
정보와 UI 조작은 이해할 수 있어야 합니다.
- • 읽기 쉬운 텍스트
- • 예측 가능한 동작
- • 오류 수정 도움
build
4. 견고성 (Robust)
다양한 사용자 에이전트에서 해석 가능해야 합니다.
- • 표준 HTML 사용
- • ARIA 올바르게 사용
- • 보조기술 호환성
ARIA 사용법
WAI-ARIA(Accessible Rich Internet Applications)는 동적 웹 콘텐츠의 접근성을 향상시키기 위한 기술 명세입니다.
ARIA 사용 주의
"No ARIA is better than bad ARIA" - 잘못된 ARIA 사용은 오히려 접근성을 해칩니다. 네이티브 HTML 요소로 해결 가능하면 ARIA를 사용하지 마세요.
자주 사용하는 ARIA 속성
<!-- 레이블 제공 -->
<button aria-label="메뉴 닫기">
<svg>...</svg>
</button>
<!-- 상태 전달 -->
<button aria-expanded="false" aria-controls="menu">
메뉴
</button>
<!-- 실시간 알림 -->
<div aria-live="polite" aria-atomic="true">
장바구니에 상품이 추가되었습니다.
</div>
<!-- 숨김 처리 -->
<span aria-hidden="true">👍</span>
<span class="sr-only">좋아요</span>접근성 체크리스트
개발 시 확인해야 할 필수 항목들입니다.
image이미지
- check_box모든 의미있는 이미지에 alt 속성 제공
- check_box장식용 이미지는 alt="" 또는 CSS background 사용
- check_box복잡한 이미지는 긴 설명 제공 (aria-describedby)
keyboard키보드 접근성
- check_box모든 인터랙티브 요소에 키보드로 접근 가능
- check_boxTab 순서가 논리적
- check_box포커스 표시가 명확하게 보임
- check_box키보드 트랩 없음 (ESC로 모달 닫기 등)
edit_note폼
- check_box모든 입력 필드에 연결된 label 제공
- check_box필수 필드 명확히 표시 (aria-required)
- check_box오류 메시지를 필드와 연결 (aria-describedby)
- check_box입력 형식 안내 제공
account_tree구조
- check_box페이지당 하나의 h1
- check_box제목 레벨 순서대로 사용 (h1 → h2 → h3)
- check_box시맨틱 랜드마크 사용 (header, nav, main, footer)
- check_boxSkip Navigation 링크 제공