Foundations
Accessibility
Groudit UI 는 글로벌 대기업 시스템에서 요구되는 접근성 표준을 충족하도록 설계되었습니다. 모든 컴포넌트는 키보드 only 조작, 스크린리더 호환, WCAG 2.1 AA 색상 대비를 목표로 합니다.
WCAG 2.1 AAWAI-ARIA APGSection 508EAA (EU)
설계 원칙
엔터프라이즈 표준을 따르는 4가지 기본 원칙.
키보드 표준
모든 인터랙티브 컴포넌트는 다음 키보드 규칙을 따릅니다. 컴포넌트별 추가 단축키는 각 컴포넌트 페이지의 Accessibility 섹션을 확인하세요.
| Key | Behavior |
|---|---|
| Tab | 다음 포커스 가능 요소로 이동. |
| Shift + Tab | 이전 포커스 가능 요소로 이동. |
| Enter / Space | 버튼·링크 활성화, 선택. |
| Esc | 다이얼로그·시트·드롭다운·툴팁 닫기. |
| ↑ ↓ | 메뉴·리스트·라디오 그룹 내 이동. |
| ← → | 탭·슬라이더 내 이동. |
| Home / End | 첫 / 마지막 항목으로 이동. |
Focus visibility
모든 포커스 가능 요소는 키보드 포커스 시 명확한 outline 을 표시합니다. --ring CSS 변수가 focus ring 색상을 정의하며, 다크 모드에서는 더 밝은 톤을 사용합니다.
focus-visible 으로 키보드 포커스만 링을 표시 (마우스 클릭 시 ring 표시 안 함). 시각적 노이즈 최소화하면서 키보드 사용자에게 위치 명확.
Reduced motion
사용자가 시스템 설정에서 모션 축소를 활성화하면 @media (prefers-reduced-motion: reduce) 쿼리를 통해 트랜지션이 단순화됩니다. 멀미·전정장애 사용자를 위한 표준 패턴.