웹 접근성 디자인 완벽 가이드 | 모두가 접근 가능한 사이트
웹 접근성이란?
정의: "장애인, 고령자 등 모든 사람이 웹사이트를 이용할 수 있게 만드는 것"
> 핵심 요약: 이 글에서 가장 중요한 내용을 먼저 확인하세요.
법적 요구사항:
- 대한민국: 장애인차별금지법
- 미국: ADA (Americans with Disabilities Act)
- EU: 웹 접근성 지침 필수
장애 유형별 웹 사용 어려움
1. 시각 장애
문제:
- 스크린 리더 사용 불가
- 색상만으로 정보 전달
- 작은 글씨
해결:
✓ 모든 이미지에 alt 텍스트 추가
✓ 색상 + 텍스트로 정보 전달
✓ 최소 12px 이상 글씨
✓ 명도 대비 4.5:1 이상2. 운동 장애
문제:
- 마우스 조작 어려움
- 정밀한 클릭 어려움
해결:
✓ 키보드 네비게이션 가능
✓ 클릭 영역 충분히 크게 (최소 44px)
✓ Tab 키로 이동 가능
✓ 음성 인식 호환3. 청각 장애
문제:
- 음성만 있는 콘텐츠
- 소리 경고
해결:
✓ 모든 비디오에 자막 추가
✓ 음성 대본 제공
✓ 시각적 경고 추가4. 인지 장애
문제:
- 복잡한 언어
- 낯선 용어
- 너무 많은 옵션
해결:
✓ 명확한 언어 사용
✓ 짧은 문장
✓ 단계별 설명
✓ 예시 제공WCAG 2.1 (웹 콘텐츠 접근성 지침) 4가지 원칙
1. 인식 가능한가 (Perceivable)
✓ 텍스트 대체 제공 (이미지 alt)
✓ 색상만으로 정보 전달하지 않기
✓ 명도 대비 충분히
✓ 글씨 크기 조정 가능2. 조작 가능한가 (Operable)
✓ 모든 기능이 키보드로 가능
✓ 클릭 영역 충분히 크다 (44x44px 최소)
✓ 깜빡이는 콘텐츠 없음 (발작 위험)
✓ 충분한 시간이 주어진다3. 이해 가능한가 (Understandable)
✓ 명확한 언어
✓ 약어 설명 ("MOU"라고 쓰면 "양해각서" 설명)
✓ 예측 가능한 네비게이션
✓ 입력 오류 메시지 명확4. 튼튼한가 (Robust)
✓ HTML 문법 정확
✓ 다양한 브라우저/보조기술 호환
✓ 시맨틱 HTML 사용실무 체크리스트 (TOP 10)
| 항목 | 확인 방법 | 개선 방법 |
| 이미지 alt | 이미지 없을 때 텍스트 표시 | <img alt="제품 사진"> |
| 색상 대비 | 명도 대비 4.5:1 이상 | WebAIM Contrast Checker |
| 키보드 네비게이션 | Tab키로 모든 버튼 접근 | tabindex, focus 스타일 |
| 글씨 크기 | 12px 이상 | 1.5배 확대 지원 |
| 버튼 크기 | 최소 44x44px | 패딩 추가 |
| 폼 레이블 | <label> 태그 사용 | for 속성 연결 |
| 비디오 자막 | 모든 영상에 자막 | YouTube 자동 자막 |
| 링크 텍스트 | "여기" 아닌 명확한 텍스트 | "정책 읽기" 등 |
| 에러 메시지 | 구체적 지시 | "이메일 형식이 잘못됨" |
| 스킵 링크 | 메뉴 건너뛰고 본문으로 | <a href="#content"> |
웹 접근성 검사 도구
자동 검사 도구
1. WAVE (WebAIM)
- Chrome 확장
- 접근성 에러 자동 검출
2. Lighthouse (Chrome 내장)
- DevTools → Lighthouse
- 접근성 점수 100점 만점
3. Axe DevTools
- 상세 에러 리포트
- 수정 방법까지 제시수동 검사
1. 스크린 리더 테스트
- NVDA (무료, Windows)
- Jaws (유료, Windows)
- VoiceOver (Mac 내장)
2. 키보드 네비게이션
- 마우스 사용 안 하고 Tab으로만 탐색
3. 색상 시뮬레이션
- 색맹 상태로 페이지 보기
- Chrome: "Colorblind Simulator"8주 접근성 디자인 학습 계획
1~2주: 개념 및 지침 이해
- WCAG 2.1 학습
- 왜 중요한지 이해
3주: 현재 사이트 감시
- WAVE 또는 Lighthouse로 분석
- 문제점 정리
4주: 이미지 alt 개선
- 모든 이미지에 alt 텍스트 추가
- 의미 있는 텍스트 작성
5주: 색상 및 명도 개선
- 명도 대비 4.5:1 이상 확보
- 색상만으로 정보 전달하지 않기
6주: 키보드 네비게이션
- 모든 인터랙티브 요소 Tab 접근
- Focus 스타일 추가
7주: 텍스트 및 폼
- 폼 레이블 명확히
- 에러 메시지 개선
8주: 최종 검증 및 배포
- 스크린 리더 테스트
- 접근성 인증서 취득 (선택)
자주 묻는 질문 (FAQ)
접근성 개선하면 일반 사용자 경험이 나빠지지 않나요?
A. 반대입니다. 접근성이 좋은 사이트는 모든 사람에게 사용하기 쉬운 사이트입니다.비용이 많이 드나요?
A. 거의 없습니다. 대부분의 개선이 코드 수정이고, 도구들이 무료입니다.이미 만든 사이트는?
A. 점진적으로 개선 가능합니다. 가장 심각한 문제부터 해결하세요.접근성 검증 기준은?
A. 기본은 AA 등급입니다. 공공기관은 AAA 권장.모바일 앱도 해야 하나요?
A. 네, 필수입니다. iOS, Android 모두 접근성 기능이 있습니다.마치며
웹 접근성은 누군가를 위한 배려가 아니라, 모두를 위한 기본입니다. 접근성이 좋은 사이트는 자동으로 SEO도, 모바일 경험도 좋아집니다!
관련 글:
관련 도구