안녕하세요, 엔비전스입니다.

우리는 여러 모바일 앱을 사용하면서 다양한 동영상 플레이어 컴포넌트를 볼 수 있습니다. 최근에는 시각장애인을 위한 화면 해설 영화들을 여러 일반 플랫폼에서 제공하고 있으며 라이브 커머스 콘텐츠 등 영상 서비스가 점점 더 늘어가고 있습니다. 하지만 동영상 플레이어를 사용할 때 겪게 되는 접근성 문제들이 아직 생각보다 많습니다. 따라서, 이번 아티클에서는 동영상 플레이어 이용 시 어떠한 접근성 문제들이 존재하며 어떤 방법으로 해결할 수 있는지에 대한 기술 가이드를 2부에 걸쳐 다뤄보고자 합니다.

대표적인 접근성 문제들

1. 동영상을 제어할 수 있는 UI가 너무 빠르게 사라진다: 영상을 재생하면 넓은 화면으로 영상을 시청할 수 있도록 정지, 시간 조절 등의 컨트롤들을 일반적으로 몇 초 안에 화면에서 숨깁니다. 그러나 스크린 리더 사용자는 화면 탐색을 하거나 특정 버튼을 찾아가기 위해서 어느 정도 시간이 필요한데 화면을 탐색하는 도중 컨트롤을 모아둔 제어기가 숨어버리므로 조작 자체가 상당히 어렵습니다.
2. 사라진 UI을 다시 보이도록 설정할 수 없다: 동영상 영역을 터치하면 사라진 UI가 잠깐 동안 다시 나타나는데, Talkback으로는 해당 동영상 뷰 자체에 접근이 되지 않아 컨트롤을 다시 보이게 설정할 수 없는 상황이 많습니다.
3. 시간 조절을 할 수 없다: 시간 조절은 SeekBar 컨트롤을 사용하기도 하지만, 커스텀 뷰를 만들어서 터치 이벤트로 구현하기도 합니다. SeekBar 로 구현하고 접근성 적용을 하지 않으면 Talkback에서 초점은 제공되지만 볼륨 키를 이용해서 시간 조절하려고 해도 실제 시간이 변경되지 않으며 커스텀 뷰를 조절하려고 할 때에는 초점을 보낼 수 없는 플레이어를 볼 수 있습니다.
4. 10초 되감기, 10초 뒤로 감기 등의 버튼을 두는 경우 이중 탭을 해도 현재 시간을 읽어주지 않는다: 동영상 플레이어 UI에 따라 구성은 다르겠지만 앞으로, 뒤로 감기 버튼을 두는 경우도 있는데, 이중 탭을 해서 앞뒤로 이동하면 사용자의 액션을 통해 구간이 변경되었으므로 이에 대한 시간 결과값을 음성으로 피드백 해 주어야 하지만 아무런 피드백이 없는 사례를 종종 볼 수 있습니다. 노래나 동영상은 소리가 나기 때문에 재생구간이 바뀌었음을 소리를 통해 인지할 수도 있으나, 소리가 안나는 구간에서는 구분할 수 없는 문제점이 있습니다.

Talkback이 켜진 상태에서 동영상 제어기 표시 유지하기

1번 문제를 해결하기 위해서는 영상 재생 화면에 진입했을 때 Talkback이 켜져 있으면 컨트롤이 숨지 않도록 구현을 하면 됩니다. 우리는 Talkback에 반응하는 레이아웃 만들기 아티클을 통해 AccessibilityManager class 내의 isTouchExplorationEnabled 메서드에 대해 다룬 적이 있습니다. 조건문을 활용하여 동영상 플레이어 화면 액티비티를 실행할 때 isTouchExplorationEnabled true 이면 playerView.setControllerShowTimeoutMs(0); 과 같이 구현하면 되겠습니다.

Talkback 켠 상태로 동영상 제어기 표시, 숨기기 조작 가능하도록 구현하기

비디오 플레이어 영역은 이미지 뷰나 텍스트 뷰 등 접근성 서비스에서 자동으로 초점을 제공하는 뷰를 사용하지 않고 View 와 같은 커스텀 뷰로 구현을 하게 됩니다. 따라서 이러한 뷰를 접근성 서비스에서 초점을 제공하도록 구현하고 Talkback의 기본 제스처인 이중탭을 통해 컨트롤 보이기, 숨기기를 실행할 수 있도록 하면 됩니다.

