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

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

不良設計

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

不良設計:

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

正確示範

正確的設計是除了提供“台灣三大入口網“影像地圖的alt替代文字說明外,也要對於每個連結區域AREA標籤提供替代文字說明。

正確範例:

  <P>
  <IMG src="map2.gif" width="472" height="94" usemap="#Map_b" border="0" alt="台灣三大入口網站">
  </P>
  <MAP name="Map_b"> 
    <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" alt="蕃薯藤">
  </MAP>
          
網頁內容結束分隔線