[WWDC 2019] Accessibility Inspector - 앱의 Accessibility 구멍을 찾아보자

🤯 Notion에서 옮겼더니 이미지가 하나도 안들어가서 나중에 포스트를 수정하겠습니다. 참고해주세요.

Notion 링크 : https://www.notion.so/Accessibility-Inspector-WWDC-2019-5fc6c78954fd43f3bd674bdff4c00bd9

 

안녕하세요. 애플사이다 입니다.

저번 Typography and Fonts 포스팅에 이어서 Accessibility에 대해 알아보겠습니다.

 

Apple은 앱을 Accessibility 측면에서 분석하여 보완점을 제시하는 Accessibility Inspector 툴을 제공합니다.

Xcode에 내장되어 있어서 바로 사용해볼 수 있습니다. 

 

Accessibility Inspector도 완벽하지 않은 하나의 툴이기 때문에

Inspector가 보완하라고 하는 모든 항목에 대해 대응하기 보다는 참고용으로 사용하면 됩니다.

---

Accessibility Inspector란?

The Accessibility Inspector enables you to identify parts of your app that are not accessible. It provides feedback on how you can make them accessible, as well as simulating voice-over to help you identify what a Voice Over user would experience.

Watch a live-demo of an app being fully debugged in the Accessibility Inspector, and learn how to leverage this powerful tool to make your apps better for everyone.

Accessibility 이슈와 관련한 테스트를 진행하고 싶다면?

• Xcode 상단의 Xcode > Open Developer Tools > Accessibility Inspector
  • Mac에서 저시력 사용자를 위해 추가한 새로운 기능, Hover Text라고 불리며 마우스 커서 아래의 모든 것을 더 크고 선명하게 볼 수 있게 해준다.
  • 앱이 실행 중일 때 inspector를 열고 Run Audit을 하면 된다.
  1. Accessibility Inspector 창의 좌측 - iPhone 설정
  2. 우측의 두번째 Audit 버튼 클릭하여 Audit 탭으로 이동경고 메시지를 클릭하면 관련 UI 요소를 확인 가능하다. 경고 메시지 우측의 Help 버튼을 클릭하면, 해결방법을 알려준다.
     • 경고-1. Image name used in description
       • → Set a human-readable, localized accessibilityLabel
       • Assisting Tech. 중 하나인 Voice Over 기능은 UILabel에 대해 "OO Label"이라고 읽어준다.
     • 경고-2. Potentially inaccessible text
       • sender UIKit 또는 app key controls???를 쓰면 accessibility를 자동으로 적용한다. 하지만 여기서는 CATextLayer를 사용하여 직접 설정해줘야 한다.
     • 경고-3. Contrast Failed (대비)
       • 대비가 너무 낮아서 사용자가 텍스트를 알아보기 어렵다는 내용이다. 권장 대비는 3.0인데, 현재 2.32인 상태이다.
       • Color Contrast Calculator 툴을 사용하면 텍스트 색상 및 배경 색상을 비교해준다. (Xcode 상단 Window > Show Color Contrast Calculator)
  3. Run Audit 클릭
  4. Inspector 탭으로 이동Basic의 Label을 확인하면 image 파일이름으로 지정되어 있다. (ex. camera.on.rectangle)
     → 버튼을 누르면 다음 UI 요소를 읽어준다.
  5. 우측 상단의 스피커 버튼을 누르면 Voice Over simulator를 작동시킬 수 있다. Label 이름을 읽어준다.
  6. Custom 버튼에 대해 알아보자. 상단 가운데의 point inspection 버튼 클릭
  7. 코드 수정
     • 경고-1
       

       //...
       	favoriteButtom.accessibilityLabel = data.favorite ? "Remove Favorite" : "Favorite"
       }
       
       private func setupCameraButton(with data: PBViewModel) {
       	cameraButton.accessibilityLabel = "Take a photo"
       }
       
       private func setupBuyButton(with data: PBViewModel) {
       	cameraButton.accessibilityLabel = "Buy"
       }
       //...​

     • 경고-2
       • assistive tech.에게 해당 UI요소 (Label)가 Accessibility Element임을 알려주면 된다. 그리고 브랜드 이름과 동일하게 설정한다.
         

         customView.isAccessibilityElement = true​

     • 경고-3
       • 텍스트 색상을 바꿔준다.

- Reference

• Apple > WWDC 2019 > Accessibility Inspector

 

🍎 포스트가 도움이 되었다면, 공감🤍 / 구독🍹 / 공유🔗 / 댓글✏️ 로 응원해주세요. 감사합니다.