# [[웹 접근성(Web [[Accessibility]])]]

## 📌[[ brief]] 시 Summary
웹 접근성은 장애나 연령에 상관없이 모든 사용자가 다양한 입력 방식과 기기 환경에서 웹사이트의 정보를 장벽 없이 이용할 수 있도록 설계하는 것을 의미합니다 [1-4]. 반응형 웹 디자인의 필수 요소이며, WCAG(웹 콘텐츠 접근성 지침)와 같은 표준을 준수하여 텍스트 크기 조정, 키보드 탐색, 안전한 애니메이션 제공 등 포용적인 디지털 경험을 구축하는 것이 핵심입니다 [1, 3, 5, 6].

## 📖 Core Content
* **반응형 디자인과 접근성의 통합:** 반응형 설계는 단순히 화면 크기에 맞추는 것 이상을 의미합니다. 터치, 키보드, 보조 기술(스크린 리더 등)과 같은 다양한 입력 방식과 다크 모드, 모션 축소 등 사용자의 개별 설정에 적응하여 시각, 이동, 인지 장애가 있는 사용자가 장벽 없이 콘텐츠에 접근할 수 있게 합니다 [3, 4].
* **UI 요소 및 HTML 구조의 접근성 준수 사항:** 
  * 시각 장애인을 위해 의미 있는(semantic) HTML 요소를 사용하고, 모든 중요 이미지에 대체 텍스트(alt text)를 제공해야 합니다 [2].
  * 야외 환경이나 저시력 사용자를 위해 텍스트와 배경 간의 명확한 색상 대비를 유지하고, 정보 전달을 색상에만 의존해서는 안 됩니다 [2].
  * 버튼, 링크, 폼(form) 요소는 키보드로 탐색 가능(keyboard-navigable)해야 하며 명확한 포커스(focus) 상태를 제공해야 합니다 [2]. 또한 모바일 터치 타겟은 최소 44x44px 또는 48x48px 이상이어야 오작동을 줄일 수 있습니다 [7, 8].
* **타이포그래피 접근성 (WCAG 1.4.4):** 법적으로도 종종 요구되는 WCAG 1.4.4 섹션에 따라, 텍스트는 보조 기술 없이도 최대 200%까지 크기 조절이 가능해야 합니다 [6, 9]. 이를 위해 유동적 타이포그래피([[Fluid Typography]])를 사용할 때 `clamp()` 함수를 활용하여 최대 폰트 크기가 최소 크기의 2.5배를 초과하지 않도록 제한하는 '2.5배 규칙(2.5x Rule)'이 권장됩니다 [10]. 뷰포트 단위(예: `vw`)에만 전적으로 의존해 폰트 크기를 설정하면 사용자의 화면 확대/축소 기능이 무력화되어 접근성을 훼손할 수 있습니다 [6, 11].
* **애니메이션과 모션 제어:** 애니메이션은 시스템 상태를 이해하는 데 도움을 주지만, 과도한 움직임은 전정 신경계 장애(vestibular disorders)가 있는 사용자에게 어지럼증을 유발할 수 있습니다 [5, 12]. 따라서 모션을 미묘하게 유지하고, CSS의 `prefers-reduced-motion` 미디어 쿼리를 사용하여 필수적이지 않은 애니메이션을 비활성화하거나 줄이는 옵션을 제공해야 합니다 [5, 13, 14].
* **디자인 시스템에서의 접근성 관리:** 디자인 시스템의 컬러 토큰을 설정할 때 WCAG 명암비(Contrast Ratio) 준수 여부를 반드시 테스트해야 하며, 접근성 고려를 잊는 것은 토큰 설계의 주요 함정 중 하나입니다 [15-17].

## 🔗 Knowledge Connections
- **Related Topics:** 반응형 웹 디자인([[Responsive Web Design]]), [[유동적 타이포그래피(Fluid Typography)]], 애니메이션 성능 최적화 및 모션 제어, [[디자인 시스템(Design[[ system]]s)]]
- **Projects/Contexts:** WCAG 1.4.4 텍스트 200% 확대 대응, prefers-reduced-motion 미디어 쿼리 구현, 키보드 탐색 및 포커스 상태 설계
- **Contradictions/Notes:** 화면 크기에만 반응하게 만들기 위해 뷰포트 단위(`vw`, `vh`)를 단독으로 폰트 크기에 적용하면, 브라우저가 창 크기에 따라 글씨를 조정할 수는 있어도 사용자가 브라우저 자체의 "확대(Zoom)" 기능을 사용할 때는 글씨 크기가 변하지 않아 오히려 접근성을 심각하게 해치는 결과를 초래합니다 [6, 11]. 따라서 `calc()`나 `clamp()`를 통해 기본 픽셀 혹은 `em/rem` 값과 혼합하여 줌(zoom) 기능에 반응하도록 설계해야 합니다 [18, 19].

---
*Last updated: 2026-04-26*