Web 2.0 技術中的可訪問性
簡介
可訪問性移除了特定群體訪問信息的障礙，它正在成為 Web 應用程序的公共需求。可訪問 Web 應用程序要幫助的目標群體包括殘疾人、老年用戶和其他難以操作程序的可視及物理元素的人。在現代輔助技術的幫助下，這些人將能夠與軟件應用程序交互，但前提是這些應用程序能全面兼容可訪問性標準。
隨著富客戶機技術的迅速發展，許多 Web 應用程序都已經發展到了 Web 2.0 時代。使用 Dojo 等 Ajax庫或 Flash 等其他客戶端技術，網站正在為瀏覽器帶來更加可靠的用戶體驗。用戶可以動態更新 Web 元素，并在頁面中隨意拖放它們。曾經認為只適用于桌面應用程序的用戶體驗現在已經可供 Web 用戶使用。
2008 年，致力于開發 Web 標準的國際組織萬維網聯盟（World Wide Web Consortium，W3C）發布了 Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0 文檔定義了一系列指導方針，以提高 Web 內容對于殘疾人的可訪問性。WCAG 2.0 旨在涵蓋大多數已有 Web 技術以及可能的未來技術，包括 Web 2.0 技術中的動態內容。
WCAG 2.0 稱，Web 2.0 應用程序中通常存在一些常見的可訪問性問題。這些問題可以分為四類：
- 文檔結構
- 動態內容更新
- 增強鍵盤的可訪問性
- 小部件的可訪問性
在本文中，我們將分別討論這些問題，并提供一些可行的解決方案。
WAI-ARIA 簡介
WAI-ARIA 的全稱是 Web Accessibility Initiative – Accessible Rich Internet Application 套件。它定義了一些方法來提高 Web 內容和 Web 應用程序對于殘疾人的可訪問性。它的一些 Web 2.0 特性尤其有用，比如動態內容以及使用 Ajax、HTML、JavaScript 及相關技術開發的其他高級用戶用戶界面控件。WAI-ARIA 是一組由普通 HTML 標記組成的標記庫，這些標記只能由瀏覽器和支持它們的 Assistive Tools (AT)映射到有用的信息。WAI-ARIA 充當 AT 和 Web 用戶界面之間的協議，這為 Web 頁面用戶界面帶來了更加豐富的信息，比如角色和狀態。圖 1 顯示了 Assistive Tool 與 Web 用戶界面之間的關系。
圖 1. AT 和 Web 頁面之間的關系（使用 WAI-ARIA）
WAI-ARIA 主要包括兩種內容：WAI-ARIA Roles 以及 WAI-ARIA States 和 Properties。表 1 顯示了 WAI-ARIA 內容的主要分類。
表 1. WAI-ARIA 的主要內容
| 角色（Roles） | 狀態和屬性（States and Properties） |
|---|---|
| 基本類型（Base Types） | 小部件屬性（Widget Attributes） |
| 用戶輸入小部件（User Input Widgets） | 實時區域屬性（Live Region Attributes） |
| 用戶界面元素（User Interface Elements） | 拖放屬性（Drag-and-Drop Attributes） |
| 專用區域（Specialized Regions） | 關系屬性（Relationship Attributes） |
| 路標角色（Landmark Roles） |
目前，許多 Web 2.0 特性都無法提供給殘疾人使用，特別是那些依賴屏幕閱讀器和無法使用鼠標設備的人。WAI-ARIA 定義了一些 Assistive Tools 的功能，我們將在后續小節中討論這方面的信息。另外，一些瀏覽器和 Assistive Tools 已經提供了對 WAI-ARIA 的支持，比如 FireFox 3.0 和 JAWS 10.x。
使用 WAI-ARIA 解決動態 Web 內容中的常見可訪問性問題
現在，我們將介紹 WCAG 2.0 確定的四種常見問題，并討論一些解決方案。
文檔結構在當前的 HTML 版本中，無法采用編程的方式來識別頁面元素的功能和作用。因此，要讓屏幕閱讀器將當前頁面位置告訴用戶是幾乎不可能的。此外，屏幕閱讀器也不能識別頁面元素的作用。舉例來說，<div> 可以是彈出窗口、文本輸入框或者其他對象。WCAG 2.0 表示，Web 應用程序應該提供一種快捷方式（通常是一些鏈接）來允許用戶直接定位頁面上的主要內容。這些鏈接將被識別為“跳轉到主要內容”的鏈接。這將幫助用戶快速識別頁面的主要內容，而這是遠遠不夠的。
在 IAccessible 和 IAccessble2 這樣的 GUI 可訪問性 API 中，常見的解決方案是為 GUI 對象提供一個“角色”屬性，用于指定其作用。W3C ARIA 標準也定義了此“角色”屬性。接下來，我們來領略一下角色屬性的魔力，以及如何使用它為 Web 應用程序提供清晰的結構。WAI-ARIA 將所有 HTML 元素劃分為以下幾種角色：
- 基本類型（Base Types）—此角色用于描述角色層次結構的最高層次。基本類型角色都是抽象的，并且不應在內容中使用。這些基本角色包括復合（composit）、路標、角色類型、結構、小部件和窗口。
- 用戶輸入小部件（User Input Widgets）—這些角色適用于表單元素或其他常用用戶輸入小部件。因此，屬于這種角色的元素將用于收集和維護用戶輸入。這些角色包括復選框、組合框和單選按鈕等。
- 用戶界面元素（User Interface Elements）—這些角色適用于圖形用戶界面。這些元素對于向用戶顯示小部件類型非常有用。這些角色包括按鈕、鏈接和樹等。
- 文檔結構（Document Structure）—這些角色描述頁面內容的組織結構。文檔結構通常不具有交互性。這些角色包括文章、文檔和標題等。
- 專用區域（Specialized Regions）—這些角色描述應用程序用戶界面的特殊獨立區域。這些角色包括警告、對話框、進度條等。
- 路標角色（Landmark Roles）—這些角色與文檔結構極為類似，但其作用是充當導航路標，并且通常描述 Web 頁面上的某個區域。這些角色包括應用程序、橫幅、補充說明、內容信息、主內容、導航和搜索。
現在，我們將通過一個示例來演示如何使用路標角色來確定 Web 頁面中的區域。圖 2 顯示了一個典型的網站（http://www.aol.com）。
圖2： 一個典型網站
這個網站包括若干部分：搜索、導航和主內容等。在本例中，您可以通過編寫如清單 1 所示的代碼來使用路標角色。
清單1：向頁面元素添加路標標識符
<body>
…
<div role="search">
The search area
</div>
<div role="navigation">
The navigation area
</div>
<div role="main">
The main content area
</div>
…
</body>
</html>
然后，頁面將被分為三個區域，如圖 3 所示。
圖3：帶路標角色的網站
動態內容更新
內容更新是一個最具有典型性的 Web 2.0 特性。使用 Ajax技術，可以只更新頁面的一些部分，而不用刷新整個頁面。但是，這種更新可能會導致一些可訪問性問題，因為在更新發生時很難提醒殘疾用戶。并不是因為我們無法提示更改；JavaScript 代碼和其他方法都可以捕獲它們。但是，并非所有的消息和更改都是面向用戶的；其中一些是頁面的操作，而將這些事件通知給用戶是不合適的。使用傳統技術則很難確定應該將哪些更改提醒給用戶。
在使用 WAI-ARIA 之前，JAWS 這樣的屏幕閱讀器可以讀取受關注元素的消息或文本，以及一些具有“for”屬性的標簽。在 HTML 中，只有鏈接和表單元素可以接收鍵盤關注。通常，可接收關注的元素表示它們可以被操作。但也有一些純信息元素無法接收關注，但卻需要將它們通知給用戶。圖 4 顯示了一個 Dojo 彈出窗口，其中包含一條提醒消息。
圖 4.帶有一條消息的 Dojo 彈出窗口
窗口打開后，屏幕閱讀器無法通知用戶打開了一個帶消息的窗口。此窗口還鎖定了窗口區域外部的其他窗口部分。這會導致用戶無法控制 Web 頁面，且無法閱讀任何內容。清單 2 顯示了此彈出窗口的源代碼。
清單 2. 彈出窗口的源代碼
waistate="labelledby-cantmove_title" wairole="dialog" tabindex="-1" role="dialog"
aria-labelledby="cantmove_title" widgetid="absolute; top: 194px; opacity: 1;
left: 611p;" title="">
<div class="dijitDialogtitleBar" dojoattachpoint="titleBar" title="unmovable" />
<div class="dijitDialogPaneContent" dojoattachpoint="containerNode" style="width:
auto; height: auto;">
<p>
You should not be able to
<br />
drag this dialog
</p>
</div>
</div>
通過 WAI-ARIA，您可以標識作為“活動”區域動態更改的區域。這使屏幕閱讀器能夠理解內容的動態更新。使用此技術，您可以添加一些額外的功能來提醒用戶，為活動區域提供控制，以及確定可以讀取的新內容量，等等。借助 WAI-ARIA 的“活動”區域定義，您可以解決彈出窗口問題。清單 3 所示的窗口文本代碼在清單 2 的基礎上添加了一個 ARIA “活動”標記。
清單3： 彈出窗口中經過修改的文本部分
You should not be able to
<br />
drag this dialog
</p>
添加此 ARIA 標記之后，當窗口打開時，JAWS 10 等屏幕閱讀器將能夠察覺此事件，并且能夠將消息讀給用戶。
要使用 WAI-ARIA 創建一個活動區域，您應該向帶有“off”、“polite”、“assertive”或“rude”值的元素添加一個“aria-live”屬性。我們也可以將這些值稱作“禮貌級別”，它們指定了當元素值更新時屏幕閱讀器的響應操作。
- aria-live="off"通知屏幕閱讀器忽略更新的內容。它適用于響應不太重要的內容。
- aria-live="polite"會讓屏幕閱讀器將更新內容盡快通知給用戶（需要等待用戶完成當前任務）。屏幕閱讀器可以通過聲音提醒用戶 Web 頁面中出現了一些更新。用戶可以選擇直接跳轉到更新區域，或者忽略更新并在稍后處理它。“polite”是內容更新最常用的值之一，特別是對于狀態通知、天氣或股票更新、聊天消息這樣的事件。
- aria-live="assertive"會讓屏幕閱讀器將更新內容立即提醒用戶，并且用戶必須閱讀這些消息。其中的一個例子就是錯誤消息。
- aria-live="rude"用于被認為是非常重要的更新。這個值會將更改立即通知給用戶，并設置關注區域，要求用戶輸入信息或采取措施。
借助 WAI-ARIA 活動區域，您可以將所有動態更改或更新的內容劃分為若干標準級別，并決定如何通知用戶并與用戶交互。
增強的鍵盤可訪問性
在 HTML 中，只有鏈接和表單字段可以接收鍵盤關注，這意味著用戶可以使用 Tab 鍵來對這些元素設置關注。但是，在 Web 2.0 應用程序中，這種基本行為并不夠。舉例來說，應用程序可能需要關注顯示重要消息的<span> 或<div>。通常，幾乎所有的 HTML 元素都可以使用 JavaScript 等腳本語言來接收關注。但是，這些元素不能由屏幕閱讀器或只使用鍵盤的用戶訪問。
WAI-ARIA 能夠增強鍵盤可訪問性。它允許所有的 HTML 元素接收鍵盤關注，因為 ARIA 擴展了 tabindex屬性作用域。您可以將 tabindex屬性指定給任何 HTML 元素。
表 3 顯示了 tabindex屬性的用法：
| Tabindex屬性 | 關注（Focus） | Tab Order |
| 無 | 默認關注行為（只有表單控件和鏈接可以接受關注） | 遵循默認的選項卡順序 |
| Tabindex = "0" | 可以通過鼠標、鍵盤和 JavaScript 來進行關注 | 取決于元素在文檔中的位置 |
| Tabindex="X"（其中，X 是 1 到 32768 之間的正整數值） | 可以通過鼠標、鍵盤和 JavaScript 來進行關注 | 如果 tabindex值較小，則 tab 鍵順序較高 |
| Tabindex="-1" | 僅能通過 JavaScript 進行關注 | 不是，但設計者可以使用 element.focus()進行關注（作為箭頭鍵或其他鍵的觸發事件） |
我們以<span> 為例。以下代碼是 HTML 中的默認<span> 元素：
以下元素不能從鼠標或鍵盤接收關注；它只能通過使用 focus()方法來接收關注。
以下元素可以從鼠標或鍵盤接收關注。用戶可以使用 tab 鍵來關注此元素，并且 tab 鍵順序取決于元素在文檔中的位置：
here</span>
以下元素不能使用 tab 鍵接收關注：
將 tabindex設置為-1 意味著從 tab 序列中移除該元素。因此，您無法使用鍵盤或鼠標來關注此元素。但是，您仍然可以使用 focus()方法來關注它。
小部件可訪問性
在 Web 2.0 中，小部件表示非 HTML 本機的組件，或通過 JavaScript 特性高度增強的組件。一些常見的 Web 2.0 網站中包括大量小部件，并且其中一些由于過于復雜而無法供殘疾人使用。但是，可以通過一些解決方案來解決此問題。基本上，您應該啟動鍵盤交互并嘗試讓屏幕閱讀器知道小部件是什么以及它的當前狀態和屬性。圖 5 顯示了一個復合框小部件。
圖 5.復合框小部件
復合框允許用戶在字段中鍵入值，同時也可以從列表中選擇預先定義的值。復合框是一個結合了以下功能的小部件：
- 一個可編輯的文本字段
- 一個下拉按鈕
- 一個彈出項列表
復合框的交互步驟如下：
- 文本字段應該位于 tab 序列中。
- 按下向下鍵時，應該顯示彈出列表。
- 用戶可以通過使用向上和向下鍵來更改列表中的選項。
- 用戶按下 Enter 鍵可以將所選項目輸入到文本字段中。
- 當用戶在文本字段中鍵入字符時，使用自動完成特性。
實現這些鍵盤特性并不困難，但是要將此小部件的屬性通知給屏幕閱讀器就不是一件很容易的事。使用 ARIA 的 Roles、States 和 Properties 屬性，您可以讓可訪問技術知道小部件的屬性和當前狀態。
- 包含 3 個復選框項目的 outer wrap 組件應該屬于“combobox”角色。
- 下拉按鈕應該是一個 HTML 按鈕，或者應該屬于“button”角色。
- 彈出項目列表應該包含一個 role="list"。
- 列表中的每個項目應該包含一個 role="listitem"。
- 如果文本字段不可編輯，則必須包含 aria-readonly="true"。
- 提供一個標簽，它通過引用復合框中的文本字段來標識復合框。
通過鍵交互和 ARIA 支持，支持 ARIA 的瀏覽器和屏幕閱讀器將能夠幫助殘疾人訪問此復合框小部件。清單 4 中的代碼是圖 5 所示復合框的呈現了 Dojo 的 HTML 代碼，并且它展示了 Dojo 如何使用 ARIA 來增強小部件可訪問性。
清單 4.可訪問復合框定義
<div aria-expanded="false" aria-labelledby="combo1_label"
widgetid="combo1" role="combobox"
class="dijit dijitReset dijitInlineTable dijitLeft dijitComboBox"
id="widget_combo1"
dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse"
dojoattachpoint="comboNode" wairole="combobox" tabindex="-1">
<div style="overflow: hidden;">
<div role="presentation"
class="dijitReset dijitRight dijitButtonNode dijitArrowButton
dijitDownArrowButton dijitArrowButtonActive"
dojoattachpoint="downArrowNode" wairole="presentation"
dojoattachevent="onmousedown:_onArrowMouseDown,onmouseup:_onMouse,
onmouseenter:_onMouse,onmouseleave:_onMouse">
<div class="dijitArrowButtonInner">?</div>
<div class="dijitArrowButtonChar">▼</div>
</div>
<div class="dijitReset dijitValidationIcon"><br>
</div>
<div class="dijitReset dijitValidationIconText">Χ</div>
<div class="dijitReset dijitInputField"><input
aria-owns="combo1_popup" value="one" tabindex="0" id="combo1"
aria-invalid="false" aria-autocomplete="list" aria-haspopup="true"
role="textbox" name="combo1" autocomplete="off" class="dijitReset"
dojoattachevent="onkeypress:_onKeyPress,compositionend"
dojoattachpoint="textbox,focusNode" wairole="textbox"
waistate="haspopup-true,autocomplete-list" type="text"></div>
</div>
</div>
當用戶使用這個 Dojo 復合框時，屏幕閱讀器會顯示“按向下或向上箭頭來切換項目”。
結束語
當然，我們無法在本文中涵蓋所有可訪問性問題。但是，如果您知道問題所在，則可以找到一些方法來確保 Web 2.0 應用程序的可訪問性。在 WCAG 2.0 之前，解決方案是各不相同的，并且一些常見問題都沒有標準的解決方案。借助 WCAG 2.0，您可以使用一些常見的特性來確保應用程序可以訪問。根據這些已有標準來設計應用程序將幫助您把功能提供給最廣泛的受眾，甚至適用于最新的 Assistive Tools。
留言列表
