이미지맵에 대한 좋은 의견을 듣고 싶습니다.

[박민권]

테이블 레이아웃 시절에는 이미지맵에 거부감이 있었습니다.
그러다가 요즘은 이미지맵이 나쁜것이 아니라는 생각이 들었습니다.

이미지맵으로 간결하게 코드를 만들 수가 있는데 조각조각 내버리면 코드가 복잡해지는 경우 차라리 이미지맵이 낫지 않나 싶습니다.

w3c 문서에 있는 object 를 통한 이미지맵을 해봤는데 ie는 이미지가 표시도 안되고
불여우도 이미지만 표시되지 맵으로서의 역할은 못하더군요.
그래서 그냥 평범한 방식으로 구현하고 area 태그에 alt 값을 주는 식으로 처리했지 이미지가 보이지 않을 경우 대체텍스트 링크가 나타나지 않으므로 이건 아닌가 싶은 생각이 듭니다.

이런 경우 때문에 사이트를 이용하는데 중요한 메뉴를 이미지맵으로 처리하는 것은 좋지 않지만 사이트 이용에 문제를 주지 않는 부분은 판단여부에 따라서 코드를 줄일 수 있다면 이미지맵으로 처리하는 것도 좋다고 생각합니다.

이미지맵을 이용했을때 웹접근성에 어떠한 영향을 주는지 다른 좋은 처리방안이 있는지 알고 싶습니다.

[Channy]

이미지맵을 이용했을때 웹접근성에 어떠한 영향을 주는지 다른 좋은 처리방안이 있는지 알고 싶습니다.

신승님님이 만드신 "웹 접근성 컨텐츠 제작 지침"에 보면

가장 간단한 설명은 alt를 이용하고 그것보다 조금 더 상세한 설명은 title을 이용하고 아주 상세한 설명은 logndesc에서 별도의 파일로 제작하여 에 넣어줌.
<img src="/kr/images/screensaver/info.gif" 스크린세이버 설치 방법 스크린 세이버 설치 alt=" “ title="방법 다운로드 설치 설정 방법: 다운로드, 설치, 설정 방법” longdesc="ld-info.html" usemap="#info-map">

<map name="info-map">
area shape="rect" coords="90,14,523,47" href="nohref" alt="1 : 단계 원하시는 화면 보호기를 클릭하셔서 파일을 다운받으십시오 압축을 푼 후에 를 더블 클릭합니다.">
<area shape="rect" coords="90,57,523,91" href="nohref" alt="2 : 단계 제어판 디스플레이 화면보호기에서 압축을 푼 화면보호기 이름을 선택하시고 확인을 누르시면 됩니다.">
</map>

스크린 리더의 경우, map tag를 인식하여 alt 부분을 읽어 주기 때문에 상세한 설명만 적는 다면 큰 문제는 없을 것입니다. 이미지맵으로 메뉴를 만드는 경우 스타일을 걷어냈을 때 접근성에 문제가 있을 수 있겠네요.

[신승식]

그래서 그냥 평범한 방식으로 구현하고 area 태그에 alt 값을 주는 식으로 처리했지 이미지가 보이지 않을 경우 대체텍스트 링크가 나타나지 않으므로 이건 아닌가 싶은 생각이 듭니다.

이미지맵의 접근성을 이야기하다보면 Internet Explorer 독점의 폐해가 다시 한 번 나옵니다.

하나는 이미지 소스를 지정할 때에 object를 사용할 수 없다는 것인데요, 이로 인해 object가 가지고 있는 fallback을 쓸 수 없게 되는 것이 문제이지요. 예를 들면 이미지 맵을 위해 알파 채널이 있는 PNG 그래픽을 1차 소스로 하되 그것을 표시하지 못 할 경우에는 gif를 보여주고, 그것도 안되면 텍스트를 보여주는 식으로 말입니다. 불행하게도 Internet Explorer는 png 지원도 못하지만, 추가로 object 지원도 못하므로 아래 코드는 표준에 맞지만 현실적으로 사용하기가 힘듭니다.

Code: Select all

<object data="imgsrc.png" type="image/png" usemap="#map1">
  <object data="imgsrc.gif" type="image/gif" usemap="#map1">
    이미지에 대한 대체 텍스트
  </object>
</object>

따라서 아래와 같이 현실적으로 코딩할 수 밖에 없습니다.

Code: Select all

<img src="imgsrc.gif" alt="이미지에 대한 대체 텍스트" title="이미지 전체에 대한 추가 긴 설명" usemap="#map1" />

두 번째, 이미지 맵의 좌표를 지정할 때에 꼭 area를 써야만 하는 것은 아닙니다. 지적하신 대로 area는 이미지 자체가 표시되지 않는 그래픽 브라우저에서 fallback이 없기 때문입니다. 따라서 일반적인 앵커 요소(a)에 좌표를 지정할 수 있도록 하고 있습니다. 그러나 불행하게도 Internet Explorer는 이것 마저도 인식을 못하지요. 다른 대부분의 브라우저가 a 요소에 shape, coords와 같은 속성을 넣어주면 이미지 맵의 영역으로 인식을 하지만 Internet Explorer는 영역 표시를 못합니다. 따라서 아래와 같은 방법이 표준에 맞고 이미지가 안 나올 때 접근성도 아주 좋지만 아직까지는 현실적으로 사용하는데 문제가 있습니다.

Code: Select all

<map name="map1">
       <a href="do1.html" shape="rect" coords="0,0,100,100">1차 영역</a> |
       <a href="do2.html" shape="rect" coords="0,101,200,200">2차 영역</a>
</map>

대신 찝찝하지만 아래와 같이 써야 겠지요.

Code: Select all

<map name="map1">
       <area href="do1.html" shape="rect" coords="0,0,100,100" alt="1차 영역" />
       <area href="do2.html" shape="rect" coords="0,101,200,200" alt="2차 영역" />
</map>
<p> <!--이미지가 안 보일 경우 텍스트 링크 추가-->
  <a href="do1.html">1차 영역</a> |
  <a href="do2.html">2차 영역</a>
</p>

결론은 아직까지 image map 하나 제대로 지원 못하는 Internet Explorer를 위해서, 아래와 같이 코딩하는 것이 좋은 것 같습니다.

1) object 대신에 img 요소를 사용하되 img 전체에 대한 제목을 alt로 붙여준다.
2) 이미지의 영역을 지정할 때에는 a 대신에 area를 쓸 수 밖에 없다. 단, 영역 설명을 위해 alt를 반드시 넣어야 한다.
3) area를 썼을 경우, 이미지맵 영역 지정 바깥에다가 별도로 텍스트 링크들을 추가로 넣어주는 것이 좋다.