접근성
WCAG 2.1 AA 준수. 협상 불가 — 모든 컴포넌트는 키보드, 스크린리더, 색대비를 검증.
체크리스트
모든 컴포넌트가 다음 항목을 충족하도록 검증됩니다.
- 키보드만으로 모든 동작 가능 (Tab, Shift+Tab, Enter, Space, Esc, 화살표)
- :focus-visible 스타일 명확 (2px 토큰 ring)
- 적절한 ARIA role/state/property
- 스크린리더 라벨 (aria-label / aria-labelledby)
- 색대비 WCAG AA — 본문 4.5:1, UI 3:1 (axe-core 검증)
- prefers-reduced-motion 존중 (모든 애니메이션 즉시화)
- IME(한글 입력) 도중 의도치 않은 submit 방지
- 모바일 터치 타겟 최소 44×44px
주요 키보드 단축키
데모 사이트와 컴포넌트 공통 단축키.
| 키 | 동작 |
|---|---|
| ⌘K | 명령 팔레트 열기 |
| Esc | 오버레이 닫기 |
| Tab | 다음 포커스 |
| ShiftTab | 이전 포커스 |
| Space | 버튼/체크박스 활성 |
| Enter | 버튼 활성 / 옵션 선택 |
| ↑↓ | 메뉴/리스트 항목 이동 |
| ←→ | 탭/슬라이더 이동 |
| HomeEnd | 처음/끝으로 이동 |
한글 IME
Input/Textarea에서 한글 조합 중 Enter는 submit을 트리거하지 않습니다.useComposition 훅으로 자동 처리.
모션 · 애니메이션 (@baneung-pack/effect)
13개 비주얼 이펙트 컴포넌트 모두 모션 줄임 사용자와 보조 기술 사용자에 대한 동일 원칙을 따릅니다.
- `prefers-reduced-motion: reduce` 자동 존중 — 모션 줄임 OS 설정 시 모든 애니메이션이 즉시 정적 상태로 표시됩니다 (등장 효과는 final state로 즉시 보임).
- `aria-label`로 원문 텍스트를 스크린리더에 한 번에 전달 — 글자 단위로 쪼개진 span을 읽지 않습니다.
- 애니메이션을 위해 쪼개진 글자/채널 span은 `aria-hidden="true"` — 보조 기술에 노출되지 않습니다.
- hover 기반 인터랙션(VariableFontHover/SpotlightText/GravityText hover trigger)은 터치 디바이스에서는 자연스럽게 비활성 — 콘텐츠 접근 불가능하게 만들지 않습니다.