Web內(nèi)容無障礙指南（WCAG）2.0定義了如何使web內(nèi)容更便于殘障人士訪問。它定義了web內(nèi)容無障礙的四項(xiàng)基本原則，即可感知、可操作、 可理解和健壯性，為了達(dá)到這些基本目標(biāo)，每條原則之下設(shè)置了應(yīng)遵循的準(zhǔn)則，對每一個(gè)準(zhǔn)則，提供了可測試的成功標(biāo)準(zhǔn)。圍繞這四條原則，我們此次優(yōu)化的目標(biāo) 為：

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

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

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

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

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

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

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

<a accesskey="U" href="#" title="頂部區(qū)域"> ::: </a>
<a accesskey="L" href="#" title="左側(cè)區(qū)域"> ::: </a>
<a accesskey="C" href="#" title="中間區(qū)域"> ::: </a>
<a accesskey="R" href="#" title="右側(cè)區(qū)域"> ::: </a>
<a accesskey="B" href="#" title="底部區(qū)域"> ::: </a>

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

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

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

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

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

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

<div class="mod">
    <div class="hd">
        <h3>Module Header</h3>
    </div>
    <div class="bd">Module content</div>
    <div class="ft">Module footer</div>
</div>

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

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

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

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

• 明眼用戶快速辨識好友，這對視障用戶沒有意義；
• 鏈接至好友主頁，與人名鏈接的作用一致，作用重復(fù)；

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

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