1️⃣ 웹 접근성 (Web Accessibility)
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
- 모든 사용자가 웹 콘텐츠를 쉽게 이용할 수 있도록 보장
- 장애 여부, 기기 종류, 네트워크 환경과 관계 없이 동등한 웹 경험 제공
장애 유형별 필요성
- 시각 장애: 스크린 리더로 콘텐츠 감상 ➡️ 시맨틱 태그 및 대체 텍스트 필요
- 청각 장애: 동영상 및 오디오 자막 제공 필요
- 운동 장애: 키보드 조작 가능성이 중요함
- 인지 장애: 간결한 텍스트와 예측 가능한 UI 제공
검색 엔진 최적화(SEO) 향상
웹 접근성이 뛰어난 사이트는 사용자 경험을 개선하여 참여도를 높이고 이탈률을 줄임
➡️결과적으로 SEO 성과를 향상시키는 데 기여
2️⃣ 웹 접근성 주요 원칙 (POUR)
WCAG(Web Content Accessibility Guidelines): 웹 콘텐츠가 장애를 가진 사람들을 포함하여 모든 사용자가 접근할 수 있도록 국제적으로 표준화된 지침
인식의 용이성 (Perceivable)
정보와 사용자 인터페이스 요소는 사용자가 인식할 수 있는 방법으로 제시되어야 함
- 대체 텍스트: 이미지, 영상과 같이 텍스트가 아닌 콘텐츠에 대한 대체 텍스트를 제공
<img src="flower.jpg" alt="분홍 장미 꽃다발" />
운용의 용이성 (Operable)
사용자 인터페이스 구성 요소 및 내비게이션은 운용 가능해야 함
- 키보드 내비게이션: 사용자의 이동 경로 입력이 필요한 경우를 제외한 모든 기능은 키보드로 사용 가능해야 함
이해의 용이성 (Understandable)
사용자 인터페이스의 정보와 운용은 이해 가능해야 함
- 예측 가능성: 버튼이나 링크의 용도를 명확히 함
<a href="#">클릭하세요</a> <a href="/signup">회원가입</a>
견고성 (Robust)
사용자는 기술에 영향을 받지 않고 콘텐츠를 이용할 수 있어야 함
- 보조 기술과 호환 가능한 HTML 작성:
<div>대신 시맨틱 태그 사용 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>
3️⃣ 웹 접근성 도구
Lighthouse
- 크롬 브라우저에서 접근성 진단 가능
- 대체 텍스트, 명암비, 키보드 네비게이션 등
axe DevTools
- 브라우저 확장 프로그램으로, 접근성 오류를 시각적으로 표시
- 복잡한 UI의 접근성 테스트에 적합
WAVE
- 웹사이트 URL을 입력해 접근성 문제를 시각적으로 분석
- alt 텍스트 누락, 명암 대비 부족 등