為了營(yíng)造無(wú)障礙的信息空間，方便視障用戶(hù)使用我們的服務(wù)，借助朋友網(wǎng)(pengyou.com)改版時(shí)機(jī)，我們實(shí)施了一些提高頁(yè)面可訪問(wèn)性的實(shí)踐。
Web內(nèi)容無(wú)障礙指南（WCAG）2.0定義了如何使web內(nèi)容更便于殘障人士訪問(wèn)。它定義了web內(nèi)容無(wú)障礙的四項(xiàng)基本原則，即可感知、可操作、可理解和健壯性，為了達(dá)到這些基本目標(biāo)，每條原則之下設(shè)置了應(yīng)遵循的準(zhǔn)則，對(duì)每一個(gè)準(zhǔn)則，提供了可測(cè)試的成功標(biāo)準(zhǔn)。圍繞這四條原則，我們此次優(yōu)化的目標(biāo)為：

1. 增強(qiáng)頁(yè)面區(qū)塊和模塊的語(yǔ)義。
2. 提高屏幕閱讀器用戶(hù)的訪問(wèn)效率。
3. 優(yōu)化首頁(yè)的鍵盤(pán)操作問(wèn)題和信息理解問(wèn)題。

1.設(shè)置“跳過(guò)導(dǎo)航”鏈接，直達(dá)用戶(hù)首要目的地。

社交網(wǎng)絡(luò)的重要特點(diǎn)就是News Feed，動(dòng)態(tài)地向用戶(hù)提供好友的各種消息。通常，用戶(hù)登錄網(wǎng)站的首要目的是查看“好友動(dòng)態(tài)”，視障用戶(hù)tab多次才能到達(dá)該區(qū)域，“跳過(guò)導(dǎo)航”鏈接允許屏幕閱讀器用戶(hù)跳過(guò)大塊的內(nèi)容和鏈接，用戶(hù)訪問(wèn)新頁(yè)面時(shí)也不必每次都瀏覽banner和導(dǎo)航，這樣可以節(jié)省視障用戶(hù)的時(shí)間。

2.劃分網(wǎng)頁(yè)區(qū)塊，增強(qiáng)區(qū)塊語(yǔ)義，提高區(qū)塊間跳轉(zhuǎn)的速度。

朋友網(wǎng)的頁(yè)面結(jié)構(gòu)是標(biāo)準(zhǔn)的三欄結(jié)構(gòu)，大致可歸納為頂部logo、頁(yè)面導(dǎo)航及搜索區(qū)，底部是版權(quán)信息，中間左中右三欄分別為：應(yīng)用導(dǎo)航、News Feed和推薦信息。各區(qū)塊的信息都較多，尤其是News Feed區(qū)，視障用戶(hù)在各個(gè)區(qū)域內(nèi)切換時(shí)十分繁瑣。

解決該問(wèn)題的一種方法是設(shè)置區(qū)域定位點(diǎn)，即在各個(gè)區(qū)域前添加一個(gè)僅對(duì)屏幕閱讀器可見(jiàn)的錨鏈接，并為該鏈接設(shè)置accesskey。

臺(tái)灣行政院研考會(huì)將這種方法寫(xiě)入了無(wú)障礙網(wǎng)站規(guī)范中，定位點(diǎn)又稱(chēng)為導(dǎo)盲磚，獨(dú)創(chuàng)性的使用三個(gè)冒號(hào)（:::）來(lái)表示，主要用來(lái)幫助用戶(hù)快速定位和搜索，代碼如下：

 ::: 
 ::: 
 ::: 
 ::: 
 ::: 

官方解說(shuō)title屬性值用來(lái)方便語(yǔ)音合成器告知用戶(hù)其所在的網(wǎng)頁(yè)區(qū)域。但筆者使用nvda在IE9和Firefox6中測(cè)試以上代碼，nvda都不會(huì)讀title值，即使設(shè)置了讀出工具提示。

鍵盤(pán)可訪問(wèn)性一文中分析了使用accesskey的缺點(diǎn)，由于屏幕閱讀器依賴(lài)于瀏覽器的功能，不同品牌和操作系統(tǒng)上的瀏覽器在實(shí)施accesskey上差別很大，比如激活accesskey快捷鍵的按鍵組合不同，對(duì)重復(fù)的accesskey的處理方式不同，用戶(hù)代理的鍵盤(pán)快捷鍵和web內(nèi)容快捷鍵沖突時(shí)的表現(xiàn)也不一致。另外一個(gè)頭疼的事情就是如何讓用戶(hù)了解我們?cè)O(shè)置了快捷鍵？加上上述的各瀏覽器的細(xì)微差異，accesskey的利用率是很低的，所以最后我們沒(méi)有使用這個(gè)方法。

