반응형
웹 접근성(Web Accessibility)이란,
장애가 있거나 없거나 누구나 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 보장하는 것을 말합니다.
국내 법적으로도 의무화되어 있는 부분이기 때문에,
웹 퍼블리셔 및 프론트엔드 개발자라면 꼭 숙지하고 있어야 합니다.
🔍 1. 웹 접근성이 중요한 이유
| 이유 | 설명 |
| 📢 법적 의무 | 공공기관, 대기업 사이트는 접근성 인증 필수 |
| 🧑🦯 사용자 확대 | 장애인, 노년층, 비영어권 사용자까지 고려 |
| 🔍 SEO 향상 | 접근성을 지키면 검색 엔진 최적화에도 도움 |
| 🌍 모두를 위한 디자인 | 반응형, 키보드 조작, 스크린리더 사용자 포함 |
🔑 2. A11y? 줄임말의 의미
- Accessibility 단어에서 a와 y 사이에 11개의 글자가 있어 A11y로 줄여 사용합니다.
- 개발자 사이에서 흔히 쓰는 약어입니다.
🔧 3. 웹 접근성의 4원칙 (WCAG 기준)
| 원칙 | 설명 |
| 지각성 (Perceivable) | 모든 콘텐츠가 감지 가능해야 함 (예: 텍스트 대체 제공) |
| 운용성 (Operable) | 키보드 등 다양한 방식으로 조작 가능해야 함 |
| 이해성 (Understandable) | 콘텐츠와 UI가 예측 가능하고 이해 쉬워야 함 |
| 견고성 (Robust) | 다양한 사용자 기술, 기기에서도 문제 없이 작동해야 함 |
✅ 4. 실무 적용 체크리스트
| 항목 | 설명 |
| alt 속성 | 이미지에는 반드시 대체 텍스트 제공 |
| 키보드 접근성 | Tab 키로 모든 UI 요소에 접근 가능해야 함 |
| 시맨틱 태그 사용 | button, nav, main 등 의미 있는 태그 활용 |
| 명확한 링크 | “여기 클릭”이 아니라 “자세히 보기”처럼 명확한 텍스트 사용 |
| ARIA 속성 | 시각적 요소에 스크린리더용 힌트 제공 (예: aria-label) |
| 색 대비 | 텍스트와 배경 색상 대비 충분히 확보 (WCAG 최소 4.5:1) |
🧠 5. 툴 & 검사 방법
| 도구 | 설명 |
| ✅ Lighthouse (크롬 개발자도구) | 접근성 점수 및 개선점 확인 |
| ✅ axe DevTools | 실시간 접근성 검사 확장 |
| ✅ 스크린리더 (NVDA, VoiceOver) | 실제 사용자 환경 시뮬레이션 |
| ✅ WAVE | 시각적으로 문제 영역 표시해주는 웹 툴 |
❗ 자주 하는 실수
- 이미지에 alt="" 생략
- 버튼에 div 사용 (❌) → button 태그 사용해야 함
- 링크로 동작하는 요소를 span이나 div로 제작
- 키보드 접근 안 되는 모달/탭 구현
📝 마무리 정리
- 웹 접근성은 장애인을 위한 것이 아니라 모두를 위한 웹입니다.
- 접근성 좋은 사이트는 사용자 만족도뿐 아니라 SEO와 UX까지 좋아집니다.
- 처음부터 접근성을 고려한 마크업과 CSS 구조를 짜는 습관을 들이세요!
반응형
'HTML, CSS' 카테고리의 다른 글
| HTML5 시맨틱 태그 정리 💡 section, article, aside, nav, header, footer 차이점과 예제 (0) | 2025.10.10 |
|---|---|
| SCSS @mixin 활용법 총정리! 실무에서 자주 쓰는 패턴까지 완벽 해설 (0) | 2025.10.06 |
| Flexbox & Grid 단축 속성 한눈에 보기! flex, grid, place-content까지 총정리 (0) | 2025.10.05 |
| Flexbox vs Grid 완전 정복! 언제 어떤 레이아웃을 써야 할까? (0) | 2025.10.04 |
| <label> 태그의 역할과 올바른 사용법 (0) | 2025.10.03 |