티스토리 뷰

🍏/Accessibility

[iOS] Accessibility in SwiftUI

사용자 eungding 2021. 6. 6. 23:11
728x90
반응형

WWDC 2019 - Accessibility in SwiftUI 를 본 기록 ✏️

 

이렇게 4가지에 대해 설명해주십니다. 

 

 

 

[1] Introduction to Accessbility

 

애플의 built-in accessibility feature들입니다. 

 

 

이 중, VoiceOver를 먼저 언급하시고 

 

 

이 목록에서 이번에(2019년) 추가된 두가지 항목을 언급하십니다. 

Voice Control와 Full Keyboard Access 입니다. 

 

( Full Keyboard Access는 iOS에서는 완전 새로운 것이고 Mac에서는 크게 향상되었습니다. )

 

 

 

 

VoiceOver, Full Keyboard Access, Voice Control 과 함께 너의 앱을 써보십시오

 

 

 

[2] Automatic Accessibility in SwiftUI

 

1) SwiftUI는 state를 tracking해서 자동으로 VoiceOver에게 accessibility notification을 보내줍니다. 

 

예를들어 아래와 같은 뷰가 있다고 해봅시다. 

 

 

이렇게 두개의 accessibility elements가 만들어집니다. 

 

 

enabled 체크박스를 토글하면 enabled state가 변하고

SwiftUI는 보이스오버에게 notification을 자동으로 보내주게 됩니다. 

 

 

개발자가 notification 관련 코드를 작성해줄  필요가 없습니다. 

SwiftUI에서는 accessbility notification을 신경써줄 필요가 없습니다. 

 

 

2) SwiftUI에서는 뷰를 커스터마이징해도 accessibility가 잘 지원됩니다. 

 

예를들어 CustomButtonStyle을 만들고 

 

 

버튼에 그 스타일을 적용했습니다. 

 

 

이 버튼에 대해 accessibility element가 잘 만들어지는 것을 볼 수 있습니다. 

 

 

 

3) SwiftUI는 image에 대해 better and intuitive accessibility 를 제공합니다. 

 

SwiftUI는 아래 코드처럼 Image를 만들 때 accessibility information을 바로 제공할 수 있게 해줍니다. 

그래서 나중에 separate code로 이 작업을 해야하는 것을 기억할 필요가 없습니다. 

 

 

그리고 이 체크 이미지는 단지 데코레이션일 뿐이고 

이미지 밑에 '가입 완료' 라는 텍스트가 있다고 해봅시다.

 

그럴 때 Image의 이니셜라이저 중 decorative를 파라미터로 받는 것을 써주면

accessibility system은 이 이미지를 무시합니다.

즉 보이스오버가 Image로 네비게이트하지 않습니다. 

 

 

이 코드에서 만들어지는 Accessibility element를 보면 두개의 텍스트만 있고

이미지는 없는 것을 볼 수 있습니다. 

 

 

이렇게 하면 보이스오버 사용자가 불필요한 요소에 도착하지 않기 때문에

더 쉽게 elements들을 탐색할 수 있습니다.  (more navigable 하다)

 

 

4) SwiftUI의 많은 controls는 label을 가지고 있습니다. 

 

control 중, Picker를 살펴봅시다. 

 

System Voice를 Alex, Fred, Victoria 중 누구로 할 지 선택하게 해주는 피커입니다. 

SwiftUI의 picker는 bult in label이 있습니다.  

 

아래 코드처럼 label을 설정해주면

보이스오버가 사진의 말풍선처럼 읽어줍니다.

 

 

 

 

[3]  SwiftUI Accessibility API 

 

아래 사진에서 말풍선은 보이스오버가 읽어주는 말입니다. 

 

 

이 API를 적용할 때, 항상 이 세가지 질문을 염두해주세요 

 

 

그리고 예제 앱을 통해 3가지를 충족시키는 과정을 보여주십니다. 

 

1) UnderStandable 

 

enough information을 제공해주기 위해

slider의 value 뿐만아니라 어떤 색을 표현하는지도 같이 설정해줬습니다.

아래 코드는 Red Slider 입니다. 

 

 

 

2) Interactable 

 

흰색 네모친 부분을 더블탭하면 background 색깔이 바뀝니다. 

