Build accessibility in by default
ARIA standards, keyboard patterns, WCAG contrast, and automation limits
접근성은 선택이 아닌 기본값입니다. AI가 만드는 모든 컴포넌트가 접근성을 갖추려면 Primitive → Component → Pattern → Page 계층에 ARIA 패턴을 미리 박아 둬야 합니다.
ARIA 표준화
- Role 매핑 — 컴포넌트마다 적절한 role 자동 적용 (Button→button, Dialog→dialog)
- 상태 속성 —
aria-expanded·aria-selected·aria-checked·aria-disabled·aria-pressed - 관계 속성 —
aria-labelledby·aria-describedby·aria-controls·aria-errormessage - Live Region —
aria-live="polite"(일반 알림) /assertive(긴급 알림)
표준 키보드 패턴
| 키 | 동작 | 적용 예 |
|---|---|---|
| Tab / Shift+Tab | 포커스 이동 / 역방향 | 모든 인터랙티브 요소 |
| Enter / Space | 활성화 | Button, Menu 선택 |
| Escape | 취소 / 닫기 | Dialog, Popup |
| 방향키 (↑↓ / ←→) | 리스트 탐색 / 탭·슬라이더 | Menu, Tabs, Slider |
색상 대비 (WCAG)
| 수준 | 일반 텍스트 | 대형 텍스트 | UI 컴포넌트 |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | - |
접근성 검증 방식
자동 (CI 게이트)
- axe-core 유닛 테스트
- Playwright AxeBuilder (wcag2aa)
- 토큰 대비 검사 스크립트
수동 (여전히 필수)
- NVDA·VoiceOver 스크린리더
- 키보드 전용 조작
- 인지 접근성 판단