WordPress WCAG 2.2 오디오 접근성 준수 가이드 2026

WordPress 오디오는 최소 네 가지 WCAG 2.2 성공 기준을 충족해야 합니다. 1.4.2 오디오 제어, 2.1.1 키보드, 2.5.8 목표 크기(2.2 신규), 4.1.2 이름, 역할, 값이 해당합니다. 유럽 접근성법(EAA)은 2025년 6월 28일부터 시행되어 EU 고객을 대상으로 하는 모든 사이트에 법적 의무를 부과합니다. WordPress 기본 오디오 플레이어와 대부분의 서드파티 오디오 플러그인은 별도 수정 없이는 이 요건 중 여러 항목을 통과하지 못합니다.

이 가이드는 Mementor에서 WordPress 사이트의 WCAG 2.2 적합성을 감사할 때 사용하는 실무 체크리스트입니다. 오디오를 콘텐츠로 보는 관점과 텍스트 접근성 기능으로 보는 관점, 양쪽을 모두 다룹니다.

2026년에 오디오 접근성이 중요한 이유

2025년에 세 가지 흐름이 동시에 맞물리면서 이 주제가 시급해졌습니다. EAA가 2025년 6월 28일부터 시행됐습니다. WebAIM Million 2025 보고서에 따르면 홈페이지의 96.3%에서 감지 가능한 WCAG 위반이 발견됐습니다. 미국에서는 ADA 소송이 계속 늘었고, 한 해 동안 4,000건 이상의 웹 접근성 사건에 WordPress 사이트가 빈번하게 등장했습니다.

감사에서 반복적으로 보이는 패턴이 있습니다. 사이트 운영자는 테마가 접근성을 처리한다고 가정합니다. 테마는 오디오 플러그인이 제공하는 것을 그대로 씁니다. 오디오 플러그인은 버튼이 너무 작고, 슬라이더가 키보드 사용자를 가두며, 첫 수동 검사에서 대비율이 실패하는 상태로 배포됩니다.

WCAG 2.2 오디오 전체 체크리스트

WordPress 사이트에서 오디오와 직접 관련된 성공 기준은 여덟 가지입니다. 아래 표는 각 기준이 실무에서 무엇을 의미하는지, WordPress 기본 오디오가 어떻게 동작하는지, TTSWP 플레이어가 어떻게 처리하는지를 정리합니다. NEW 표시는 2023년 10월 WCAG 2.2에서 신규 추가된 기준입니다.

W3C 미디어 접근성 사용자 요구사항 페이지가 이 기준들의 공식 출처입니다. 위 여덟 가지는 오디오 플레이어 자체에 적용되는 항목만 추렸습니다. 자막(1.2.2)과 오디오 설명(1.2.3)도 관련이 있지만, 순수 오디오 내레이션이 아닌 영상에 적용됩니다.

텍스트의 미디어 대체 예외 규정

접근성 관련 글의 95%가 놓치는 규정이 있습니다. WCAG는 텍스트의 미디어 대체를 이미 텍스트로 제공된 정보 이상을 포함하지 않는 미디어로 정의합니다. TTS 내레이션이 기존 글을 읽어줄 때, 해당 오디오는 페이지 텍스트의 미디어 대체물입니다. 페이지 텍스트 자체가 스크립트가 됩니다.

즉, 기사의 TTS 오디오 버전에는 별도 스크립트 파일이 필요하지 않습니다. WebAIM이 이를 명확하게 설명합니다. 단, 오디오가 미디어 대체물임을 명확하게 표시해야 합니다. 사용자가 오디오를 건너뛰어도 정보를 놓치지 않는다는 것을 알 수 있어야 합니다. "이 글 듣기"와 같은 제목이나 "이 글의 오디오 버전"으로 레이블된 플레이어가 이 조건을 충족합니다.

오디오에 해설, 의미 있는 배경 음악, 또는 텍스트에 없는 내용이 포함된 경우 이 예외는 적용되지 않습니다. 페이지 콘텐츠의 순수 낭독은 예외에 해당합니다. 오디오 추가가 새로운 스크립트 의무를 만드는지 걱정하는 퍼블리셔 고객을 안내할 때 이 원칙을 자주 활용합니다.

WCAG 2.2에서 오디오에 새로 추가된 내용

오디오 플레이어에 직접 영향을 주는 새로운 Level AA 기준이 세 가지 있습니다.

2.5.8 목표 크기(최소)

