WAI-ARIA 介紹之一

這篇文章是翻譯 Dev.Operv 的 Introduction to WAI ARIA 這篇文章，會分成三篇刊載。由於原文為 CC-BY-NC-SA-2.5 授權，故此篇文章也採用同樣授權方式。系列文章：

引言

HTML最初並不是被設計來製作網路應用程式的，所以它所有的控制介面非常少，而且受限於 client-server 的通訊模式，然後開發者們使用 JavaScript 突破了這層限制，並建置了各式各樣的介面元件。

然而不幸的是，這些突破 HTML 限制的技術通常也不具備親和力，即使這些介面元件看起來用起來都和一般的桌面應用程式沒什麼不同，但是像 screen reader 這些輔助科技並沒辦法存取到這些介面元件的角色(role，這個元件是什麼東西)、狀態(特有的設定，如 checked)和其他重要的資訊，這狀況就如同只是調整樣式讓一段文字看起來像標題，卻不使用正確的標題標籤，造成各種輔助科技並無法知道這段文字是標題一樣。

使用輔助科技的訪客通常不會注意到網頁動態更新的內容，輔助科技通常會認為只有在導航事件，例如開啟連結或是送出表單時，網頁的內容才會變動。網路應用程式使用AJAX這類新技術，會在背後默默的更新網頁的內容，即使輔助科技會去助益網頁內容的更改，使用者仍然可能不會注意到內容有更新，或是不知道如何移動到更新的位置。

WAI-ARIA為這些介面元件提供了角色(role)定義，以及各種角色狀態和屬性的規格，使用輔助科技的訪客便可以理解並使用這些資訊，除此之外，WAI-ARIA還提供了一種機制以確保訪客不會錯過資訊的更新。

HTML簡史

HTML 最初設計是用來作為超文字文件的，初期的 HTML 草稿規範的標籤有標題、段落、清單和連結等，第一分由 IETF 制定的 HTML 草案還包括了可以在行內顯示圖片的 img 標籤，而第一份較正式的 HTML 規格是 HTML 2 ，基於初期的 HTML 草稿，這個版本還導入了網頁表單和一小部分的控制介面元件包括文字輸入欄位、按鈕、單選選項、勾選框和下拉式選單，然而 HTML 2 所定義的這些控制元件和現在主要使用的 HTML 4 的版本相比，並沒有什麼變化。

HTML 所使用的溝通模式是基於主從式架構，主從式架構的流程為，客戶端送出請求到伺服端，並等待接收回應，伺服端則是一直在等待客戶端的請求，收到後進行處理並回覆給客戶端，由於 HTML 並沒有行為層，所有的溝通都是單線性的－客戶端向伺服端送出請求，伺服端對請求做出處理並傳回一個網頁給客戶端。

網路應用程式

網路應用程式試著去模擬一般的桌面應用程式，不過有個主要的差異在網路應用程式是在瀏覽器裡面執行的，除此之外，網路應用程式和桌面應用程式還有兩個根本性的差異：

  • 一般桌面應用程式有一行為層，而不用對伺服端做溝通
  • 一般桌面應用程式有更多樣的介面控制元件

模擬一般桌面應用程式

背景資料傳輸

為了模擬一般桌面應用程式，網路應用程式使用 JavaScript 去增加網頁的行為，例如使用 JavaScript 讓使用者可以展開或關閉選單項目。網路應用程式有時會需要跟伺服器要些資料，可能是要伺服器上資料庫內的資料來更新頁面內容，當網路應用程式需要和伺服器溝通時，這時候多會使用 AJAX 或是 IFRAME 的技術來在背景溝通。

模擬多樣化的元件

由於 HTML 只有非常少的介面元件，網路應用程式有時就會需要自己創造更複雜的介面元件，像是三種狀態的勾選框或是滑動條控制器，這些介面元件通常是圖形化顯示給使用者，而它們的行為則是由另外的 script 來實作。


圖一 -- 三種狀態的勾選框


圖二 -- 一個滑動條控制器，可能用來調整服務品質

視覺與感官模擬的親和力問題

從視覺上模擬各種介面元件，對伺服器進行背景的溝通都可以讓使用者有更好的使用經驗，但是不幸的是，這些都造成了親和力問題，對於使用輔助科技的使用者都產非常不好：

  • 只有圖形化顯示的介面元件通常鍵盤無法控制
  • 這些介面元件的角色定義、用途等，輔助科技都無從得知
  • 這些介面元件的狀態和屬性資料，輔助科技也無法得知
  • 頁面的更新也沒有通知這些輔助科技

救星是 WAI-ARIA

幸好，列出的這些問題都可以靠 Web Accessibility Initiative's Accessible Rich Internet Applications 來解決，ARIA 是一個正面的技術，而不是跟開發人員說什麼不能做，ARIA 讓開發人員可以製作豐富的網路應用程式，而且它也很簡單就可以上手。

鍵盤導覽

替非文字物件提供替代文字和讓介面元件可以用鍵盤控制都是非常基本的親和力規定，知道親和力相關議題的開發人員可能會讓他所製作的介面元件是可以用鍵盤取用並操作的，像是使用<input type="image">，不過大部分的介面元件都不是以這種方式製作，而會使用像是 img 這種無法使用鍵盤取用的元素，或是複雜的元件可能會使用 div 來做為外層包覆的元素，一樣也是無法使用鍵盤取用。

HTML 4 開始有了 tabindex，可以用於 a、area、button、input、object、select、textarea 這幾個元素上，tabindex的值是介於 1～32767 的正整數，導覽會從數字小的開始，直到數字最大的元素，有設定 tabindex 的元素會以設定的值排入導覽順序，不過如果網頁的內容有好的邏輯結構，tabindex 就可以不必設定，介面元件會自己依序排入 tab 鍵導覽的順序中。

ARIA 擴充了 tabindex 屬性，讓他可以出現在所有可見的元素中，除此之外，還允許使用負值讓元素不在 tab 鍵導覽的順序中出現，但還是可以用 script 程式取用它，不過由於負值的大小並不重要，所以通常是使用 -1。

加入預設 Tab 導覽順序

下面的範例使用 tabindex 讓 div 元素可以照文件結構排入 tab 鍵導覽的順序之中，因此該元素是可以使用鍵盤取用的。

<div tabindex="0">
...
</div>
負的 tabindex

下面的範例則是使用負值設定tabindex，因此該元素只能經由 script 取用

<div id="progaccess" tabindex="-1">
...
</div>

在這個範例中，div 元素不會排進 Tab 導覽的順序之中,但是由於它有 tabindex 屬性，且其值為 -1 ，表示說該元素還是可以透過程式取用，下面這段程式碼會選用上面所定義的元素，並且使用 focus 函式來取用該元素。

var objDiv = document.getElementById('progaccess');
\\ Focus on the element
objDiv.focus();