자동 재생 금지 - by. UXKM

요약 설명

관련 지침 : 자동으로 소리가 재생되지 않아야 한다.
웹 페이지에서 자동으로 소리(동영상, 오디오, 음성, 배경 음악 등 콘텐츠가 제공하는 모든 소리)가 재생됨으로 인해 화면낭독프로그램 사용자가 콘텐츠를 인식하고 사용하는 데 방해받지 않아야 합니다.
단, 3초 미만의 소리는 허용되며, 3초 이상 재생되는 소리는 제어할 수 있는 수단(멈춤, 일시정지, 음량 조절 등)을 함께 제공해야 합니다. 참고로, 플랫폼은 콘텐츠가 제공하는 배경음의 음량을 조절하더라도 화면낭독프로그램의 음량에는 영향을 주지 않아야 합니다.

관련 WCAG 2.2 성공 기준

  • 자동 재생음을 허용하는 경우

    자동으로 재생되는 소리는 3초 내에 멈추거나, 지정된 키(예: esc키)를 누르면 재생을 멈추도록 구현합니다.

  • 사용자 요구에 의한 재생

    콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공하며 사용자가 요구할 경우에만 재생할 수 있도록 제어판(멈춤, 일시 정지, 음량 조절 등)을 제공합니다.

1.4.2 오디오 제어(Audio Control) (Level A) WAI - Understanding Audio Control MDN - HTML audio autoplay 속성

기대효과

접근성 지침에서 자동 재생 금지를 준수하면, 사용자가 원하지 않는 소리나 영상으로 인해 갑작스러운 혼란이나 방해를 겪지 않게 되어 보다 집중도 높은 정보 탐색 환경을 제공할 수 있습니다.
특히 화면 낭독 프로그램(Screen Reader)을 사용하는 사용자는 자동 재생되는 미디어로 인해 낭독이 중단되거나 겹쳐지는 불편을 겪을 수 있는데, 이를 방지함으로써 원활하고 방해 없는 콘텐츠 탐색이 가능해집니다. 나아가 사용자가 자신의 의도에 따라 미디어를 제어할 수 있어 접근성과 만족도가 함께 향상됩니다.

필요성

웹페이지에 접속했을 때 사용자의 동의 없이 자동으로 재생되는 오디오 또는 영상 콘텐츠는 접근성을 심각하게 저해합니다. 특히 스크린 리더 사용자나 집중이 필요한 사용자에게 불쾌감 또는 기능적 장애를 유발할 수 있으므로, 자동 재생은 반드시 비활성화하거나 사용자가 제어할 수 있어야 합니다.

  • 스크린 리더 사용자는 자동 재생으로 인해 음성 출력을 방해받습니다.
  • 사용자의 주의를 강제로 분산시키고 혼란을 야기합니다.
  • 모바일 환경에서는 데이터 낭비 및 배터리 사용이 증가합니다.
  • 사용자 중심의 제어권 보장을 위해 필요합니다.

대상

  • 사용자 유형
  • 이유

  • 시각장애인

    스크린 리더 음성과 충돌

  • 인지장애 사용자

    갑작스러운 소리에 혼란

  • 청각과민 사용자

    감각 과부하 유발 가능

  • 비장애 사용자

    데이터/배터리 낭비, 갑작스러운 소리로 불쾌감

체크리스트

  • 웹 페이지가 로드될 때 자동으로 소리가 나는 콘텐츠가 있는가?
  • 자동 재생이 필요한 경우, 사용자 제어 기능(정지, 음소거 등)이 제공되는가?
  • 사용자 조작(클릭 등)을 통해서만 재생되도록 설정되었는가?

테스트 방법

  • 페이지 접속 시 자동으로 소리 재생 여부를 확인합니다.
  • 사용자 조작 없이 오디오/비디오가 재생되는지 테스트합니다.
  • 보조기술 사용 중 음성 재생 충돌 여부를 확인합니다.

QA 지표

  • 자동 재생 콘텐츠 발생률
  • 사용자 제어 요소 제공 여부
  • 음소거 설정 가능률

개발방법

html 예시

Vue 예시

React 예시

점검 기준

  • <audio> 또는 <video> 태그에서 autoplay 속성이 있는가?
  • autoplay가 있는 경우, 소리가 없는 콘텐츠인가?
  • 사용자 조작으로만 재생이 가능한가?

점검 방법

  • 페이지 최초 접근 시 오디오 출력 유무를 확인합니다.
  • <audio>, <video> 요소에 autoplay 속성이 있는지 확인합니다.
  • 소리 제어 UI가 제공되는지 확인합니다.

준수/미준수 사례

미준수 사례

문제점 :
사용자의 동의 없이 자동으로 오디오가 재생되어 스크린 리더의 음성 출력을 방해할 수 있습니다.
소리를 끄거나 멈출 수단이 없어 통제 불가능한 사용자 경험을 유발합니다.

준수 사례

설명 :
controls 속성을 통해 사용자가 직접 재생 여부를 결정할 수 있습니다.
스크린 리더 사용자에게도 오디오가 방해되지 않으며, 필요한 경우에만 재생하여 접근성을 보장합니다.
의도하지 않은 소리 출력이 없어 다양한 사용자 환경에서 쾌적한 이용이 가능합니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링