[HTML] 올바르게 title="" 속성 사용하기

Kyung_j99·2022년 12월 1일
0

HTML

목록 보기
2/2
post-thumbnail

img 태그에 alt 속성과 title 속성을 같이 쓰는 것이 웹 표준에 맞는지에 대한 의문이 생겼다.

실무에서는 span 태그에 텍스트성 정보를 기입하고 오프스크린(offscreen) 방법을 많이 쓰기 때문에 title 속성을 잘 쓰지 않지만..!

궁금하기 때문에 검색해 봤다. 🤓
뾰족한 답은 얻지 못했지만 동시에 써도 상관없는 듯하다..!

title 속성이란?

title 속성은 엘리먼트에 대한 정보를 나타내주는 툴팁(tooltip) 기능이다.
엘리먼트에 hover를 하게 되면 말풍선으로 부가 정보를 나타내준다.

요소가 title 특성을 가지고 있지 않을 땐 부모 요소로부터 상속받게 된다.
부모 요소 또한 자신의 부모로부터 상속받을 수 있다.

+) 구글 메인 이미지 같은 경우, 부모로 상속 받는 구조이다.

<div title="google">
	<img src="" alt="" />
</div>    

+) 네이버는 오프스크린 기법을 사용했다.

<a href="">
	<span class="blind">naver</span>
</a>

img 태그

<img src="" alt="" title="" />

이미지 태그를 사용할 때 src 속성과 alt 속성은 필수이다.

  1. 이미지가 로드되지 않거나 (엑스박스)
  2. 시각 장애인 스크린 리더기 사용

이런한 점들을 고려해 대체 텍스트로 들어가기 때문에 꼭 명시해두어야 한다.
🚫 alt 속성이 툴팁으로 나타나는 현상은 인터넷 익스플로러 7 이하 버전에서 W3C의 권고를 MS가 오용하여 발생한 버그라고 한다.

label 태그

<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

profile
코드로 그림 그리는 사람 🎨

0개의 댓글