모든 인터랙티브 컨트롤은 최소 24×24 CSS 픽셀 크기를 가져야 합니다. 이 기준 때문에 가장 많은 WordPress 오디오 플러그인이 탈락합니다. 서드파티 오디오 플러그인을 사용하는 WordPress 사이트 감사에서 뒤로 가기·앞으로 가기 버튼이 지속적으로 기준에 미달합니다. WCAG 2.2가 24픽셀 규칙을 도입하기 전에 디자이너들이 소형화에 집중했고, 플러그인 유지보수자 대부분이 아직 따라잡지 못했습니다. 기본 테마 스타일이 목표 크기를 더 줄이는 경우도 있습니다.

해결책은 보통 아이콘 크기가 아닌 패딩입니다. 각 면에 4픽셀 패딩을 가진 버튼 안의 16픽셀 SVG 아이콘은 외형 변경 없이 24픽셀 기준을 충족합니다.

2.4.11 포커스 가림 방지

페이지 하단의 고정 오디오 바는 키보드 사용자가 포커스한 내용을 가릴 수 있습니다. 포커스된 링크가 바 뒤에 가려지면 기준을 충족하지 못합니다. 해결책은 바를 닫을 수 있게 만들거나, 포커스 목표 위에 여백을 두거나, 문서에 scroll-padding-bottom을 적용해 포커스된 요소가 항상 보이도록 하는 것입니다.

2.5.7 드래그 동작

드래그로만 작동하는 커스텀 스크럽 바와 볼륨 슬라이더는 이 기준을 충족하지 못합니다. 모든 드래그 인터랙션에는 단일 포인터 대안이 필요합니다. 진행 바의 클릭 위치 지정이 이를 충족합니다. 올바르게 구현된 role="slider"에서의 키보드 방향키 제어도 마찬가지입니다.

실제 감사에서 발견된 WordPress 오디오 주요 문제

고객 사이트에서 반복되는 패턴이 있습니다. 네 가지 문제가 가장 자주 나타납니다.

WordPress 코어 기본 <audio> 블록은 브라우저 기본 플레이어를 렌더링합니다. 브라우저 기본 오디오 컨트롤은 스크린 리더와의 동작이 일관되지 않은 오랜 역사가 있습니다. 재생 위치의 방향키 제어도 Chrome, Firefox, Safari 간에 차이가 있습니다. NVDA나 JAWS 사용자는 타임스탬프는 들을 수 있지만 키보드로 위치를 안정적으로 이동하기 어렵습니다. 해결책은 오디오를 적절한 ARIA 값 속성을 가진 role="slider"를 노출하는 커스텀 플레이어로 감싸는 것입니다.

플러그인 플레이어는 24픽셀 기준에 미달하는 버튼을 제공합니다. WCAG 2.2 규칙 도입 전에 소형화에 집중한 디자인 탓입니다. 테마가 플러그인 스타일을 덮어써서 상황이 더 나빠지기도 하고 나아지기도 합니다.

고정 오디오 바가 포커스된 콘텐츠를 가립니다. 키보드 내비게이션 테스트 없이 고정 푸터 플레이어를 사용하는 모든 사이트에서 이 문제가 발생하는 것을 봤습니다.

파형의 명암 대비는 지속적으로 4.5:1 미만입니다. 디자이너들은 흰 배경에 연한 회색 파형을 선호합니다. 스크린 리더에는 문제가 없지만 저시력 사용자에게는 해당되고, 1.4.3 기준을 통과하지 못합니다.

접근성 기준을 충족하는 오디오 플레이어 구현 체크리스트

1. 플레이어를 role="region"으로 감싸고 설명하는 aria-label을 추가합니다.
2. 재생, 일시정지, 건너뛰기, 음소거에 실제 <button>을 사용합니다. 클릭 핸들러가 있는 <div>는 사용하지 않습니다.
3. 재생 버튼에 aria-pressed를 설정해 토글 상태를 노출합니다.
4. 패딩을 사용해 모든 컨트롤의 최소 목표 크기를 24×24 CSS 픽셀로 맞춥니다.
5. 스크럽바와 볼륨에 role="slider"와 aria-valuemin, aria-valuemax, aria-valuenow를 설정하고 방향키에 응답하게 합니다.
6. 드래그 없는 대안으로 스크럽바의 클릭 위치 지정을 제공합니다.
7. 모든 텍스트 요소와 의미 있는 아이콘의 대비율을 최소 4.5:1로 확인합니다.
8. 포커스 링이 보이고 overflow 규칙에 의해 잘리지 않도록 합니다.
9. 플레이어가 고정형이면 포커스 목표 위에 여백을 두거나 닫을 수 있게 만듭니다.
10. TTS 내레이션 플레이어를 "이 글의 오디오 버전"으로 레이블해 미디어 대체 예외가 명확하게 적용되도록 합니다.

