평소 img에다 필수도 아닌 title attribute을 사용하는 일은 거의 없었고 또 그래야 할 동기도 없었다. 그림에 대한 설명은 alt로도 충분하다고 생각했기 때문이다.

그런데 무조건 모든 그림과 관련된 정보를 alt의 속성으로 묶어서 쓰기엔 무리가 있고 가끔 간단한 그림의 보충 설명이나 제목은 alt보단 title 속성을 써주는 것이 더 적절한 때가 있단다.

alt 속성은 필수 요소로서 그림을 대체하는 내용이 들어가는데, 보통 그림이 없다고 가정했을 때 앞뒤 문맥을 자연스럽게 연결하는 내용을 대신 써주는 게 좋다. 그리고 간혹 생략 시에도 앞뒤 문맥이 자연스럽게 연결되면서 내용을 전달하는데 별 지장이 없다면 그냥 공백으로 놔두는 것도 가능하다.

그래서 그냥 간단한 그림의 제목과 같은 부가적인 정보는 alt 속성으로 적절치 않고 title 속성을 쓰는 것이 더 적당한데 다음과 같은 예에서 그 적절한 사용법을 확인할 수 있다. (같은 그림이 문맥상 서로 다른 의미로 사용되었다.)

<article>
 <h1>우리집 고양이</h1>
 <h2>플러피</h2>
 <p>아주 귀여운 놈이다.</p>
 <img src="fluffy.jpg" alt="이놈은 공 가지고 놀기를 참 좋아한다.">
 <p>이렇게 노는 모습을 보면 너무 귀엽다.</p>
</article>
 
<article>
 <h1>플러피와 바둑이</h1>
 <p>플러피는 같이 키우는 우리 집 강아지 바둑이와도 함께 잘 논다.</p>
 <aside><img src="fluffy.jpg" alt="" title="플러피"></aside>
 <p>밤낮으로 함께 잘들 노는 것이 참 대견스럽기도 하다.</p>
</article>

다음은 회계 보고서 안에서 사용된 예:

<img src="sales.gif"
     title="판매 그래프"
     alt="1998년부터 2005년까지, 매년 다음과 같은 수치로 판매량이 증가하였다: 624%, 75%, 138%, 40%, 35%, 9%, 21%">

여기서 title에 사용된 “판매 그래프”는 alt 속성으로 사용되기에는 적절치 않음을 알 수 있다.

결국, title로 쓰여야 할 것을 그냥 alt 속성으로 둔갑해서 쓰는 일은 주의해야 하고 그 반대의 상황도 마찬가지다.

참고 문서 – 4.8 Embedded content — HTML5 — Edition for Web Developers

관련된 주제의 글

• img 속 alt 속성에 있는 내용을 그림 밑으로 끄집어내어 표시해주기 (0)