WCAG 1.4.7: 낮거나 없는 배경 오디오

WCAG 1.4.7은 음성이 포함된 사전 녹음된 오디오 콘텐츠에 대해, 배경음이 전혀 없거나, 배경음을 끌 수 있거나, 배경음을 전경 음성보다 최소 20 dB 더 작게 유지할 것을 요구합니다. 이는 음성과 경쟁하는 오디오를 구분하는 데 어려움을 겪는 청각 손실 및 인지 장애가 있는 사용자를 보호합니다.

이 규칙의 의미

WCAG 성공 기준 1.4.7 — 낮거나 없는 배경 오디오(Low or No Background Audio) — 는 전경에 음성이 포함된 사전 녹음된 오디오 전용 콘텐츠에 적용된다. 이 기준은 노래와 같은 음악 공연 자체인 오디오나, 의도된 음성 요소 없이 주로 환경음(사운드스케이프)으로 구성된 오디오에는 적용되지 않는다. 음성 기반 오디오 콘텐츠가 있을 때, 이 기준은 다음 세 가지 조건 중 최소 하나가 충족될 것을 요구한다.

배경 오디오 없음: 오디오 트랙에 전혀 배경음이 없는 음성만 포함되어 있는 경우 — 목소리 뒤는 완전한 정적(무음)이다.
사용자 제어: 모든 배경 오디오는 전경 음성과는 독립적으로, 사용자가 끌 수 있어야 하며, 이때 음성 콘텐츠에는 영향을 주지 않아야 한다.
20 dB 규칙: 배경음의 음량은 전경 음성보다 최소 20데시벨 낮아야 한다. 20 dB 차이는 대략 배경 오디오가 음성보다 네 배 정도 더 조용한 수준에 해당하며, 대부분의 청자에게 의미 있는 지각적 차이를 제공한다.

위 세 조건 중 어느 하나라도 완전히 충족되면 준수(pass)로 기록된다. 반대로, 전경 음성이 배경 오디오와 경쟁하고, 그 배경 오디오를 끌 수 없으며, 음성 신호에 비해 음량 차이가 20 dB 미만인 경우 실패(fail)가 된다. 단, 1~2초 정도만 재생되는 짧은 알림음과 같은 간헐적인 효과음은 WCAG 명세에 의해 이 요구 사항에서 명시적으로 면제된다는 점에 유의해야 한다.

이 기준은 오디오가 독립적인 오디오 파일로 제공되든, 비디오의 오디오 구성 요소로 제공되든, 팟캐스트 플레이어, HTML5 <audio> 요소, 또는 서드파티 미디어 위젯을 통해 임베드되든 상관없이 오디오 트랙 자체에 적용된다. 요구 사항은 특정 HTML 요소나 ARIA 속성에 관한 것이 아니라 오디오 콘텐츠 자체의 제작 방식에 관한 것이므로, 자동 스캔 도구로는 위반 여부를 신뢰성 있게 감지할 수 없고 실제 오디오 콘텐츠에 대한 수동 검토가 항상 필요하다.

왜 중요한가

세계보건기구(WHO)에 따르면 전 세계적으로 약 15억 명이 어떤 형태로든 청력 손실을 가지고 살아가고 있다. 심지어 중등도 수준의 청력 손실만 있어도, 배경 음악, 주변 소음 또는 다른 오디오 요소가 비슷하거나 경쟁적인 음량으로 섞여 있을 때 화자의 목소리를 분리해 내는 것이 매우 어렵거나 때로는 불가능해진다. 보청기나 인공와우에 의존하는 사용자에게는 배경 오디오 간섭이 음성과 함께 증폭되기 때문에, 명료도가 좋아지기는커녕 극적으로 악화된다.

주의력 결핍 장애, 청각 처리 장애, 외상성 뇌 손상 등을 포함한 인지 장애가 있는 사용자 역시, 오디오 트랙에 경쟁하는 소리가 포함되어 있을 때 상당한 어려움을 겪는다. 청취자에게 측정 가능한 청력 손실이 전혀 없더라도, 뇌는 관련 없는 오디오 신호를 걸러내고 음성 콘텐츠에 집중하는 데 어려움을 겪을 수 있으며, 그 결과 피로, 이해 실패, 또는 콘텐츠로부터의 완전한 배제가 발생할 수 있다.

