이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하거나 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.
운용의 용이성
작성자
관리자
작성일
2022-06-24 15:33
조회
965
이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하거나 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.
WAI에서 여기에 해당하는 항목은 다음과 같습니다.
1.2 서버측 이미지 맵을 사용할 때에는 그림의 각 활성화 영역마다 중복적인 텍스트 링크를 제공해 준다.
9.1 기하학적인 도형으로 정의가 안 되는 영역이 있는 경우를 제외하고는 서버측 이미지 맵 대신에 반드시 클라이언트측 이미지 맵을 사용한다.
9.1 기하학적인 도형으로 정의가 안 되는 영역이 있는 경우를 제외하고는 서버측 이미지 맵 대신에 반드시 클라이언트측 이미지 맵을 사용한다.
이미지 맵이란 한 개의 이미지상에 여러개의 링크를 두는 기법을 말합니다. 용어가 지칭하는 것과는 달리 실제 맵(지도)은 아니지만 예컨데 흔히 볼 수 있는 지도찾기의 그림상에서 특정 지역을 클릭하면 해당 지역의 정보가 있는 곳으로 이동하는 것이 그 사례입니다.
클라이언트와 서버사이드 이미지 맵은 맵상에서 방문객이 클릭했을때 그 해석을 클라이언트에서 하느냐 서버에서 하느냐에 따라 구분됩니다. 클라이언트 이미지 맵은 이미지에 alt text를 제공하는 것과 동일하기 때문에 큰 어려움 없이 스크린 리더가 읽을수 있습니다. 그러나 서버사이드 이미지 맵은 링크 정보가 서버에 있기 때문에 스크린 리더가 읽을 수 없습니다. 그러므로 일차적으로 맵을 쓸려면 클라이언트 사이드 이미지 맵을 쓰는 것을 권장하는 것입니다. 부득이 서버 사이드 이미지 맵을 쓸 경우에는 맵에서 사용될 링크 목록을 alt text 형태로 제공해야만 스크린 리더등으로 접근이 가능합니다.
[대상 장애]
- 시력/시각 장애
- 색맹/색약 장애
- 마우스를 사용할 수 없는 경우
사용예
■ 서버측 이미지맵을 사용하는 경우
<a href="#">
<img src="images/index_topmenu.gif" width=337 height=24 border=0 ismap alt="상단 검색메뉴">
<a>
<img src="images/index_topmenu.gif" width=337 height=24 border=0 ismap alt="상단 검색메뉴">
<a>
위의 예는 usemap 대신 ismap 속성을 사용하여 클라이언트 브라우저에 좌표값을 전송하고, 이용자가 원하는 페이지로 이동하기 위해서는 이미지맵의 특정 영역을 클릭해야 합니다. 문제는 마우스를 사용할 수 없는 사용자는 이런 서버측 이미지맵을 사용할 수 없습니다.
따라서 서버측 이미지맵을 클라이언트 이미지맵으로 대처하거나, 텍스트 형태의 네비게이션 링크 리스트를 같이 제공해야 합니다.
따라서 서버측 이미지맵을 클라이언트 이미지맵으로 대처하거나, 텍스트 형태의 네비게이션 링크 리스트를 같이 제공해야 합니다.