♿
EPISODE 01
WCAG 2.1 · 보조기술 · Lighthouse
웹 접근성 개념
웹 접근성의 정의와 한국 법적 의무, 장애 유형별 보조기술, WCAG 2.1의 4원칙(인식/운용/이해/견고), 그리고 Lighthouse·axe DevTools·키보드 테스트로 측정하는 방법을 익힙니다.
웹 접근성WCAGLighthouse
소요 시간
⏱ 45분
난이도
📊 중급
선수 조건
🎯 git-coop-04
결과물
Lighthouse 접근성 점수 90+ 페이지를 만드는 기준 확보
이 강의에서 배우는 것
- 1웹 접근성의 정의와 법적 의무를 안다
- 2장애 유형별 주요 보조기술을 파악한다
- 3WCAG 2.1의 4원칙(POUR)과 적합성 수준(A/AA/AAA)을 안다
- 4Lighthouse / axe DevTools로 접근성을 측정한다
- 5키보드만으로 페이지를 사용할 수 있는지 확인한다
1. 웹 접근성이란
장애가 있는 사람·고령자 등 모든 사람이 웹 콘텐츠에 접근하고 사용할 수 있도록 보장하는 것.
ℹ️
“웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있는 것이 웹의 핵심이다.” — 팀 버너스리
- 법적 의무: 공공기관·일정 규모 이상 민간 웹사이트 (장애인차별금지법 제21조)
- 한국형 KWCAG 2.1 준수 기준
- 더 많은 사용자: 국내 장애인 약 260만명
- SEO 향상 + UX 향상 (비장애인에게도 편의성 ↑)
2. 장애 유형별 보조기술
| 유형 | 보조기술 | 접근 방식 |
|---|---|---|
| 시각 | 스크린리더 (NVDA, VoiceOver, JAWS) | HTML 구조와 텍스트 대안 |
| 저시력 | 화면 확대, 고대비 모드 | 텍스트 크기·색상 대비 |
| 청각 | 자막, 수화 영상 | 멀티미디어 대안 콘텐츠 |
| 운동 | 키보드만 사용, 스위치 제어 | 마우스 없이 모든 기능 |
| 인지 | 다양한 보조 앱 | 단순·명확한 UI |
html
<!-- 스크린리더는 이렇게 읽음 -->
<a href="/">홈</a> <!-- "홈 링크" -->
<button disabled>제출</button> <!-- "제출 버튼 비활성화됨" -->
<img src="logo.png" alt="회사 로고"> <!-- "회사 로고 이미지" -->
<img src="deco.png" alt=""> <!-- 장식 이미지는 건너뜀 -->3. WCAG 2.1 — 4원칙 (POUR)
1) 인식 가능 (Perceivable)
html
<img src="chart.png" alt="2024년 1분기 매출: 1억 2천만원">
<video>
<track kind="captions" src="subtitles.vtt" srclang="ko">
</video>
<!-- 색상만으로 정보 전달 금지 -->2) 운용 가능 (Operable)
html
<button onclick="...">제출</button> <!-- ✓ 키보드 OK -->
<div onclick="...">제출</div> <!-- ✗ 키보드 불가 -->3) 이해 가능 (Understandable)
html
<html lang="ko">
<!-- 에러 메시지 구체적으로 -->
<!-- ✗ "입력 오류" -->
<!-- ✓ "이메일 형식이 올바르지 않습니다 (예: user@example.com)" -->4) 견고 (Robust)
올바른 HTML, 닫는 태그, 정확한 ARIA 사용.
4. 적합성 수준
| 수준 | 설명 |
|---|---|
| A | 최소 — 미충족 시 일부 사용자 완전 차단 |
| AA | 권장 — 대부분 법적 기준이 AA |
| AAA | 최고 — 모든 상황에서 완전 충족 |
5. 측정 도구
Lighthouse (Chrome 내장)
- F12 → Lighthouse 탭
- Accessibility 체크 → Analyze page load
- 점수 및 개선 항목 확인
axe DevTools
- Chrome 웹스토어에서 axe DevTools 설치
- F12 → axe DevTools 탭 → Scan ALL of my page
- 위반 항목과 수정 방법 확인
키보드 테스트
text
Tab 다음 포커스
Shift+Tab 이전 포커스
Enter 링크 활성화, 버튼 클릭
Space 버튼/체크박스 토글
화살표 라디오, 선택 메뉴
Escape 모달/팝업 닫기