[iOS - swift] 3. VoiceOver 접근성 실전 - 접근성 처리 (순서 처리, 이미지 인식, Label, Value, Traits, Hint 사용)

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 접근성 실전 - 접근성 계층관계

UIImageView 접근성

• UIImageView는 접근성 focus가 가면 OS 내부적으로 이미지를 인식하여 설명해주는 기능이 존재
• "띠링-"이라는 소리와 함께 이미지를 인식하여 설명해주는 기능

ex) VoiceOver가 읽어주는 내용: "띠링-" "초록색 바탕의 주황빛 도는 도토리를 들고 있는 다람쥐"

• 이미지를 인식하여 읽어주는 기능은 VoiceOver에서 활성화 할 수 있으며, 디폴트는 비활성화인 상태
  • 활성화 방법: 설정 > 손쉬운 사용 > VoiceOver > VoiceOver 인식 > 이미지 설명 활성화

접근성 처리 - 그룹화 & 순서

• 접근성 처리 할 때 aView, bView, cView 순서대로 동작되도록 하고 싶거나, 특정 뷰만 focus가 동작하도록 할 수 있는 방법은 accessibilityElements를 사용하면 빠르게 처리가 가능

ex) 현재 3개의 뷰에 접성이 켜져있는 상태

• accessibilityElements의 값을 switch, label에만 부여하면 아래처럼 그룹화 및 입력한 배열 요소 순서대로 동작

profileContainerView.accessibilityElements = [switchButton, label]

• 주의사항)
  • elements를 지정할 때, elements를 감싸고 있는 바로 위 뷰에 적용해야 동작
  • 만약 profileContainerView가 아닌, profileContainerView의 아래에 있는 view에 적용하면 처리가 안되므로 주의

// 잘못된 코드
// switchButton, label의 superview인 containerView가 아닌, containerView의 superview에 적용하면 동작 x
view.accessibilityElements = [switchButton, label]

view, profileContainerView 구조 참고)

class ViewController: UIViewController {
    private let profileContainerView = UIView()
    private let thumbnailImageView = UIImageView()
    private let label = UILabel()
    private let switchButton = UISwitch()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupAccessibility()
        
        view.addSubview(profileContainerView)
        profileContainerView.addSubview(thumbnailImageView)
        profileContainerView.addSubview(switchButton)
        profileContainerView.addSubview(label)
        
		...
    }
    
    func setupAccessibility() {
        view.accessibilityElements = [switchButton, label]
    }
}

접근성 Label, Value, Traits, Hint 순서

• 접근성에 관련된 프로퍼티가 여러개 있지만 (accessibility Label, Value, Traits, Hint ...) 이것에 대한 개념(마침표 찍는지 유무, 문장으로 할지 단어로 할지)는 이전 포스팅 글을 참고
  • accessibility Label, Hint, Value를 사용하여 접근성을 부여할 때 순서가 중요
• accessibility Label, Value, Traits, Hint를 설정했을때 VoiceOver가 읽어주는 순서

Label -> Value -> {Traits 속성 이름} -> Hint

• 만약 UIImageView에서 이미지 설명 기능을 활성화 한 경우, 이미지 설명은 마지막에 붙는 형태

Label -> Value -> {Traits 속성 이름} -> Hint -> {이미지 설명}

ex) UILabel에 아래처럼 설정

• 보이스 오버: "라벨 벨류 머리말 힌트 문구입니다."

label.accessibilityLabel = "라벨"
label.accessibilityValue = "벨류"
label.accessibilityTraits = .header // "머리말"
label.accessibilityHint = "힌트 문구입니다."

ex) UIImageView에서 이미지 설명 옵션을 enable한 경우

• 보이스 오버: "라벨 벨류 머리말 힌트 문구입니다. 사람"
• "사람" 부분은 os에서 읽어준 것이고 맨 마지막에 동작

private let thumbnailImageView = {
    let view = UIImageView()
    view.image = UIImage(systemName: "person.crop.circle")
    view.contentMode = .scaleToFill
    view.isAccessibilityElement = true
    return view
}()

...

thumbnailImageView.accessibilityLabel = "라벨"
thumbnailImageView.accessibilityValue = "벨류"
thumbnailImageView.accessibilityTraits = .image
thumbnailImageView.accessibilityHint = "힌트 문구입니다."

* 전체 코드: https://github.com/JK0369/ExAccessibility