Accessibility簡稱A11Y，指的是軟件產品的可訪問性，易用性。A11Y 的出發點是讓所有的群體所有的人都可以訪問 Web 或者軟件應用，本文主要關注 Web 應用的可訪問性，主要針對訪問 Web 應用有障礙的人士，下面針對幾類主要人群對 Web 應用提出的挑戰以及我們開發時應該解決得問題加以介紹：
視力有障礙的人士，無法像正常人一樣用眼睛瀏覽網頁。此時的解決辦法就是用讀屏軟件將網頁上的內容轉成聲音以幫助用戶了解屏幕的內容。對于聽力和視力均有障礙的人還可以將網頁內容轉成盲文使其變得可讀。由此帶來的需要我們開發人員提供的就包括：鼠標變得毫無用處，因此必須提供鍵盤支持；對于圖片必須提供文字的描述信息；方便的鏈接指導用戶到自己需要了解的內容；顏色變得不可識別，因此僅僅靠顏色識別的信息變得不可識別。為使當前網站上越來越多的音頻和視頻內容被聽力有障礙的人士所理解，就需要提供字幕。
如何使得一個 Web 應用變得更加易用，使得殘障人士都能無障礙訪問呢？首先需要有一個標準，Web 開發者遵循這個標準開發 Web 應用，瀏覽器可以識別這些為可訪問性使用的元素，而輔助科技（Assistive) 可訪問發起組織（WAI）是 W3C 的一部分，主要負責可訪問標準，準則的制定，而 Web 內容可訪問指南（WCAG）是 WAI 制定的一系列文檔。目前的版本是 2.0。WAI-ARIA（WAI- 可訪問的富客戶端應用）則是 WAI 針對 Web2.0 的富客戶端應用提出的一個新的指南，定義了一系列的 role（角色）和 property（屬性），使得動態的 Web 應用以及 Ajax 的應用能夠更加容易得為殘障人士無障礙得訪問。
常用工具簡介
Webking 是 Parasoft 公司開發的一款自動化測試工具，可以使用其進行白盒、黑盒和回歸測試。本文主要關注該工具在 A11y 方面所做的檢查與測試。Webking 所遵循的是 CI162 所規定的檢查列表。Webking 解決得問題就是把不符合 CI162 標準的元素找出來，分析報告包括以下幾類，V：違例； SV：嚴重違例； PV：可能違例； PSV：肯能嚴重違例。WebKing 支持本地文件的檢查測試和創建項 目檢查測試網站內容，包括靜態、動態和 Ajax 測試。首先需要配置 Webking 的測試標準為 WCAG2.0，如圖 1 所示：
圖 1. Webking 配置
對于靜態頁面可以直接拷貝頁面源代碼進行靜態檢查，對于靜態網站也可創建項目進行掃描，如圖 2 所示：
圖 2. 創建靜態項目
圖 3. 創建動態項目
而對于越來越廣泛的 Ajax 應用 Webking 還提供了 Ajax 的功能測試。WebKing 可以檢查出任何不符合規范的 HTML 并且提供了詳細的修改參考，可以幫助開發人員迅速的定位問題并解決。
JAWS 是 Freedom Scientific 公司的一款讀屏軟件，現在的版本是 11.0.734. 讀屏軟件的工作原理是將整個頁面的內容存儲在一個虛擬的 緩沖區內，用戶可以在這個緩沖區內通過鍵盤瀏覽并聽到相應的內容。瀏覽的方式可以是一個字符一個字符的，或者是一行一行的。 當用戶需要與應用交互的時候則需要切換到另外一個模式，不能再依賴于這個虛擬的緩沖區了，需要跳出這個緩沖區去跟應用交互。JAWS 從 9 開始就已經支持對于普通的 Form 元素自動切換到交互模式了。使用 JAWS 的時候不能使用鼠標，否則會導致虛擬緩沖區出現錯誤，從而使得讀出來的內容很亂。另外的一個正確的測試方式是首先啟動 JAWS，然后在打開瀏覽器，輸入對應的 URL，當整個頁面加載結束 的時候再開始操作。在加載的過程中，JAWS 會提示頁面已經加載的百分比。這樣才能保證這個虛擬的緩沖區存儲內容的正確性。
開發和測試可訪問 Web 應用的步驟
開發和測試可訪問的 Web 應用主要的有以下幾個步驟：
開發佳實踐
開發一個可訪問的 Web 應用不僅需要工具的支持，瀏覽器的支持，還需要開發人員遵循一定的規范提供對應的元素信息，才能達到終的目的。下面著重介紹一些開發中的佳實踐。
關于 Image
1. 圖片或者動畫均需提供 Alt 信息，使得讀屏軟件可以將圖片動畫的內容清楚的讀出來。如圖 4 所示：
圖 4.Cat 圖片
|
|
2. 對于某些用于裝飾性的圖片，則需設置 alt 為空，使得讀屏軟件可以忽略此元素。如圖 5 的用于裝飾頁頭的圖片，實際并沒有傳遞有價值的信息。
圖 5. 裝飾性圖片
對應的 HTML 如下：
清單 2. 裝飾性 Image 的 HTML
|
|
必須設置一個空 alt 屬性的目的是為了能通過 Webking 的檢查，并且使得讀屏軟件能夠忽略此元素。
3. 對于圖表文件，alt 屬性的設置則需要簡明扼要的表達出圖表的信息，并不用把里面的細節都詳細得描述出來。例如下面的圖 6：alt 信息設置為銷售額從 1996 年到 2004 年間持續穩定增長，從 400 萬增長到了 1600 萬。并不需要把每一年的增長額都詳細得描述出來。
圖 6. Image 圖表
清單 3. 無需重復設置 alt 的 Image
|
A 的內容已經指明了這是個蘋果手機，IMG 的 alt 屬性就沒必要再設置一次了。否則讀屏軟件會連續讀兩次重復的內容，引起混亂。
5.CSS 將樣式跟結構分離，使得 HTML 代碼結構清晰。很多裝飾性的圖片也都放在 CSS 里面來加載，帶來的一個問題就是在 CSS 里面的圖片在高對比度模式下都無法顯示。如果這個圖片并不僅僅是裝飾性的，還可以觸發功能，那就需要從 CSS 里面拿出來，當成一個獨立的 IMG 或者 INPUT 元素。例如下面的一個提示保存的圖片
圖 7. 保存圖片
寫在 CSS 里面的做法是：
清單 4. 圖片寫在 CSS 里面
|
這樣當用戶切換到高對比度模式，這個圖片就是一片空白，用戶無法再去點擊保存。修改如下：
清單 5. 將 CSS 里面的圖片拿出來
|
|
6. 在一個圖片列表里面選中某個圖片，區別選中去否我們通常的做法是用邊框的顏色來標識。如下圖，選中的圖片邊框為藍色
圖 8. 圖片被選中的正常效果圖
清單 6. 圖片被選中時對應的 CSS
.selectedIcon{
border:5px solid #ACC6F3;
}
.unSelectedIcon{
border:5px solid #C0D4F7;
}
|
但這樣的一個實現實際上違反了可訪問檢查列表中的一項：不能僅僅通過顏色來區分不同的元素，因為在高對比度下只有黑色或白色，這樣的區分在高對比度下是沒有任何作用的。我們很容易想到的一種辦法就是只有選中的時候才加邊框，未選中時則沒有邊框，這樣就可以區分出來了。修改如下：
清單 7. 圖片被選中時修改后的 CSS
.selectedIcon{
border:5px solid #ACC6F3;
}
.unSelectedIcon{
border:0 none;
}
|
這樣引起的問題是，圖片的布局在選中的時候會浮動，增加了 5px 的邊框，看起來效果就很差。那么怎么保證布局又滿足可訪問性的要求呢？ 可以在上面 CSS 的基礎上通過 padding 屬性使得布局正確：
清單 8. 圖片被選中時正確的 CSS
.selectedIcon {border:1px solid #ACC6F3; padding:4px;}
.unSelectedIcon {border:0 none; padding:5px;}
|
這樣保證整體的邊界都是 5px，在高對比度下的效果如圖 9 所示：
圖 9. 圖片被選中時的高對比度效果圖
關于 Table
Table 分為兩類：一類是做布局的 table，一類是數據 table。對于布局用的 table，讀屏軟件沒必要知道這是一個表，可以通過設置 role=presentation 使 JAWS 忽略這個表，只關注里面的內容。對于數據表格，則需要設置 caption 屬性，說明整個表是用來做什么的，使得 JAWS 可以告訴用戶這個表的作用。對于每一個單元內的數據，還應該通過 th 屬性使得 JAWS 能識別這個數據的表頭是什么。對于復雜表，可以通過 id 和 header 屬性來標識。如圖 10 所示 :
圖 10. 數據圖表
以行的數字 5 為例，正常人可以很容易得看出 5 指的是一年級 Mr.Henry 老師這個班的男生有 5 個，但當 JAWS 面對這個數字 5 的時候，怎么能識別出來呢？通過 header 來標識表頭，header 的值就指向對應表頭的 id。對應的 HTML 如下：
清單 9. 數據圖表
|
|
|||
| Class | Teacher | #of Boys | #of Girls |
|---|---|---|---|
| 1st Grade | Mr . Henry | 5 | 4 |
| Mrs . Smith | 7 | 9 | |
| 2nd Grade | Mr . Jones | 3 | 9 |
| Mrs . Smith | 4 | 3 | |
| Mrs . Kelly | 6 | 9 |
關于 Form
Form 元素需要關聯一個 label 元素，所有的 button 都已經有了一個隱含的 label，所以不再需要顯示關聯。對于 Input，Select， Checkbox， Radio button 則都需要顯示一個 label 元素。這樣 JAWS 在面對這個表單元素的時候才能告訴用戶這個表單的作用。例如下面清單 10 中的 input， JAWS 會告訴用戶這個是需要輸入名字的一個輸入框。當 label 屬性不方便使用的時候，還可以通過 title 屬性達到相同的效果，也可以滿足 Webking 檢查的需要。清單 10 中的兩種寫法都可以。但前提是 Name 不需要被顯示出來。當 title 和 label 都設置的時候 title 會被 JAWS 忽略。
清單 10. Form 元素示例
或 |
當一個表單元素如果前后都需要描述的時候， label 就顯得力不從心了。ARIA 規范的出現解決了這一問題。aria-labelledby 屬性可以設置多個值，說明這個表單元素是被那些值所描述的, aria-describedby 屬性則更詳細的擴展了這個描述。如圖 11 所示：
圖 11. 需要多個 Label 描述的輸入框
當 JAWS 把焦點放在 10 上的時候，會告訴用戶 10 表示的是 10 分鐘刷新一次。對應的 HTML 代碼如清單 11 所示。aria-required 的屬性標識這個元素是必須的，JAWS 識別此元素并告知用戶必須輸入此元素。我們可以看到中間的 input 元素被多個元素來描述（aria-labelledby 中的幾個 id 值），這樣 JAWS 就能夠識別這個標簽，并且按照這個標簽的順序讀出前后的 label， 并且提示用戶如果還有更詳細的描述以及如何獲取這個更詳細的描述。當用戶需要時，aria-describedby 所對應的元素信息就會被讀出來。增強了視力有障礙人士與普通人了解內容的一致性。
清單 11. 需要多個 Label 描述的輸入框
|
關于 Tabindex 與獲取焦點的順序
Tabindex 屬性的使用可以使得原本無法取得焦點的元素獲取焦點。目的是為了使用戶可以用鍵盤訪問任何可以用鼠標訪問的元素。我們知道，使用 Tab 鍵可以按文檔順序 tab 到所有可以獲取焦點的元素。Tabindex 可以設置為 -1， 0 或者是任何自然數。
當用戶使用 Tab 鍵瀏覽頁面時，元素獲取焦點的順序是按照 HTML 代碼里面元素出現的順序排列的，有時跟實際看到的頁面順序并不一致。例如圖 12 所示的頁面：
圖 12. 圖片被選中時的高對比度效果圖
按照頁面順序，tab 的順序為自左向右，可實際上操作的時候卻發現“search all”出現在了“go to edit”的前面。對應的 HTML 代碼如清單 12 所示：
清單 12. 頁面獲取 focus 的順序
|
原來是通過 float:right 達到了布局上的效果，實際文檔順序確實是 search all 在前面的。所以為了不引起混淆，后能保持代碼的順序與實際呈現出來的頁面上的順序一致。可以修改上面的代碼為清單 13 所示：
清單 13. 頁面獲取 focus 的順序 — 調整后
|
關于隱藏的內容
隱藏的內容分為兩種，一種是為了布局的需要，在條件滿足的情況下才會顯示出來；另一種是只給讀屏軟件讀的內容：有時候我們為了使讀屏軟件更準確的讀取信息，會提供一些額外的描述來達到此效果，但為了不給正常用戶帶來困擾，這些內容對正常用戶來說是隱藏起來的。隱藏內容我們通常用 display：none 或者 visibility:hidden 來表示，但讀屏軟件同樣也會忽略這類內容。那如何隱藏內容又能使讀屏軟件讀出來呢？另外一種隱藏內容的方式是使用絕對定位使得內容不出現在當前屏幕上，如：{position:absolute;top:-30000px;} 所以在選擇使用哪種方式隱藏內容時就需要慎重考慮，display:none visibility:hidden 對任何人都是隱藏的，如果想只給讀屏軟件讀到就需要使用上面的絕對定位方式。例如在圖 13 所示的菜單的選中項上加上如下的 css：
清單 14. 只給讀屏軟件讀的內容
is selected .access{
position:absolute;
top:-30000px;
}
|
圖 13. 菜單
這樣當用戶使用 JAWS 瀏覽每一個菜單項時，在選中項上就能聽到哪一項是當前的所選中。
高對比度模式的小技巧
系統切換到高對比度模式，只有黑白兩色，很多在正常模式下依靠顏色來區分的（如界面邊界）都無法辨識了，寫在 CSS 里面的很多圖片也都無法顯示出來。此時就需要在高對比度下增加邊界或者另外 DOM 節點來顯示同樣的內容。Dojo 的 WAIState Api 提供了一種方式來判斷系統是否處于高對比模式，如果是則在 body 上增加 dijit_a11y 的一個 CSS。這樣可以在正常模式下顯示一個 DOM 節點在高對比度下顯示另外一個 DOM 節點，從而方便的區分。如圖 14 所展示的正常模式與高對比模式下的對比：
圖 14. 高對比模式與正常模式的對比
正常模式下如左圖所示，子菜單通過一個圖片標識，但這個圖片是在 CSS 里面設置的，切換到高對比度模式即無法顯示出來。此時，我們增加一個在高對比度模式下才顯示出來的節點，達到如圖右所示的效果，在高對比度下顯示一個 + 號。代碼清單如清單 15 所示，在高對比模式下，dijit_a11y 加在 body 上，dijitMenuExpandA11y 所對應的 DOM 即應用右面的 CSS 得以顯示出來。
清單 15. 正常模式與高對比模式顯示不同的 Dom 節點
|
|
總結
本文介紹了開發測試可訪問無障礙的 Web 應用的工具，步驟以及開發中的佳實踐。應用這些佳實踐與小技巧能幫助您在開發中迅速的為您的 Web 應用提供 A11Y 的支持。
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
Apple iPhone 
