툴팁이란?

마우스를 가져갔을 때, 포인터 자리에 표시되는 작은 설명상자를 말한다.

이 툴팁을 제공하는 태그가 바로 title 이다.

이미지 태그에서는 웹접근성에 따라 alt 값으로 대체텍스트를 넣어주는데

title 없이 alt값만 있어도 브라우저에서는 alt 값이 툴팁으로 표시된다.

하지만, 이것은 브라우저의 기능일 뿐 alt 자체의 속성은 아니다.

툴팁을 주기 위한 태그는 title 이므로

alt 값에는 스크린 리더기가 읽을 수 있도록 이미지를 설명하는 대체텍스트를 넣어주고

title 값에는 '해당 이미지를 누르면 ㅇㅇ으로 이동합니다.' 라는 안내문구를 적어줄 때 사용하도록 한다.

웹접근성을 위해 새창으로 이동될 때에는 꼭 '새창으로 열림' 또는 '새창'을 title값에 넣어주면 된다.

이미지에 대체텍스트는 왜 넣는가?

이미지를 시각적으로 확인하기 어려운 시각장애인들을 위해 이미지를 설명하는 텍스트를 넣어준다.

스크린리더기를 사용하면 이미지 영역을 클릭하였을 때

해당 텍스트를 읽어주어 시각장애인이여도 웹페이지를 이해하는데에 문제가 없도록 한다.

또한, 이미지가 엑박으로 표기될 경우 alt 값이 노출되어 편리하며, 검색엔진에도 도움을 준다.