Clement in a Nutshell

隨著 handheld device 能力的提升，mobile browser 的操作及晝面顯示越來越接近 desktop PC，幾乎可以說 handheld CSS 已死。

眾所周知，一直以來支援 handheld CSS 的 browser 可謂廖廖可數，各款手機與 PDA 都有自己不同的 rendering engine 去呈現網頁。要把網頁設計能於這些 handheld device 顯示正確一直傷了不少網頁設計者的腦筋。 而原本用來解決問題的 handheld CSS 卻發揮不到應有的功用，原因就是我以前提過的雞與蛋問題。結果，大部份網站還是要個別設立流動版，不但重覆製作，失卻網頁標準 one page, serve all 的精神；大多流動版更是原版的 trim down version，形成流動版的資訊往往殘缺不齊，是為三不像。

輾轉過去，handheld CSS 的使用率仍是舊模樣，但 mobile browser 的發展卻很神速。 Mobile Safari 正藉 iPhone 及 iPod Touch 大舉攻入 mobile browsing / mobile web apps 的市場，激起網頁設計的巨浪，不少當紅網站，如 facebook、google 更對 iPhone 作出優化，情況就像替 handheld CSS 拔喉，離 handheld CSS 壽終正寢之時相信不遠。

因工作關係與幾位同事到訪香港盲人輔導會，了解視障人仕如何瀏覽網站，過程當中加深了我對 web accessibility 的看法。

當日到訪，主要想了解多些視障人仕的輔助工具及其運作。據知香港的視障人仕主要使用螢幕閱讀軟件、螢幕放大軟件及點字顯示器輔助來使用電腦。香港盲人輔導會所具備的軟件有 JAWS 及 ZoomText，也有點字顯示器。JAWS 是螢幕閱讀軟件，ZoomText 是螢幕放大軟件，點字顯示器則是一個把螢幕文字轉為點字的硬件（可參考數碼21的網站），視障人仕會因應需要使用這幾種輔助工具來使用電腦，亦會瀏覽網站。

當日與幾位視障人仕交談過，也看過他們使用以上輔助工具的情況，才發現他們使用電腦並沒有相像中困難，開幾個視窗，同時瀏覽幾個網站也應付自如，而且速度不比一般人慢。當然，大前題是與我們見面的朋友都有接受過使用電腦的訓練，才可以如常人般使用電腦。

先說說 JAWS 的使用情況。當日所見，JAWS 已發展得相當不錯，閱讀中文或一般網站也沒問題，亦可配合一些 hot keys，方便瀏覽網頁的不同部份。JAWS 基本上已可輔助用家正確瀏覽一般的網站，只要網站設計不是太複雜，不會帶來太多障礙，反而據當日的朋友所說，有兩點於 Web Development 的角度看是頗有趣的：一）不要使用 accesskeys ，二）不妨使用 table 把不同的內容分開。

第一點是理解的，因為 accesskeys 有可能會與 JAWS 本身的軟件衝突，而且每個網站設計的 accesskeys 盡是不同，設計者得先要告訴用家此網站的 accesskeys，用家也得要記著不同網站的 accesskeys，結果反而多此一舉，accesskeys 豪不 accessible，更會帶來麻煩。

而聽到第二點時是有一點意外，因為由一個 web accessibility 的對象告訴我使用一個 well-known inaccessible 的方法去做網站，確實有點吊詭。追問下才知原來某些螢幕閱讀軟件因太多網站使用 table-based layout，已發展到可以選擇跳過不同的 table cell，方便用家瀏覽網站。對我來說，這個建議與網站設計主流的方向 ── table-less layout 肯定有別。因 table-based layout 一向為人詬病就是螢幕閱讀軟件不能有效閱讀網站；但原來實情是，只要適當的使用 table，是可以幫助螢幕閱讀軟件的用家瀏覽網站。當然，過於複雜的 nested table layout ，仍然不應使用，大量的 table cell 也要花很多時間才能逐一跳過，依舊會影響螢幕閱讀軟件閱讀網站的便利性。

除了網頁設計，在編寫文章內容時亦應照顧螢幕閱讀軟件的用家，主要是編寫鏈結的文字及圖片的替代文字 (alt-text) 時，要考慮這些文字被螢幕閱讀軟件讀出時的情況，盡量避免混餚。我在另一篇文章也寫過，因為大部份螢幕閱讀軟件用家也會使用 “Links list” 這個功能，鏈結的文字越具描述性就越能幫助他們了解鏈結的作用。而圖片的替代文字也有類似情況，據當日的朋友所建議，若果有些鏈結圖片有特定作用，在編寫替代文字時可以寫多一點，凸顯這個圖片鏈結與一般的鏈結的不同。他舉的例子是一個 tab navigation，用作把不同瀏覽者分類，圖片的設計是幾個較大及顯眼的 tab，他就建議可以在每個 tab 的替代文字前加上 “分類：”，以茲識別。

至於另一款輔助軟件 ZoomText ，會把螢幕放大好幾倍，兼作一些類似 anti-aliasing 的處理，令文字及圖片的邊沿不會因放大而出「狗牙」。但放大的文字圖片不會很美觀，實際模樣可參此網頁，當日看見的是版本 8.1，效果就如網頁所示左方的圖，文字邊沿會有些少凹凸不平。如果網頁有一些設計不善的細小圖示，邊沿亦會因放大後連接起來，有可能只會呈現一個密封的圖示，令這類輔助軟件的用家不明所以。

其實要照顧視障人仕的網頁設計還有很多考慮，我不在此詳述，只想指出一些當日所見的情況，希望和大家分享。網頁設計師應謹記，一些我們看來微不足道的問題，其實在視障人仕眼中可能影響很大，只要多加留意，小許的改善就可建立一個更具親和力的網站。不過想強調網站設計要顧及視障人仕只是 web accessibility 的其中一環，始終親和力是一個大課題，不是一個一次性的習作，應視之為一個長期的改善。

總括而言，這次到訪經驗是很有趣，只可惜見面時間太短，不能因應每個疑問都追問下去。若是能多了解 JAWS 的實際運作，相信會有更大幫助。

延伸閱讀：
Accesskeys: Unlocking Hidden Navigation
Using Accesskeys – Is it worth it?
Writing Effective ALT Text For Images
Tips for Making Accessible Web Page

後話：這次到訪另外也引申有一些值得探討的地方，究竟 W3C 所訂立的標準，有幾多是切合用家／市場需要呢？對於不切合市場情況的標準，應堅持使用嗎？再一個例子就是 CSS 的 handheld media type，訂了標準，可惜甚少流動瀏覽器支援；原因就像雞與蛋的問題，甚少網站設計會有 handheld specificed style sheet，於是就甚少瀏覽器會支援這個標準。對於如何看待這類標準，如何取捨，留待大家探討。

經歷過 Browser wars, DHTML, Flash site 的衝擊，現在再到 Web2.0，明白到作為一個 Web Developer，貫切徹 Web Standards 的重要。可惜當近年 Web Standards 給人談論及推崇時，推行的進度及效果均不理想；香港的情況更見慘淡，除了一撮 Blogger 在其 blog 推行及展現 Web Standards 的好處，我從不見到一個公私營網站會在其網站套用 Web Standards 。歸根究柢，其實推行 Web Standards 有著一些致命的困難。 Continue reading