구체적인 실제 사례를 생각해 보자. 한 터키 정부 기관이 시민들이 사회 복지 혜택을 신청하는 방법을 설명하는 녹음된 오디오 설명 자료를 게시한다. 내레이터의 목소리는 연속적인 배경 음악 트랙 위에 대략 동일한 음량 수준으로 믹싱되어 있다. 중등도 감각신경성 난청이 있는 사용자가 보청기를 사용해 해당 페이지를 방문한다. 보청기는 모든 주파수를 동시에 증폭하기 때문에, 음악은 내레이터의 음성과 직접적으로 경쟁하게 된다. 사용자는 안내 내용을 이해할 수 없고, 복지 신청 마감 기한을 놓친다. 만약 오디오가 배경 음악 없이 녹음되었거나, 배경 트랙을 독립적으로 줄일 수 있는 음량 조절 기능이 제공되었다면, 사용자는 정보에 동등하게 접근할 수 있었을 것이다.

장애 여부와 관계없이, 배경 소음이 최소화된 명료한 오디오는 모든 사용자에게 이해도를 향상시킨다. 소음이 많은 환경에서 모바일 기기로 듣는 사용자, 사용 언어의 비원어민, 이미 오디오 품질이 저하되기 쉬운 저대역폭 환경의 사용자 모두에게 도움이 된다. 또한 간접적인 SEO 이점도 있다. 명료하게 들리는 오디오의 전사는 검색 엔진이 색인할 수 있는 더 높은 품질의 텍스트 콘텐츠를 생성하여, 콘텐츠의 검색 가능성을 향상시킨다.

테스트 방법

페이지의 모든 오디오 콘텐츠 목록 작성. 페이지를 로드하고 모든 <audio> 요소, 오디오 트랙이 있는 모든 <video> 요소, 임베드된 모든 팟캐스트나 미디어 플레이어, 자동 재생되는 모든 배경 오디오를 식별한다. 각 오디오가 사전 녹음된 것인지, 전경 음성을 포함하는지 판단한다. 순수 음악 트랙이거나 음성이 없는 환경음이라면 1.4.7은 적용되지 않는다.
기본 문제를 찾기 위한 자동 스캔 실행. axe DevTools, Lighthouse 또는 Accsible 위젯의 내장 감사 기능을 사용해 페이지를 스캔한다. 이 도구들은 오디오 품질을 평가하지는 않지만, 자막 누락, <audio> 요소에 controls 속성이 없는 경우, 기타 관련 미디어 접근성 문제를 표시할 수 있다. 수동 오디오 평가를 진행하기 전에 표시된 문제를 먼저 해결한다.
해당되는 각 오디오 트랙을 처음부터 끝까지 청취. 페이지의 내장 플레이어를 사용하거나 파일을 다운로드해 미디어 플레이어에서 연다. 전경 음성과 동시에 재생되는 배경 음악, 환경음, 기타 비음성 오디오가 있는지 특히 주의해서 듣는다.
배경 오디오를 독립적으로 끌 수 있는지 평가. 플레이어가 배경 음악만 음성 트랙과 독립적으로 음소거하거나 줄일 수 있는 별도 컨트롤을 제공하는 경우, 이 컨트롤이 Chrome, Firefox, Safari 전반에서 기대한 대로 동작하는지 확인한다. 키보드만으로 탐색해 컨트롤이 접근 가능한지도 테스트한다.
배경 오디오가 존재하고 끌 수 없다면 데시벨 수준 측정. 오디오 파일을 Audacity와 같은 무료 오디오 편집기에 가져온다. 내장된 파형(waveform) 또는 스펙트로그램 보기와 "Analyze > Contrast" 도구(또는 동등한 기능)를 사용해, 음성 구간의 평균 RMS 수준과 배경 오디오 구간의 평균 RMS 수준을 측정한다. 그 차이가 최소 20 dB인지 확인한다. 오디오 분석 소프트웨어에 접근할 수 없다면, 경험 많은 청취자로서의 전문적 판단을 사용한다. 경미한 청력 손실이 있는 일반적인 사람이 배경 오디오를 산만하거나 음성을 가리는 요소로 느낄 것 같다면, 이를 실패 가능성이 높은 사례로 간주한다.
보조 기술로 테스트. NVDA+Firefox, macOS의 Safari+VoiceOver, Chrome+JAWS를 사용해 각 오디오 플레이어로 이동한다. 별도의 배경 오디오 토글을 포함한 모든 컨트롤이 키보드(Tab/Shift+Tab)로 도달 가능하고, 스크린 리더가 올바르게 읽어 주며, Enter 또는 Space로 조작 가능한지 확인한다. 이는 오디오 품질 자체를 직접 테스트하는 것은 아니지만, 추가한 보정 컨트롤이 접근 가능한지 확인하는 절차이다.
결과 문서화. 어떤 오디오 파일이 (배경 오디오 없음, 사용자 제어 가능, 또는 20 dB 차이 확인으로) 준수하는지, 어떤 파일이 실패하는지, 어떤 파일이 면제 대상(2초 미만의 짧은 효과음, 또는 주로 음악이고 음성이 아닌 오디오)인지 기록한다.

