Agent skill
check-accessibility
CareMatch 컴포넌트 접근성 검사. 50-70세 고령층을 위한 접근성 가이드라인 준수 여부를 체크합니다. 사용법 - "접근성 검사해줘", "이 컴포넌트 접근성 확인"
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/check-accessibility
SKILL.md
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) 이상 |
Didn't find tool you were looking for?