2nd/10_Wiki/Topics/AI_and_ML/Accessibility.md

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-accessibility	Accessibility (a11y)	10_Wiki/Topics	verified	self	a11y Web Accessibility Inclusive Design WCAG	none	A	0.95	applied	accessibility a11y wcag aria inclusive-design frontend		2026-05-10	pending	language framework HTML/CSS/TypeScript ARIA/WCAG 2.2/EAA

Accessibility (a11y)

매 한 줄

"매 user 의 disability spectrum 의 across 의 first-class UX". Accessibility = 매 perceivable / operable / understandable / robust (POUR) 의 product 의 design — 매 screen reader, keyboard-only, low vision, cognitive, motor 의 모두 의 cover. 2026 EU EAA (June 28, 2025 enforcement) 의 매 legal requirement 의 됨 — 매 nice-to-have 의 X.

매 핵심

매 POUR (WCAG 4 principle)

• Perceivable: 매 alt text, caption, contrast.
• Operable: 매 keyboard, focus, target size.
• Understandable: 매 readable, predictable, error-helpful.
• Robust: 매 assistive tech 의 compatible, semantic HTML.

매 WCAG 2.2 (current standard)

• Level A: 매 minimum (alt text, lang attr, no keyboard trap).
• Level AA: 매 industry default (contrast 4.5:1, focus visible, target 24x24).
• Level AAA: 매 specialized context.

매 disability category

• Visual (blind, low vision, color blind) — screen reader, zoom, contrast.
• Auditory — caption, transcript.
• Motor — keyboard, switch, voice control, large target.
• Cognitive — plain language, predictable nav, no time limit.
• Vestibular / seizure — prefers-reduced-motion, no flash >3Hz.

매 응용

1. Public website (legal in EU/US/JP/KR).
2. Government / education (Section 508, EN 301 549).
3. Mobile app (iOS Accessibility, Android TalkBack).
4. Game (Xbox Accessibility Guidelines).
5. AI interface (screen-reader-friendly streaming output).

💻 패턴

Semantic HTML > ARIA

<!-- 매 right -->
<button type="button" onclick="save()">Save</button>

<!-- 매 wrong (div+role) -->
<div role="button" tabindex="0" onclick="save()" onkeydown="...">Save</div>

Skip link

<a href="#main" class="skip-link">Skip to main content</a>
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }
</style>

Accessible form field

<label for="email">Email</label>
<input id="email" type="email" required
       aria-describedby="email-hint email-err"
       aria-invalid="false" />
<p id="email-hint">We never share your email.</p>
<p id="email-err" role="alert"></p>

Live region (announce dynamic update)

<div role="status" aria-live="polite" aria-atomic="true" id="toast"></div>
<script>
document.getElementById("toast").textContent = "Saved";
</script>

Focus management (modal)

function openModal(modal: HTMLElement) {
  const prev = document.activeElement as HTMLElement;
  const focusables = modal.querySelectorAll<HTMLElement>(
    'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  focusables[0]?.focus();
  modal.addEventListener("keydown", (e) => {
    if (e.key === "Escape") { modal.hidden = true; prev?.focus(); }
    if (e.key === "Tab") {
      // 매 trap focus
      const first = focusables[0], last = focusables[focusables.length - 1];
      if (e.shiftKey && document.activeElement === first) { last.focus(); e.preventDefault(); }
      else if (!e.shiftKey && document.activeElement === last) { first.focus(); e.preventDefault(); }
    }
  });
}

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

Color contrast check

import { hex } from "wcag-contrast";
const ratio = hex("#777", "#fff");  // 4.48 — AA fails for normal text (need ≥4.5)

Automated test (Playwright + axe)

import AxeBuilder from "@axe-core/playwright";
test("no a11y violations", async ({ page }) => {
  await page.goto("/");
  const r = await new AxeBuilder({ page }).analyze();
  expect(r.violations).toEqual([]);
});

매 결정 기준

상황	Approach
Native semantic exists	Use it (button, nav, main, h1-h6)
Custom widget required	ARIA Authoring Practices pattern
Icon-only button	aria-label + visible focus ring
Decorative image	alt="" (not omit)
Color 의 only convey info	Add text/icon/pattern
Time-sensitive UI	Offer extend/disable

기본값: WCAG 2.2 Level AA + automated axe in CI + manual screen reader spot-check.

🔗 Graph

• 부모: Frontend Engineering · Inclusive Design
• 변형: Mobile Accessibility · Game Accessibility
• 응용: Design System · Component Library · Form UX
• Adjacent: ARIA · Screen Reader · Keyboard Navigation · Color Theory

🤖 LLM 활용

언제: 매 alt-text generation (vision LLM), 매 plain-language rewrite, 매 ARIA pattern lookup. 언제 X: 매 a11y compliance 의 sole authority — 매 human + screen reader test required.

❌ 안티패턴

• role="button" on div: 매 keyboard handler missing — 매 native <button>.
• Placeholder as label: 매 disappear on focus — 매 explicit <label>.
• tabindex >0: 매 tab order breaks — 매 0 또는 -1 only.
• aria-hidden="true" on focusable: 매 inconsistent — 매 confusing.
• Color-only error: red border without text — color blind 의 invisible.
• Auto-play video w/ sound: 매 WCAG 1.4.2 violation.
• Clicking entire row w/o keyboard equiv: 매 keyboard user 의 inaccessible.
• outline: none w/o replacement: 매 focus invisible — 매 custom ring 의 add.

🧪 검증 / 중복

• Verified (W3C WCAG 2.2 spec 2023-10; ARIA Authoring Practices 1.2; EU EAA Directive 2019/882; axe-core rule set).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — WCAG 2.2 + EAA 2025 + axe automation patterns