웹 접근성에 관한 일을 하다가 alt 속성과 title 속성의 차이를 제대로 이해하지 못해 실수를 해서 찾아보기로 했다.
IE에서 둘 다 이미지에 표시해 주기 때문에 나처럼 헷갈리는 사람들이 많은 것 같았다.
alt
이미지의 대체 설명, 대체 텍스트를 입력하는 용도이다.
이미지가 깨졌을 시, 또는 이미지가 출력 안 될 시 이미지에 대한 간략한 설명으로 alt에 입력한 내용이 출력된다.
또한 시각장애인의 웹 서핑 시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt 속성 안의 설명을 읽어준다.
title
이미지 위에 마우스 포인터를 올려놓았을 때 도움말처럼 뜨게 한다.
이미지 뿐만 아니라 a, span, td 등 거의 대부분의 모든 태그에 사용할 수 있고, a 태그에서는 title 속성이 필수 항목이다. 링크 주소에 대한 설명을 넣어, 링크 주소에 의미를 부여할 수 있다.
alt / title 둘은 다른 속성이기 때문에 필요에 따라 선택하여 쓰면 된다.
유라라랜드에 오신 것을 환영합니다!