파운데이션

접근성

결제는 누구에게나 필요한 기능입니다. WCAG 2.2 AA와 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)을 기본 요구사항으로 삼습니다. 특히 키오스크는 장애인차별금지법에 따른 무인정보단말기 접근성 기준을 따릅니다.

컴포넌트 체크리스트

항목	기준	시스템에서 보장하는 방법
명도 대비	본문 4.5:1, 큰 텍스트 · 아이콘 3:1	--fg-muted 이상만 본문 허용, 대비 검증된 상태 토큰
포커스 표시	키보드 포커스가 항상 보여야 함	모든 컨트롤에 4px focus-ring (--focus-ring)
터치 영역	최소 44×44px	--touch-min · --control-h-* 플랫폼 토큰
색 의존 금지	색 외 수단 병행	StatusBadge는 점 + 텍스트, 오류는 아이콘 + 메시지
스크린 리더	역할 · 이름 · 상태 제공	Radix 기반 ARIA, IconButton은 aria-label 필수 타입
차트	시각 정보의 텍스트 대체	role=img + aria-label 요약, 키보드 방향키 탐색
모션	동작 줄이기 존중	prefers-reduced-motion 시 트랜지션 · 차트 애니메이션 제거
시간 제한	연장 · 해제 가능	결제 · 키오스크 타임아웃 전 30초 연장 안내

입력 포커스

Tab 키로 이 페이지를 이동해 보세요. 마우스 클릭에는 링이 보이지 않고(:focus-visible), 키보드 이동에만 표시됩니다.

요구사항	구현
휠체어 사용자 조작 범위	‘낮은 화면’ 모드 — 모든 조작 요소를 화면 하단 1/2(바닥에서 1,200mm 이하)로 이동
저시력 사용자	‘큰 글씨’ 모드 — 기본 대비 1.3배 확대, 고대비 테마
시각장애인	음성 안내 + 이어폰 단자 + 물리 키패드 탐색 순서 제공
조작 시간	무입력 60초 후 연장 여부 음성 · 화면 안내, 연장 가능
결제 대안	카드 · QR · 직원 호출 버튼 항상 제공