留住訪客, 從掃除路障做起 (勸說篇)

(刊載於 2001 年 8 月號 Linuxer 雜誌)

您製作的文件為什麼要掛在網頁上? 不論是為了宣揚理念, 傳播知識, 廣告產品, 甚或是為了沽名釣譽 (很正當的理由啊! 這也是筆者的動機之一) 「要讓多一點人看到自己製作的文件」 應該是所有網頁作者或網站負責人一致的期望。 難怪許多網頁採用java, cookie, 動畫……等等技術, 以期吸引更多訪客。 但是使用最新的技術製作最絢麗耀眼的網頁就是增加人氣的唯一方式嗎? 期望招攬顧客的商家, 如果只把心力放在華麗的裝潢陳設, 而對於滿街的拒馬及散落一地的圖釘不聞不問, 恐怕是本末倒置的作法; 經營網站, 又何嘗不是?

水能載舟, 亦能覆舟

先進的網頁技術如果運用妥當, 確實可以讓網頁亮麗耀眼; 但若盲目濫用, 它的負面效果也不輸給拒馬圖釘。

cookie 技術適合用於購物網頁, 方便記錄訪客在不同網頁所點購的產品。 如果使用得當, 不僅方便網站管理員做流量統計, 也方便訪客從他自己的觀點參與設定經常造訪的網站。 但是有些網站別有用心, 未事先徵得訪客同意, 就利用 cookie 記錄個人資料並分析其瀏覽習慣 (而不是只拿來累計統計數字)。 因此重視隱私的訪客經常會內定關閉 cookie 功能。 如果你的網頁強迫訪客要打開瀏覽器的 cookie 功能 (否則就連最基本的靜態資料都不顯示), 那就會喪失很多這類訪客了。

Java script 可以提高網頁的互動性, 但也容易帶來安全漏洞, 重視資訊安全的使用者可能會關掉這個功能; image map 用在地圖上很自然, 但文字瀏覽器看不見; 少量的動畫可以吸引讀者的注意力, 但若你要表達的重點資訊落在畫面的靜態部份, 它 (重點資訊) 想吸引的注意力正好成為動畫的犧牲品; 至於 frame, 它帶來的好處有限 (其實用 server side include 與 table 大致就可以取代) , 卻有阻礙初學者製作書籤的壞處。

耗費人力物力製作絢麗的網頁, 原意是在吸引更多訪客; 但若反而因此失去更多本來可以留下來的訪客, 那真是畫蛇添足, 捨本逐末, 最後甚至得不償失。

優雅降級

所以我們製作網頁的時候應該避免使用新技術嗎? 倒也不必。 大部份的新技術都提供 「優雅降級」 (graceful degradation) 的管道, 只是這個議題不夠火辣搶眼, 難以用來譁眾取寵, 所以市面上的網頁設計書籍及課程大多只是點到為止, 甚或完全略而不談。

何謂優雅降級? 簡單地說, 既然都已經花那麼多精神製作複雜的元件, 何妨再多用一點心製作該元件的「精簡版」或「摘要版」, 讓沒有能力 (或沒有意願) 顯示複雜元件的瀏覽器, 至少可以看到精簡版/摘要版。 每個靜態圖形, 表格, image map 等等, 都應該用 alt 或 summary 提供一串簡要的文字解釋; 每個動畫, 應該讓只能看靜態圖形的瀏覽器看到最重要的一幕; 用 java 製作的超連結應該要有純文字版; 拒絕使用 cookie 的訪客或許就無法線上即時購物, 但至少要讓他看到你在賣什麼東西;...。

好的廚師用沾醬佐料來 增添 食物的美味; 技術不足的廚師試圖用沾醬佐料來 掩蓋 食物的原味。 好的網頁設計, 用影音特效來 加強 文字的表達效果; 不良的網頁設計, 試圖用影音特效來 取代 文字表達的效果, 甚或 掩飾 貧乏的內容。

那家軟體公司值得你為它犧牲訪客?

我是一個使用文字瀏覽器 lynx 的消費者, 經常會在商品網站上看到令人納悶的標示: 「強烈建議使用 ie 4.0 以上瀏覽器」, 奇怪, 我明明是用書店或電器當關鍵字在搜尋, 怎麼卻找到一家賣瀏覽器的公司呢? 大概是搜尋引擎搞錯了吧? 只好摸摸鼻子到下一個網站去看, 反正書店和電器產品的網站多得是。