수정 방법

시나리오 1: 배경 음악이 너무 크게 믹싱됨 — 잘못된 예

<!-- Audio file contains a narrator speaking over background music
     mixed at roughly equal volume levels. No separate control exists.
     This fails WCAG 1.4.7 because background audio is not 20 dB below speech
     and cannot be turned off independently. -->
<audio controls src='product-explainer.mp3'>
  Your browser does not support the audio element.
</audio>

시나리오 1: 배경 음악이 너무 크게 믹싱됨 — 올바른 예

<!-- The audio file has been re-exported with no background music.
     If background music is desired for branding, produce two separate
     audio tracks: one speech-only and one with music. Offer the
     speech-only version as the default accessible option. -->
<audio controls src='product-explainer-speech-only.mp3'>
  Your browser does not support the audio element.
</audio>
<p>
  <a href='product-explainer-with-music.mp3'>
    Listen to version with background music (may be harder to follow for some users)
  </a>
</p>

시나리오 2: 독립적인 음소거 컨트롤이 있는 배경 오디오 — 잘못된 예

<!-- A custom player claims to offer background audio control,
     but the button is not keyboard-accessible and has no accessible name.
     Sighted mouse users can click it, but screen reader users and
     keyboard-only users cannot reach or operate the control. -->
<div class='player'>
  <audio id='main-audio' src='lecture-with-ambience.mp3'></audio>
  <button onclick='document.getElementById("main-audio").play()'>Play</button>
  <div onclick='toggleBackground()' style='cursor:pointer'>
    <img src='music-icon.png'>
  </div>
</div>

시나리오 2: 독립적인 음소거 컨트롤이 있는 배경 오디오 — 올바른 예

<!-- The background audio toggle is now a proper <button> element with
     an accessible name, keyboard focus, and an aria-pressed state so
     screen readers announce whether background audio is on or off. -->
<div class='player'>
  <audio id='main-audio' src='lecture-with-ambience.mp3'></audio>
  <audio id='bg-audio' src='background-ambience.mp3' loop></audio>
  <button onclick='document.getElementById("main-audio").play()'>Play lecture</button>
  <button
    id='bg-toggle'
    aria-pressed='true'
    onclick='toggleBackground()'
  >
    Background audio: on
  </button>
</div>
<script>
  function toggleBackground() {
    var bg = document.getElementById('bg-audio');
    var btn = document.getElementById('bg-toggle');
    if (bg.paused) {
      bg.play();
      btn.setAttribute('aria-pressed', 'true');
      btn.textContent = 'Background audio: on';
    } else {
      bg.pause();
      btn.setAttribute('aria-pressed', 'false');
      btn.textContent = 'Background audio: off';
    }
  }
