🪸 웹 접근성 표준 (WCAG)
W3C가 정한 웹 콘텐츠 접근성 가이드라인(WCAG, Web Content Accessibility Guidelines)을 따르는 것이 중요하다.
이 가이드라인은 지각 가능(Perceivable), 운용 가능(Operable), 이해 가능(Understandable), 견고함(Robust)이라는 4가지 원칙을 갖는다.
1. 지각 가능(Perceivable)
콘텐츠를 모든 사용자가 볼 수 있고(시각 장애 고려), 들을 수 있으며(청각 장애 고려), 이해할 수 있도록 만들 것.
✅ 이미지에 대체 텍스트(alt) 제공
✅ 캡션 & 자막 제공 (청각 장애인을 위한 영상 접근성)
✅ 색상에만 의존하지 않는 디자인 (색맹 사용자 고려)
✅ 명확한 텍스트 대비 (배경과 글자 색상 명확하게 구분)
2. 운용 가능(Operable)
사용자가 키보드 또는 보조기기를 통해 쉽게 조작할 수 있도록 만들 것.
✅ 키보드만으로 모든 기능 사용 가능 (tab, enter, space 등 지원)
✅ 사용자 입력에 충분한 시간 제공 (자동 로그아웃 전 경고 등)
✅ 화면이 갑자기 깜빡이거나 움직이지 않도록 제한 (광과민성 발작 유발 방지)
✅ 클릭 영역 충분히 크게 제공 (터치 기기 사용자 고려)
3. 이해 가능(Understandable)
모든 사용자가 콘텐츠를 쉽게 이해할 수 있도록 만들 것.
✅ 예측 가능한 UI 설계 (사용자가 버튼, 링크 클릭 시 예상한 결과가 나오도록)
✅ 입력 필드에 명확한 레이블 제공 (<label for="id">이메일 입력</label>)
✅ 에러 발생 시 적절한 피드백 제공 (입력 오류 메시지 등)
4. 견고함(Robust)
다양한 기술 환경에서 접근 가능하도록 만들 것.
✅ 다양한 브라우저 & 보조 기술 지원 (스크린 리더, 음성 명령 등)
✅ 최신 웹 표준( HTML5, ARIA 등) 준수
🐤 웹 접근성을 높이는 방법
HTML, CSS, JavaScript를 다룰 때 아래 내용을 신경 쓰도록 한다.
1. 이미지 접근성 (대체 텍스트 제공)
- 모든
<img>에는 alt 속성을 추가 - 정보 전달용 이미지에는 의미 있는 설명 제공
- 장식용 이미지는 alt="" 또는 CSS로 배경 이미지 처리
🖥️ html
<img src="profile.jpg" alt="김철수의 프로필 사진">2. 동영상 & 오디오 콘텐츠 접근성 (자막 제공)
- 동영상에는 자막(captions) 또는 대체 텍스트 제공
- 음성 콘텐츠에는 스크립트 제공
<audio>,<video>요소에 controls 속성 추가하여 조작 가능하게 함
🖥️ html
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="ko" label="Korean">
</video>3. 키보드 접근성 확보
- 모든 기능을 키보드만으로 사용할 수 있도록 구현
- 포커스 스타일 제공 (:focus-visible 사용)
- tabindex="0"으로 초점 받을 수 있도록 설정
🖥️ html
<button tabindex="0">클릭하세요</button>4. 명확한 폼 입력 요소 & 레이블 제공
<label>태그를 사용해 입력 필드와 연결- placeholder 대신 label 사용 (스크린 리더 접근성 고려)
- 에러 메시지는 명확하고 친절하게 제공
🖥️ html
<label for="email">이메일</label>
<input type="email" id="email" name="email" required>
<small>올바른 이메일 주소를 입력해주세요.</small>5. ARIA 속성 활용
ARIA(Accessible Rich Internet Applications)는
보조 기술(스크린 리더 등)이 웹 콘텐츠를 더 잘 이해하도록 도와주는 속성이다.
aria-label: 요소의 역할 설명aria-hidden="true": 보조기기에 숨겨야 할 요소role="alert": 중요 알림을 스크린 리더에서 즉시 읽도록 설정
🖥️ html
<button aria-label="메뉴 열기">☰</button>🛎️ 웹 접근성 체크리스트
✅ 모든 이미지에 적절한 alt 텍스트가 있는가?
✅ 동영상 & 오디오 콘텐츠에 자막/스크립트가 제공되는가?
✅ 키보드만으로 사이트의 모든 기능을 사용할 수 있는가?
✅ 색상 대비가 충분한가? (4.5:1 이상)
✅ 모든 입력 필드에 label이 제공되는가?
✅ ARIA 속성을 적절히 사용하고 있는가?
➡️ 웹 접근성은 모든 사용자가 불편 없이 웹을 이용할 수 있도록 보장하는 것.
W3C의 WCAG(웹 콘텐츠 접근성 가이드라인)을 기반으로 웹을 설계해야 함.
HTML, CSS, JS에서 시맨틱 마크업, 키보드 접근성, 대체 텍스트, ARIA를 적절히 활용해 접근성 향상.
접근성이 좋은 웹사이트는 더 많은 사용자에게 도달할 수 있고,
SEO 및 UX에도 긍정적 영향을 준다.
