img태그 alt 속성 써야할까?

eunsoo kim·2023년 6월 15일

html img태그

궁금한 웹 개발

목록 보기

4/6

특별한 경우를 제외하고 필수.

내용을 알 수 없는 이미지
이미지를 볼 수 있는 특정인과의 사적인 문서(사이트, 이메일)에 사용된 이미지
장식 이미지에 alt="" 대신 role="presentation" 사용

위 경우를 제외하고 거의 모든 경우에 alt속성을 사용합니다.

1. WHATWG alt속성

WHATWG에서 img태그 대체 텍스트 제공의 가이드라인으로 아래와 같은 문구가 있습니다.
"Except where otherwise specified, the alt attribute must be specified and its value must not be empty"
달리 지정된 경우를 제외하고 alt 특성을 지정해야만 하며 해당 값은 비워 둘 수 없습니다

2. alt속성을 적지 않는 특별한 경우

WHATWG의 '이미지 대신 텍스트를 제공하기 위한 요구 사항', W3CWAI의 '장식 이미지'에서 확인할 수 있습니다.

- 내용을 알 수 없는 이미지(WHATWG)

: 자동화된 방식으로 이미지를 얻었을 경우(웹캠), 작성자가 대체 텍스트를 제공하지 않은 경우(사진 공유 사이트), 작성자 자신이 이미지가 무엇을 나타내는지 모르는 경우( 이미지를 공유하는 맹인 사진작가 )

alt속성에 넣을 내용을 모르기 때문에 figure태그, figcaption태그를 사용하라고 나와있습니다.

<!-- 맹인 사용자의 블로그. 처음에 사용자는 자신이 찍은 사진이 무엇인지 모를 수 있습니다. -->
<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

<!-- 자동화된 방식으로 이미지를 얻었을 경우 -->
<figure>
<img src="clara.jpg">
<figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
</figure>

- 이미지를 볼 수 있는 특정인과의 사적인 문서(사이트, 이메일)에 사용된 이미지(WHATWG)

이미지를 볼 수 있는 특정인을 대상으로 하는 사적인 커뮤니케이션(예: HTML 이메일)에 이미지가 포함된 경우 속성이 alt 생략될 수 있습니다. 그러나 이러한 경우에도 대체 텍스트를 포함하도록 강력히 권장하고 있습니다.

- 장식 이미지에 alt="" 대신 role="presentation" 사용(W3CWAI)

장식으로 사용되는 이미지에는 보통 alt속성에 빈 값을 넣습니다.(alt="")
스크린리더기는 빈 alt속성을 가진 이미지를 무시하고 읽지 않습니다.
스크린리더기에서 요소를 무시하는 WAI-ARIA의 role="presentation" 속성을 사용하면 alt=""를 생략할 수 있습니다.
하지만 alt=""보다 지원범위가 적어 사용을 권장하진 않습니다.