# [[Web Accessibility (WCAG)]] ## πŸ“Œ Brief Summary μ›Ή μ ‘κ·Όμ„±(Web Accessibility)κ³Ό WCAG(μ›Ή μ½˜ν…μΈ  μ ‘κ·Όμ„± μ§€μΉ¨, Web Content Accessibility Guidelines)λŠ” μ‹œκ°, 청각, μš΄λ™ 및 인지 μž₯μ• κ°€ μžˆλŠ” μ‚¬μš©μžλ₯Ό ν¬ν•¨ν•œ λͺ¨λ“  μ‚¬λžŒμ΄ μ›Ήμ‚¬μ΄νŠΈμ™€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ™λ“±ν•˜κ²Œ μ΄μš©ν•  수 μžˆλ„λ‘ 보μž₯ν•˜λŠ” 기술적 ν‘œμ€€μž…λ‹ˆλ‹€ [1-3]. W3Cμ—μ„œ μ œμ •ν•œ 이 지침은 인식 κ°€λŠ₯(Perceivable), 운용 κ°€λŠ₯(Operable), 이해 κ°€λŠ₯(Understandable), 견고함(Robust)μ΄λΌλŠ” POUR의 4κ°€μ§€ 핡심 원칙을 기반으둜 ν•©λ‹ˆλ‹€ [4, 5]. 미ꡭ의 ADA, 유럽의 EAA λ“± λŒ€λΆ€λΆ„μ˜ ꡭ가와 법λ₯ μ€ μ ‘κ·Όμ„± μ€€μˆ˜λ₯Ό μœ„ν•΄ WCAG 2.1 Level AAλ₯Ό μ΅œμ†Œ κΈ°μ€€μœΌλ‘œ μ±„νƒν•˜κ³  있으며, 이λ₯Ό μ€€μˆ˜ν•˜μ§€ μ•Šμ„ 경우 μ†Œμ†‘ λ“±μ˜ 법적 μœ„ν—˜κ³Ό λΈŒλžœλ“œ ν‰νŒ 손상이 λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€ [3, 6, 7]. ## πŸ“– Core Content * **WCAG의 λ“±κΈ‰κ³Ό μ§„ν™” κ³Όμ •** WCAGλŠ” A(μ΅œμ†Œ μˆ˜μ€€), AA(ν‘œμ€€ μš”κ΅¬ μˆ˜μ€€), AAA(졜고 μˆ˜μ€€)의 μ„Έ κ°€μ§€ μ€€μˆ˜ λ“±κΈ‰μœΌλ‘œ λ‚˜λ‰©λ‹ˆλ‹€ [8, 9]. λŒ€λΆ€λΆ„μ˜ 법적 기쀀은 Level AAλ₯Ό μš”κ΅¬ν•©λ‹ˆλ‹€ [9]. 2018년에 λ°œν‘œλœ WCAG 2.1은 λͺ¨λ°”일 μ‚¬μš©μž, μ €μ‹œλ ₯자, 인지 μž₯μ•  μ‚¬μš©μžλ₯Ό μœ„ν•œ 지침을 κ°•ν™”ν–ˆμœΌλ©°, 2023λ…„ 10월에 λ°œν‘œλœ μ΅œμ‹  버전인 WCAG 2.2λŠ” 인지/ν•™μŠ΅ μž₯μ• , μš΄λ™ μž₯μ•  및 λͺ¨λ°”일 접근성을 μœ„ν•΄ 9개의 μƒˆλ‘œμš΄ 성곡 기쀀을 λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€ [10-12]. * **μ£Όμš” μ€€μˆ˜ μš”κ΅¬ 사항 및 POUR 원칙** * **인식 κ°€λŠ₯ (Perceivable):** μ‹œκ°μ /청각적 μ œμ•½μ΄ μžˆλŠ” μ‚¬μš©μžλ₯Ό μœ„ν•΄ λͺ¨λ“  λΉ„ν…μŠ€νŠΈ μ½˜ν…μΈ (이미지, μ•„μ΄μ½˜ λ“±)에 λŒ€μ²΄ ν…μŠ€νŠΈ(Alt Text)λ₯Ό μ œκ³΅ν•˜κ³ , λΉ„λ””μ˜€ 및 μ˜€λ””μ˜€ μ½˜ν…μΈ μ—λŠ” μΊ‘μ…˜ 및 트랜슀크립트λ₯Ό λ°˜λ“œμ‹œ 포함해야 ν•©λ‹ˆλ‹€ [13-15]. λ˜ν•œ ν…μŠ€νŠΈμ™€ λ°°κ²½ κ°„μ˜ μ΅œμ†Œ 색상 λŒ€λΉ„μœ¨μ€ 4.5:1(큰 ν…μŠ€νŠΈλŠ” 3:1)을 μœ μ§€ν•΄μ•Ό ν•©λ‹ˆλ‹€ [13, 16]. * **운용 κ°€λŠ₯ (Operable):** 마우슀λ₯Ό μ‚¬μš©ν•  수 μ—†λŠ” μ‚¬μš©μžλ₯Ό μœ„ν•΄ λͺ¨λ“  μƒν˜Έ μž‘μš© μš”μ†Œμ™€ 탐색이 ν‚€λ³΄λ“œλ§ŒμœΌλ‘œ κ°€λŠ₯ν•΄μ•Ό ν•©λ‹ˆλ‹€ [13, 15, 17]. 특히 WCAG 2.2μ—μ„œλŠ” 초점 ν‘œμ‹œκΈ°(Focus indicator)κ°€ λ‹€λ₯Έ μ½˜ν…μΈ μ— κ°€λ €μ§€μ§€ μ•Šμ•„μ•Ό ν•˜λ©°(Focus Not Obscured), λ³΅μž‘ν•œ λ“œλž˜κ·Έ λ™μž‘ λŒ€μ‹  더블 νƒ­κ³Ό 같은 λŒ€μ•ˆμ„ μ œκ³΅ν•΄μ•Ό ν•œλ‹€κ³  λͺ…μ‹œν•©λ‹ˆλ‹€ [11, 18, 19]. * **이해 κ°€λŠ₯ (Understandable) & 견고함 (Robust):** λ³΅μž‘ν•œ μΊ‘μ°¨(CAPTCHA)λ‚˜ κΈ°μ–΅λ ₯에 μ˜μ‘΄ν•˜λŠ” λ³΄μ•ˆ 질문 λŒ€μ‹  μ ‘κ·Ό κ°€λŠ₯ν•œ 인증(Accessible Authentication) 방식을 μ œκ³΅ν•΄μ•Ό ν•©λ‹ˆλ‹€ [20, 21]. λ˜ν•œ ARIA(Accessible Rich Internet Applications) 라벨 및 역할을 μ˜¬λ°”λ₯΄κ²Œ κ΅¬ν˜„ν•˜μ—¬ 슀크린 리더와 같은 보쑰 기술이 동적 μ½˜ν…μΈ λ₯Ό μ •ν™•ν•˜κ²Œ 해석할 수 μžˆλ„λ‘ ν•΄μ•Ό ν•©λ‹ˆλ‹€ [13, 22]. * **μ΅œμ‹  μ›Ή μ•„ν‚€ν…μ²˜ 및 UXμ™€μ˜ μ—°κ΄€μ„±** μ ‘κ·Όμ„± μ€€μˆ˜λŠ” λ‹¨μˆœν•œ 법적 의무λ₯Ό λ„˜μ–΄ 전체적인 μ‚¬μš©μž κ²½ν—˜(UX)을 ν–₯μƒμ‹œν‚€κ³  검색 μ—”μ§„ μ΅œμ ν™”(SEO)에 직접적인 도움을 μ€λ‹ˆλ‹€ [1, 23]. μ‹œλ§¨ν‹± HTML5 ꡬ쑰와 λͺ…ν™•ν•œ ν—€λ”© 계측 ꡬ쑰λ₯Ό κ°–μΆ˜ μ›Ήμ‚¬μ΄νŠΈλŠ” 슀크린 리더 μ‚¬μš©μžλΏλ§Œ μ•„λ‹ˆλΌ 검색 μ—”μ§„ ν¬λ‘€λŸ¬μ™€ AI 검색 도ꡬ가 μ½˜ν…μΈ λ₯Ό 더 잘 μ΄ν•΄ν•˜λ„λ‘ λ•μŠ΅λ‹ˆλ‹€ [16, 24]. κ°œλ°œμžλŠ” WAVE, axe와 같은 μžλ™ν™”λœ μ ‘κ·Όμ„± μŠ€μΊ” 도ꡬ와 NVDA, JAWS λ“± 슀크린 리더λ₯Ό ν†΅ν•œ μˆ˜λ™ ν…ŒμŠ€νŠΈλ₯Ό κ²°ν•©ν•˜μ—¬ λ””μžμΈ 및 개발 초기 단계뢀터 접근성을 λ‚΄μž¬ν™”ν•΄μ•Ό ν•©λ‹ˆλ‹€ [13, 25, 26]. ## πŸ”— Knowledge Connections - **Related Topics:** [[User-Centered Design]], [[Semantic HTML5]], [[Search Engine Optimization (SEO)]], [[Mobile-First Responsive Design]] - **Projects/Contexts:** [[Americans with Disabilities Act (ADA)]], [[European Accessibility Act (EAA)]], [[WCAG 2.2 Updates]] - **Contradictions/Notes:** μ†ŒμŠ€μ—μ„œλŠ” μ›Ήμ‚¬μ΄νŠΈ 접근성을 μœ„ν•΄ "λΉ λ₯Έ μˆ˜μ •(quick fix)"을 μ•½μ†ν•˜λŠ” μ ‘κ·Όμ„± μœ„μ ―μ΄λ‚˜ μ˜€λ²„λ ˆμ΄(Overlays) ν”ŒλŸ¬κ·ΈμΈμ΄ μ‹€μ œλ‘œλŠ” 법적 보호λ₯Ό μ™„λ²½ν•˜κ²Œ 보μž₯ν•˜μ§€ λͺ»ν•œλ‹€κ³  κ²½κ³ ν•©λ‹ˆλ‹€. μ‹€μ œλ‘œ κ΄€λ ¨ μ†Œμ†‘μ˜ 22.6%κ°€ μ΄λŸ¬ν•œ μ ‘κ·Όμ„± μœ„μ ―μ„ μ„€μΉ˜ν•œ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λŒ€μƒμœΌλ‘œ ν–ˆμœΌλ―€λ‘œ, λ°˜λ“œμ‹œ μ½”λ“œ μˆ˜μ€€(Code-level)μ—μ„œμ˜ 근본적인 μˆ˜μ •μ΄ ν•„μš”ν•©λ‹ˆλ‹€ [22, 27, 28]. --- *Last updated: 2026-04-26*