無障礙網路空間服務網無障礙網路空間服務網

1.16:H301015 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結

不良設計

下面的例子為網頁上一個包含台灣三大入口網站的影像地圖,雖然有使用客戶端影像地圖的設計,但是沒有在網頁上分別針對三大入口網站提供對應的文字連結。

不良設計:

<P>
<IMG src="map2.gif" width="472" height="94" usemap="#Map" border="0" alt="台灣三大入口網站"> 
</P>
<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>
          

正確示範

正確的設計是針對伺服器端影像地圖中的各個超連結,在網頁上提供額外對應的文字連結。

正確範例:

  <P>
    <IMG src="map2.gif" width="472" height="94" usemap="#Map1" border="0" alt="台灣三大入口網站">
  </P>
  <MAP name="Map1">
   <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> <P> 【<A href=" http://www.yahoo.com.tw ">Yahoo!奇摩網</A>】 【<A href="http://www.pchome.com.tw"> PChome </A>】 【<A href="http://www.yam.com.tw">蕃薯藤</A>】 </P>
網頁內容結束分隔線