표·iframe·영상·오디오를 접근 가능하게 만들기

표·프레임·멀티미디어 가이드 · WCAG 2.1 성공기준 1.3.1 · 1.2.1 · 1.2.2 · 1.2.5 · 1.4.2 · 4.1.2 · 2026년 9월

이미지와 링크, 입력창은 익숙해도 표, 프레임, 영상에서는 접근성이 무너지는 사이트가 많습니다. 이 세 가지는 공통적으로 "눈으로 보면 한눈에 구조가 파악되지만, 구조를 코드에 표시하지 않으면 소리로는 전혀 전달되지 않는" 콘텐츠이기 때문입니다. 이 글은 데이터 표, 임베드된 프레임, 영상·오디오를 각각 어떻게 표시하고 대체 수단을 제공하는지 정리합니다.

1. 데이터 표: 머리 셀이 없으면 값만 읽힌다

화면낭독기는 표를 읽을 때 셀 하나를 읽으며 그 셀의 행 머리와 열 머리를 함께 알려 줍니다. "M 사이즈, 재고, 3"처럼 말입니다. 이 정보의 출처가 <th>입니다. 모든 칸이 <td>이면 사용자는 "M, 3"이라는 숫자만 듣게 되고 3이 재고인지 가격인지 알 수 없습니다.

<!-- 나쁨: 머리 셀 없음 -->
<table>
  <tr><td>사이즈</td><td>재고</td></tr>
  <tr><td>M</td><td>3</td></tr>
</table>

<!-- 좋음 -->
<table>
  <caption>아우터 사이즈별 재고</caption>
  <thead>
    <tr><th scope="col">사이즈</th><th scope="col">재고</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">M</th><td>3</td></tr>
  </tbody>
</table>

<caption>은 표의 제목입니다. 표가 무엇에 대한 것인지 진입 전에 알려 줍니다.
scope="col"(열 머리), scope="row"(행 머리)는 단순한 표에서 관계를 명시합니다.
이 도구는 th가 하나도 없는 표를 table-no-header로 알려 줍니다.

복잡한 표

머리 셀이 두 겹이거나 셀이 병합(colspan/rowspan)된 표는 scope만으로 관계가 모호해질 수 있습니다. 이때는 각 머리 셀에 id를 주고 데이터 셀에 headers="id1 id2"로 명시하는 방법이 있습니다. 다만 유지보수가 어려우므로 가능하면 표를 단순한 여러 개로 쪼개는 것이 최선입니다.

레이아웃용 표는 쓰지 않는다

화면 배치용으로 <table>을 쓰면 낭독기가 "표, 3행 2열"이라고 말하며 데이터가 아닌 내용에 표 탐색 모드를 적용합니다. 배치는 CSS(flex, grid)로 하고, 표는 진짜 표 형식 데이터에만 사용하세요.

반응형에서 표가 넘칠 때

좁은 화면에서 표가 넘친다고 display:block으로 구조를 부수면 표 의미가 사라져 낭독기가 표로 인식하지 못합니다. 표는 2차원 구조가 본질이므로 가로 스크롤 컨테이너에 담는 것이 리플로우의 예외로 인정됩니다. 단, 키보드로도 스크롤할 수 있어야 합니다.

<div class="table-scroll" role="region" aria-labelledby="cap1" tabindex="0">
  <table>
    <caption id="cap1">월별 방문자 수</caption>
    …
  </table>
</div>

.table-scroll { overflow-x: auto; }

2. iframe에는 title을 붙인다

지도, 결제창, 유튜브 임베드, 채팅 위젯은 대부분 <iframe>입니다. 프레임 안 내용은 별개 문서라서, 낭독기 사용자는 프레임 목록에서 이름(title)만 보고 들어갈지 말지 결정합니다. title이 없으면 "프레임"이라고만 읽혀 무엇인지 알 수 없습니다 (iframe-no-title, WCAG 4.1.2).

<iframe src="https://www.youtube.com/embed/…"
        title="제품 사용법 소개 영상 (2분 30초)"></iframe>

<!-- 광고·추적용 등 내용이 없는 프레임은 낭독기에서 감춘다 -->
<iframe src="about:blank" title="" aria-hidden="true" tabindex="-1"></iframe>

title에는 "iframe"이라는 단어를 넣지 않아도 됩니다(낭독기가 "프레임"이라고 이미 알려 줍니다). 안에 무엇이 있는지를 쓰세요.

