---
id: wiki-2026-0508-accessibility
title: Accessibility (a11y)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [a11y, Web Accessibility, Inclusive Design, WCAG]
duplicate_of: none
source_trust_level: A
confidence_score: 0.95
verification_status: applied
tags: [accessibility, a11y, wcag, aria, inclusive-design, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: HTML/CSS/TypeScript
  framework: 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
```html
<!-- 매 right -->
<button type="button" onclick="save()">Save</button>

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

### Skip link
```html
<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
```html
<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)
```html
<div role="status" aria-live="polite" aria-atomic="true" id="toast"></div>
<script>
document.getElementById("toast").textContent = "Saved";
</script>
```

### Focus management (modal)
```ts
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
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
```

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

### Automated test (Playwright + axe)
```ts
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 |