</script>

시나리오 3: 페이지 로드 시 자동 재생되는 배경 오디오 — 잘못된 예

<!-- Background audio autoplays when the page loads and there is
     no way to turn it off. If a narrator audio also plays, the
     background audio will compete with it and cannot be suppressed. -->
<audio autoplay loop src='ambient-background.mp3'></audio>
<audio controls src='welcome-message.mp3'></audio>

시나리오 3: 페이지 로드 시 자동 재생되는 배경 오디오 — 올바른 예

<!-- Background audio does not autoplay. A clearly labeled, keyboard-
     accessible button allows the user to opt in if desired. The speech
     audio is presented independently and cleanly without competition. -->
<audio id='bg' loop src='ambient-background.mp3'></audio>
<button onclick='document.getElementById("bg").play()'>
  Play background music (optional)
</button>
<audio controls src='welcome-message.mp3'>
  Your browser does not support the audio element.
</audio>

자주 발생하는 실수

필요한 -20 dB 대신 -10 dB로 배경 음악을 믹싱하는 경우: 제작자는 종종 배경 음악의 음량을 약간 줄이면 충분하다고 생각한다. 그러나 WCAG 표준은 단순히 눈에 띄는 감소가 아니라, 전체 20 dB 차이(대략 네 배 더 조용함)를 요구한다. 주관적 판단에만 의존하지 말고 항상 오디오 분석 도구로 확인해야 한다.
전체 플레이어 음량 조절과 독립적인 배경 오디오 컨트롤을 혼동하는 경우: 음성 및 배경 오디오를 동시에 줄이는 마스터 볼륨 슬라이더는 "사용자가 배경 오디오를 끌 수 있어야 한다"는 조건을 충족하지 못한다. 컨트롤은 전경 음성에는 영향을 주지 않고 배경 오디오만 억제해야 한다.
이 기준이 오디오 전용 파일에만 적용된다고 가정하는 경우: 많은 개발자가 비디오 요소의 오디오 트랙에도 1.4.7이 동일하게 적용된다는 점을 간과한다. 배경 음악이 크게 믹싱된 비디오 설명 자료는 팟캐스트 파일과 마찬가지로 이 기준을 위반한다.
모든 짧은 소리를 면제 대상으로 취급하는 경우: 짧은 효과음에 대한 WCAG 면제는 길이가 2초 이하인 소리에만 적용된다. 몇 초마다 반복되는 짧은 징글이나, 짧은 소리의 배경 루프는 이 면제에 포함되지 않으며 여전히 기준을 준수해야 한다.
키보드 전용 탐색으로 배경 오디오 토글을 테스트하지 않는 경우: 팀은 종종 <div>나 <span>과 같은 비대화형 요소를 사용해 시각적으로 보기 좋은 음소거 버튼을 구현하는데, 이는 Tab 키로 포커스를 이동할 수 없고 Enter나 Space로 조작할 수 없다. 키보드 및 보조 기술 지원이 기본 제공되도록 네이티브 <button> 요소를 사용해야 한다.
배경 오디오 토글 버튼에 aria-pressed 또는 동등한 상태를 추가하는 것을 잊는 경우: 상태 표시가 없으면 스크린 리더 사용자는 버튼을 조작할 수는 있지만, 현재 배경 오디오가 켜져 있는지 꺼져 있는지 알 수 없다. 버튼의 접근 가능한 이름에 현재 상태를 반영하거나 aria-pressed를 통해 항상 상태를 노출해야 한다.
별도 트랙을 제공하지 않고 하나의 믹스된 오디오 파일만 제작하는 경우: 배경 오디오가 창작 의도에 필수적인 경우에도, 팀은 종종 하나의 믹스된 파일만 내보내고 음성 전용 대안을 제공하지 않는다. 별도의 음성 전용 버전을 제공하는 데는 추가 제작 비용이 거의 들지 않으며, 준수 위험을 완전히 제거한다.
1.4.7을 라이브 오디오 스트림에 적용하는 경우: 이 기준은 명시적으로 사전 녹음된 오디오에만 적용된다. 라이브 오디오 방송은 이 특정 규칙의 적용 대상이 아니지만, 1.4.4(텍스트 크기 조정)나 자막 요구 사항과 같은 다른 기준은 관련 콘텐츠에 여전히 적용될 수 있다.
서드파티 임베드 플레이어를 확인하지 않는 경우: 콘텐츠가 외부 플랫폼(팟캐스트 호스팅, 비디오 CDN, 오디오 공유 서비스)에서 임베드될 때, 팀은 종종 준수 책임이 플랫폼에 있다고 가정한다. 그러나 페이지 소유자는 임베드된 미디어를 포함해 자신의 페이지에 있는 모든 콘텐츠의 접근성에 대해 책임을 진다. 서드파티 플레이어가 오디오 품질 요구 사항을 충족하거나 필요한 컨트롤을 제공하는지 반드시 확인해야 한다.
20 dB 요구 사항을 확인할 때 평균 RMS 수준 대신 피크 수준을 측정하는 경우: WCAG 1.4.7의 20 dB 기준은 지각되는 음량을 의미하며, 이는 순간 피크 수준이 아니라 평균 RMS(Root Mean Square) 수준으로 가장 잘 근사할 수 있다. 피크 수준 측정을 사용하면 실제 청취 경험을 반영하지 못하는 과도하게 유리한 결과가 나올 수 있다.

