모두를 위한 웹을 만든다는 것은, 누구나 불편 없이 콘텐츠를 이용할 수 있도록 설계한다는 뜻입니다. 그중에서도 시각장애인을 위한 웹 접근성은 웹 콘텐츠 설계에서 가장 기본이 되는 요소입니다.
이 글에서는 시각장애인 사용자들이 스크린 리더 등 보조 기술을 활용할 수 있도록 고려해야 할 핵심 가이드라인을 소개합니다.
1. 시각장애인 사용자와 웹 사용 방식 이해하기
시각장애인은 스크린 리더(Screen Reader)라는 보조 기술을 통해 웹사이트의 콘텐츠를 음성 또는 점자로 접합니다. 따라서 모든 웹 요소는 텍스트 기반 정보로 해석될 수 있어야 합니다.
스크린 리더 사용 방식
- 🔊 텍스트 콘텐츠를 음성으로 읽어줌
- ⌨️ 키보드(탭, 방향키)로 콘텐츠 탐색
- 📄 구조화된 HTML로 문서 해석
따라서 웹사이트가 올바른 HTML 구조, 대체 텍스트, 키보드 접근성을 갖추는 것이 중요합니다.
2. 대체 텍스트(alt text)의 중요성
이미지는 시각장애인이 인식할 수 없는 요소입니다. 이를 보완하기 위해 img 태그에 alt 속성을 사용하여 설명을 제공해야 합니다.
✔️ 좋은 대체 텍스트 예시
- ❌ 잘못된 예: `
` - ✅ 좋은 예: ``
불필요한 이미지(장식용)는 `alt=””`로 비워 스크린 리더가 생략하도록 설정합니다.
3. 콘텐츠 구조는 논리적으로 설계
스크린 리더 사용자는 페이지 구조를 제목(h1~h6), 목록(ul, ol), 구획(div, section) 등을 통해 인식합니다.
콘텐츠 구조 가이드
- 📌 하나의 페이지에 h1은 하나만
- 📌 제목 계층은 논리적 흐름을 따라야 함 (h2 → h3 → h4)
- 📌 리스트 콘텐츠는 `
- 📌 각 섹션은 “, “로 명확히 분리
- 🖱️ 마우스 전용 기능 금지 (예: 드래그 전용 슬라이더)
- ⌨️ 탭(Tab), Enter, 방향키로 조작 가능하도록 구현
- 🧭 포커스 이동 시 시각적·청각적 피드백 제공
- 🎨 텍스트와 배경의 명도 대비는 최소 4.5:1 이상
- ❌ 정보 전달에 색상만 사용 금지 (예: 빨간색만으로 오류 표시)
- ✔️ 아이콘, 텍스트, 패턴 등 시각적 보완 제공
- 🔊 NVDA (Windows) – 무료, 다양한 웹사이트와 호환
- 🔊 VoiceOver (macOS, iOS) – Apple 기본 탑재
- 🔍 ChromeVox (Chrome 확장) – 크롬 브라우저 전용