ARIA簡介 - 加強鍵盤的無障礙

在HTML中,只有連結和表單元素可以接收鍵盤焦點。這意味著,當你按'TAB',通過一個頁面時,瀏覽器只停止或設置焦點於這些類型的元素上。使用腳本您可以添加鼠標交互活動到幾乎任何元素。這意味著你可以製作一般的頁面元素,如段落或跨度(span),與鼠標互動和響應(例如,你可以將純文字顯示得像按鈕)。這些不接收焦點的項目的功能不能讓讀屏軟件和純鍵盤使用者進行操作。

開發人員常常需要連接和表單以外的元素是互動的。此外亦經常需要將焦點設置到頁面元素(而非連結或表單元素)。例如,表單驗證錯誤訊息可能會使用腳本使其在頁內以文字方式顯示。視力健全的用戶可以立即看到錯誤訊息。不過,屏幕閱讀軟件用戶可能不知道新的訊息是否存在。為了將焦點設置到錯誤訊息,以便它可由讀屏軟件閱讀,訊息必須能夠接收焦點 -- 這通常是不能做到的,除非它是一個連結或表單元素。

ARIA透過TabIndex屬性。提供不可接收焦點的元素接收焦點(參閱WebaimtabIndex的相關文章ARIA延伸TabIndex屬性,以便它可以應用在任何元素。通過設置一個tabIndex值0(tabindex="0"一個元素會被放置在文件Tab鍵順序中。這意味著瀏覽器將在瀏覽順序中停止並設置焦點到該元素(例如,當用戶按tab到該元素)。這使更多的功能和交互性能應用到元素,例如當元素接收鍵盤焦點,或當用戶按下一個鍵時元素具有焦點而觸發功能。

一個tabIndex值-1允許元素接收焦點,但只有當該焦點以編程方式設置-意即用戶激活一個連結到該元素的連結(<a href="#maincontent"> ...)或以腳本設置焦點(如document.getElementById('errormessage').focus(); )。

通過擴大瀏覽器設置焦點到本身不能接收焦點的元素,ARIA允許提供無障礙更大的可能性。