https://developer.apple.com/documentation/accessibility/supporting_voiceover_in_your_app
"Add VoiceOver support to make your iOS app more accessible to users who are blind or have low vision."
시각적 결함을 갖는 사용자에게 더 접근성 있는 iOS 앱을 만들 수 있도록 보이스오버 지원을 추가합니다.
Overview
보이스오버는 기기 사용에 있어 스크린을 볼 필요 없이도 인터페이스를 경험할 수 있도록 해주는 제스쳐 기반 스크린 reader입니다. 시각 장애를 갖는 사람은 iOS 기기를 사용하는 동안 청각적 피드백을 제공해주는 보이스오버에 의존합니다. 보이스오버는 시각 장애를 갖지 않는 사람들을 배제하지는 않습니다. 예를 들어 움직이는 차량에서 멀미하기에 쉬운 사람 역시 보이스오퍼를 켤 수 있습니다. 보이스오버는 모든 사람들에게 도움을 줄 수 있습니다. 시각 장애를 갖는 사람들은 기기를 사용할 때마다 보이스오버에 의존하게 됩니다.
몇 가지 단계를 거치면 Xcode에서 혹은 코드 작성을 통해 보이스오버에 접근 가능한 앱을 만들 수 있습니다. 접근성을 향상시킴으로써 더 많은 사람이 쉽게 앱을 사용할 수 있도록 할 수 있고, 사용을 더 쉽게 만들어줄 수 있습니다.
Audit Your App with VoiceOver On
앱의 접근성을 테스트하려면 보이스오버를 키고 인터페이스를 따라 탐색해보시기 바랍니다. 보이스오버를 켬으로써 접근성의 토대를 마련할 수 있습니다. 음성을 시작하려면 설정 > 접근성 > 보이스오버를 선택하고, 보이스오버를 활성화해야 합니다. 이후 앱을 열고 보이스오버를 테스트하고자 할 때마다 트정 액션을 사용해보시기 바랍니다. 음성은 보이스오버를 통해 접근 가능한 요소를 드러내고, 그렇지 않은 요소 역시 드러냅니다. 그리고 보이스오버 탐색이 명확하고 논리적인지를 보여줍니다. 어떤 요소가 접근 가능하지 않은지를 계속 추적하고, 더 나은 보이스오버 지원을 추가하기 위한 리스트를 생성하시기 바랍니다.
Navigate with VoiceOver On
보이스오버를 켜서 음성이 들리도록 하려면 보이스오버의 고유한 제스쳐 집합을 사용해 앱을 탐색할 수 있도록 해야 합니다. 테스트를 위해 사용하게 될 다섯 가지 핵심 제스쳐가 있습니다.
- 왼쪽 혹은 오른쪽으로 스와이프해서 다음 혹은 이전 UI 요소를 탐색할 수 있도록 합니다.
- 한 손가락을 사용해 더블 탭 해서 선택된 요소를 활성화합니다.
- 두 손가락을 탭해서 음성을 멈추거나 재개합니다.
- 두 손가락을 사용해 위로 스와이프해서 스크린에 있는 모든 것을 읽도록 합니다.
- 세 손가락으로 세 번의 탭을 해서 스크린 커튼을 키거나 끕니다.
더 많은 정보는 iPhone User Guide에 있는 Learn VoiceOver gestures on iPhone을 살펴보시기 바랍니다.
iPhone User Guide
https://support.apple.com/ko-kr/guide/iphone/iph3e2e2281/14.0/ios/14.0
완전히 보이스오버에 의존하는 누군가의 경험을 재현하려면, 스크린 커튼을 사용해 앱을 테스트하시기 바랍니다. 이름이 암시하는 것처럼 스크린 커튼은 전체 스크린을 까맣게 표시합니다. 이 상태에서 보이스오버 제스쳐를 사용해 탐색할 수 있지만, 스크린에서 요소들은 보이지 않습니다.
Identify Common Accessibility Issues
앱의 음성을 들으려면 모든 요소에 접근할 수 있는지 확인하고 이 요소들의 순서가 의도한 바와 같은지 살펴보시기 바랍니다. 어떤 요소의 보이스오버가 접근 가능한지 혹은 접근 불가능한지를 파악하시기 바랍니다. 또한, 시각적인 것에 의존하는 작업이기 때문에 수행하기 어려운 것에 대해 신경써야 합니다. 예를 들어 앱의 초기 뷰로 되돌아가고자 탐색하는 경우 혹은 다른 앱이나 사용자와 컨텐트를 공유하는 경우, 보이스오버를 접근 가능하도록 만드는 방법에 대해 생각해봐야 합니다. 앱의 음성이 진행되는 동안 찾아야 하는 일반적인 이슈가 있으며, 아래와 같습니다.
- 앱의 요소에 접근성 정보를 추가해야 합니다. 보이스오버는 커스텀 UI 요소를 인식하지 않습니다. 이와 같은 요소에 추가적인 접근성 정보를 추가해야 합니다.
- 보이스오버가 정확한 순서로 탐색할 수 있도록 요소들을 그룹화해야 합니다. 보이스오버는 leading edge에서 trailing edge 방향으로 읽어나갑니다. 만약 보이스오버가 다른 순서로 요소를 읽도록 하고 만들고 싶다면, 앱에서 그에 맞는 탐색을 제공할 수 있도록 그룹화하시기 바랍니다.
- 읽을 수 있도록 보이스오버에 설명 텍스트를 포함시켜야 합니다. 시각적 큐에 의존하는 UI는 보기에 좋지만, 보이스오버 사용자에게는 유용하지 않습니다. 예를 들어 사용자가 확인 버튼을 선택할 때, 보이스오버는 확인 버튼이 회색에서 초록새으로 바뀌는 것을 감지하지 못합니다. 보이스오버는 오직 요소만을 설명하고 현재 상태를 설명하지는 못합니다. 보이스오버가 버튼이 선택된 상태인지에 대해 말할 수 있도록 해줘야 합니다.
어떤 영역에서 향상시켜야 하는 부분이 있는지를 알고 있는 경우 앱에 더 나은 보이스오버를 추가하도록 해야 합니다.
Update Your App’s Accessibility
보이스오버가 접근할 수 없는 요소의 경우 접근성 레이블과 힌트를 향상시키는 것으로부터 출발해야 합니다. accessibilityLabel 속성은 사용자가 요소를 선택할 때 보이스오버가 읽을 수 있는 설명 텍스트를 제공하며, accessibilityHint는 선택된 요소에 대한 추가적인 컨텍스트(혹은 액션)를 제공합니다.
접근성 레이블은 보이스오버가 읽는 텍스트를 제공하기 때문에 매우 중요합니다. 좋은 접근성 레이블은 간결하고 정보를 제공할 수 있는 레이블입니다. UILabel과 accessibilityLabel은 다른 것임을 알아야 합니다. 기본값으로 보이스오버는 표준 UIKit 컨트롤(UILabel, UIButton과 같은)에 대한 텍스트를 읽습니다. 그러나 이와 같은 컨트롤은 레이블 혹은 버튼에 대한 더 자세한 내용을 추가하고자 상응하는 accessibilityLabel 속성을 가질 숭 ㅣㅆ습니다.
컨텍스트에 따라 힌트는 항상 필요하지는 않습니다. 어떤 경우 레이블은 충분한 컨텍스트를 제공합니다. 만약 접근성 레이블에서 너무 많은 것을 말하고 있다면, 해당 텍스트를 힌트로 옮기는 것을 고려해보시기 바랍니다.
사용자가 인터페이스의 의도를 이해하도록 보장하려면, 몇 가지 접근성 레이블을 설정할 필요가 있습니다. Xcode의 아이덴티티 인스펙터에서 접근성 레이블 및 힌트를 설정할 수 있고, 코드 작성을 통해서도 가능합니다.
Add Accessibility Labels and Hints Using the Identity Inspector
표준 UIKit 컨트롤을 사용하는 경우 아이덴티티 인스펙터의 접근성 창을 사용해 접근성 레이블 및 힌트를 할당하시기 바랍니다. 접근성을 향상시키려면 접근성 활성화 옵션을 선턱햄으로써 요소가 접근성을 갖도록 할 수 있습니다. 예를 들어 음액 앱에서 재생 버튼은 아래와 같은 레이블 및 힌트를 가질 것입니다.
Add Accessibility Labels and Hints Programmatically
보이스오버가 자동으로 인식하지 못하는 커스텀 UI 요소로 작업을 하는 상황이나 접근성 레이블의 일부분으로 변수를 사용하는 경우처럼 Xcode에서 접근성 레이블 및 힌트를 추가하는 것이 충분하지 않은 경우가 있습니다. 이 경우 접근성 레이블 혹은 힌트를 코드 작성을 통해 설정해야 합니다. 요소가 접근성 요소임을 구체화하고, 상응하는 접근성 레이블과 힌트를 생성해야 합니다.
보이스오버에 접근 가능한 요소로 만들기 위해 코드 작성을 하는 경우 접근성 요소를 정의하시기 바랍니다.
score.isAccessibilityElement = true요소의 레이블은 앱의 전체 생명주기에서 같은 상태로 머물지 않을 것입니다. 예를 들어 게임에서 접수를 계산하는 카운터의 경우 접수가 변할 때 그에 맞게 레이블을 변경시키길 원할 것입니다. 코드 작성을 통해 접근성 레이블 및 힌트를 설정함으로써 이를 수행하시기 바랍니다.
score.accessibilityLabel = "score: \(currentScore)"
score.accessibilityHint = "Your current score" Simplify Your Accessibility Information
보이스오버는 기기 언어의 방향에 따라 읽어 나갑니다. 예를 들어 보이스오버는 영어를 왼쪽에서 오른쪽으로 읽고, 아랍어와 페르시아어는 오른쪽에서 왼쪽으로 읽습니다. 만약 UI에서 수직으로 레이블을 스택에 쌓는 경우나 테이블에서 텍스트를 표시하고 있다면, 보이스오버는 정확한 순서로 레이블을 읽지 못합니다. 의도한 방향으로 읽을 수 있도록 코드 작성을 통해 접근성 요소를 그룹화할 수 있습니다. 예를 들어 사람의 이름과 이메일 주소를 표시하기 위해 제목 및 값을 스택으로 생성하는 경우이면서 인터페이스에서 해당 순서에 의존하고 있을 때, 보이스오버는 해당 요소들흠 함께 읽지 않습니다. 명확한 컨텍스트를 생성하길 보장할 수 있도록 요소들을 그룹화하시기 바랍니다.
위 이미지에서 보이스오버가 leading edge에서 trailing edge 방향으로 읽는 네 개의 레이블이 왼쪽에 있습니다. 이 경우 왼쪽에서 오른쪽 방향입니다. 모든 요소가 보이스오버에 접근 가능하지 않을지라도 이는 최선의 사용자 경험을 제공하지 못합니다. 오른쪽에서 보이스오버는 명확한 탐색을 가능하게 하는 의도한 방향으로 그룹화된 레이블을 읽습니다. 레이블을 그룹화하려면 UIAccessibilityElement를 생성하고 그룹화하고자 하는 정보를 추가하시기 바랍니다.
var elements = [UIAccessibilityElement]()
let groupedElement = UIAccessibilityElement(accessibilityContainer: self)
groupedElement.accessibilityLabel = "\(nameTitle.text!), \(nameValue.text!)"
groupedElement.accessibilityFrameInContainerSpace = nameTitle.frame.union(nameValue.frame)
elements.append(groupedElement)각 요소에 접근성 레이블을 포함시키는 것과 요소들을 그룹화하는 것은 보이스오버에 의존하는 사람들이 기기를 탐색할 수 있도록 해주고 앱을 사용할 수 있도록 해줍니다.
See Also
Essentials
UIAccessibility
앱의 UI에서 뷰와 컨트롤에 대한 접근성 정보를 제공하는 메소드의 집합입니다.
https://developer.apple.com/documentation/objectivec/nsobject/uiaccessibility
https://velog.io/@panther222128/UIAccessibility
UIAccessibilityContainer
분리되어 있는 요소들로써 하위컴포넌트가 접근 가능한 성격을 갖도록 뷰 서브클래스가 사용하는 메소드의 집합을 제공합니다.
https://developer.apple.com/documentation/objectivec/nsobject/uiaccessibilitycontainer
https://velog.io/@panther222128/UIAccessibilityContainer