試想: 一般做生意的商家, 誰傻到要向顧客強烈表達自己的政治立場, 以至於趕跑顧客? (除非老闆自己黨性特別堅強, 志在黨國而不在商場; 目的不同, 自又另當別論) 網站設計又何嘗不同。 除了 ie 與 netscape 之外, 有越來越多網客使用另類瀏覽器, 例如 amaya, kongqeror , mozilla, lynx 等等, 你何苦為了討好微軟或網景 (老實說他們既不可能察覺也不可能在乎你的善意) 而犧牲了自己網站的人氣?

明明可以用簡單, 公開格式表達的資訊, 卻只提供╳╳公司特有的封閉格式檔案讓訪客下載, 或是要求訪客一定要安裝╳╳公司的 plugin 也都有相似的負面效果。 網頁設計者實在需要經常提醒自己: 我是否在以犧牲自己網站的人氣指數為代價, 為他人作嫁衣裳? 更諷刺的是, 這個「他人」, 經常正是箝制我接駁資訊自由, 追查我是否使用非法軟體的軟體公司!

建構網路無障礙空間的輔助工具

Tidy 是 w3c 發展的工具, 不僅可以將網頁修繕至符合 w3c 的標準, 亦可轉換出 xhtml 檔 (以 xml 為基礎, 但又相容於 html 4.0 的規格) 。 筆者數年來用 vi "徒手" 建立的數百網頁, 靠一個命令: tidy `find ~/public_html -name '*.*htm*'` 就完成了大部分的轉換工作 (需配合設定檔) 。 當然有些工作必須人工處理, 例如圖形與表格的文字說明, 如果由程式自動產生無意義的代號, 就失去了建構無障礙網頁空間的原意。

Tidy 所產生出來的網頁, 符合w3c的標準, 所以你可以為他貼上「符合 xhtml 1.0」的標籤。 如果 alt 及 summary 等 attributes 也都經由人工仔細填入有意義的說明文字, 並且網站內沒有提供封閉格式的下載檔案 (還有一些細節要求, 詳見 Bobby 網站) 那麼還可以貼上「無障礙網頁」的標籤, 表明你尊重弱勢瀏覽者的用心。

另外還有 Nvu, Mozilla Composer, Amaya 及 Bluefish 等跨平台的網頁製作軟體。 它們提供的工作環境或許不如網頁製作產品絢麗, 但用這些工具製作網頁, 可以打從一開始就做出比較接近 w3c 標準的無障礙網頁。

"Dive Into Accessibility" 一書提供了許多製作無障礙網頁的技術. 這本書可以下載, 還有中譯本.

長官, 您在意的是外觀, 還是實用?

愛美無罪, 但應以無害實用為前提。 如果你的網頁只注重美觀, 卻在不知不覺中拒絕視聽障人士, 拒絕使用其他瀏覽器的訪客, 拒絕其他作業系統的使用者, 拒絕重視安全與隱私權的電腦玩家...; 而你對手的網頁不拒絕這些人, 那麼你的競爭力在哪裡?

聰明的長官/買方應該鼓勵網頁設計人員把 「符合標準」及「無障礙」 的重要性放在美觀之前; 公教機關的網站負責人, 有責任停止歧視弱勢者; 資訊教育界的同仁, 更應該反省我們是否盡到自己的社會義務, 教導製作網頁的學生要尊重弱勢者, 或者真如韓愈師說中所言, "小學而大遺" 甚至正在間接加深原可避免的數位落差?

附錄: tidy 的設定檔範例

        tidy-mark: yes
        markup: yes
        wrap: 72
        tab-size: 8
        indent: auto
        indent-spaces: 2
        output-xhtml: yes
        doctype: loose
        char-encoding: raw
        clean: yes
        logical-emphasis: yes
        # write-back: yes 很危險, 請小心使用!
        keep-time: yes

銘謝

感謝黃价廷君對 cookie 一段敘述提出指正。

參考資料

  1. http://www.anybrowser.org/campaign/
  2. http://tidy.sourceforge.net/
  3. http://validator.w3.org/check/
  4. http://www.cast.org/bobby/
  5. http://www.cyut.edu.tw/~ckhung/a/c041.php
  6. http://www.cyut.edu.tw/~ckhung/a/c010.php
  7. http://www.w3.org/WAI/GL/WCAG20/ 及 http://www.w3.org/TR/WCAG10/ Web Content Accessibility Guidelines 1.0 and 2.0
  8. http://language.perl.com/misc/div-www.html Diversity Compliance in Web Design
  9. http://www.w3.org/WAI/bcase/benefits-lin.html Summary of Business Benefits of Accessible Web Design
  10. 超棒的一本書: 原文版: http://www.diveintoaccessibility.org/ 中譯版: http://dia.z6i.org/
  11. 留學法國的臺灣人著作的: "網頁寫作心得分享" http://hemiolapei.free.fr/divers/web/web.html
  12. http://validator.w3.org/source/: 離線檢查工具