[iOS] UIAccessibilityCustomAction

WWDC 2019 - Making Apps More Accessible With Custom Actions 을 본 기록 ✏️

 

[ 인트로 ]

 

VoiceOver는 blind 또는 low vision인 사람들을 위한 built-in screen reader 입니다. 

VoiceOver 사용자는 다양한 방법으로 앱을 탐색할 수 있지만 

가장 유명한 방법은 swiping left and right 하여 이전 항목, 다음 항목으로 이동하는 방법입니다. 

 

사용자가 좋아하는  피넛 버터 종류들을 tracking하는 데 도움을 주는 앱을 예시로 보겠습니다. 

만약 VoiceOver를 사용하지 않고 목록의 두번째 땅콩 버터 아이템의 rating을 올리고 싶다면 어떻게 해야할까요?

우선 너가 선택할 아이템이 목록에서 어디 있는 지 스캔한 후, 해당 셀을 찾아서 rating을 바꾸는 버튼을 누를 것입니다. 

 

 

이게 직관적인 이유는 UI가 rating 버튼과 cell을 논리적으로 그룹화하고 있기 때문입니다. 

만약 아래처럼 레이아웃이 조금 다르게 배치된다면 어떨까요?

아래처럼 rating 버튼이 cell 아래 있을 때, 스크롤할 콘텐츠가 훨씬 더 많아지고 rating 버튼이 어떤 cell에 해당하는 지 훨씬 모호합니다. 

 

 

이것은 VoiceOver로 앱을 사용하는 다른 사람의 경험일 수 도 있습니다 🥶🥶 (찰떡 비유,,)

 

[ 안좋은 사례 ]

 

VoiceOver를 키고 앱을 사용해보겠습니다. 

스와이핑해서 이 셀에 오면 "Patty's, creamy, Noster rated 1 out of 5." 라고 보이스오버가 읽어줍니다. 

 

 

또 오른쪽 스와이핑 하면

"Add to favorites button."

 

 

또 오른쪽 스와이핑 하면

"Decrease rating button"

 

 

또 오른쪽 스와이핑 하면

"Increase rating button."

 

 

한 cell에 세개의 버튼이 포커스가 되네요. 

만약 10번째 cell로 가고 싶다면 버튼을 30번 들을 것이고 이것은 매우 빠르게 진행될 수 있습니다.

게다가 우리가 들은 마지막 땅콩버터가 무엇인지 머릿 속에 간직해야합니다. 그렇지 않으면 버튼을 작동시켰는데 어떤 땅콩버터가 영향을 받을 지 모르기 때문입니다. 

 

[ 좋은 사례 ]

이번에는 조금 다르게 디자인된 앱을 살펴봅시다. 

더이상 VoiceOver에서 액세스할 수 없도록 버튼을 변경하고 cell에 custom action을 추가했습니다. 

그리고 원하는 셀에 도착하면 한 손가락으로 swipe up or down으로 동작을 선택한 다음, double tap으로 동작을 수행할 수 있습니다. 

 

 

이제 swipe left and right 하면 cell 단위로 이동합니다. (버튼에 포커스 안됨) 

 

 

그리고 해당 셀에 오면 "Anna's, chunky, sugar-free, rated 4 out of 5. Actions available" 이라고 

보이스오버가 읽어주고 

 

 

swipe up 하면 "toggle favorite" 

 

 

또 swipe up하면 "increase rating"  이라고 읽어줍니다. 

 

 

increase rating 액션을 선택할 것이니까 이 때 더블 탭해주면 

해당 액션이 잘 됩니다. 

 

 

이것은 아까 보이스오버를 껐을 때 직관적이였던 경험과 비슷하다고 볼 수 있습니다.

 

 

[ Switch Control ] 

 

그리고 SwitchControl 을 사용하는 경우도 이렇게 custom action 쓰는 것이 더 스피드를 높여줍니다. 

오렌지색 스위치는 next item으로 이동을, 흰색 스위치는 item을 선택을 담당합니다. 

 

 

아까처럼 두번째 땅콩버터로 가서 특정 액션을 해주고 싶다고 해봅시다.

우선 오렌지색 버튼을 눌러서 네비게이션을 해주고 

 

 

그리고 흰색 버튼을 눌러서 select 해줍니다.

Switch Control Menu가 나왔습니다. 

Switch Control Menu는 셀과 인터렉션할 수 있는 여러 옵션들을 제공해주는데 

여기 Custom Action이 나옵니다. 

 

 

만약 cutom action을 제공안하면 버튼 선택하는 절차가 더 복잡해지는데 

이건 영상을 참고해주세요! 

 

 

[ 코드 ]

 

위에서 말한 커스텀 액션은 UIAccessiblityCustomAction 이고

view의 accessiblityCustomActions property를 오버라이딩해서 custom action array를 리턴해주는 방식으로

제공하면 됩니다. 

 

 

그리고 셀 안의 버튼에 포커스 안가도록 하기 위해

아래 코드도 같이 해주면 됩니다.