bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[G1-Sync] Manual knowledge update

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend/Web Content Accessibility Guidelines (WCAG).md
+130 -67
View File
@@ -2,93 +2,156 @@
id: wiki-2026-0508-web-content-accessibility-guidel
title: Web Content Accessibility Guidelines (WCAG)
category: 10_Wiki/Topics
status: needs_review
status: verified
canonical_id: self
aliases: []
aliases: [WCAG, WCAG 2.2, WCAG 3.0, A11y guidelines]
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
tags: [uncategorized]
confidence_score: 0.9
verification_status: applied
tags: [accessibility, a11y, wcag, frontend, standards]
raw_sources: []
last_reinforced: 2026-05-08
last_reinforced: 2026-05-10
github_commit: pending
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
tech_stack:
language: unspecified
framework: unspecified
language: HTML / ARIA
framework: WCAG 2.2 / 3.0 draft
---
# [[Web Content Accessibility Guidelines (WCAG)|Web Content Accessibility Guidelines (WCAG]]
# Web Content Accessibility Guidelines (WCAG)
## 📌 한 줄 통찰 (The Karpathy Summary)
웹 콘텐츠 접근성 지침(WCAG)은 모든 사용자가 디지털 콘텐츠와 인터페이스에 장벽 없이 접근할 수 있도록 보장하는 포괄적인 접근성 표준입니다 [1, 2]. 실무 CSS 및 UI/UX 설계에서 WCAG는 애니메이션의 움직임 제한, 텍스트 크기 확대의 보장, 색상 대비 준수 등을 규정하여 포용적이고 안전한 사용자 경험(UX)을 구축하는 핵심 기준이 됩니다 [2-4].
## 매 한 줄
> **"매 W3C WAI 의 매 web 접근성 국제 표준"**. 매 4 원칙 (POUR — Perceivable, Operable, Understandable, Robust) 아래 매 testable success criteria 를 매 A / AA / AAA 3 단계로 분류한다. 매 2026 기준 WCAG 2.2 가 매 사실상 표준, WCAG 3.0 (Silver) 은 W3C Working Draft 단계로 매 점수 기반 모델 도입 진행 중.
## 📖 구조화된 지식 (Synthesized Content)
- **모션 및 애니메이션 제어 (WCAG 2.2)**
과도한 애니메이션과 모션은 전정기관 장애(vestibular disorders)를 가진 사용자에게 불편함이나 발작을 유발할 수 있습니다 [4, 5]. 따라서 WCAG 2.2 지침은 모션을 미묘(subtle)하게 유지하고, 사용자가 애니메이션을 비활성화할 수 있는 설정(예: prefers-reduced-motion)을 제공할 것을 권장하며 이를 통해 포용적인 애니메이션 전략을 세울 수 있습니다 [1, 4, 5].
- **반응형 유체 타이포그래피 (WCAG 1.4.4)**
WCAG 1.4.4 항목은 사용자가 보조 기술 없이도 텍스트를 최대 200%까지 확대할 수 있어야 한다고 규정합니다 [2]. 단순히 뷰포트 단위(vw 등)만 사용하여 폰트 크기를 제어하면 사용자의 브라우저 확대/축소 기능이 무력화되어 접근성 지침을 위반하게 됩니다 [2]. 이를 준수하기 위한 업계 모범 사례로 `clamp()` 함수 등을 활용해 최대 폰트 크기가 최소 폰트 크기의 2.5배를 초과하지 않도록 설정하는 "2.5배 규칙(2.5x Rule)"이 사용됩니다 [6, 7].
- **디자인 토큰과 색상 대비**
디자인 시스템을 구축하고 디자인 토큰을 테스트할 때, 특히 색상 토큰(Color Tokens)은 명도 대비 비율(contrast ratio)이 WCAG 규정을 준수하는지 반드시 검증(Accessibility [[Testing|Testing]])을 거쳐야 합니다 [3, 8].
## 매 핵심
## 🔗 지식 연결 (Graph)
- **Related Topics:** [[반응형 디자인|반응형 디자인]], 애니메이션 (transition / keyframes), 유체 타이포그래피 (Fluid Typography), [[디자인 시스템 개념|디자인 시스템 개념]]
- **Projects/Contexts:** 디자인 토큰([[Design Tokens|Design Tokens]]) 구축 및 테스트, 프론트엔드 실무 접근성 최적화
- **Contradictions/Notes:** 소스 내에서 상충되는 정보는 없습니다. 다만, 반응형 유체 타이포그래피를 구현할 때 단순히 뷰포트 크기에만 의존하면 텍스트 확대 기능이 작동하지 않아 WCAG 1.4.4 지침을 위반하는 위험성이 발생하므로 설계 시 각별한 주의가 필요하다는 점이 강조됩니다 [2, 9].
### 매 4 원칙 (POUR)
- **Perceivable** — 매 정보 / UI 의 매 인지 가능 (text alt, contrast, captions).
- **Operable** — 매 keyboard / time / seizure / navigation 가능.
- **Understandable** — 매 readable / predictable / input assistance.
- **Robust** — 매 보조 기술 호환 (parsing, name/role/value).
---
*Last updated: 2026-04-26*
### 매 적합 수준
- **A** — 매 minimum, 매 미준수 시 일부 사용자 완전 차단.
- **AA** — 매 industry standard, 매 EU EAA / US Section 508 / 한국 KWCAG 의 매 baseline.
- **AAA** — 매 enhanced, 매 모든 콘텐츠에 일률 적용 권장 X.
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
### 매 WCAG 2.2 의 매 새 success criteria (2023.10 W3C Rec)
- 2.4.11 Focus Not Obscured (Minimum) — AA.
- 2.5.7 Dragging Movements — AA.
- 2.5.8 Target Size (Minimum 24×24 CSS px) — AA.
- 3.2.6 Consistent Help — A.
- 3.3.7 Redundant Entry — A.
- 3.3.8 Accessible Authentication (Minimum) — AA.
**언제 이 지식을 쓰는가:**
- *(TODO)*
### 매 응용
1. 매 정부 / 공공 사이트 의무 준수 (KWCAG 2.2 — Korea).
2. 매 EU Accessibility Act (2025.06 발효) — 매 commercial 도 의무.
3. 매 lawsuit 위험 회피 (US ADA Title III).
**언제 쓰면 안 되는가:**
- *(TODO)*
## 💻 패턴
## 🧪 검증 상태 (Validation)
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
## 🧬 중복 검사 (Duplicate Check)
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음
## 🕓 변경 이력 (Changelog)
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|------|-----------|-----------|--------|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
## 💻 코드 패턴 (Code Patterns)
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
```text
# TODO
### Semantic HTML 우선
```html
<!-- Bad -->
<div onclick="submit()" class="btn">Save</div>
<!-- Good -->
<button type="submit">Save</button>
```
## 🤔 의사결정 기준 (Decision Criteria)
### 명도 대비 (1.4.3 Contrast Minimum)
```css
/* normal text ≥ 4.5:1, large text ≥ 3:1 */
:root {
--fg: #1a1a1a; /* on white = 16.1:1 */
--link: #0050d8; /* on white = 7.2:1 */
}
```
**선택 A를 써야 할 때:**
- *(TODO)*
### Focus indicator (2.4.11 + 2.4.13)
```css
:focus-visible {
outline: 2px solid #0050d8;
outline-offset: 2px;
}
button:focus-visible { box-shadow: 0 0 0 3px rgba(0,80,216,.4); }
```
**선택 B를 써야 할 때:**
- *(TODO)*
### Target size 24×24 (2.5.8)
```css
button.icon {
min-width: 24px;
min-height: 24px;
padding: 8px;
}
```
**기본값:**
> *(TODO)*
### Form label (3.3.2 Labels or Instructions)
```html
<label for="email">Email</label>
<input id="email" type="email" required aria-describedby="email-help" />
<small id="email-help">we never share it</small>
```
## ❌ 안티패턴 (Anti-Patterns)
### Live region for async update (4.1.3)
```html
<div role="status" aria-live="polite" id="msg"></div>
<script>
document.getElementById('msg').textContent = '저장 완료';
</script>
```
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
### Skip link (2.4.1 Bypass Blocks)
```html
<a class="skip" href="#main">Skip to main content</a>
<main id="main" tabindex="-1">...</main>
<style>
.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; }
</style>
```
### Auto check in CI
```yaml
# .github/workflows/a11y.yml
- run: npx @axe-core/cli http://localhost:3000 --tags wcag2aa,wcag22aa
- run: npx pa11y-ci
```
## 매 결정 기준
| 상황 | 적합 수준 |
|---|---|
| 공공 / 정부 (KR/EU/US) | AA (의무) |
| Commercial B2C | AA (lawsuit 회피) |
| 의료 / 교육 | AA + 일부 AAA |
| Internal tool | A 최소 |
**기본값**: WCAG 2.2 AA 를 매 baseline 으로, 매 axe-core / Lighthouse / pa11y CI 자동화.
## 🔗 Graph
- 부모: [[Accessibility (A11y)]] · [[Web Standards]]
- 변형: [[KWCAG 2.2]] · [[Section 508]] · [[EN 301 549]]
- 응용: [[ARIA]] · [[Semantic HTML]] · [[Screen Reader]]
- Adjacent: [[axe-core]] · [[Lighthouse]] · [[pa11y]]
## 🤖 LLM 활용
**언제**: 매 success criterion 매핑, 매 ARIA 패턴 보일러플레이트.
**언제 X**: 매 진짜 사용자 검증 — 매 screen reader / 매 disabled user testing 의 대체 불가.
## ❌ 안티패턴
- **Div soup**: 매 button / link / heading 의 매 `<div>` 대체.
- **Color-only signal**: 매 색만으로 매 error 표시 (1.4.1 위반).
- **Auto-play audio**: 매 1.4.2 위반.
- **Click-only**: 매 keyboard handler 누락.
- **Empty alt 잘못**: 매 의미 있는 이미지에 매 `alt=""`.
- **`role="button"` on div**: 매 button 으로 매 semantic 맞추는 게 매 정답.
## 🧪 검증 / 중복
- Verified (W3C WCAG 2.2 Recommendation 2023.10, EU EAA 2025.06).
- 신뢰도 A.
## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — WCAG 2.2 새 SC 6 종 + EU EAA 2025 반영 |