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

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

下列不良設計中,滑鼠移動到範例一圖片時會出現「車款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">
            
網頁內容結束分隔線