跳到主要內容
:::|

1.5:H101004 影像地圖區域需要加上替代文字說明

說明:由於一些視障者所使用的純文字瀏覽器無法直接取得影像地圖之超連結資訊,因此,影像地圖中所設定的各超連結區域,必須藉由AREA標籤中alt屬性來提供替代文字說明,以便於這類的特殊瀏覽器取得各超連結資訊。

範例:下面的例子是在網頁上一個台灣三大入口網站的影像地圖,整個圖片雖有“台灣三大入口網“的alt文字說明,但是圖片中的三個連結卻沒有各自的文字替代。

不良設計
下面的例子為包含台灣三大入口網站連結的影像地圖,雖然整個影像地圖有提供“台灣三大入口網“的替代文字說明,但是卻沒有提供三大入口網各自的替代文字。

不良設計:

<IMG src="map.gif" width="472" height="94" usemap="#Map" border="0" alt="台灣三大入口網站">

 

<MAP name="Map">

<AREA shape="rect" coords="10,8,158,86" href="http://www.yahoo.com.tw">

<AREA shape="rect" coords="161,8,309,86" href="http://www.pchome.com.tw">

<AREA shape="rect" coords="311,8,460,86" href="http://www.yam.com.tw">

</MAP>

正確示範

正確的設計是在這個影像地圖IMG標籤中除了加入“台灣三大入口網“的alt文字說明外,也要對於每個連結區域AREA標籤中加上alt說明連結的訊息。

正確範例:

<IMG src="map.gif" width="472" height="94" usemap="#Map" border="0" alt="台灣三大入口網站">

<MAP name="Map">

     <area shape="rect" coords="10,8,158,86" href="http://www.yahoo.com.tw" alt="Yahoo!奇摩網">

      <AREA shape="rect" coords="161,8,309,86" href="http://www.pchome.com.tw" alt="PChome">

      <AREA shape="rect" coords="311,8,460,86" href="http://www.yam.com.tw" alt="蕃薯藤">

</MAP>

 

上一頁| 回首頁