1.1 什么是網頁親和力

互聯網的發明，改變了整個世界，將許多本來不可能完成的事情化為可能。萬維網（World Wide Web，WWW）又把這個影響力往前大幅推動：先是改變了人們對“文件”的想象與使用，接著多媒體及互動藝術也借由網頁成為互聯網的一部分。現代的網頁可以用來聽歌、買書、購票，乃至于聊天、玩游戲、處理文件、項目管理，甚至找停車位，是為Web 2.0風潮。

網頁上能做的事越來越多，網頁卻未必越來越好用，有些失敗的網站一點兒也不好用，因此乏人問津；還有許多網站則像是專門為某些特定人士打造一般，對多數用戶而言好像隔了一層阻礙，有一種距離感而難以親近，這實在算不上成功的網站。

舉例來說，視頻聊天網站，理應能讓肢體不便的人，有機會與其他人面對面地聊天，而不用大費周章地走出戶外、移動到世界各地；但是許多這類的網站并未設計妥當，用戶必須仰賴精細的手部操作，用鼠標或鍵盤來啟用視頻聊天的功能。結果，肢體不便的人仍然無福享用這些網絡技術帶來的便利。

又例如在線上書柜網站勾勒出的愿景中，人們不用起身走到自己的書架前，也不用跑去書店或圖書館，就可以實時取得書籍內容，加以查閱運用；但是許多這類的網站并未設計妥當，結果視力不好的用戶沒辦法把文字放大，對屏幕閱讀不適的用戶沒辦法擷取內容用打印機印出來，撰寫期刊論文的用戶引用文獻的時候沒辦法直接把這些內容以數字方式復制，而得自己謄寫一遍……結果此類網站除了可以查詢某段內容在哪本書的哪一頁之外，用戶還是得取得實體書本翻閱使用，原本將書籍內容數字化放到網頁上的用意也就浪費了。

為了解決這樣的窘境，陸續有人投入“網頁親和力”的研究，研究如何讓網頁對人們更為親善、使內容便于被使用，尊重用戶的主觀介入，讓用戶感到自在舒適，并且能依其需求及指定的方式，來運用、更改網頁的內容、結構或行為。

1.1.1 網頁親和力在做些什么

將網頁親和力付諸實踐，意味著對網頁內容各個細節的謹慎與堅持。舉例來說，網頁中幾乎所有的非文字內容如圖片等，都可以另外提供一份用文字表達的替代內容，這種替代內容常稱做“替代文字”或“alt文字”，因為多半是通過(X)HTML組件中的alt屬性來撰寫的。

以網頁上充斥的圖片為例，有些圖片僅僅作為裝飾，有些圖片則要用來表達重要的內容意義；有些用戶因為種種緣故（例如眼睛疾病、信息軟件或硬件無法支持等）而看不到這些圖片，就得靠這些替代文字來取用圖片內容。具有替代文字的圖片，在網頁源代碼中看起來可能像這樣：

<img src="up.png" alt="上漲" />

在一般的圖形式網頁瀏覽器（例如Opera、Firefox、IE等）中，如果關閉圖片顯示，或者在網頁已加載而圖片還沒下載的時候，上述這段網頁源代碼就會在原本顯示圖片的區域內，顯示出“上漲”這兩個字。在純文字瀏覽器（例如Lynx等）中，則會直接顯示出“上漲”這兩個字，并可能以不同于網頁內文的其他色彩來表達。如果用的是語音瀏覽器，或者以讀屏軟件（例如JAWS、Window-Eyes等）搭配一般網頁瀏覽器時，就會把這張圖片念做“上漲”。

因此，在所有無法看到圖片的情況下，不論這個限制是來自用戶還是軟/硬件，用戶都能夠了解這段內容的意義。事實上，由于有了這個替代文字，因此在搜索引擎（例如谷歌等）中輸入“上漲”，就可以找到這張圖片，以及含有這張圖片的網頁。

由于網頁設計者在親和力上下了功夫，所以不論圖片有沒有顯示出來，網頁內容都同樣能傳達給用戶。

如果撰寫網頁時沒有幫這張圖片加上替代文字，就會產生一些麻煩。以圖1-1為例，這是某個股市行情網頁上的一個表格。

圖1-1 股市行情網頁上的一個表格

這個表格中運用圖片來表達股價的漲跌情況；如果網頁設計者為這些圖片妥善撰寫了替代文字，則關掉圖片顯示功能時，瀏覽器將會繪制出圖1-2所示的畫面。

