728x90
300x250
SMALL
항목 | 체크사항 | 참고사항 |
폰트 크기 대응 | 시스템 설정의 글자 크기 변경 시 앱 내 텍스트도 함께 커지나요? | sp단위(Android), Dynamic Type(iOS)사용 |
명도 대비 | 텍스트 vs 배경 색상 대비가 WCAG기준 이상인가요? | 일반 텍스트 4.5:1 이상, 큰 텍스트 3.0:1 이상 |
스크린 리더 대응 | VoiceOver / TalkBack 사용 시 UI 요소가 정확하게 읽히나요? | 버튼, 이미지에 라벨 부여 필수 |
포커스 순서 | 스크린리더 포커스 이동이 논리적 순서로 되어 있나요? | 시각 흐름에 맞게 이동해야 함 |
버튼/터치 크기 | 버튼/터치 가능한 영역이 최소 48X48dp 이상인가요? | 실제 누르기 쉬운지 확인 |
자막/대체 텍스트 | 이미지, 동여상에 적절한 대체 텍스트나 자막이 있나요? | contentDescription, accessibilityLabel 사용 |
색상 외 구분 | 색상만으로 상태/정보를 구분하고 있지는 않나요? | 색+아이콘/텍스트 등으로 중복 표시 |
제스처 대체 방법 | 스와이프 등 복잡한 제스처 외 조작방식이 제공되나요? | 메뉴 접근은 단일 탭으로도 가능해야함 |
알림/피드백 | 토스트/팝업/에러 메시지가 스크린 리더에 읽히나요? | 알림은 announceForAccessibility 등으로 처리 |
실제 구현 예제
1. 텍스트 크기 대응(Android)
<!-- res/values/styles.xml -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="접근성 테스트용 텍스트"
android:textSize="16sp" />
- sp 단위 사용 시, 시스템 글자 크기에 따라 자동 반응
2. 스크린리더용 라벨 추가 (Android)
<ImageView
android:src="@drawable/icon_call"
android:contentDescription="전화 걸기 아이콘"
android:layout_width="48dp"
android:layout_height="48dp"/>
- contentDescription은 시각적 내용이 없는 사용자에게 매우 중요
3. 스크린리더용 라벨 추가(iOS Swift)
let button = UIButton()
button.setTitle("문의하기", for: .normal)
button.accessibilityLabel = "문의하기 버튼"
- 버튼이나 이미 등 시각적 요소에 accessibilityLabel 필수.
4. 접근성 알림 피드백(Android 예제)
val accessibilityManager = getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager
if (accessibilityManager.isEnabled) {
val event = AccessibilityEvent.obtain()
event.eventType = AccessibilityEvent.TYPE_ANNOUNCEMENT
event.text.add("항목이 저장되었습니다.")
accessibilityManager.sendAccessibilityEvent(event)
}
- 알림 메시지도 스크린리더가 읽어줄 수 있게 처리 가능.
728x90
반응형
LIST
'Front-end > 웹접근성' 카테고리의 다른 글
시스템 설정에 따라 애니메이션 제한 하기 iOS, 웹, 안드로이드 (1) | 2025.04.14 |
---|---|
[앱접근성] UI 요소 순서가 논리적인지 파악하기 (0) | 2025.04.13 |
웹접근성 체크, 명도 대비 비율 계산 이렇게 확인하세요! (0) | 2025.04.12 |
모바일 앱 접근성이란? (0) | 2025.04.10 |
웹접근성을 높이는 ARIA 속성 완벽 가이드 (0) | 2025.04.06 |
댓글