ARIA簡介 - 無障礙部件

這個詞'部件(widget)'廣泛用於描述通過腳本創建和控制的互動元素。它是指非HTML原生控件或通過腳本來加強的HTML控件。部件的例子包括滑桿,下拉和飛出菜單,樹狀系統,拖放控制,自動完成的編輯框和工具提示視窗等。部件的無障礙不會自然發生或其本身就是無障礙。雖然腳本通常可為眾多這些元素提供無障礙,但沒有一個簡單的或標準化的方式來實施。

總之,使這些部件對鍵盤和讀屏軟件用者無障礙往往是可能的,但比較困難及最終的結果往往在實際應用當中只能勉強算是無障礙。

例如,一個常見於網站導航欄上的下拉菜單,讓許多功能集成於一個非常緊湊的空間。使用腳本,它很可能提供無障礙的下拉菜單項。開發人員可以隱藏子菜單項,使項目的主菜單連接到一個包含連結到子頁的標準鏈接的網頁,但這種做法的結果是更多的網頁和對於用戶來說額外的'步驟'。另外開發人員可以允許用戶以tab鍵通過所有的導航項目,但這造成眾多的導航項目(在一些網站也許是幾百個),及沒有上下文結構的導航選單-只讀出所有的項目。

最後,開發人員可以使用腳本來使導航系統達致鍵盤可訪問。這種方法的缺點是沒有一個標準化的方式。以那個鍵打開菜單 - 輸入鍵,下方向,空格等?那個鍵打開子選單?如果菜單使用方向鍵,視障的用戶如何知道這是一個下拉選單(使用下方向鍵),而不是一個飛出菜單(使用右方向鍵),如果他看不到菜單?

如何呈現層次結構複雜的選單系統給讀屏軟件用戶?

其他部件亦存在類似的問題。如何使拖放元素可用鍵盤操作?怎麼呈現詳細列表項的排序選項?怎麼呈現視覺工具提示或彈出消息給視障用戶?

ARIA解決許多這些的問題。透過建立一套角色,屬性和數值,ARIA允許開發人員較容易地解決這些無障礙問題。

下面提供了一些非常基本的例子說明ARIA可以如何實施。

 


必填的表單元素

(必填)

<label for="name">名稱</label>: <input name="name" id="name" aria-required="true" ><em>(必填)</em>

這個輸入框演示一個普遍的問題 - 表格元素是必填的,但“必填”不包含在表單元素的標籤,因此讀屏軟件可能不會閱讀。ARIA的aria-required="true"會告知讀屏軟件表單元素是必填的。

注意:

即使在這個例子中ARIA提供必要的信息,這只能在瀏覽器和輔助技術都支持ARIA才有效。在其他用戶代理想,該示例將無法訪問。這個例子是無可否認有缺陷("必須"字眼應在標籤),但它展示出ARIA未來更好地解決這些問題的潛力。

 


按鈕例子

以下是一個文字元素(不是一個HTML按鈕),其可被點擊或以鍵盤激活(按tab鍵並按輸入鍵或空格鍵)。

按我

<span style="background-color: #ddd; border: medium outset white;" role="button" tabindex="0" onkeydown="if(event.keyCode==13 || event.keyCode==32) alert('You activated me with the keyboard');" onclick="alert('You clicked me with the mouse');">按我</span>

在這個例子中,文字使用了樣式使其視覺上看起來像一個按鈕。該role="button"告知瀏覽器該文字應表現為一個按鈕。

tabindex="0"把元素放進鍵盤瀏覽當中,以便用戶可以啟動按鈕。雖然這個例子有點做作(你可能會想何不直接使用一個實際的按鈕?),但它展示了ARIA有能力為任何互動元素加入無障礙支援。

 


表單驗證例子

在這個例子中,您必須輸入正確的回答'6',以讓瀏覽器瀏覽網頁的其他部分。

輸入一個數字 1到10之間

由於輸入不正確的回答後鍵盤焦點以JavaScript設置回表單元素,回應訊息將無法被讀屏軟件讀取。在這種情況下,回覆訊息是用 role="alert"提供。這將使回應的訊息能被讀屏軟件立即讀出。用戶現在可以重新嘗試用適當的回應。一旦提供了正確的答案焦點會立即釋放到文字之下(這給了 tabindex="0" 以便它可以接收焦點,而不是將焦點跳到網頁中下一個表單元素或鏈接)。