널리

안녕하세요. 접근성팀 서미연입니다.
모바일앱 접근성 디버깅에 대해 알아봅니다.

앱 개발 프그램에서 접근성진단을 할 수 있다는 사실 알고 계신가요?

iOS는 Accessibility Inspector 로

iOS 앱 개발도구인 xcode에는 Accessibility Inspector 툴을 통해 접근성을 수동 검사할 수 있습니다.

어떻게? 이렇게 따라 해 보세요~

⓵ Xcode에서 Accessibility Inspector 툴을 실행합니다. (Xcode > Open Developer Tool > Accessibility Inspector)

⓶ 테스트할 장치를 선택합니다. 저는 진단하고 싶은 앱을 실행 후 아이폰을 노트북에 연결하여 장치 선택을 했어요. 개발 중인 앱을 Simulator로 빌드 하셨다면 Simulator를 선택하여 진단하실 수 있습니다.

⓷ Accessibility Inspector 툴 오른쪽 상단에서 audit 버튼을 선택합니다. Run Audit 버튼을 선택합니다.

⓸ 짜잔~ 진단 결과를 목록으로 보여줍니다~

• 이슈 목록을 선택하거나 눈 버튼을 선택하시면 해당 항목을 보여줍니다. 장치를 보시면 노란색으로 표시가되요~
• 물음표 버튼를 선택하시면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

이 목록에서 주의 깊게 봐야 할 이슈는 바로 description에 대한 이슈입니다. 대체 텍스트 이슈는 접근성 사용자에게 매우 크리티컬한 이슈이면서 해결 방법이 매우 수월한 이슈입니다.

대체 텍스트 어떻게 해결할까요? Xcode의 Identity Inspector 탭의 Accessibility 패널에 대체 텍스트를 넣어주세요.

대체 텍스트 외에도 명도대비, 작은 터치영역등 다양한 접근성 이슈를 체크해주고 있습니다. 이슈를 해결해 보세요~

 

Inspection

각 요소별 접근성 항목을 확인할 수 있고, iOS 스크린리더인 VoiceOver 음성으로 들어볼 수 있습니다.

⓵ 스피커
현재 초점이 위치한 요소의 정보를 VoiceOver 음성으로 들려줍니다.

⓶ 이전 요소 탐색
현재 초점이 위치한 곳에서 이전 요소의 정보를 VoiceOver 음성으로 들려줍니다.

⓷ 자동 탐색
현재 초점이 위치한 곳에서 모든 요소를 자동으로 탐색하며 요소의 정보를 VoiceOver 음성으로 들려줍니다.

⓸ 다음 요소 탐색
현재 초점이 위치한 곳에서 다음 요소의 정보를 VoiceOver 음성으로 들려줍니다.

⓹ 직접 탐색
마우스로 요소를 직접 선택하여 탐색합니다.

⓺ 현재 초점이 위치한 요소의 접근성 항목을 나타냅니다.
항목은 Label(대체 텍스트), Value(값), Traits(유형 정보), Identifier(식별자), Hint(힌트 정보), User Input Labels(사용자 입력 텍스트 정보)입니다.

---

Lable, value, Traits, Hint 에 대한 설명은 다음 아티클에서 확인해주세요~

[모바일 접근성] #대체 텍스트와 #보조기술과의 호환성 알아보기

---

주의: inspection 정보와 음성 정보는 실제 VoiceOver 정보는 일치하지 않을 수도 있다고 합니다. 실제 아이폰 단말  VoiceOver로 테스트하고 싶으시다면 아래 사용 방법을 참고해주세요. 

모바일 스크린리더 기본 사용법 #iOS VoiceOver

---

 

Android는 Lint로

Android 앱 개발도구인 Android Studio 의 Lint를 통해 개발과정에서 접근성을 수동 검사할 수 있습니다.

어떻게? 이렇게 따라 해 보세요~

⓵ Analyze > Inspect Code를 실행합니다.

저는 Android Studio 4.1.1. 버전을 사용하고 있고 Android Studio Electric Eel 2022.1.1 Patch 2버전이시라면 Code 메뉴에 inspect Code가 보이실 거예요~

⓶ Inspection profile에서 더보기 버튼을 실행합니다.

⓷ Inspections 창에서 Lint > Accessibility 항목 중 “Image without contentDescription” 항목과 "Missing accessibility label"을 체크합니다.
Android에서 Accessibility 항목 중 주의 깊게 봐야 할 이슈는 바로 이미지 대체 텍스트와 입력 서식 라벨에 대한 이슈입니다.
Severity를 Error로 체크해 주세요~ 더욱 잘 보여요~ Error 이슈를 해결하기 전까지는 빌드 성공을 할 수 없어요~

진단 범위도 설정할 수 있습니다. 모든 범위에서 하면 더욱 좋겠죠~ In All Sccopes

⓸ OK를 누르고 코드를 확인해 볼까요? contentDescription 이 없는 ImageView 또는 ImageButton에 빨간색으로 표시된 것을 확인할 수가 있습니다. labelFor 또는 hint가 없는 EditText 역시 빨간색으로 표시된 것을 볼 수 있습니다.

자 이슈를 해결해 볼까요?
ImageView 클래스에 contentDescription을 코드에서 추가해 주었습니다. 빨간색으로 표시되었던 코드가 예쁜 노란색 코드로 바뀌었습니다. ^^

EditText 역시 hint 코드를 추가해 주었습니다. 빨간색으로 표시되었던 코드가 예쁜 노란색 코드로 바뀌었습니다. 짠~!

결론

개발 디버깅 시 접근성 디버깅도 함께 이루어진다면 대체 텍스트 접근성 이슈를 스스로 해결할 수 있습니다. 이제 사용자가 대체 텍스트가 없어 해당 기능을 사용하지 못하는 상황은 더 이상 발생하지 않겠죠? 자자~! 개발자 여러분~! 모두 동참해 주세요~
검사기 클릭~! 검사 시작~! 접근성 이슈 해결~! 참~암 쉽죠~!