跳到主要內容
:::|

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 >

上一頁| 回首頁