--- name: check-accessibility description: CareMatch 컴포넌트 접근성 검사. 50-70세 고령층을 위한 접근성 가이드라인 준수 여부를 체크합니다. 사용법 - "접근성 검사해줘", "이 컴포넌트 접근성 확인" allowed-tools: Read, Grep, Glob --- # Check Accessibility Skill CareMatch V3의 접근성을 검사합니다. ## 대상 사용자 50-70세 고령층 ## 체크리스트 ### 텍스트 - [ ] 최소 폰트 크기 16px 이상 - [ ] 줄 간격 1.5 이상 - [ ] 텍스트 대비 비율 4.5:1 이상 ### 인터랙션 - [ ] 터치 영역 최소 48x48px - [ ] 클릭 영역 충분한 여백 - [ ] 포커스 표시 명확 ### 시각 - [ ] 아이콘에 레이블 또는 aria-label - [ ] 색상만으로 정보 전달하지 않음 - [ ] 움직이는 요소 제어 가능 ### 구조 - [ ] 의미 있는 HTML 태그 사용 - [ ] 헤딩 계층 구조 올바름 - [ ] 키보드 네비게이션 가능 ## TailwindCSS 클래스 가이드 | 요구사항 | 클래스 | |---------|--------| | 최소 폰트 | `text-base` (16px) 이상 | | 기본 폰트 | `text-lg` (18px) | | 큰 폰트 | `text-xl` (20px) | | 버튼 크기 | `min-h-12 min-w-12` (48px) | | 여백 | `p-4` (16px) 이상 |