최소한의 접근성 있는 재생 버튼은 다음과 같습니다.

<div role="region" aria-label="Article audio player">
  <button type="button"
          aria-pressed="false"
          aria-label="Play article narration"
          style="min-width:24px;min-height:24px;padding:8px">
    <svg aria-hidden="true" width="16" height="16">...</svg>
  </button>
  <input type="range"
         aria-label="Playback position"
         min="0" max="100" value="0">
</div>

이것이 기본 구조입니다. 버튼을 스타일링하고 커스텀 트랙을 원하면 기본 range 비주얼을 숨겨도 되지만, 기반이 되는 시맨틱은 유지해야 합니다.

TTS 내레이션이 전체 WCAG 적합성에 미치는 영향

오디오는 접근성을 갖춰야 할 콘텐츠이기도 하지만, 그 자체로 접근성 기능입니다. 세계보건기구(WHO) 추산에 따르면 전 세계 인구의 약 16%인 13억 명이 심각한 장애를 가지고 있습니다. 난독증, ADHD, 저시력, 다양한 인지 장애를 가진 사람들은 텍스트와 함께 오디오가 제공될 때 훨씬 편하게 읽습니다.

텍스트 음성 변환 내레이션을 추가하는 것은 감사를 통과하기 전에 사용자에게 실질적인 도움이 되는 몇 안 되는 접근성 투자 중 하나입니다. WordPress에 TTS를 추가하는 데는 Text to Speech – TTSWP 플러그인으로 15분도 걸리지 않습니다. 플레이어는 WCAG 2.1 AA 준수 기본값, 24픽셀 이상의 목표 크기, 키보드 지원, 적절한 ARIA 역할을 갖추고 제공됩니다.

최소 런타임 페이로드는 gzip 압축 기준 약 35~40KB(미압축 151KB)로, JavaScript 플레이어 로직과 공유 CSS를 모두 포함합니다. 공개 기사에서 GTmetrix를 실행한 결과, 성능 93%, 구조 99%, 최대 콘텐츠풀 페인트 1.3초, 총 차단 시간 46밀리초, 누적 레이아웃 이동 0으로 A등급을 받았습니다. 번들은 플레이어가 포함된 페이지에서만 지연 로드되므로 오디오가 없는 정적 페이지에는 오버헤드가 없습니다.

접근성 문서는 접근성 신뢰 페이지에서 확인할 수 있습니다. 내레이션은 ElevenLabs 생성 엔진을 사용하며, 억양이 충분히 자연스러워 로봇 같은 음성에 중간에 포기하지 않고 글을 끝까지 듣는 청취자가 실제로 늘었습니다.

유럽 접근성법(EAA) 실무 적용

EAA는 2025년 6월 28일부터 시행됐습니다. 그 이후 EU 시장에 출시된 신규 디지털 서비스는 즉시 준수해야 합니다. 기존 서비스는 2030년 6월 28일까지 모든 것을 정비할 수 있습니다. 지침은 사업체 소재지와 무관하게 EU 고객을 대상으로 하는 모든 사업체에 적용됩니다.

EAA가 참조하는 기술 표준은 EN 301 549입니다. 현재 조화 버전(V3.2.1, 2021년 8월)은 WCAG 2.1 Level AA를 기반으로 합니다. 2025년 11월에 공개된 초안 V4.1.0은 WCAG 2.2에 맞춰 9, 10, 11조를 업데이트하며, EU 관보 최종 조화는 2026년 중 예정입니다. 해당 업데이트가 EU 관보에 게재되기 전까지는 WCAG 2.1 AA가 법적 최소 기준이지만, 전환이 몇 년이 아닌 몇 달 후이므로 지금 2.2를 목표로 하기를 권장합니다.

과징금은 회원국마다 다릅니다. 독일과 프랑스는 가장 활발한 집행 체계를 갖추고 있으며, 국가 접근성 기관이 민원 조사와 과징금 부과 권한을 가집니다. 시행일로부터 몇 달 안에 노르웨이와 독일 고객들이 최종 사용자로부터 공식 민원을 받은 사례를 봤는데, 주로 오디오와 폼 컴포넌트 관련이었습니다. 과징금 전에 민원이 먼저 오므로, 팀이 준비돼 있으면 보통 30일 내 수정이 가능합니다.

준수 여부 테스트 방법

