HTML <area> 태그 alt 속성 완벽 가이드 – 대체 텍스트 설정 방법

HTML <area> 태그의 alt 속성이란?

HTML의 <area> 요소에서 alt 속성은 이미지 맵(image map) 내 클릭 가능한 영역에 대한 대체 텍스트(alternate text)를 지정하는 데 사용됩니다. 이 대체 텍스트는 네트워크 연결 문제, 로딩 오류 등 다양한 이유로 이미지가 화면에 정상적으로 표시되지 않을 때 사용자에게 대신 보여집니다.

또한 alt 속성은 화면 낭독기(스크린 리더)를 사용하는 시각 장애인 사용자에게 해당 영역의 정보를 전달해 주므로, 웹 접근성 측면에서도 반드시 작성하는 것이 좋습니다.

기본 문법

<area alt="text">

여기서 text는 해당 영역에 설정하려는 대체 텍스트를 의미합니다.

<area> alt 속성 사용 예제

다음 예제를 통해 <area> 요소의 alt 속성을 실제로 어떻게 구현하는지 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
   href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
   href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
   href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

실행 결과

HTML area 태그 alt 속성 완벽 가이드 – 대체 텍스트 설정 방법

예제 코드 상세 설명

위 예제에서는 먼저 다음과 같이 이미지에 이미지 맵을 연결했습니다.

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

이후 <map> 태그 안에 각 영역의 모양(shape)에 따라 세 개의 <area> 요소를 정의했습니다.

<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
   href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
   href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
   href = "/php/index.htm" target = "_blank" />
</map>

각 영역을 설정할 때 아래와 같이 alt 속성을 함께 지정하여 대체 텍스트를 부여했습니다.

<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />

정리

<area> 태그의 alt 속성은 이미지가 로드되지 않거나 표시 오류가 발생했을 때 해당 영역의 용도를 알려주는 필수적인 속성입니다. 다각형(poly), 사각형(rect), 원(circle) 등 어떤 형태의 영역을 정의하든 항상 의미 있는 대체 텍스트를 함께 작성하여 접근성과 사용자 경험을 높이시기 바랍니다.