[ Accessibility ] "선택됨" 안내 메시지 제거하기 (accessibilityTraits)

 

 

 

 

배경

CollectionView 또는 TableView(이하 List 컴포넌트)에서 select 동작 시 해당 아이템의 상태가 “선택”으로 설정되어 동작 및 확인 시 VoiceOver 음성으로 “선택됨”이 출력됩니다.

accessibilityTraits 설정 전 "선택됨"이 출력되는 예시 사진

 

 

 

 

 

 

접근성 문제의 원인

Apple의 의도는 아이템이 선택되었으니깐 해당 아이템의 상태를 출력해 정확한 안내를 해주고자 함이지만, 이러한 안내는 다음과 같은 문제가 발생할 수 있습니다.

 

동작에 대한 혼동:

1. “해제됨”이라는 반대 개념 존재 인식. (예, 약관 동의)
2. 추가 기능 존재 인식 (예, 앨범 - 사진 선택, 사진 모아 보내기)

 

 

 

구현 방법

이 "선택됨"은 accessibilityTraits가 .selected 로 설정되어 출력되는 것으로, accessibilityTraits 설정을 통해 해결할 수 있습니다.

 

 

 

UIAccessibilityTraits

UIAccessibilityTraits: 접근성 요소의 작동 방식을 설명하는 특징

아래와 같이 기본적으로 제공되는 요소들이 있어 해당하는 특성을 찾아 임의로 설정할 수 있습니다:

• button
• link
• image
• header
• select
• …

 

 

List 컴포넌트의 UIAccessibilityTraits

List 컴포넌트의 기본적인 traits는 .none으로, 즉 어떤 특성도 가지고 있지 않습니다. 개발자가 임의로 설정해주면 아래와 같이 설정된 traits에 따라 안내 메시지를 출력합니다.

func cellRegistrationHandler(cell: UICollectionViewListCell, indexPath: IndexPath, item: Detail) {
    
    ...
    if UIAccessibility.isVoiceOverRunning {
        cell.isAccessibilityElement = true
        cell.accessibilityTraits = .button  // ⭐️
    }
}

 

 

“선택됨” 메시지 출력과 관련된 UIAccessibilityTraits

여러 accessibilityTraits 중 “선택됨” 안내 메시지를 출력하는 특성은 .selected 입니다. List 컴포넌트에서는 기본적으로 어떤 traits도 가지지 않지만, 선택 이벤트 발생 시 자동으로 해당 아이템은 .selected traits를 갖게 됩니다.

정확하게 말하자면 accessibilityTraits가 button과 selected를 함께 가진 UIAccessibilityTraits(rawValue: 9) 으로 변경되게 됩니다.

컴포넌트 자체에 구현되어 있기 때문에 선택 이벤트 발생 시 자동으로 accessibilityTraits가 설정되므로 이를 차단하기 위해서는 해당 속성의 재정의가 필요합니다.

 

 

 

 

 

.accessibilityTraits 재정의 방법

아래와 같이 accessibilityTraits를 재정의해줍니다. get에는 원하는 traits을 전달해주고 set은 초기화해주어 컴포넌트에서 자동으로 설정되는 selected 특성을 차단해줍니다.

class ButtonTraitsCollectionListCell: UICollectionViewListCell {
    
    override var accessibilityTraits: UIAccessibilityTraits {
        get { .button }
        set {}
    }
}

 

 

 

구현 결과

accessibilityTraits 설정 후 "선택됨"이 제거된 예시 사진