자동화 도구는 문제의 약 30~40%를 잡아냅니다. 특히 키보드 인터랙션과 동적 상태의 의미 있는 대비는 나머지 문제를 잡기 위해 수동 테스트가 필요합니다.

• NVDA: Windows에서 Chrome, Firefox와 함께 사용. 무료.
• JAWS: Windows에서 기업 고객 기대치 확인용.
• VoiceOver: macOS 및 iOS. 기본 내장.
• TalkBack: Android. 기본 내장.
• axe DevTools: 자동화 스캔용 브라우저 확장.
• Lighthouse: Chrome DevTools에서 빠른 점검용.
• 키보드 단독 테스트: 마우스를 뽑고 모든 플레이어 컨트롤을 조작합니다.

키보드 단독 테스트가 가장 효과적인 단일 테스트입니다. 마우스 없이 플레이어가 작동하면 WCAG 2.2의 대부분은 이미 충족된 것입니다.

자주 묻는 질문

WCAG 2.2는 오디오 팟캐스트에 자막을 요구하나요?

아닙니다. 자막(1.2.2)은 동기화된 오디오가 있는 사전 녹화 영상에 적용됩니다. 팟캐스트 같은 오디오 전용 콘텐츠에는 1.2.1이 적용되며, 스크립트나 상세 요약 같은 텍스트 대체가 필요합니다. 자막과 스크립트는 목적이 다릅니다. 팟캐스트에는 스크립트가, 영상 튜토리얼에는 자막과 시각 전용 정보에 대한 오디오 설명이 모두 필요합니다.

EAA 하에서 오디오 자동 재생은 불법인가요?

불법은 아니지만 제한됩니다. EN 301 549를 통해 EAA가 참조하는 WCAG 1.4.2 오디오 제어는 3초 이상 자동으로 재생되는 오디오에 일시정지, 정지, 또는 독립적인 볼륨 컨트롤을 제공하도록 요구합니다. 해당 컨트롤 없는 자동 재생은 Level A 실패이자 미준수 사항입니다. 대부분의 집행 기관은 이를 경계 사례가 아닌 명백한 위반으로 처리합니다.

기사 오디오 버전이 있으면 스크립트가 필요한가요?

대체로 필요하지 않습니다. 오디오가 기사 텍스트를 직접 낭독하고 새로운 정보를 추가하지 않는 경우, 기사 텍스트 자체가 WCAG "텍스트의 미디어 대체" 정의에 따른 스크립트입니다. 플레이어를 기사의 오디오 버전으로 명확하게 레이블하면 예외가 적용됩니다. 오디오에 해설, 의미 있는 음악, 또는 텍스트에 없는 내용이 포함된 경우에는 별도 스크립트가 필요합니다.

WCAG 2.2에서 오디오 플레이어 버튼의 최소 크기는 얼마인가요?

Level AA의 성공 기준 2.5.8 목표 크기(최소)에 따라 인터랙티브 목표는 최소 24×24 CSS 픽셀이어야 합니다. 목표 크기에 패딩이 포함되므로, 각 면에 4픽셀 패딩을 가진 16픽셀 아이콘은 요건을 충족합니다. 텍스트 내 인라인 링크와 사용자 에이전트가 결정하는 컨트롤에는 예외가 있지만, 독립적인 플레이어 버튼에는 예외가 없어 기준을 반드시 충족해야 합니다.

WCAG 2.2가 WordPress.com 호스팅 사이트에도 적용되나요?

예. WCAG는 호스팅 플랫폼에 무관하게 모든 웹 콘텐츠에 적용됩니다. WordPress.com 사이트도 자체 호스팅 WordPress와 마찬가지로 EAA, ADA, 각국 법률에 따른 동일한 법적 의무를 집니다. 호스팅 방식이 의무를 바꾸지 않습니다. 바뀌는 것은 사이트 운영자가 플레이어 마크업을 얼마나 제어할 수 있느냐입니다. WordPress.com Business 및 Commerce 플랜은 커스텀 플러그인을 허용하지만 하위 플랜은 허용하지 않습니다.

시작하는 방법

사이트에서 글 하나를 선택하고, 오디오 플레이어를 키보드 단독으로 테스트한 뒤 모든 버튼을 24픽셀 기준으로 확인하세요. 이 단일 감사만으로 현재 설정이 WCAG 2.2 적합성에 얼마나 가까운지 파악할 수 있습니다. 그다음은 기존 플레이어를 수정하거나 기본적으로 준수 상태로 제공되는 플레이어로 교체하는 것입니다. 접근성 문서에서 EAA 압박을 받는 사이트에 권장하는 설정을 확인할 수 있습니다.