Antigravity Agent
158 lines
4.9 KiB
Markdown
158 lines
4.9 KiB
Markdown
---
|
||
id: wiki-2026-0508-web-content-accessibility-guidel
|
||
title: Web Content Accessibility Guidelines (WCAG)
|
||
category: 10_Wiki/Topics
|
||
status: verified
|
||
canonical_id: self
|
||
aliases: [WCAG, WCAG 2.2, WCAG 3.0, A11y guidelines]
|
||
duplicate_of: none
|
||
source_trust_level: A
|
||
confidence_score: 0.9
|
||
verification_status: applied
|
||
tags: [accessibility, a11y, wcag, frontend, standards]
|
||
raw_sources: []
|
||
last_reinforced: 2026-05-10
|
||
github_commit: pending
|
||
tech_stack:
|
||
language: HTML / ARIA
|
||
framework: WCAG 2.2 / 3.0 draft
|
||
---
|
||
|
||
# Web Content Accessibility Guidelines (WCAG)
|
||
|
||
## 매 한 줄
|
||
> **"매 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 단계로 매 점수 기반 모델 도입 진행 중.
|
||
|
||
## 매 핵심
|
||
|
||
### 매 4 원칙 (POUR)
|
||
- **Perceivable** — 매 정보 / UI 의 매 인지 가능 (text alt, contrast, captions).
|
||
- **Operable** — 매 keyboard / time / seizure / navigation 가능.
|
||
- **Understandable** — 매 readable / predictable / input assistance.
|
||
- **Robust** — 매 보조 기술 호환 (parsing, name/role/value).
|
||
|
||
### 매 적합 수준
|
||
- **A** — 매 minimum, 매 미준수 시 일부 사용자 완전 차단.
|
||
- **AA** — 매 industry standard, 매 EU EAA / US Section 508 / 한국 KWCAG 의 매 baseline.
|
||
- **AAA** — 매 enhanced, 매 모든 콘텐츠에 일률 적용 권장 X.
|
||
|
||
### 매 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.
|
||
|
||
### 매 응용
|
||
1. 매 정부 / 공공 사이트 의무 준수 (KWCAG 2.2 — Korea).
|
||
2. 매 EU Accessibility Act (2025.06 발효) — 매 commercial 도 의무.
|
||
3. 매 lawsuit 위험 회피 (US ADA Title III).
|
||
|
||
## 💻 패턴
|
||
|
||
### Semantic HTML 우선
|
||
```html
|
||
<!-- Bad -->
|
||
<div onclick="submit()" class="btn">Save</div>
|
||
<!-- Good -->
|
||
<button type="submit">Save</button>
|
||
```
|
||
|
||
### 명도 대비 (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 */
|
||
}
|
||
```
|
||
|
||
### 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); }
|
||
```
|
||
|
||
### Target size 24×24 (2.5.8)
|
||
```css
|
||
button.icon {
|
||
min-width: 24px;
|
||
min-height: 24px;
|
||
padding: 8px;
|
||
}
|
||
```
|
||
|
||
### 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>
|
||
```
|
||
|
||
### Live region for async update (4.1.3)
|
||
```html
|
||
<div role="status" aria-live="polite" id="msg"></div>
|
||
<script>
|
||
document.getElementById('msg').textContent = '저장 완료';
|
||
</script>
|
||
```
|
||
|
||
### 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 반영 |
|