Accessibility
현재 활성 모드의 의무 대비 조합만 렌더합니다. 모드를 전환하면 패널이 즉시 재계산됩니다. FAIL 행은 같은 페이지의 escalate 앵커로 점프합니다.
WCAG AA 대비 패널
현재 모드: base-light| 미리보기 | 조합 | 임계 | 측정값 | 판정 | escalate |
|---|---|---|---|---|---|
본문 텍스트 ↔ 페이지 배경 color-text-default↔color-bg-canvas | ≥ 4.5:1 | — | FAIL | ||
본문 텍스트 ↔ 카드/시트 표면 color-text-default↔color-bg-surface | ≥ 4.5:1 | — | FAIL | ||
보조 텍스트 ↔ 카드 표면 (본문 사용 시) color-text-muted↔color-bg-surface | ≥ 4.5:1 | — | FAIL | ||
accent 위 본문 (≥ 4.5:1 본문 임계) color-text-on-primary↔color-bg-accent | ≥ 4.5:1 | — | FAIL | DS-COLOR-ON-PRIMARY | |
settings primary warning summary 본문 settings warning summary text↔color-bg-accent | ≥ 4.5:1 | — | FAIL | DS-COLOR-ON-PRIMARY | |
accent 위 button 라벨 (16px/600 한정, 3:1) color-text-on-primary↔color-bg-accent | ≥ 3.0:1 | — | FAIL | ||
충전샵 primary CTA 라벨 (FND-001) button-primary-text↔button-primary-bg | ≥ 4.5:1 | — | FAIL | FND-001 | |
충전샵 selected/focus ring ↔ canvas (FND-001) selected/focus ring↔color-bg-canvas | ≥ 3.0:1 | — | FAIL | FND-001 | |
studio error/destructive text ↔ surface color-status-danger↔color-bg-surface | ≥ 4.5:1 | — | FAIL | DS-FND-002 | |
studio locked/info text ↔ surface color-status-info↔color-bg-surface | ≥ 4.5:1 | — | FAIL | DS-FND-002 | |
충전샵 success text ↔ surface (FND-002) color-status-success↔color-bg-surface | ≥ 4.5:1 | — | FAIL | FND-002 | |
충전샵 warning text ↔ surface (FND-002) color-status-warning↔color-bg-surface | ≥ 4.5:1 | — | FAIL | FND-002 | |
settings row/card border ↔ canvas (UI 3:1) color-border-default↔color-bg-canvas | ≥ 3.0:1 | — | FAIL | DS-FND-005 | |
focus ring 후보 (accent ↔ surface, 3:1) color-bg-accent↔color-bg-surface | ≥ 3.0:1 | — | FAIL | DS-FOCUS-ACCENT |
상태 신호 (focus · disabled · error · required)
focus-visible · disabled · error · required 가시 신호와 현재 앱 toast 변형을 한 화면에서 점검합니다. prototype의 accessibility-states 섹션과 1:1 매칭됩니다.
re-verse toast — success/info는 status+polite, danger는 alert+assertive로 의미를 전달합니다.
Settings page 상태 신호
primary warning summary와 destructive row를 분리하고, 위험 작업은 색 외 icon, label, helper, 확인 단계를 함께 둡니다.
계정 삭제 전 확인
경고 요약은 primary tone으로 안내하고, 최종 destructive CTA와 역할을 분리합니다.
Charge shop selected / CTA states
선택 카드와 결제 CTA는 primary 대비 gap을 FND-001로 추적하면서, focus-visible과 선택 의미를 숨기지 않습니다.
선택됨 · ring + aria-checked + accessible name
Charge shop status signals
포인트 변동은 별도 방향 태그 없이 부호와 내역 텍스트로 전달합니다.
point delta
운영 콘솔 상태 계약
locked, disabled, applying, filtered, error 상태는 색상과 모션만으로 전달하지 않고 icon, badge/label, helper, ARIA 계약을 함께 둡니다.
filtered
조건 적용됨
aria-live=polite · 결과 수와 선택 조건을 짧게 알림
필터 색상 chip만으로 상태를 전달하지 않고 결과 수와 조건 문장을 함께 둡니다.
locked
수익 잠금
aria-describedby · 잠금 사유와 해제 조건 연결
disabled CTA 주변에 잠금 사유, 부족 조건, 이동 가능한 다음 행동을 함께 제공합니다.
applying
신청 검토중
aria-busy 상태는 처리 영역에만 한정
검토중 상태는 motion만 쓰지 않고 예상 처리 시점과 현재 단계 텍스트를 노출합니다.
error
조회 실패
role=alert · 복구 action label 제공
오류는 danger 색과 icon뿐 아니라 실패 원인, 유지된 조건, 다시 시도 버튼을 함께 둡니다.
finance
금전 확인
modal focus trap · trigger focus restore
정산/환전은 금액 단위, 계좌 확인, 환전 후 정산 불가 안내를 완료 전 다시 확인합니다.
탐색 결과 Live Region
필터 변경, 태그 추가, 결과 수 갱신, 추가 로딩, 오류 알림은 화면별 상태 문구와 함께 `aria-live` 영역으로 전달합니다. 긴 grid 전체를 다시 읽히게 하지 않고 사용자가 방금 바꾼 조건과 결과 수만 짧게 알립니다.
polite
조건이 갱신되어 18개 월드가 표시됩니다.
assertive
결과를 불러오지 못했어요. 선택 조건은 유지했습니다.
운영 콘솔 Focus Flow
view change · modal/drawer화면 내 local navigation으로 view가 바뀌면 focus 시작점은 현재 view의 main heading으로 이동합니다. 이후 keyboard 순서는 시각 순서와 같은 header, sidebar, main, action, modal/drawer 흐름을 유지합니다.
- 1Header landmark
- 2Sidebar navigation
- 3Main heading after view change
- 4Filter and list controls
- 5Row actions
- 6Modal or drawer surface
- 7Trigger focus restore
금전 동선 체크
FND-004정산/환전 동선은 색상, 모션, button disabled만으로 상태를 전달하지 않습니다. 금액 단위와 계좌 확인, 처리 후 되돌릴 수 없는 조건은 완료 전 단계에서 텍스트로 다시 확인합니다.
- 정산 신청과 포인트 환전은 서로 다른 button label과 modal title을 사용한다.
- 금액 입력은 최소/최대와 100P 단위를 helper text와 validation message로 제공한다.
- 마스킹 계좌, 계산식, 수수료/환전 후 정산 불가 안내를 완료 전 확인한다.
- modal 진입 시 첫 heading 또는 첫 입력으로 focus를 보내고 닫힘 후 trigger로 복귀한다.
키보드 규칙
| 단축키 | 설명 |
|---|---|
| g 1 / g 2 / g 3 / g 4 | 테마 직접 전환 (Base Light / Base Dark / Red Light / Red Dark) |
| [ | 사이드바 접기 |
| ] | 사이드바 펼치기 |
| ? | 단축키 가이드 오버레이 열기 |
| ↑ / ↓ / Home / End | 사이드바 항목 이동 (focus follows) |
| ← / → | Mode switcher 옵션 이동 |
| Tab / Shift+Tab | 포커스 가능한 요소 순회 (focus-visible 노출) |
Reduced Motion
OS에서 prefers-reduced-motion: reduce를 활성화하면 글로벌 CSS가 모든 transition과 animation을 0.001ms로 적용합니다. MotionPreview와 theme 전환 transition 모두 즉시 적용으로 분기되며, listener를 통해 페이지 로드 후 변경에도 실시간으로 반영됩니다.
Escalate 컨텍스트
FND-001
충전샵 primary CTA, selected ring, focus-visible ring에서 확인된 Base Light primary 대비 gap. Foundation 시각화에는 gap을 노출하고, token 보정은 DS-001로 분리한다.
DS-001
primary/on-primary와 focus indicator의 전역 정책 원천 변경 후보. DS-COLOR-ON-PRIMARY, DS-FOCUS-ACCENT 이력과 연결해 별도 base 작업에서 보정 방향을 결정한다.
FND-002
충전샵 구매/포인트 내역에서 확인된 success/warning text 대비 gap과 색 비의존 status 표현. Foundation에는 label, helper, icon, 부호 조합을 예시로 반영한다.
DS-002
status foreground/background pair와 색 외 신호 기준의 전역 정책 원천 변경 후보. 결제/정산/알림 기능에서 반복될 때 별도 base 작업으로 확정한다.
DS-COLOR-MUTED-DARK
dark theme의 color-text-muted가 본문 임계(4.5:1)에 미달. P3 보정 또는 토큰 교체 필요. 본문 직접 사용 금지 정책을 토큰 메타데이터 수준에서 강제할지 sub-prd-05에서 검토.
DS-COLOR-ON-PRIMARY
color-text-on-primary(흰색)이 base accent(mint) 위에서 본문 임계 미달(≈ 3.3:1). 정책은 button 16px/600 한정 사용으로 제한되어 있으나 토큰 가이드에 본문 직접 배치 금지를 명문화할지 검토.
DS-FOCUS-ACCENT
focus ring이 accent surface 위에서 3:1을 확보하는지 정책 부재. red theme은 focus ring과 accent가 동일 hue 충돌 우려. FAIL 시 color-border-focus-on-accent 신설 검토.
DS-FND-002
settings destructive text가 일부 light/red surface에서 본문 4.5:1에 미달. danger text는 icon, helper, confirm step과 함께 쓰고 destructive text token 보강을 변경 요청으로 추적.
DS-FND-005
settings row/card border가 UI 3:1에 미달하는 theme 조합이 있어 section card radius, row border, danger block spacing 기준을 foundation 변경 요청으로 추적.
DS-FND-006
logout/withdrawal 같은 low-emphasis danger entry에는 danger/5 surface와 색 외 신호를 함께 사용한다. 별도 low-emphasis destructive surface token 필요성을 후속 검토.
FND-004
정산/환전처럼 민감한 금전 액션은 입력 단위, 계좌 확인, 계산식, 환전 후 정산 불가 안내, modal focus trap과 trigger focus 복귀 기준을 함께 검증한다.