728x90
300x250
SMALL
체크 항목 | 설명 | 기준 또는 툴 |
텍스트 대비 | 텍스트와 배경의 명도 대비가 충분한가? | WCAG AA 기준(4.5:1이상) |
폰트 크기 | 최소 14px 이상인가? | 기본 텍스트는 16pc 추천 |
UI 크기 | 버튼, 체크박스 등은 최소 44~48px | 모바일 기준 |
포커스 순서 | 시각적 구조와 논리적 포커스 순서가 일치하는가? | 디자인 흐름 확인 |
아이콘 설명 | 의미 있는 아이콘에는 텍스트 라벨 또는 aria-label이 존재하는가? | 예 : 돋보기 아이콘에 "검색" |
상태 구분 | 색상 외의 방법으로 상태를 구분하고 있는가? | 예 : 체크 표시, 밑줄 등 |
모션 | 과도한 모션 없는지, prefers-reduced-motion 대응 고려했는지 | Web: CSS, App: OS설정 |
- Figma 디자인 검토할 때 디자이너가 자체적으로 체크하거나 퍼블리셔가 검수 시 체크 포인트로 사용할 수 있다.
728x90
반응형
LIST
'Front-end > 웹접근성' 카테고리의 다른 글
하이브리등 앱 접근성 체크 퍼블리셔? 네이티브? 프론트? (0) | 2025.04.15 |
---|---|
시스템 설정에 따라 애니메이션 제한 하기 iOS, 웹, 안드로이드 (0) | 2025.04.14 |
[앱접근성] UI 요소 순서가 논리적인지 파악하기 (0) | 2025.04.13 |
웹접근성 체크, 명도 대비 비율 계산 이렇게 확인하세요! (0) | 2025.04.12 |
모바일 앱 접근성 체크리스트 (2025 기준) (0) | 2025.04.11 |
댓글