요즘 서비스를 개발하면서 앱 접근성을 높이기 위해 여러 작업을 하고 있습니다. 오늘은 앱 접근성 중 시각 장애인의 앱 사용을 도와주는 VoiceOver 에 대해 간단히 알아보려고 합니다.
VoiceOver ?
VoiceOver 는 화면을 보지 않아도 기기의 인터페이스를 경험할 수 있게 해주는 스크린 리더입니다. 시력이 좋지 않은 분들은 VoiceOver 에 의존하여 iOS 를 사용하고 있습니다.
VoiceOver 는 설정 앱의 손쉬운 사용 > VoiceOver 에서 활성화할 수 있습니다. (저는 시리를 사용해서 껏다 켰다 하고 있어요.)
VoiceOver 동작
VoiceOver 를 사용해서 화면의 정보를 읽어야하는데, 이를 위한 여러 동작들이 있습니다.
탭 동작
첫번째는 탭 동작입니다. 탭을 하게 되면 아래처럼 한 항목을 선택할 수 있습니다. 선택한 항목에 대한 정보를 읽어주게 됩니다.
어 그러면 VoiceOver 를 사용하지 않을 때의 기존 탭 기능 (활성화 기능) 은 어떻게 사용할 수 있을까요?
바로 더블탭 으로 사용할 수 있습니다. 위의 경우 더블탭을 사용하면 선택한 상품의 상세화면으로 이동할 수 있습니다.
쓸어넘기기 동작
두번째는 쓸어넘기기 동작입니다.오른쪽으로 쓸어 넘기면 다음 항목을, 왼쪽으로 쓸어넘기면 이전 항목을 선택해줍니다.
위의 화면에서 오른쪽으로 쓸어넘길 경우, 아래처럼 다음 상품으로 커서가 이동하게 됩니다.
위/아래로 쓸어넘기기를 통해서는 VoiceOver 로터에 등록된 기능을 사용할 수 있습니다.
VoiceOver 지원을 확인하기 위한 기본 동작들을 알아봤는데, 더 자세한 동작들은 애플 공식 문서를 참고해주세요.
시각장애인 분들이 어떻게 VoiceOver 를 활용하고 계시는지는 이 유튜브 영상을 참고해도 좋을 것 같아요.
VoiceOver 적용하기
이제 VoiceOver 를 적용하기 위한 코드 레벨의 속성들을 알아보려고 합니다.
iOS 에서 기본적으로 제공하는 컴포넌트(뷰)는 기본적인 VoiceOver 를 지원하여 컨텐츠에 대한 사운드 피드백을 주고 있습니다. 하지만 개발하는 앱들은 복잡한 뷰로 구성되어 있기 때문에 여러가지 설정을 통해 VoiceOver 를 적용해야 합니다.
먼저 기본적인 속성들에 대해 알아봅시다.
isAccessibilityElement
접근성 요소인지를 지정하는 속성입니다. 기본값은 false 지만 UIKit Control은 기본 값이 true입니다. 값을 true로 설정하면 해당 요소에 커서를 이동할 수 있습니다. 주로 불필요한 내용을 읽지 않게 하기 위해 사용합니다.
let imageView = UIImageView()
imageView.isAccessibilityElement = false // 읽지 않습니다.accessibilityLabel
요소를 선택할 때 읽어주는 텍스트입니다.
let addButton = UIButton()
button.setImage(UIImage(named: "add", for: .normal)
button.accessibilityLabel = "추가하기"accessibilityHint
요소에 대한 추가 설명이나, 동작시키기 위한 방법을 안내합니다.
let imageView = UIImageView()
imageView.accessibilityLabel = "사진"
imageView.accessibilityHint = "2020년 10월 10일 촬영된 사진"accessibilityValue
값이 달라지는 요소(텍스트 필드 등)에 사용합니다. 슬라이더의 경우 Label 에 다운로드 진행도 Value 에는 “50%” 처럼 설정할 수 있습니다.
let slider = UISlider()
slider.accessibilityLabel = "다운로드 진행도"
slider.accessibilityValue = "50%"accessibilityTraits
접근성 요소의 특징을 지정합니다. 아무런 특징을 가지지 않는 경우 UIAccessibilityTraitNone 으로 설정하고, Button, Image 등 여러 속성들을 사용할 수 있습니다.
let imageView = UIImageView()
imageView.accessibilityTraits = .imagelet button = UIButton()
button.accessibilityTraits = .buttonlet view = UIView()
view.accessibilityTraits = .none
UIAccessibility Notification
앱 내의 변경사항이 있을 때 Notification 을 통해 알려줄 수 있습니다.
let view = UIView()// 레이아웃 변경 알림
UIAccessibility.post(
notification: UIAccessibility.Notification.layoutChanged,
argument: view
)
VoiceOver 를 위해 애플에서 제공하는 많은 기능과 속성이 있습니다. 더 자세한 내용은 애플의 공식 문서를 통해 알아보면 좋을 것 같습니다.
마무리
접근성 지원은 생각만큼 어려운 작업은 아닙니다. VoiceOver 의 경우 기존 뷰 구성을 그대로 사용하면서, 애플에서 제공하는 Accessibility 기본 속성들만 사용해도 적용할 수 있습니다.
Dark Mode, Text Size, VoiceOver 등 모든 접근성을 지원하면 좋겠지만 주어진 시간은 많지 않기에.. 팀 내에서 가능한 부분을 파악하여 작은 부분이라도 접근성 지원을 시작하면 좋을 것 같습니다.
