|
為了營造無障礙的信息空間，方便視障用戶使用我們的服務，借助朋友網(wǎng)(pengyou.com)改版時機，我們實施了一些提高頁面可訪問性的實踐。
Web內(nèi)容無障礙指南（WCAG）2.0定義了如何使web內(nèi)容更便于殘障人士訪問。它定義了web內(nèi)容無障礙的四項基本原則，即可感知、可操作、可理解和健壯性，為了達到這些基本目標，每條原則之下設置了應遵循的準則，對每一個準則，提供了可測試的成功標準。圍繞這四條原則，我們此次優(yōu)化的目標為：
- 增強頁面區(qū)塊和模塊的語義。
- 提高屏幕閱讀器用戶的訪問效率。
- 優(yōu)化首頁的鍵盤操作問題和信息理解問題。
1.設置“跳過導航”鏈接，直達用戶首要目的地。
社交網(wǎng)絡的重要特點就是News Feed，動態(tài)地向用戶提供好友的各種消息。通常，用戶登錄網(wǎng)站的首要目的是查看“好友動態(tài)”，視障用戶tab多次才能到達該區(qū)域，“跳過導航”鏈接允許屏幕閱讀器用戶跳過大塊的內(nèi)容和鏈接，用戶訪問新頁面時也不必每次都瀏覽banner和導航，這樣可以節(jié)省視障用戶的時間。
2.劃分網(wǎng)頁區(qū)塊，增強區(qū)塊語義，提高區(qū)塊間跳轉(zhuǎn)的速度。
朋友網(wǎng)的頁面結(jié)構(gòu)是標準的三欄結(jié)構(gòu)，大致可歸納為頂部logo、頁面導航及搜索區(qū)，底部是版權(quán)信息，中間左中右三欄分別為：應用導航、News Feed和推薦信息。各區(qū)塊的信息都較多，尤其是News Feed區(qū)，視障用戶在各個區(qū)域內(nèi)切換時十分繁瑣。
解決該問題的一種方法是設置區(qū)域定位點，即在各個區(qū)域前添加一個僅對屏幕閱讀器可見的錨鏈接，并為該鏈接設置accesskey。
臺灣行政院研考會將這種方法寫入了無障礙網(wǎng)站規(guī)范中，定位點又稱為導盲磚，獨創(chuàng)性的使用三個冒號（:::）來表示，主要用來幫助用戶快速定位和搜索，代碼如下： <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值，即使設置了讀出工具提示。
鍵盤可訪問性一文中分析了使用accesskey的缺點，由于屏幕閱讀器依賴于瀏覽器的功能，不同品牌和操作系統(tǒng)上的瀏覽器在實施accesskey上差別很大，比如激活accesskey快捷鍵的按鍵組合不同，對重復的accesskey的處理方式不同，用戶代理的鍵盤快捷鍵和web內(nèi)容快捷鍵沖突時的表現(xiàn)也不一致。另外一個頭疼的事情就是如何讓用戶了解我們設置了快捷鍵？加上上述的各瀏覽器的細微差異，accesskey的利用率是很低的，所以最后我們沒有使用這個方法。
出處：騰訊isux
責任編輯：bluehearts
上一頁 下一頁 朋友網(wǎng)無障礙優(yōu)化實踐 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 朋友網(wǎng)無障礙優(yōu)化實踐 [1]
第 2 頁 
