금융 앱의 앱 접근성 인증을 준비하면서 만난 이슈들을 정리했습니다. 웹 접근성 인증은 여러 번 대응해 봤지만, 스크린 리더로 앱을 직접 검수받는 과정에서는 생각하지 못한 문제가 나왔습니다.

1. 날짜 선택 라이브러리(Pikaday)의 자동 닫힘

Pikaday에는 입력창에서 포커스가 벗어나면 달력 팝업을 자동으로 닫는 bound 옵션이 있습니다.

bound : automatically show/hide the datepicker on field focus (default true if field is set)

이 라이브러리는 키보드로 조작하는 웹 접근성에 맞춰져 있어서, 스크린 리더로 팝업 안을 탐색하려고 하면 포커스가 입력창을 벗어나는 순간 팝업이 닫혀 버렸습니다.

라이브러리를 바꾸는 것도 검토했지만 수정 범위가 커서 이번에는 bound: false로 자동 닫힘을 끄고, 팝업을 여닫는 동작을 직접 만들어 해결했습니다. 근본적인 해결은 아니라서, 다음에는 접근성을 고려한 날짜 선택 컴포넌트로 교체하는 것을 고려하고 있습니다.

2. VoiceOver 포커스 위치가 어긋나는 문제

지금까지는 포커스 영역이 요소와 비슷하게만 잡혀도 문제가 없었는데, 이번 검수에서는 iOS VoiceOver의 포커스 위치가 실제 요소와 어긋나는 부분을 지적받았습니다.

확인해 보니 숨김 텍스트를 위해 쓴 text-indent나, 너비·높이가 제대로 잡히지 않은 요소에서 포커스 영역이 깨졌습니다. iOS에서 포커스가 어긋난다면 먼저 해당 요소의 text-indent와 너비·높이가 올바른지 확인해 보는 것을 추천합니다.

3. vue-slick-carousel에서 TalkBack 포커스가 여러 번 잡히는 문제

슬라이드 영역에서 iOS VoiceOver는 포커스가 잡히지 않는데, Android TalkBack에서는 같은 위치에 포커스가 세 번 잡히는 문제가 있었습니다.

div는 tabindex="0"이 있어야 포커스가 이동한다고 알고 있었는데, 포커스를 받는 요소가 예상과 달랐습니다.

div가 원인이라면 네 번 잡혀야 할 것 같아 더 이상했는데, 크롬 개발자 도구의 Accessibility 탭에서 해당 요소가 "포커스 가능(focusable)"으로 표시되는 것을 보고 원인을 확신할 수 있었습니다.

디버깅 중에 slick이 만든 요소의 tabindex를 지우자 TalkBack이 불필요한 요소에 머무르지 않고 버튼에만 포커스가 가는 것을 확인했습니다. 슬라이더가 화면을 그릴 때 tabindex를 정리하거나, 처음부터 버튼으로 포커스가 가도록 구성하는 방향으로 수정했습니다.

정리

• 웹 접근성 기준을 만족하는 라이브러리라도 모바일 스크린 리더에서는 다르게 동작할 수 있습니다.
• VoiceOver와 TalkBack은 같은 화면에서도 포커스를 잡는 방식이 달라서, 두 환경을 모두 직접 확인해야 합니다.
• 크롬 개발자 도구의 Accessibility 탭은 어떤 요소가 포커스를 받는지 확인할 때 큰 도움이 됩니다.