custom Action을 추가해서 interaction을 간결하게 할 수 있도록 해주겠습니다. 

 

 

 

3) Navigable

 

이 화면은 세가지 공간으로 구성되어있습니다. 

 

- Contrast ratio 

- BackgroundColor 조정하는 부분 

- Text Color 조정하는 부분

 

 

이 예제는 isHeader accessibility trait을 쓰기에 적합한 예시입니다.

이 trait은 VoiceOver가 앱의 header elements 사이를 빠르게 이동하는 데 사용됩니다.

세 개의 section에 isHeader trait을 추가해보겠습니다. 

 

 

보이스오버 로터를 이용해서 navigate between heading을 할 수 있고 

 

 

아까 추가한 커스텀 액션도 할 수 있습니다. 

 

 

 

[4] SwiftUI Accessibility Tree

 

# Accessibility Tree

 

아래와 같은 코드에서 뷰트리는 이렇게 그려집니다.

 

 

이 뷰트리는 세개의 accessibiltiy elements를 만듭니다. (민트색 3개)

 

 

이 elements는 hosting view의 children이 됩니다.

 

 

그리고 저 서브트리는 / UIKit 또는 AppKit의 elements와 혼합된 더 큰 Accessibility Tree의 / 일부가 될 수 도 있습니다. 

 

 

# Grouping

 

그리고 이렇게 3개의 accessibility element를 가진 tableview cell이 있다고 해봅시다. 

 

 

only one cell이 있다면 voice over가 이 순서대로 navigate 할 것이고 이것은 괜찮습니다. 

하지만 수백개의 cell이 있다고 해봅시다. 

그럼 tree에는 수많은 elements들이 있습니다.

follow button을 눌렀다면  person 5 의 것을 눌렀는 지 person 6의 것을 눌렀는 지 알기 어렵습니다.

 

 

하지만 우리는 이것을 훨씬 간단하게 만들 수 있습니다. 

accessibility elements의 parent가 되는 뷰를 찾아서 거기에 새로운 element를 만드세요

우리의 예제의 경우 HStack으로 해줄 것입니다. 

 

.combine을 지정하면 children이 제공하는 accessibility가 하나의 element로 merge 됩니다. 

아래 코드의 경우, text가 element label을 제공하고 두개의 버튼은 자동으로 custom actions로 전환됩니다. (🤭🤭)

 

 

이제 보이스오버는 해당 사용자의 이름을 읽고 가능한 actions가 있다는 것을 알려줍니다. 

 

 

이 수정을 통해 우리는 tree의 elements의 수를 크게 줄였습니다. 

 

 

이와 같이 그룹핑을 하면 cell을 하나씩 탐색할 수 있기 때문에 

앱의 navigation을 훨씬 향상 시킬 수 있습니다. 

 

 

# Ordering

 

navigation의 또다른 중요한 것은 ordering입니다.

 default ordering이 예상치못한 경험을 줄 수 있기 때문입니다.

 

저 초록색 color background 부분은 zstack으로 만들어졌습니다.

zstack은 기본적으로 back to front로 ordering 하기 때문에

보이스오버 키고 swipe하면서 navigation할 때, contrast ratio (11.7 :1) -> reset colors button 순서입니다. 

 

 

하지만 시각적으로 button이 contrast ratio 위에 있기 때문에 

우리는 순서를 커스터마이징 하고 싶습니다. 

 

그 때 sortPriority를 사용할 수 있습니다.

모든 elements의 기본 sortPriority는 0이고 우선순위가 높은 것부터 정렬됩니다.

그래서 button의 sort priority를 1로 설정해주면 순서를 바꿀 수 있습니다. 

(reset colors button -> contrast ratio (11.7 :1) 순서가 되도록)

 

 

 

 

 

 

728x90
반응형

'🍏 > Accessibility' 카테고리의 다른 글

[iOS] Accessibility 관련 헷갈리는 것 정리  (0) 2021.07.27
[iOS] Custom Rotor  (0) 2021.06.09
[iOS] Accessibility in SwiftUI  (0) 2021.06.06
[iOS] UIAccessibilityCustomAction  (0) 2021.06.01
[iOS] Large Content Viewer  (0) 2021.05.29
[iOS] Reading Content Accessibility  (0) 2021.05.27
댓글
댓글쓰기 폼