跳到主要內容
:::|

9.3:H209002 確保事件的啟發不要求一定得使用滑鼠

說明:

網頁設計者利用 Script 作為網頁瀏覽事件驅動時,必須考慮到身心障礙者所使用的特殊輸入裝置彙有所不同,可能有鍵盤、點字機、頭仗以及麥克風,所以網頁中使用事件驅動時,勿設計只能由滑鼠來驅動的事件,可以使用多重的事件驅動機制。

網頁設計者利用 Script 作為網頁瀏覽事件驅動時,須注意下列三點:

一 ) 使用應用層級 (application-level) 的事件驅動裝置 (triggers) 而避免使用互動

層級 (interaction-level) 的事件驅動裝置。在 HTML4.0 中,應用層級的屬性有 "onfocus" 、 "onblur" 以及 "onselect" 。相對而言,有許多屬性是屬於依賴單一的驅動裝置,例如: "onmousedown" 事件只能使用滑鼠來驅動,無法用其他的方法來啟動此事件。

( 二 ) 如果我們無法避免使用滑鼠驅動事件,我們就必須提供多重的驅動事件的方法,在使用滑鼠來驅動事件時,另外提供鍵盤驅動鍵的設定來配合。

當使用 … 應配合 …
onmousedown onkeydown
onmouseup onkeyup
onclick onkeypress
onmouseover onfocus
onmouseout onblur

( 三 ) 避免設計只能由滑鼠來驅動的事件。

範例:

下列不良設計中,滑鼠移動到範例一圖片時會出現「車款 Boxster 的命名緣由 ...... 」的對話框,換句話說,只能依靠滑鼠來驅動對話框的產生,而無其他的方法來驅動對話框,這對於無法使用滑鼠的使用者會產生極大的障礙。

不良設計:

< IMG onmouseover = " alert ( ’車款Boxster的命名緣由......’) " src= " boxster01.jpg " > 
< IMG onmouseover = " alert( ’介紹Boxster的其他車款類型:Boxster , BoxsterS ......’) " 
src= " boxster02.jpg " >

正確示範

在正確範例中,使用onfocus屬性來配合onmouseover屬性,所以正確範例中的對話框除了可以由 滑鼠驅動之外,還可以藉由鍵盤的來驅動對話的視窗。

正確範例:

< IMG onmouseover= " alert(’車款Boxster的命名緣由......’) " 
onfocus= " alert(’車款Boxster的命名緣由......’) " 
tabindex= " 2 " src= " boxster01.jpg " > 
< IMG onmouseover= " alert(’介紹Boxster的其他車款類型:Boxster,BoxsterS ......’) " 
onfocus= " alert(’介紹Boxster的其他車款類型:Boxster,Boxster S ......’) " 
tabindex= " 3 " src= " boxster02.jpg " >

上一頁| 回首頁