我們的目標(biāo)是用戶(hù)學(xué)習(xí)成本低，網(wǎng)間快捷鍵一致（不只是站內(nèi)），會(huì)使用屏幕閱讀器就能夠高效利用我們的網(wǎng)站。

只要使用wai-aria landmark role屬性，即可迎刃而解。landmark role幫助屏幕閱讀器用戶(hù)了解頁(yè)面區(qū)塊的用途，好快速地位到想要到的位置。使用方便，只要簡(jiǎn)單的在元素內(nèi)添加role屬性即可，可使用的值有 banner、complementary、contentinfo、form、main、navigation、search。視障用戶(hù)只要使用屏幕閱讀器的快捷鍵即可，如NVDA按快捷鍵d即可在頁(yè)面地標(biāo)間導(dǎo)覽，這樣就保證了網(wǎng)間訪問(wèn)快捷鍵的一致性，使快捷鍵訪問(wèn)更加可行。

3.強(qiáng)化現(xiàn)行通用模塊的書(shū)寫(xiě)方式，利用屏幕閱讀器的標(biāo)題導(dǎo)航特性，提高視障用戶(hù)在模塊間跳轉(zhuǎn)的速度。

上面我們把頁(yè)面劃分為若干區(qū)塊，現(xiàn)在我們來(lái)看頁(yè)面的更小的單元——模塊。區(qū)塊有若干的模塊組成，模塊可以視為網(wǎng)頁(yè)中的某一功能或某一類(lèi)信息的集合，比如“你可能認(rèn)識(shí)”、“最近訪客”。通用模塊的書(shū)寫(xiě)方式我們借鑒了YUI使用的標(biāo)準(zhǔn)模塊格式，這種div和class的通用格式可以很容易地將模塊從一個(gè)網(wǎng)頁(yè)、區(qū)塊、甚至一個(gè)網(wǎng)站移至他處，Web頁(yè)面已經(jīng)從文檔格式轉(zhuǎn)變?yōu)槟K的集合。

Module Header     

Module content
Module footer

屏幕閱讀器一般都提供標(biāo)題導(dǎo)航的功能，即視障用戶(hù)按某一快捷鍵（NVDA為h鍵）可在各級(jí)標(biāo)題間跳轉(zhuǎn)。我們利用這一特性，就可以方便的在各個(gè)模塊間跳轉(zhuǎn)。在實(shí)踐中，每條feed的結(jié)構(gòu)我們也是按照這種方式來(lái)書(shū)寫(xiě)的，用戶(hù)可以先閱讀feed的標(biāo)題，如果不感興趣可以迅速跳至下條feed, 減少視障用戶(hù)的鍵盤(pán)操作。

4.降低信息噪音，減少干擾。

將重復(fù)信息和為明眼用戶(hù)提供的信息從屏幕閱讀器訪問(wèn)序列中移除。

以feed為例，頭像鏈接的作用：

• 明眼用戶(hù)快速辨識(shí)好友，這對(duì)視障用戶(hù)沒(méi)有意義；
• 鏈接至好友主頁(yè)，與人名鏈接的作用一致，作用重復(fù)；

為了減少干擾，我們可以使用tabindex=“-1”,將頭像鏈接從屏幕閱讀器訪問(wèn)序列中移除。

以上是我們初步優(yōu)化的部分要點(diǎn)，仍然有許多地方需要優(yōu)化，如彈出層焦點(diǎn)控制、動(dòng)態(tài)信息通知、組件可訪問(wèn)性等，我們會(huì)持續(xù)跟進(jìn)。

參考資料：

1. Web Content Accessibility Guidelines (WCAG) 2.0[EB/OL].?http://www.w3.org/TR/WCAG20/ , 2011.9.21
2.鍵盤(pán)可訪問(wèn)性[EB/OL].?http://www.topcss.org/?p=237, 2011.9.21
3. Accessible Rich Internet Applications (WAI-ARIA) 1.0[EB/OL].?http://www.w3.org/TR/wai-aria/roles#landmark_roles , 2011.9.21
4. 一探無(wú)障礙網(wǎng)頁(yè)的定位點(diǎn)（導(dǎo)盲磚）[EB/OL].?http://bootleq.blogspot.com/2008/07/blog-post.html , 2011.9.21
5. YUI Library Examples: Container Family: The Module Control [EB/OL].http://developer.yahoo.com/yui/examples/container/module.html , 2011.9.21

源地址：http://isux.tencent.com/p……practice.html