터키 접근성 규정과의 관계

2025년 6월 21일 관보 제32933호에 게재된 터키 대통령령 2025/10은 터키에서 활동하는 광범위한 공공 및 민간 부문 기관에 대해 의무적인 디지털 접근성 요구 사항을 수립한다. 이 대통령령은 WCAG 2.2를 규범적인 기술 표준으로 채택하고, 조직 유형에 따라 구체적인 준수 의무를 정의한다.

대통령령에 따라 의무적으로 준수해야 하는 주체에는 모든 수준의 공공 기관 및 정부 기관, 전자상거래 플랫폼, 은행 및 금융 서비스 제공자, 병원 및 의료 기관, 가입자 200,000명 이상인 통신 사업자, 허가받은 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립 학교가 포함된다. 이들 조직은 최소한 WCAG 2.2 레벨 A 및 레벨 AA를 충족해야 한다.

WCAG 1.4.7 — 낮거나 없는 배경 오디오 — 는 레벨 AAA 기준이다. 이는 2025/10 대통령령의 기본 요구 사항에 따라 해당 기관이 법적으로 충족해야 하는 기준 목록에는 포함되지 않는다는 의미다. 그러나 몇 가지 중요한 고려 사항이 있다. 첫째, AAA 준수를 자발적으로 약속한 조직이나, 병원, 청각 클리닉, 사회 서비스 기관처럼 청각 장애 사용자가 많이 이용하는 기관은 1.4.7을 사실상 필수 기준으로 취급해야 한다. 둘째, 디지털 서비스에 오디오 기반 교육 콘텐츠, 고객 서비스 녹음, e-러닝 모듈, 대중을 대상으로 한 정보 방송 등이 포함된 모든 기관은, 1.4.7을 충족함으로써 청각 장애가 있는 터키 시민에게 해당 서비스의 실제 사용성을 크게 향상시킬 수 있다.

터키에는 상당한 규모의 청각 장애 인구가 있으며, 대통령령은 평등한 디지털 참여를 보장하려는 정부의 의지를 반영한다. AAA 기준은 기술 표준상에서는 지향적(aspirational)인 것으로 위치 지어져 있지만, 특히 터키의 공공 기관은 콘텐츠와 자원이 허용하는 범위 내에서 최소 요구 사항을 넘어서는 것이 권장된다. 1.4.7 준수를 입증하는 것은 조직의 성숙도를 보여 주고, 법적·평판상의 위험을 줄이며, AAA 준수가 계약상 요구될 수 있는 국제 시장을 포함해 터키의 디지털 서비스를 포용적 디자인의 선도 사례로 자리매김하게 한다.