圖1-2 未加載圖片時，會顯示出替代文字的內容

純文字瀏覽器的結果則會如圖1-3所示。

圖1-3 純文字瀏覽器會直接取用圖片的替代文字

在這兩種情況中，圖片內容改以文字表達，因此用戶仍然能夠理解及使用網頁內容。如果沒有替代文字，同樣的網頁就會如圖1-4所示。

圖1-4 未指定替代文字時，信息內容將難以取用

原本應該是圖片內容的區域，顯示為“圖像”字樣（某些版本的瀏覽器會直接顯示出圖片的文件名），讓網頁內容變得難以理解，視障用戶更是完全沒辦法使用網頁。

正如上述范例所示，撰寫網頁時提供額外的細節，就是一種網頁親和力的實踐，而視障用戶則是最直接的受惠對象。除了視障用戶能從網頁親和力中獲益外，有其他障礙的人也需要網頁親和力。例如聽障用戶無法聽到網頁影片的對白，這時候如果能夠提供額外的字幕文件，并且以同步的方式播放，就能夠讓聽障用戶了解影片內容（請參見第7章與第8章的說明）；任何無法聽到聲音（例如上班中而不能打開計算機音箱或聲卡發生故障）的用戶，以及搜索引擎，也都能利用這個額外的字幕文件，取用網頁媒體內容。

1.1.2 網頁親和力涉及的議題

除了要顧及內容在各種不同的媒體上表達外，輸入也是網頁使用上不可或缺的一環，也是親和力議題的范疇。一般來說，具有親和力的網頁設計，較不會仰賴特定的輸入設備；也就是說，不會做出非要用鼠標不可的設計。肢體殘障、行動不便的用戶，以及使用手機等設備上網的用戶，都是這種“與設備無關（Device Independent）”設計理念的主要受惠對象。

除了網頁編寫的實務細節外，網頁瀏覽器（以及其他軟硬件）要如何支持這些設計，還有網頁設計軟件要如何落實這些考量，也都是網頁親和力的實際工作事項。

肢體不便、視力不良、閱讀障礙等身心能力有所缺損的用戶，是網頁親和力的第一批受惠者，也是網頁親和力的實施中最顯眼的目標族群。但網頁親和力不是達到“網頁無障礙”就足夠了；不論是否是身心障礙人士，任何人都可以從網頁親和力中獲益。

日常生活中處處充滿著對親和力的需求。搭乘飛機、高鐵等交通工具時，幫你打理各種特殊需求的服務人員就是這親和力的一環；走道上鋪設的地毯、座椅的坐墊、扶手、窗戶的窗簾、放置小物件的空間、可調整的照明、空調、座椅等，通通都是基于親和力的考量而存在的──雖然沒有任何一項是不可或缺或無可取代的，但若缺少了其中任何一項，都會讓旅行體驗變得非常糟糕。

親和力也影響這本書的閱讀體驗。如果紙張嚴重反光、字太小、行距過擠、灰度或色彩的對比不足、裝訂不佳、書本太厚或太重、用字遣詞過于艱澀冷僻，或者是改以克林貢文 撰寫，相信本書就會形同廢物，就算內容再好，也沒人能讀得下去。

使用計算機時，鍵盤及鼠標的操作是否容易、屏幕顯示是否清晰易讀、各種程序的行為能不能按照需求自行調整，就連畫面或文件能不能用打印機漂漂亮亮地打印出來，通通都是親和力所面對的課題。在各個不同的領域中，親和力都是設計的一環。親和力設計的共同目標是：讓用戶與整個環境有更多互動的體驗，感到舒適，甚至要能樂在其中。

網站在其設計及開發的生命周期中，有信息架構師、用戶體驗及親和力策略專家、視覺設計師及技術開發者、文案作家和編輯等不同角色參與，每個人都該注意親和力議題。以文字、鏈接、照片、音頻和視頻等各種形態表達的內容，是任何網站的基礎，如何確保所有的內容都具有親和力，則仰賴全體人員的努力與合作。形形色色的知識與技術必須加以整合，讓所有與網頁設計有關的人，不論是出錢的投資者，做決策的主管，乃至于撰寫每一行程序、網頁源代碼的設計師與開發者，都能夠對網頁親和力的概念加以理解，正視其影響力，并能用正確的方式，制作出具有親和力的網頁。