alt 속성 (img)

정의

alt 속성은 “이미지 대신” 쓸 수 있는 텍스트를 포함해야 합니다. 페이지의 모든 이미지를 alt 속성값으로 지정된 대체텍스트로 교체해도 페이지의 의미가 달라지지 않아야 합니다.

따라서 이런 예제는 잘못된 것입니다.

<p>
  <img src="graduation.jpg" alt="졸업 사진">필자의 졸업 사진입니다. 필자는 앞에서 두번째 줄, 왼쪽에서 네번째에 있습니다.
  ...
</p>

이미지를 대체텍스트로 바꾸면 “졸업 사진 필자의 졸업 사진입니다. 필자는 앞에서 두번째 줄, 왼쪽에서 네번째에 있습니다.”라는 이상한 문장이 됩니다. 이미지를 통해서 특별한 의미를 전달하는 것이 아니라 단순히 주변 문맥을 보충한 것일 뿐이므로 위 예제에서 alt 속성값은 비어있어야 합니다.

대체텍스트를 올바르게 사용하는 것은 생각보다 쉽습니다. 먼저, 이미지가 아예 없다고 생각하고 문장을 씁니다. 그런 다음 이미지로 문장의 일부분을 표현할 수 있다면, 바로 그 부분을 설명하는 단어나 문장이 이미지의 대체 텍스트가 되는 것이며 이미지는 그 부분에 대신 들어가는 것입니다.

다시 정리하면,

  • alt 속성은 이미지 대신 쓸 수 있는 텍스트입니다. alt 속성으로 이미지를 설명하는 것이 아닙니다. 주변 문맥에서 이미 설명된 단어나 문장을 alt 속성에 중복해서 사용하면 사용자의 정보 습득을 방해할 수 있습니다.
  • 이미지 대신 alt 속성에 지정된텍스트를 읽었을 때 자연스럽게 문장이 이어져야 합니다. 즉, 단어를 대체하는 이미지의대체 텍스트는 단어여야 하며 문장을 대체하는 이미지의대체 텍스트는 완전한 문장이어야 합니다.

속성 값

alt 속성의 값은 평범한 텍스트를 사용합니다. 이 속성은 비어 있을 수 있습니다.

예제

다음 예제에서 alt 속성값에 “졸업 사진입니다” 라는 문장을 사용한다면이미지 다음에 이어지는 문장의 내용에 따라서는 이미지를 볼 수 없는 사용자에게 불편한 느낌을 주므로 권장하지 않습니다(글을 읽으시는 분이 이미지 없이 쉽게 상상할 수 있도록 졸업 사진을 예로 들었습니다).그럼 실제로 상황에 맞는 문장 사용법은 무엇일까요? alt 속성에 문장을 사용하는 방법을 살펴보겠습니다.

1) 이미지가 아예 없을 때의 마크업

<p>
  필자의 졸업 사진입니다. 필자는 앞에서 두번째 줄, 왼쪽에서 네번째에 있습니다. 필자가 서 있는 자리에서 오른쪽 두번째 자리에 있는 친구는 졸업한지 20년이 넘게 흐른 지금도 가장 절친한 친구입니다.
  ...
</p>

졸업 앨범을 스캔해서 graduation.jpg라고 저장했습니다. 이 사진 이미지에서 전달받을 수 있는 의미는 “졸업 사진이구나” 입니다. 따라서 이렇게 마크업할 수 있습니다.

2) 주변 문맥이 이미지를 설명하는 경우

<p>
  <img src="graduation.jpg" alt=""> 필자의 졸업 사진입니다. 필자는 앞에서 두번째 줄, 왼쪽에서 네번째에 있습니다. 필자가 서 있는 자리에서 오른쪽 두번째 자리에 있는 친구는 졸업한지 20년이 넘게 흐른 지금도 가장 절친한 친구입니다.
  ...
</p>

또는,

3) 일반적인 사용 방법

<p>
  <img src="graduation.jpg" alt="필자의 졸업 사진입니다.">  필자는 앞에서 두번째 줄, 왼쪽에서 네번째에 있습니다. 필자가 서 있는 자리에서 오른쪽 두번째 자리에 있는 친구는 졸업한지 20년이 넘게 흐른 지금도 가장 절친한 친구입니다.
  ...
</p>

4) 좀 더 자세한 의미를 전달하는 이미지.

포토샵에서 이미지를 조금 수정해서, 필자의 얼굴 주위에 동그라미를 그리고 “저에요!” 라는 글씨를 이미지에 직접 저장했습니다. 이제 이 이미지는 필자가 앞에서 두번째 줄, 왼쪽에서 네번째에 있다는 의미도 함께 전달합니다. 따라서 마크업을 이렇게 바꿀 수 있습니다.

<p>
  <img src="graduation.jpg" alt="필자의 졸업 사진입니다. 필자는 앞에서 두번째 줄, 왼쪽에서 네번째에 있습니다."> 필자가 서 있는 자리에서 오른쪽 두번째 자리에 있는 친구는 졸업한지 20년이 넘게 흐른 지금도 가장 절친한 친구입니다.
  ...
</p>

분류

HTML 5 명세에서는 문맥에 포함된 이미지에 따라서 alt 속성을 어떻게 사용할지 자세하게 설명했습니다. 이것을 그대로 옮기는 것은 너무 길어서 별 의미가 없기 때문에 간략히 정리했습니다. 자세한 정의와 설명은 명세를 참고해 주시기 바랍니다.

alt 속성을 써야 하고 그 안에 의미있는 텍스트를 써야 하는 경우

alt 속성을 쓰되 내용을 비워 두어야 하는 경우

alt 속성을 생략해도 되는 경우

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

 
html5/attribute/alt_img.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki