无障碍网页设计（WCAG2.0）
無障礙化是指無論健全人還是殘疾人，年輕人還是老年人都可以平等地獲取互聯網上的信息和服務。無障礙化網站建設不單可以增加網站的受益群體，更是一個有情懷、有擔當的互聯網企業的責任，也是一個互聯網從業人員應該關注到的一個方面。
無障礙化受益人群：
| 普通人 | 普通網站用戶；文化背景和習慣與主流用戶不同的用戶；老年人或兒童等用戶；無障礙化可使得用戶更輕松地使用網站服務，降低使用、學習和理解的成本。 |
| 視力障礙用戶 | 主要包括盲人、低視力、色盲、色弱等用戶。針對這部分用戶所做的信息無障礙化是最通用和最具有代表性的，尤其是盲人用戶。因為這部分用戶是必須依賴于輔助技術進行站點的信息閱讀和交互。這也就要求被訪問頁面必須具備易讀取，可交互，高效率等無障礙化要求。 |
| 聽力、智力、精神、肢體障礙用戶 | 可以通過視覺訪問的用戶，在依賴于系統的一些放大鏡等工具進行正常訪問（也需要一些色差等方面的網頁支持）；肢體障礙用戶在交互方面和視力障礙用戶面臨的問題是類似的，都是需要通過輔助技術和網頁進行交互支持。 |
一、無障礙化標準：
1997年2月，W3C組織成立網絡無障礙推動小組（WAI），制定無障礙化規范和推動無障礙化實施。
1999年5月，W3C推出WCAG1.0無障礙化指導。
2000年7月，在日本沖繩舉行的G8會議發表《實現全球信息化社會的沖繩憲章》
2008年3月，中國信息產業部電信研究院、中國互聯網協會等單位發布《YD/T 1761-2008》標準，規定了無障礙上網的網頁設計技術要求。
2008年12月，W3C發布了WCAG2.0最終版本。-WCAG2.0是信息無障礙化最主要的標準，英文地址：http://www.w3.org/TR/WCAG/
HTML5 ARIA - http://www.w3.org/WAI/PF/aria/
二、輔助技術簡介
放大鏡
這里包括硬件上的放大鏡，安置在顯示器上的；也包括一些軟件上放大鏡，比如操作系統的放大鏡工具或者第三方軟件的放大鏡工具。目的是文字放大，便于用戶識別和閱讀。這里對網頁依賴較小。
盲文點字顯示器
通過將文字通過凸凹的方式轉化成特殊的編碼，以供盲人用戶使用。但這個主要是用于閱讀，交互的操作還是要使用鍵盤類。
讀屏軟件
將頁面信息轉換成語音播放給用戶。代表性的產品包括：NVDA，爭渡，永德，VoiceOver等。從互聯網使用的角度來看，讀屏軟件的使用是最為廣泛的，相對盲文電子顯示器可以更快捷的獲取信息。大家可以安裝下NVDA體驗下讀屏軟件。NVDA下載地址：
http://sourceforge.net/projects/nvda/files/releases/2013.1/nvda_2013.1.exe/download
從上面的輔助技術的介紹，我們不難發現無障礙化的閱讀和交互很大層面上依賴于鍵盤和網頁的交互。那么我們無障礙化網頁建設很大一部分工作就是用于支持鍵盤操作和交互。
在網上搜到的無障礙設計說明：
| 全網站遵循WCAG2.0進行無障礙網頁設計，符合XHTML1.0技術規則，適用于盲用讀屏軟件。 1、全網站頁面可用鍵盤操作，不限于鼠標。 2、網站設置導盲磚快速鍵（:::），使用者可快速到達各主要區塊。 3、網頁圖片均標示文字說明。 4、所有鏈接均添加提示文字。 5、對于網頁色調，框架、語言等提供了相應的改造辦法。 無障礙功能使用說明: 網站頁面分為四大區塊：左側選單區；主要選單區；右側選單區；頭部連結區。 快捷鍵設定如下： Alt+C ：左側選單區，此區塊呈現各網頁的左側內容。 Alt+B ：主要選單區，此區塊呈現各網頁的主要內容。 Alt+N ：右側選單區，此區塊呈現各網頁的右側內容。 Alt+E ：頭部連結區，此區塊列有本網站的首頁頭部連結。 方式二：采用網站自動發聲技術，提供語音版網站。 將網站中英文網頁文字信息直接轉換成標準流暢的語音文件，用戶無須安裝或下載任何軟件便能通過瀏覽器聽取網頁內容，并可通過鍵盤數字鍵任意選擇不同頻道和欄目。 方式三：提供網站瀏覽輔助工具，適用于視力有障礙人群、認知能力有障礙的殘疾人和老年人。 1、自動朗讀網頁內容； 2、對網頁的顯示比例、文字及背景顏色進行定制； 3、支持網站的多語言版本； 4、提供語速調整、音量調整、放大顯示等個性化設置。 |
總結：無障礙化設計主要內容是重新設計網頁，使得屏幕讀取器、語音識別軟件和屏幕鍵盤均能通過特定的語義標識（title、button~）讀取網頁組件本質信息，而WAI-ARIA 角色標準在語義化標識約定方面起至關重要的作用。現在不但Firefox、Safari 4.0、Google 早已支持 WAI-ARIA，而且IE8 也開始部分支持，
三、開發和測試可訪問 Web 應用的步驟
開發和測試可訪問的 Web 應用主要的有以下幾個步驟：
無障礙化網站開發檢查項，
互聯網行業中在無障礙化的推動和實施方面，IBM走得最為深入和徹底。IBM不但成立了全球無障礙化中心，積極推出各種無障礙化教程的同時，也給出開發者建設了一套可以一一檢查的Checklist。Checklist里包括了無障礙化分類、檢查項目、為什么要做這項檢查以及這項檢查的正面和反面的例子。這個就非常利于開發者學習和實施了。
IBM無障礙化網站開發檢查項(IBM Web accessibility checklist – Version 5.2 )
詳情如下: http://www-03.ibm.com/able/guidelines/web/accessweb.html
這里給出一個簡化的中文checklist，其核心內容還是源自IBM（文件已經提交到SVN，后續作為新項目上線前檢查項來做review）
|
# |
檢查項 |
代碼舉例 |
確認 |
|
1 |
圖片等功能性的非文本內容有文字說明。主要是：a標簽title和img標簽alt，但如果已經有說明了的就不需要重復提醒。 |
<img src=”ryan.jpg” alt=”imweb” <a href=”digg.html”> <img |
|
|
2 |
視頻、語音等非文本標簽有文字描述（直播類有文字直播），使得讀屏軟件、布萊葉盲文等工具進行處理。 |
<video ….> <p>IMWeb is …</p> <audio ….> <p>IMWeb is the web team of |
|
|
3 |
產品和交互設計上，網頁內的所有信息有嚴格的邏輯性和順序性。 |
||
|
4 |
給需要用戶填寫的form表單加上label標簽和for屬性。 |
<td> <label for=”reqfield”>* <td><input name=”Name” |
|
|
5 |
表格：用th標簽定義table的頭，用caption標簽描述表格的總體情況；復雜的表格用id和header屬性來說明歸屬關系。 |
<tr> <th id=”class”>Class</th> <th id=”teacher”>Teacher</th> <th id=”boys”># of Boys</th> <th id=”girls”># of <tr> <th id=”1stgrade” rowspan=”2″>1st <th id=”MrHenry” headers=”1stgrade <td headers=”1stgrade MrHenry <td headers=”1stgrade MrHenry <tr> <th id=”MrsSmith” headers=”1stgrade <td headers=”1stgrade MrsSmith <td headers=”1stgrade MrsSmith |
|
|
6 |
對文本描述和分布使用語義化的標簽，且頁面無CSS亦可正常閱讀。這個是不是很熟悉~就不細說了。 |
||
|
7 |
不只用顏色傳達信息，采用其他表示，提示或可辨別的元素來輔助對顏色不敏感的用戶。 |
||
|
8 |
聲音：如果頁面自動播放超過3s的音頻，需要提供暫停和關閉功能。背景音頻對讀屏軟件會造成很大的干擾（eg：可以設置esc快捷鍵或在頭部明顯說明）。 |
Qzone的自動播放背景音樂就給讀屏用戶造成過很大的困擾，后來通過Esc停止播放解決。 |
|
|
9 |
對比度：文字和背景色要有一定的區分度，使得弱視用戶可以分辨， |
||
|
10 |
鍵盤：所有的功能都可以通過鍵盤操作，使得無法依賴視覺的用戶可以通過鍵盤或者鍵盤模擬器進行操作。 |
||
|
11 |
腳本：讓腳本對鍵盤是可用的。不允許出現onfocus=”this.blur()”； 對事件的處理上同時支持鼠標和鍵盤（mousedown==keydown;mouseup==keyup;click==keypress; mouseover==focus;mouseout==blur;） |
<div id=”widget_id” tabindex=”0″ |
|
|
12 |
調整時間特性：給特殊需要的用戶足夠的時間進行操作和閱讀。對于要進行的倒計時開始前，用戶可以取消、調整。 |
不好的： <html xmlns=”http://www.w3.org/1999/xhtml“> <head> <title>Old page. Go to new URL</title> <meta http-equiv=”refresh” content=”3; url=http://w3-03.ibm.com/NewURL” </head> 參考： <p>“This |
|
|
13 |
對閃動、滾動和自動更新的內容，允許用戶暫停、停止或者隱藏。 |
<input type=”button” id=”startQuotes” name=”startQuotes” value=”Start |
|
|
14 |
在網頁里不要出現一秒鐘閃動2次以上的內容，這個對正常用戶也是很不舒服的，何況是讀屏軟件。 |
||
|
15 |
導航：讀屏工具可以通過標簽屬性進行導航或略過。比如：1、可以通過h2等標簽進行頁面內容預覽，2、使用ul和ol或map處理鏈接；3、對重要內容可以添加WAI-ARIA屬性role說明； |
<div role=”search”> <label |
|
|
16 |
主要內容：提供略過導航、直接到達主要內容的方法（提高讀屏效率）。 |
<a href=”#main”><img 或 <div role=”main”>Main content |
|
|
17 |
Frames:為iframe設置title屬性和說明文本，使得讀屏用戶可以輕松判斷該文檔是否需要進行閱讀。 |
<iframe src=”quizSolution.html” Alternative text for browsers that do not understand </iframe> |
|
|
18 |
頁面標題：提供頁面標題，描述頁面的主題和目的，使得讀屏用戶可以判斷自己所在的位置和頁面內容對自己是否有價值。 |
<title>Human Ability and Accessibility Center | |
|
|
19 |
焦點：網頁里保持導航的有序性且符合邏輯。比如對表單、鏈接、重要說明設置合理的tabindex |
<INPUT tabindex=”1″ type=”text” <INPUT tabindex=”2″ type=”text” <INPUT tabindex=”3″ type=”submit” |
|
|
20 |
鏈接;超鏈接需要帶有相應說明，使得讀屏用戶可以判斷鏈接是跳轉到哪里。 |
<h2>Items on sale this week</h2> <p> <a href=”golfclubs.html”>Golf <a href=”bikes.html”>Bicycles</a> |
|
|
21 |
標題和標簽：使用描述性標題和標簽。 |
<form> <label <input name=”name1″ <label <input name=”name2″ </form> |
|
|
22 |
頁面使用的語言：給html元素設置默認頁面使用的語言lang屬性，使得讀屏軟件可以正確閱讀。 |
<html lang=”en”> |
|
|
23 |
頁面內包含其他語言：對標簽使用lang對頁面內特殊語言部分進行描述。 |
<html lang=”en”> <p lang=”de”> Guten Morgen </p> </html> |
|
|
24 |
焦點：當焦點在任何元素上的時候，不應該改變該元素的內容。否則讀屏用戶就不知道該元素的作用。 |
||
|
25 |
輸入：當用戶輸入內容或選擇選項的時候，不自動切換內容，除非已經給用戶提示。 |
||
|
26 |
輸入錯誤提示：對輸入錯誤有明確的提醒，同時為了讀屏用戶更便捷操作可以給input標簽增加aria-required或aria-invalid屬性 |
<label for=”phone”>* Phone <input type=”text” id=”phone” |
|
|
27 |
對需要用戶輸入的地方，給出標簽或說明。 |
<label for=”birthdate”>Birth date |
|
|
28 |
兼容性：盡可能的兼容各種瀏覽器，使用標準的標簽，比如html定義及標簽閉合。這就不多說了。 |
鍵盤支持，要求所有能通過鼠標完成的操作用鍵盤都能達到同樣的效果。
高對比度的支持：在高對比度模式下，屏幕只有黑白兩色，要保證 Web 應用在這種模式下不丟失信息。
讀屏軟件的支持，通常由測試人員完成。測試人員模擬盲人使用讀屏軟件，要保證頁面上的內容基本都能為讀屏軟件所識別，并且能完成各種操作。
如何檢查無障礙化成果：
這里推薦一個測試工具webking，它對無障礙化的實施情況有系統的分析和表報。
1、下載并安裝webking（webking下載地址：http://www.crsky.com/soft/8445.html）
2、打開webking主界面，通過File–>New–>Project（或者Ctrl+N）來創建一個新的測試項目。
3、添加要測試的URL地址，這里就以google為例吧。
4、添加完URL后，webking會以爬蟲的方式進行整站的掃描。這里可以通過”Stop“來停止爬蟲行為即可。
5、在Tools–>Coding Standards–>Check Web Accessibility(WCAG 2.0)，來執行WCAG2.0的檢查。
6、查看報告，很簡單吧。按照說明做具體調整就好了。
各種的JavaScript庫支持WAI-ARIA
圖1.0是模擬無障礙的JavaScript架構，contarct部分正是WAI-ARIA定義的API標準，通過這些標準，把信息傳輸到各種輔助讀取和顯示的AT儀器上。
圖2.0當JS動態發生交互時，默認設置的語義信息已過時；此時可以通過標藍的API進行新的語義信息傳遞。
四、ARIA 用法
1. ARIA API構建
以下平臺均定義了類似的API接口：
Java Accessibility API [JAPI]
Microsoft Active Accessibility [MSAA]
Apple Accessibility for COCOA [AAC]
Gnome Accessibility Toolkit (ATK) [ATK]
UI Automation for Longhorn [UIAUTOMATION]
2. 應用ARIA語境：
1、應用無語義的XHTML 標簽情況；
2、所應用 XHTML 標簽當前狀態改變情況；
3、XHTML 標簽需支持鍵盤索引；
4、XHTML 標簽狀態改變時的CSS動態支持；
3. ARIA role 屬性：
ARIA允許開發者為任何HTML元素添加一個簡單的屬性。ARIA的role根據上下文判斷某個元素的作用和性質，也就是說，比如<div>標簽并不一定是<div>
<div role=”progressbar” aria-valuenow=”5” aria-valuemin=”0” aria-valuemax=”10”>進度條</div>
以上代碼表示：這是一個進度條。
4. ARIA在工作中應用
ARIA通過友好易接受方式傳遞給正在操作或更新的用戶更完整的信息，而不是等用戶所有步驟都操作完畢后，才被告知此行為并未如愿執行。
如何在網頁中應用ARIA ?
Ex_01:
Ex_02:
注意：
目前只在支持可擴展的網頁中使用用ARIA，如果網頁沒有DTD聲明，需要加上xmlns（XHTML namespace）命名聲明,如下：
xmlns=http://www.w3.org/1999/xhtml
參考：
http://accessibility.psu.edu/
開發和測試訪問無障礙的 Web 應用
WCAG 2.0 Guidelines
WebAIM's WCAG 2.0 Checklist
Introduction to WAI ARIA
WAI-ARIA 介紹之一
開發和測試訪問無障礙的 Web 應用
無障礙化網站開發建議書
無障礙網頁應用 WAI-ARIA
總結
以上是生活随笔為你收集整理的无障碍网页设计（WCAG2.0）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 国密证书生成实践
- 下一篇： 软件的可复用性和维护性