한양과학기술고등학교

에듀테크 프로젝트 대시보드

웹 접근성 (Web Accessibility)

웹 접근성이란 시각·청각·운동 장애가 있는 사람은 물론, 느린 네트워크·작은 화면·밝은 야외 환경 등 다양한 상황의 모든 사용자가 웹사이트를 사용할 수 있게 만드는 것입니다. 국제 표준 WCAG (Web Content Accessibility Guidelines)는 4가지 원칙(POUR)으로 요약됩니다.
👁️
Perceivable
인식 가능
이미지엔 대체 텍스트, 색만으로 정보를 전달하지 않기
🖱️
Operable
운용 가능
마우스 없이 키보드만으로도 모든 기능 조작 가능
🧠
Understandable
이해 가능
예측 가능한 구조, 명확한 오류 안내
🤖
Robust
견고성
스크린 리더 등 보조기기가 정확히 해석 가능
🎨 WCAG 명도 대비 계산기 Contrast Ratio
글자색
배경색
이 텍스트가 잘 보이나요?
작은 글씨도 확인해 보세요 (14px)
대비율 (Contrast Ratio)
—
기준일반 텍스트큰 텍스트(18px+)
AA——
AAA——
AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상을 요구합니다. AAA는 더 엄격한 7:1 / 4.5:1 기준입니다.
🔊 스크린 리더 시뮬레이션 alt 텍스트
스크린 리더 모드 OFF
🏔️✕
🌊✕
🍁
✅
// 이미지에 마우스를 올려보세요 (스크린 리더 모드 ON 시)
alt 없음 / "이미지" → 스크린 리더가 파일명이나 무의미한 텍스트만 읽어 시각장애 사용자는 내용을 전혀 알 수 없습니다.
구체적인 alt → "설악산 단풍나무 등산로 사진" 처럼 맥락을 담으면 이미지를 보지 않아도 내용을 이해할 수 있습니다. 장식용 이미지는 alt=""로 건너뛰게 합니다.
⌨️ 키보드만으로 조작하기 Tab / Shift+Tab
마우스를 사용하지 말고 Tab 키만으로 아래 버튼들을 순서대로 이동해 보세요. 파란 테두리(포커스 링)가 지금 선택된 요소입니다.
마지막 포커스 —
③번처럼 tabindex="-1"이 걸리면 화면엔 보여도 Tab으로는 절대 도달할 수 없습니다. 실제로 div에 onclick만 달아둔 "가짜 버튼"이 이런 함정을 자주 만듭니다.
🧩 시맨틱 HTML vs Div 스프 div soup
<!-- ❌ 나쁜 예: div만 사용 --> <div class="btn" onclick="submit()">제출</div> // 스크린 리더: "제출" (버튼인지 알 수 없음, 포커스도 안 됨) <!-- ✅ 좋은 예: 시맨틱 태그 + ARIA --> <button aria-label="신청서 제출">제출</button> // 스크린 리더: "신청서 제출, 버튼" (역할+상태까지 전달)
<button>, <nav>, <header> 같은 시맨틱 태그는 브라우저가 자동으로 role(역할)과 키보드 동작을 제공합니다. div로 흉내 내려면 role, tabindex, 키보드 이벤트까지 전부 직접 구현해야 하며 놓치기 쉽습니다.