# [[Web Accessibility]] ## πŸ“Œ Brief Summary Web Accessibility (μ›Ή μ ‘κ·Όμ„±)은 μ‹œκ°, 청각, μš΄λ™ 및 인지 μž₯μ• λ₯Ό ν¬ν•¨ν•œ λͺ¨λ“  μ‚¬μš©μžκ°€ 차별 없이 μ›Ήμ‚¬μ΄νŠΈμ™€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 정보와 κΈ°λŠ₯에 μ ‘κ·Όν•˜κ³  μ‚¬μš©ν•  수 μžˆλ„λ‘ μ„€κ³„ν•˜λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€ [1, 2]. μ΄λŠ” λ‹¨μˆœν•œ 윀리적, 법적 μš”κ΅¬μ‚¬ν•­μ„ λ„˜μ–΄ μΌμ‹œμ  μž₯μ• λ₯Ό κ°€μ§„ μ‚¬μš©μžλ‚˜ 느린 인터넷 ν™˜κ²½μ˜ μ‚¬μš©μžλ₯Ό ν¬ν•¨ν•œ λͺ¨λ“  방문자의 μ „λ°˜μ μΈ μ‚¬μš©μž κ²½ν—˜(UX)을 ν–₯μƒμ‹œν‚€λŠ” ν˜„λŒ€ μ›Ή λ””μžμΈμ˜ 핡심 λͺ¨λ²” μ‚¬λ‘€μž…λ‹ˆλ‹€ [1, 3, 4]. λŒ€ν‘œμ μΈ 기술 ν‘œμ€€μœΌλ‘œλŠ” W3Cμ—μ„œ μ œμ •ν•œ μ›Ή μ½˜ν…μΈ  μ ‘κ·Όμ„± μ§€μΉ¨(WCAG)이 있으며, μ΄λŠ” 미ꡭ의 ADA, 유럽의 EAA λ“± κΈ€λ‘œλ²Œ μ ‘κ·Όμ„± λ²•κ·œ 및 규제 μ€€μˆ˜μ˜ 기반이 λ©λ‹ˆλ‹€ [5, 6]. ## πŸ“– Core Content * **핡심 원칙 (POUR):** μ›Ή 접근성은 인식 κ°€λŠ₯μ„±(Perceivable), 운용 κ°€λŠ₯μ„±(Operable), 이해 κ°€λŠ₯μ„±(Understandable), 견고성(Robust)의 λ„€ κ°€μ§€ 원칙을 λ°”νƒ•μœΌλ‘œ κ΅¬μΆ•λ©λ‹ˆλ‹€ [7, 8]. 이 원칙은 ν™”λ©΄ νŒλ…κΈ°(슀크린 리더), ν‚€λ³΄λ“œ μ „μš© 탐색 등을 μ‚¬μš©ν•˜λŠ” μ‚¬μš©μžκ°€ μ½˜ν…μΈ λ₯Ό λͺ…ν™•νžˆ μΈμ§€ν•˜κ³  μ‘°μž‘ν•  수 μžˆλ„λ‘ λ•μŠ΅λ‹ˆλ‹€ [8, 9]. * **μ£Όμš” κ΅¬ν˜„ μš”κ΅¬μ‚¬ν•­ 및 λͺ¨λ²” 사둀:** * **ν…μŠ€νŠΈ λŒ€μ²΄ 및 λ©€ν‹°λ―Έλ””μ–΄:** μ‹œκ° μž₯애인 및 청각 μž₯애인을 μœ„ν•΄ λͺ¨λ“  의미 μžˆλŠ” 이미지에 μ μ ˆν•œ λŒ€μ²΄ ν…μŠ€νŠΈ(alt text)λ₯Ό μ œκ³΅ν•˜κ³ , λ™μ˜μƒκ³Ό μ˜€λ””μ˜€ μ½˜ν…μΈ μ—λŠ” λ™κΈ°ν™”λœ μžλ§‰(captions) 및 슀크립트λ₯Ό μ œκ³΅ν•΄μ•Ό ν•©λ‹ˆλ‹€ [10, 11]. * **ν‚€λ³΄λ“œ 탐색 및 초점(Focus):** 마우슀 없이 ν‚€λ³΄λ“œλ§ŒμœΌλ‘œ λͺ¨λ“  μƒν˜Έμž‘μš© μš”μ†Œ(링크, λ²„νŠΌ, 폼 λ“±)λ₯Ό μ‘°μž‘ν•  수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€ [10, 12]. μ΅œμ‹  WCAG 2.2 ν‘œμ€€μ— λ”°λ₯΄λ©΄, 포컀슀 ν‘œμ‹œκΈ°λŠ” λ‹€λ₯Έ μš”μ†Œμ— μ˜ν•΄ κ°€λ €μ§€μ§€ μ•Šμ•„μ•Ό ν•˜λ©°(Focus Not Obscured) λͺ…ν™•ν•˜κ²Œ 보여야 ν•©λ‹ˆλ‹€ [13, 14]. * **색상 λŒ€λΉ„ 및 μ‹œκ°μ  계측:** ν…μŠ€νŠΈλŠ” λ°°κ²½κ³Ό μ΅œμ†Œ 4.5:1(큰 ν…μŠ€νŠΈμ˜ 경우 3:1)의 λŒ€λΉ„ λΉ„μœ¨μ„ μœ μ§€ν•˜μ—¬ μ €μ‹œλ ₯μžλ‚˜ 색맹 μ‚¬μš©μžκ°€ μ‰½κ²Œ 읽을 수 μžˆλ„λ‘ ν•΄μ•Ό ν•©λ‹ˆλ‹€ [10, 15, 16]. * **ARIA μ—­ν•  및 μ‹œλ§¨ν‹± HTML:** 슀크린 리더가 동적 μ½˜ν…μΈ μ™€ μƒν˜Έμž‘μš© μš”μ†Œμ˜ λ§₯락을 μ •ν™•νžˆ 이해할 수 μžˆλ„λ‘ ARIA(Accessible Rich Internet Applications) 라벨을 κ΅¬ν˜„ν•˜κ³ , μ‹œλ§¨ν‹± HTML을 적절히 μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€ [10, 16]. * **μ‚¬μš©μž μƒν˜Έμž‘μš© κ°œμ„  (WCAG 2.2):** λ³΅μž‘ν•œ λ“œλž˜κ·Έ λ™μž‘ λŒ€μ‹  더블 νƒ­κ³Ό 같은 λŒ€μ•ˆμ„ μ œκ³΅ν•˜κ³ , κΈ°μ–΅λ ₯에 μ˜μ‘΄ν•˜μ§€ μ•ŠλŠ” μ ‘κ·Ό κ°€λŠ₯ν•œ 인증 방식(예: 생체 인식 λ“±)을 λ„μž…ν•˜λ©°, 반볡적인 데이터 μž…λ ₯을 μ€„μ΄λŠ” λ°©ν–₯으둜 섀계해야 ν•©λ‹ˆλ‹€ [14, 17, 18]. * **μ ‘κ·Όμ„± 감사 및 μœ μ§€ 관리:** κ·œμ • μ€€μˆ˜λ₯Ό μœ„ν•΄ 기획 및 섀계 단계뢀터 접근성을 κ³ λ €ν•΄μ•Ό ν•˜λ©°, WAVE, axe, AudioEye와 같은 μžλ™ν™”λœ μŠ€μΊλ‹ 도ꡬ와 μ‹€μ œ 보쑰 κΈ°μˆ μ„ μ‚¬μš©ν•˜λŠ” μˆ˜λ™ ν…ŒμŠ€νŠΈλ₯Ό λ³‘ν–‰ν•˜μ—¬ 지속적인 감사λ₯Ό μˆ˜ν–‰ν•΄μ•Ό ν•©λ‹ˆλ‹€ [10, 19, 20]. ## πŸ”— Knowledge Connections - **Related Topics:** [[WCAG (Web Content Accessibility Guidelines)]], [[POUR Principles]], [[User Experience (UX)]], [[Semantic HTML]] - **Projects/Contexts:** [[ADA Title II Compliance 2026]], [[European Accessibility Act (EAA) 2025]], [[Telemedicine Platform Redesign Case Study]] - **Contradictions/Notes:** μžλ™ν™”λœ μ ‘κ·Όμ„± μœ„μ ―μ΄λ‚˜ μ˜€λ²„λ ˆμ΄(overlay)와 같은 이λ₯Έλ°” "λΉ λ₯Έ μˆ˜μ •(quick fix)" λ„κ΅¬λŠ” λ²•μ μœΌλ‘œ μ™„λ²½ν•œ κ·œμ • μ€€μˆ˜λ₯Ό 보μž₯ν•˜μ§€ μ•ŠμœΌλ©°, μ‹€μ œλ‘œλŠ” μ ‘κ·Όμ„± κ΄€λ ¨ μ†Œμ†‘μ˜ ν‘œμ μ΄ λ˜λŠ” κ²½μš°κ°€ λ§ŽμœΌλ―€λ‘œ 쑰직의 근본적인 μ½”λ“œ 및 섀계 μˆ˜μ •μ΄ ν•„μˆ˜μ μž…λ‹ˆλ‹€ [21, 22]. --- *Last updated: 2026-04-26*