1. 커스텀 뷰에 초점 제공하기: 해당 뷰에 초점을 주는 것은 굉장히 간단한데. 대체 텍스트, 즉 contentDescription 만 제공하면 됩니다. 동영상 플레이어 화면에 진입했을 때 기본적으로는 동영상 제어기가 표시되고 있으므로 대체 텍스트는 “동영상 제어기 숨기기“가 될 것이며 숨겨졌을 때에는 “동영상 제어기 표시하기”를 대체 텍스트를 넣어 주면 됩니다.
2. onTouchListener 대응: Talkback은 이중 탭할 때 클릭 이벤트를 통해서 해당 요소를 실행합니다. 그런데 onTouchListener로 제어기 표시, 숨기기를 구현하는 경우에는 Talkback에서 초점을 제공하더라도 이중 탭을 통해 실행 자체를 할 수 없습니다. 따라서 손가락을 떼는 동작이 있을 때 performClick 메서드를 실행하도록 구현을 해야 합니다. 물론 그렇게 하려면 performClick을 Override하고, 그 안에 수행될 동작 메서드를 넣어 주어야 합니다(코드 예제 참조).
3. 버튼으로 읽어주게 하기: 당연한 이야기이지만 해당 뷰는 커스텀 뷰이기 때문에 요소 유형이 없습니다. 따라서 onInitializeAccessibilityNodeInfo 메서드를 Override한 다음 AccessibilityNodeInfo className을 Button으로 설정하여 Talkback에서 요소 유형을 읽어줄 수 있도록 하는 것이 좋습니다.

커스텀 시간 이동 슬라이더 접근성 구현

시간 이동 슬라이더 역시 커스텀으로 구현하면 이 부분에 대한 접근성 공수가 가장 많이 들어갑니다. 볼륨 키 조절에 대한 접근성 동작도 구현해야 하고 접근성 이벤트를 만들어 적절한 때에 이동한 시간을 알려 주어야 하기 때문입니다. SeekBar 클래스로 구현했다면 Talkback의 활성 상태를 감지하고 볼륨키를 이용하여 값을 조절할 수 있도록 구현하면 됩니다. 이에 대한 내용은 작년에 진행된 널리 세미나를 참고합니다.

AccessibilityNodeInfo 설정

1. 요소 유형 제공하기: 시간 조절은 슬라이더이므로 Talkback에서 이를 슬라이더로 읽어줄 수 있도록 해야 합니다. AccessibilityNodeInfo setClassName을 SeekBar로 설정하면 됩니다. 그런데 이렇게만 하면 슬라이더라고만 읽어줄 뿐, 볼륨키를 눌러도 어떠한 동작도 하지 않습니다.
2. 값 조절 기능을 볼륨 키 이벤트로 매핑하기: AccessibilityNodeInfo addAction 메서드를 사용하여 Scroll_forward, scroll_backward 액션을 지정합니다. AccessibilityNodeInfo에서 className을 SeekBar로 설정하면 해당 두 액션이 볼륨 키 이벤트에 포함되므로 두 액션 구현을 통해 볼륨 키로 값 조절을 가능하게끔 할 수 있습니다. 마치 iOS에서 adjustable accessibilityTraits 적용하면 accessibilityIncrement, decrement 액션을 사용할 수 있는 것과 같습니다.
3. 값 조절 구현하기: performAccessibilityAction을 Override한 다음 scroll_forward, backward에 대한 동작을 정의합니다.

위의 1, 2, 3번에 대한 코드 예시는 NULI의 포럼 팁을 참고하시면 됩니다.

이렇게 하면 이제 시간 조절 막대에 포커스도 할 수 있고 슬라이더라고 읽어주며 볼륨키를 이용하여 시간 조절도 가능합니다.

지금까지 동영상 플레이어에서 Talkback 활성화 시 동영상 제어기를 자동으로 숨기지 않게 하기, 동영상 제어기 보이기와 숨기기 접근성 적용, 커스텀 시간 조절 슬라이더에서 볼륨 키로 시간 조절 가능하게끔 하기에 대해 살펴보았습니다. 2부에서는 시간 조절 슬라이더의 대체 텍스트 구현을 포함한 여러 이슈들에 대해 다루겠습니다.