JavaScript에서 이미지 맵(image-map) 영역의 대체 텍스트(alt 텍스트)를 검색하려면 alt 속성을 사용하면 됩니다. 이 속성은 해당 영역에 지정된 대체 텍스트 값을 문자열로 반환합니다.
이미지 맵은 하나의 이미지 안에서 클릭 가능한 여러 영역을 정의할 때 사용되며, 각 <area> 요소에는 접근성을 위해 대체 텍스트를 지정하는 것이 좋습니다. 아래 예제 코드를 실행하여 대체 텍스트를 직접 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<body>
<img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
<map name = "html">
<area id = "myarea" shape = "circle" coords = "154,150,59" href = "about.htm?id=company" alt = "Team" target = "_self">
</map>
<script>
var x = document.getElementById("myarea").alt;
document.write("대체 텍스트: " + x);
</script>
</body>
</html>
코드 설명
document.getElementById("myarea")를 통해 id가 myarea인 <area> 요소를 가져온 뒤, .alt 속성으로 해당 영역의 대체 텍스트인 "Team"을 읽어옵니다. 결과는 화면에 다음과 같이 출력됩니다.
대체 텍스트: Team
이처럼 alt 속성을 활용하면 JavaScript로 이미지 맵 영역의 대체 텍스트를 손쉽게 조회할 수 있으며, 스크린 리더 등 보조 기술을 위한 접근성 향상에도 도움이 됩니다.