3. 영상과 오디오

영상·음성의 접근성은 "대체 수단"을 제공하는 것입니다. 이 기준들은 3단계(A, AA, AAA)로 나뉩니다.

콘텐츠	필요한 대체 수단	WCAG (등급)	대상 사용자
녹음된 오디오만(팟캐스트 등)	대본(transcript)	1.2.1 (A)	청각장애인
영상만(소리 없음)	대본 또는 음성 해설	1.2.1 (A)	시각장애인
소리가 있는 영상	자막(캡션)	1.2.2 (A)	청각장애인, 소음 환경, 음소거 시청자
소리가 있는 영상	화면 해설(오디오 디스크립션) 또는 미디어 대체물	1.2.3 (A) · 1.2.5 (AA)	시각장애인
실시간 방송	실시간 자막	1.2.4 (AA)	청각장애인

자막(캡션)과 자막 파일 연결

<video controls preload="metadata" poster="thumb.jpg">
  <source src="guide.mp4" type="video/mp4">
  <track kind="captions" src="guide.ko.vtt" srclang="ko" label="한국어" default>
</video>

자막에는 대사뿐 아니라 의미 있는 소리("[초인종 소리]", "[박수]")와 화자 구분이 들어가야 합니다. 이 점이 단순 대사 번역 자막과 다릅니다.
영상이 대화 없이 화면만으로는 내용을 알기 어렵다면(화면에 글자만 나오는 시연 등) 음성 해설이나 대체 대본을 제공합니다.
시간이 짧다면 영상 아래에 텍스트 대본을 두는 방법이 가장 저렴하고 검색에도 유리합니다.

재생 제어

controls 속성을 쓰면 브라우저 기본 컨트롤이 키보드 접근 가능한 상태로 제공됩니다. 직접 만든 컨트롤은 키보드 조작과 이름 붙이기를 모두 구현해야 합니다.
자동 재생 금지 — 3초 넘게 소리가 자동으로 나오면 반드시 정지·음량 조절 수단이 있어야 합니다(1.4.2). autoplay muted loop로 배경 영상을 쓰더라도 일시정지 버튼이 필요합니다(2.2.2).
유튜브 등 외부 플레이어를 임베드할 때는 자막 사용 여부와 언어를 확인합니다.

4. 캡차와 시간 제한 있는 콘텐츠

이미지로 된 문자 캡차는 시각장애인과 인지 특성이 다른 사용자에게 사실상 통과 불가능한 관문입니다. 캡차를 쓴다면 이미지 외 대체 방식(음성, 논리 문제, 이메일·문자 인증 등)을 함께 제공해야 합니다(1.1.1의 예외 조항 참조). 캡차 이미지의 alt에는 정답을 쓰지 않고 "보안 문자, 음성 인증을 이용하세요"처럼 용도를 설명합니다.

5. PDF·문서 파일 링크

사이트에서 내려받는 PDF·한글·워드 문서도 웹 콘텐츠의 일부입니다. 최소한 다음은 확인하세요.

스캔한 이미지 PDF가 아닌 텍스트가 들어 있는 PDF일 것(낭독기가 읽을 수 있어야 함)
문서 제목·언어 속성, 제목 스타일, 대체 텍스트, 읽기 순서(태그)가 설정되어 있을 것
링크 텍스트에 파일 형식과 용량을 함께 표기할 것: 2026년 배송 정책 안내 (PDF, 340KB)

6. 점검 순서

페이지의 모든 <table>: 데이터 표인가? 그렇다면 th·caption이 있는가?
모든 <iframe>: title이 안에 든 내용을 설명하는가?
영상: 자막이 있는가? 소리로만/화면으로만 전달되는 정보가 있는가?
자동 재생되는 소리·영상: 정지 수단이 있는가?
키보드만으로 재생·정지·음량·자막 켜기가 가능한가?

자동 검사는 "표에 th가 있는가", "iframe에 title이 있는가", "자동 재생 속성이 있는가"를 정확히 찾습니다. 자막의 품질, 대본의 충분성, 영상의 화면 해설 필요 여부는 사람이 콘텐츠를 보고 판단해야 합니다.

이 도구의 관련 규칙은 table-no-header, iframe-no-title, autoplay-media 세 가지이며 각각의 수정 방법은 규칙 사전에서 확인할 수 있습니다.