Files
2nd/10_Wiki/Topics/Frontend/Web Content Accessibility Guidelines (WCAG).md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

4.8 KiB
Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-web-content-accessibility-guidel Web Content Accessibility Guidelines (WCAG) 10_Wiki/Topics verified self
WCAG
WCAG 2.2
WCAG 3.0
A11y guidelines
none A 0.9 applied
accessibility
a11y
wcag
frontend
standards
2026-05-10 pending
language framework
HTML / ARIA 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 우선

<!-- Bad -->
<div onclick="submit()" class="btn">Save</div>
<!-- Good -->
<button type="submit">Save</button>

명도 대비 (1.4.3 Contrast Minimum)

/* 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)

: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)

button.icon {
  min-width: 24px;
  min-height: 24px;
  padding: 8px;
}

Form label (3.3.2 Labels or Instructions)

<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)

<div role="status" aria-live="polite" id="msg"></div>
<script>
document.getElementById('msg').textContent = '저장 완료';
</script>
<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

# .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

🤖 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 반영