Alt text, Captions, 이미지와 영상의 대체 텍스트

한 줄로

이미지를 못 보는 사용자에게 의미를 전달하는 대체 텍스트, 영상에서는 자막입니다.

Alt text

HTML 2.0(1995)에서 <img> 태그의 alt 속성으로 표준화됩니다.

<img src="cat.jpg" alt="검은 고양이가 창문에 앉아 있다">

alt는 다음 상황에서 작동합니다.

이미지 로딩 실패: 텍스트로 대체됩니다. 스크린리더: 시각장애인이 듣습니다. 검색 엔진: 이미지 SEO에 활용됩니다.

좋은 alt text의 조건입니다. 의미를 전달: "검은 고양이가 창문에 앉아 있다" (O). 단순 묘사가 아닌: "이미지" (X), "고양이" (X, 너무 빈약). 장식 이미지는 빈 alt: alt="" (스크린리더가 건너뜀).

Captions / Subtitles

영상에서 들을 수 없는 사용자를 위한 자막입니다.

Captions (CC): 청각장애인용입니다. 효과음, 화자 표시까지 포함합니다 ("[음악 시작]", "[지미: 안녕]"). Subtitles: 외국어 번역용입니다.

웹에서는 <track> 태그로 자막을 추가합니다.

<video>
  <source src="video.mp4">
  <track kind="captions" src="captions.vtt" srclang="ko">
</video>

1972년의 시작

미국 PBS 방송이 1972년 The French Chef에서 첫 폐쇄 자막을 도입합니다. 청각장애인 시청자가 처음으로 TV를 즐길 수 있게 됩니다. 이게 captions 표준의 시작입니다.

바이브 메이커가 챙길 한 가지

이미지 alt text는 SEO에도 도움이 됩니다. 모든 의미 있는 이미지에 alt를 한 줄씩 작성하는 게 접근성과 검색 노출을 동시에 개선합니다.

관련

Screen reader, WCAG, ARIA