img 태그에 alt 속성과 title 속성을 같이 쓰는 것이 웹 표준에 맞는지에 대한 의문이 생겼다.
실무에서는 span 태그에 텍스트성 정보를 기입하고 오프스크린(offscreen) 방법을 많이 쓰기 때문에 title 속성을 잘 쓰지 않지만..!
궁금하기 때문에 검색해 봤다. 🤓
뾰족한 답은 얻지 못했지만 동시에 써도 상관없는 듯하다..!
title 속성은 엘리먼트에 대한 정보를 나타내주는 툴팁(tooltip) 기능이다.
엘리먼트에 hover를 하게 되면 말풍선으로 부가 정보를 나타내준다.
요소가 title 특성을 가지고 있지 않을 땐 부모 요소로부터 상속받게 된다.
부모 요소 또한 자신의 부모로부터 상속받을 수 있다.
+) 구글 메인 이미지 같은 경우, 부모로 상속 받는 구조이다.
<div title="google">
<img src="" alt="" />
</div>
+) 네이버는 오프스크린 기법을 사용했다.
<a href="">
<span class="blind">naver</span>
</a>
<img src="" alt="" title="" />
이미지 태그를 사용할 때 src 속성과 alt 속성은 필수이다.
이런한 점들을 고려해 대체 텍스트로 들어가기 때문에 꼭 명시해두어야 한다.
🚫 alt 속성이 툴팁으로 나타나는 현상은 인터넷 익스플로러 7 이하 버전에서 W3C의 권고를 MS가 오용하여 발생한 버그라고 한다.
<label for="" title=""></label>
<input typ="" id="" />
라벨 태그는 UI 항목에 대한 설명을 나타내준다.
태그 특성상 텍스트로 설명이 가능하기 때문에 title 속성을 써줄 필요가 없다.
단,
1. 디자인적으로 라벨이 제공되기 어려울 때
2. placeholder=""가 스크린 리더기에 읽힐 정보가 없을 때
title 속성을 사용해 사용자 이용에 도움을 주어야 한다.
참고 문서
https://seulbinim.github.io/WSA/embedded.html#img-%EC%9A%94%EC%86%8C
https://nuli.navercorp.com/community/article/1132934
https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/title