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