[iOS - swift] 2. VoiceOver 접근성 실전 - 개념 (isAccessibilityElement, accessibilityTraits, accessibilityLabel, accessibilityHint, accessibilityValue, accessibilityElements)

1. VoiceOver 접근성 실전 - 개발 시작하기 (손쉬운 사용 단축키, Accessibility Inspector, 테스트)

2. VoiceOver 접근성 실전 -개념 (isAccessibilityElement, accessibilityTraits, accessibilityLabel, accessibilityHint, accessibilityValue,  accessibilityElements)

3. VoiceOver 접근성 실전 - 접근성 처리 (순서 처리, 이미지 인식, accessibility label, value, traits, hint 사용)

4. VoiceOver 접근성 실전 - UIAccessibility Notification (post, 노티)

5. VoiceOver 접근성 실전 - 접근성 계층관계

접근성 관련 프로퍼티

• 접근성 관련 프로퍼티는 NSObject을 extension했기 때문에 모든 뷰에서 접근이 가능

extension NSObject {

    open var isAccessibilityElement: Bool
    
    open var accessibilityLabel: String?
    @NSCopying open var accessibilityAttributedLabel: NSAttributedString?    
    
    open var accessibilityHint: String?
    @NSCopying open var accessibilityAttributedHint: NSAttributedString?
    
    open var accessibilityValue: String?
    @NSCopying open var accessibilityAttributedValue: NSAttributedString?
    
    open var accessibilityTraits: UIAccessibilityTraits
    open var accessibilityFrame: CGRect
    
    ...
    
    open var accessibilityTextualContext: UIAccessibilityTextualContext?
}

isAccessbilityElement 프로퍼티

• accessibility element인지 지정하는 플래그값 (true면 접근성 포커스 가능)

// UIControl이 아닌 UIView의 isAccessibilityElement 디폴트는 false
profileContainerView.isAccessibilityElement
thumbnailImageView.isAccessibilityElement

// UIControl의 isAccessibilityElement 디폴트는 true
label.isAccessibilityElement
switchButton.isAccessibilityElement

accessibilityTraits 프로퍼티

• UI의 특성을 표시
• UI들의 대부분은 본인의 type (traits)를 가지고 있는 상태
  • ex) UISwitch는 기본적으로 switch라는 Type을 가지고 있는 상태
  • 아래 테스트 방법은 이전 포스팅 글 참고

• Type의 종류
  • .none: 아무 접근성 특성도 없는 상태
  • .button: 버튼 역할
  • .link: 링크 역할
  • .header: 섹션 헤더를 나타내며, 주로 테이블 뷰나 컬렉션 뷰에서 사용
  • .searchField: 검색 필드 역할
  • .image: 이미지 (UIIMageView)
  • .selected: 선택된 상태
  • .playsSound: 소리 재생
  • .keyboardKey: 키보드
  • .staticText: 정적 텍스트 역할
  • .summaryElement: 요약 정보를 제공

accessibilityLabel 프로퍼티

• UI식별하는데 사용되는 목적의 문구
• 단일단어로 구성할 것
  • ex) "추가", "재생", "삭제", "검색", "즐겨찾기"
• 타입 정보는 Traits 요소에 포함되어 있으므로 타입 문자열 넣지 말기
  • Traits의 정보를 보이스 오버가 읽어주는데, Label에도 넣으면 내용이 겹치게 되므로 Traits 요소에 있는 내용과 겹치지 않도록하기
• 대문자로 시작할 것
  • 대문자로 시작하면 보이스 오버가 억양을 자연스럽게 적용 가능
• 마침표로 끝내지 말 것
  • Label은 문장이 아닌 간단한 단어형태임을 알기
• 디폴트 값
  • Label 프로퍼티 역시 디폴트 값이 UI마다 다르게 적용되어있는 상태

// nil
print(profileContainerView.accessibilityLabel)

// "account"
print(thumbnailImageView.accessibilityLabel)

// "iOS 앱 개발 알아가기"
print(label.accessibilityLabel)

// nil
print(switchButton.accessibilityLabel)

• Traits요소에 이미 text가 있기 때문에, 만약 Label에도 text라는 문구를 넣으면 보이스 오버가 읽어줄 때 "텍스트 iOS 앱 개발 알아가기 텍스트"라고 텍스트가 두 번 읽어주기 때문에 Type의 이름을 Label에 넣지 않게 주의할 것

accessibilityHint 프로퍼티

• UI에서 수행한 기대 결과를 설명하는 역할
• 해당 뷰가 accessibilityLabel만으로 기대 결과를 예측할 수 없을때 단어가 아닌 구문으로 설명해주는 개념
  • ex) "이 버튼을 클릭하면 현재 작성중인 글이 삭제됩니다."
• 대문자로 시작하고 마침표로 끝낼 것 (보이스 오버의 적절한 억양을 위함)
• 해당 뷰에관한 기대 결과만 표출하고, 절대 행동에 관한 부가정보를 넣지 말것 (복잡해지는것을 방지)
  • ex) "이 버튼을 탭하고 다음 버튼을 탭하면 공지가 활성화 됩니다."
• 컨트롤의 이름을 Hint에 포함시키지 말 것 (컨트롤의 이름은 Traits에서 설정할 것)

접근성 구현

• Traits, Label, Hint 등을 위에서 알아보았고 이런 프로퍼티를 사용하여 "어떤 문구"를 "어떤 타이밍"에 할지 정할 수 있는데, 이 내용은 다음 포스팅 글 참고

* 참고

https://developer.apple.com/documentation/objectivec/nsobject/1615202-accessibilitytraits

https://developer.apple.com/documentation/uikit/uiaccessibilitytraits

https://zeddios.tistory.com/445

https://developer.apple.com/documentation/objectivec/nsobject/1615181-accessibilitylabel

https://developer.apple.com/documentation/objectivec/nsobject/1615141-isaccessibilityelement