미디어 플레이어 접근성

플레이어 재생 화면에서 컨트롤러가 사라진 이후 tab키를 눌러 초점을 이동했을 때, 화면 상에는 초점이 표시되지 않고 있고 스크린리더에서는 각 컨트롤들을 읽고 있다.

문제점 (현재 상황)

동영상 컨트롤러들이 마우스가 재생 영역에 올라갈 경우에 노출, 마우스 움직임이 없거나 재생 영역 밖으로 이동할 경우 숨겨짐.

마우스에는 대응이 되어 있는 반면, 키보드 대응이 되어 있지 않은 상황.

tab키 운용에 따라 각 컨트롤들이 초점을 얻고있지만 화면 상에 노출되지 않거나,

tab키 운용에 따라 컨트롤러에 접근이 불가능

플레이어 재생 화면에서 컨트롤러가 사라진 이후 tab키를 눌러 초점을 이동했을 때, 다시 컨트롤러가 나타나고 각 컨트롤들이 모두 초점을 얻으며 조작 가능하다.

사용자가 재생 버튼을 누른 이후, 더 이상의 키 입력이 없을 때에 컨트롤러가 시각적으로 사라지며, 다시 tab키를 누를 경우 컨트롤러가 다시 나타난다.

설정 패널을 열었지만, 각 설정 항목들에 초점이 들어가지 않기 때문에 설정을 진행할 수 없다. 회차 목록을 열었을 때 또한 마찬가지로 각 회차에 접근이 되지 않는다.

문제점 (현재 상황)

마크업을 확인 해 보면, 각 설정 항목들이 모두 <div> 로 마크업 되어 있는 것을 볼 수 있다.

초점을 받아야 할 컴포넌트가 초점을 받을 수 없도록 마크업 되어 있는 상황

회차 정보 패널을 열었을 때, 각 회차들에 초점 이동이 가능한 것이 확인된다.
각 회차 목록의 마크업을 확인 해 보면, <div>로 마크업 되어 있는 것이 확인 되지만, 각각 tab-index="0" 속성을 사용함으로서 초점을 받을 수 있도록 되어 있는 것을 볼 수 있다.

<div class="episode-list">
	...
	<div class="body">
		<div class="nfp-episode-expander" tabindex="0">
			...
		</div>
		<div class="nfp-episode-expander" tabindex="0">
			...
		</div>
		<div class="nfp-episode-expander" tabindex="0">
			...
		</div>
		...
	</div>
</div>

멀티미디어 컨텐츠에는 자막, 원고 또는 수화를 제공해야하지만, 어떠한 자막이나 원고도 제공되고 있지 않다.

N 사이트의 경우 닫힌 자막을 제공하고 있고,
사용자의 업로드가 주 콘텐츠인 Y 사이트의 경우 자막을 직접 업로드하거나 입력할 수 있게 제공하고 있다.

화면 상에는 플레이어 사용 방법에 대한 가이드 이미지가 있지만, 실제로 해당 이미지에는 대체 텍스트가 존재하지 않기 때문에 스크린리더 사용자는 해당 내용을 알 수 없는 문제가 발생된다.

<div class="operation-guide">
	<div class="dimed"></div>
	<div class="view">
    <img src="images/guide_popup.png"> <!-- 가이드 이미지 -->
  </div>
  <button class="btn-default btn-close">닫기</button>
</div>

미디어 플레이어가 존재하는 페이지에 접근시 바로 재생이 되어, 미디어의 소리가 스크린리더의 음성 출력과 겹쳐서 들리고 있다.

"자동 재생"에 대한 설정 버튼을 제공함으로서 사용자가 직접 플레이어 페이지 접근 시 재생 여부를 선택할 수 있도록 제공 되고 있다.