대한민국의 웹 접근성 지침은 KWCAG 2.1을 기준으로 총 4가지 원칙(인식성, 운용성, 이해성, 견고성) 하에 세부 항목이 존재합니다. 아래는 실무자/디자이너/기획자를 위한 각 항목별 해설 및 실전 적용 방법입니다.
🎯 0) 웹 접근성 지침 소개
- 목표: 장애 유무에 관계없이 모든 사람이 동등하게 웹 서비스를 이용할 수 있도록 보장
- 적용 대상: 공공기관 웹사이트, 민간 기업 웹사이트, 앱 등 전자정보 형태의 서비스
🔎 1) 적절한 대체 텍스트 제공
- img 태그에는 alt 속성을 반드시 명시해야 합니다.
- decorative image일 경우
alt=""로 비워 접근성 도구가 무시하도록 합니다.
<img src="/logo.png" alt="CRAM 퀴즈 플랫폼 로고" />🧠 2) 자막 제공
- 영상 콘텐츠에는 **필수적으로 자막(srt 등)**을 제공해야 합니다.
- 유튜브 업로드 시 자동 자막보다는 수정된 자막을 삽입하는 것이 좋습니다.
🌈 3) 색에 무관한 콘텐츠 인식
-
색상만으로 정보를 전달하지 않기
- 예: "빨간색은 필수 입력 항목" → "‘*’ 표시된 항목은 필수입니다."
-
**충분한 명도 대비(4.5:1 이상)**를 확보해야 합니다.
📌 4) 명확한 지시 사항 제공
- "오른쪽을 클릭하세요" → ❌
- "제출 버튼을 클릭하세요" → ✅
🧾 5) 텍스트 콘텐츠의 명도 대비
-
텍스트와 배경 색상은 명도 대비 4.5:1 이상 확보해야 함.
- WebAIM Contrast Checker로 검사 가능
🎵 6) 자동 재생 금지
- 배경음악/영상 자동 재생은 사용자가 명확히 제어할 수 있어야 함
<video controls autoplay muted loop></video> <!-- muted 필요 -->📚 7) 콘텐츠 간의 구분
-
시맨틱 태그 적극 활용:
<header>, <nav>, <main>, <section>, <article>, <footer>
⌨️ 8) 키보드 사용 보장
- 모든 기능은 Tab 키로 접근 및 Enter/Space 키로 실행 가능해야 함
button,a,input등 기본 키보드 인터랙션 요소 사용 권장
🧭 9) 초점 이동
:focus스타일을 명확히 지정하여 현재 위치를 인지 가능하게
button:focus {
outline: 2px solid #007BFF;
}🧩 10) 조작 가능
- 슬라이더/드래그 등의 요소는 마우스 외에도 키보드로 조작 가능해야 함
<input type="range">등을 사용
⏱️ 11) 응답 시간 조절
- 시간 초과 기능(로그인 등)은 연장 옵션을 제공해야 함
alert('연장을 원하시면 확인을 눌러주세요.');⛔ 12) 정지 기능 제공
- 자동 슬라이드/영상 등은 일시정지/정지 기능 제공 필요
<button aria-label="배너 정지">⏸️</button>🌀 13) 깜빡임과 반복적 사용 제한
- 1초에 3회 이상 깜빡이는 콘텐츠는 금지 (광과민성 발작 위험)
- 애니메이션은
prefers-reduced-motion미디어 쿼리로 사용자 설정 존중
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
}
}🔁 14) 반복 영역 건너뛰기
<a href="#main" class="skip-link">본문 바로가기</a>제공
<a href="#main" class="sr-only focus:not-sr-only">본문 바로가기</a>📝 15) 제목 제공
- 페이지마다 **고유한 제목()**과 콘텐츠 내의 h1~h6 구조 필요
<title>웹 접근성 가이드 - CRAM</title>
<h1>접근성 가이드</h1>🔗 16) 적절한 링크 텍스트
- "여기 클릭" ❌ → "회원가입 페이지로 이동" ✅
- 스크린 리더 사용자에게 링크의 목적이 명확해야 함
🌐 17) 기본 언어 표시
<html lang="ko">명시로 음성 합성기가 적절한 언어로 읽을 수 있게 함
🧪 18) 사용자 요구에 따른 실행
- 사용자가 의도하지 않은 동작(예: hover 시 팝업)이 발생하지 않도록 제어
- 모달 창은 Esc 키로 닫을 수 있도록 구현
📐 19) 콘텐츠의 선택 구조
- 라디오/체크박스 그룹은 명확한 레이블 그룹화 필요
<fieldset>
<legend>성별 선택</legend>
<label><input type="radio" name="gender" value="male">남성</label>
</fieldset>📋 20) 표의 구성
<th scope="col">,<th scope="row">로 헤더 정보를 명확히
<table>
<thead>
<tr><th scope="col">이름</th><th scope="col">점수</th></tr>
</thead>
</table>📎 21) 레이블 제공
label요소는for속성으로 연결하거나aria-label을 사용
<label for="email">이메일</label>
<input id="email" type="email" />❌ 22) 오류 정정
- 입력 오류 발생 시 명확한 피드백 제공
<p role="alert">이메일 형식을 확인해주세요</p>🧯 23) 마침표 오류 방지
- 스크린리더가 오작동하지 않도록 정확한 구두점 사용 필요
📱 24) 웹 애플리케이션 접근성 준수
- React/Vue 등의 SPA 환경에서는 라우팅 시 초점 이동 처리 필요
useEffect(() => {
document.getElementById("main")?.focus();
}, [location]);🔗 관련 자료
