[HTML 이미지 & 미디어 삽입] #03 미디어의 대체 텍스트와 자막 처리 완벽 정리

 

 

안녕하세요 토스트데브입니다.
웹 페이지에 이미지나 영상, 오디오 같은 미디어 요소를 넣을 때 단순히 시각적·청각적 콘텐츠만 보여주는 것이 아니라,
누구나 이해할 수 있는 접근성 있는 콘텐츠로 만드는 것이 중요합니다.

이번 글에서는 이미지의 대체 텍스트, 그리고 비디오나 오디오에 자막(track 태그)을 추가하는 방법까지 정리해볼게요!

 

 

🖼️ 1. 이미지의 대체 텍스트 (alt 속성)

<img> 태그에 꼭 들어가는 속성 중 하나가 alt입니다.

<img src="cat.jpg" alt="창가에 앉은 고양이">

 

✅ alt 속성의 역할

• 이미지가 로드되지 않을 경우 대체 텍스트를 표시
• 시각장애인을 위한 스크린 리더에 읽히는 콘텐츠
• 검색엔진(SEO)이 이미지를 이해할 수 있도록 설명

 

❌ 주의할 점

• alt="" 빈 문자열은 장식용 이미지일 때만 사용
• 절대 alt 속성을 생략하지 말기!
• 의미 없는 사진1, img01 등의 텍스트는 피하기

 

 

🎬 2. 영상 및 오디오의 자막 처리 (<track> 태그)

HTML5에서는 <video> 또는 <audio>에 자막 또는 대체 텍스트 정보를 추가할 수 있습니다.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitle.vtt" kind="subtitles" srclang="ko" label="Korean">
</video>

 

🎯 <track> 태그 속성 설명

속성	설명
src	자막 파일 경로 (형식: .vtt)
kind	자막 종류 (subtitles, captions, descriptions, chapters)
srclang	언어 코드 (예: ko, en)
label	사용자가 선택할 수 있는 자막 이름
default	기본 자막 설정 여부

 

🗂️ .vtt 파일 예시 (WebVTT 포맷)

WEBVTT

00:00:00.000 --> 00:00:03.000
안녕하세요, 이 영상은 HTML 자막 처리 예제입니다.

00:00:03.500 --> 00:00:07.000
스크린 리더 사용자도 자막을 통해 내용을 이해할 수 있습니다.

🎧 자막은 단지 번역이 아니라, 청각 장애인을 위한 정보 접근을 돕는 수단이기도 합니다.

 

💡 보너스: 오디오 설명(descriptions)도 가능!

<track kind="descriptions" src="desc.vtt" srclang="ko" label="설명 자막">

 

• 시각장애인을 위해 영상의 장면 묘사를 텍스트로 제공
• 스크린 리더가 읽어주는 방식으로 활용됩니다

 

 

✅ 웹 접근성과 SEO 향상을 위한 실천

요소	꼭 지켜야 할 사항
이미지	alt 속성 작성 필수
비디오	<track>으로 자막 제공
오디오	텍스트 대안 제공 or 자막 처리
장식용 이미지	alt="" 로 처리하고 의미를 제거
자막 파일	.vtt 형식 사용 (UTF-8 인코딩)

 

 

 

📝 마무리

이미지와 영상, 오디오는 웹의 풍부한 표현력을 책임지는 중요한 요소입니다.
하지만 모든 사용자가 콘텐츠를 똑같이 이해하고 사용할 수 있어야 진정한 웹 콘텐츠라고 할 수 있겠죠.

• alt 텍스트는 모든 이미지에 필수
• <track> 자막은 미디어 콘텐츠의 접근성을 높이는 핵심

앞으로 HTML을 작성할 때 단순한 출력 이상의 관점으로 누구나 접근 가능한 웹 페이지를 만들어보세요!

 

#HTML #웹접근성 #대체텍스트 #alt속성 #자막처리 #track태그 #video태그 #미디어삽입 #웹퍼블리싱 #코딩입문 #프론트엔드기초 #HTML기초 #toastdev #SEO기초 #웹콘텐츠접근성