DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：讓我們來探索 包含原則 奧妙。它允許我們忘記在我們的社交行為中根深蒂固的那種“他們”和“我們”之間的對立。聚焦包含原則將無障礙/通用設計的爭論從上述利益沖突中解放出來，讓我們擁抱一種更寬闊、更接近自然的設計哲學。最重要的一點，聚焦包含原則也幫助我們了解

讓我們來探索 包含原則 奧妙。它允許我們忘記在我們的社交行為中根深蒂固的那種“他們”和“我們”之間的對立。聚焦包含原則將無障礙/通用設計的爭論從上述利益沖突中解放出來，讓我們擁抱一種更寬闊、更接近自然的設計哲學。最重要的一點，聚焦包含原則也幫助我們了解到，我們不僅是為了別人才重視可訪問性，也是為我們自己好。

設計師的工作一直與“可視性（affordance）”有著密切的利害關系。這個詞自唐納德·諾曼（Donald Norman）的名著《設計心理學》^[注1]後便聲名鵲起，之後更是被阿蘭·庫伯（Alan Cooper）的《交互設計精髓》^[注2]一書帶入用戶界面設計社區。

注1:  The Design of Everyday Things, 直譯為“日常用品的設計” 。“可視性”一詞即沿用的本書中文版的翻譯。
注2:  About Face，交互設計名著，目前已出到第三版。

可視性允許我們一見到某事物就直截了當地知道如何與其交互。例如，當我們看到一扇門旁邊的小按鈕時，我們會馬上意識到這是要用指頭來按的；常識又告訴我們，一旦按下去就有聲響發出，然後房間裡的人就會知道“有人正站在門外呢”。把這一概念移植到視覺設計領域：當我們在網頁上看到一個有3D樣式的按鈕時，我們立馬就能明白這是一個可以用鼠標來“按”的東西。

可視性僅僅是成功的一半

設想這樣一種情景：人們雖然能輕松懂得如何使用某件物品，但是卻缺乏執行操作的能力。絕大部分坐輪椅的人都知道樓梯應該怎麼用，但樓梯的“可視性”無助於他們爬上樓梯。這時，問題便出現了。

相反，雜貨店的寬大自動門對於有或沒有特別通過需求的人都具可視性，並且能被二者輕松使用。我們把這種可視性和廣泛親和性^[注3]（all-embracing accessibility）的結合稱為“通用設計（universal design）”。在通用設計中，自覺的可視性——也就是對如何與物品進行交互產生的隱式理解——實則與用戶執行操作的能力相輔相成。因此，通用設計天生具有親和性（inherently accessible）。

注3:  Accessibility，表示用戶獲取所需內容（結果）的容易程度。根據語境，可翻譯成“可訪問性”、“親和性”、“可及性”，等等。下面譯文中出現的這三個詞都表示英語中的“Accessibility”。Accessible 又表示“無障礙的”、“可訪問的”。

有些設計師覺得通用設計限制了他們的創新。他們爭辯說，要滿足通用性，就必須從“最底層的用戶（neediest-user）”出發進行設計。要設計一部對老年人和青少年都方便使用的電話，那我們就必須先考慮老年人的需求：大的數字按鍵，大的顯示屏等等；然而一旦我們這麼做了，那些年輕的消費者，那些“潮人”們，可能就對這電話沒有購買欲了。如此，設計的最終結果就是一件只對某特定社群有用的產品——我們達到了無障礙設計（accessible design）的要求，但不能算是通用設計。設計的可及性非常重要，卻無法通過一種方式就滿足所有人。因此，明智的做法是，在任何時候都盡量爭取可行的通用設計，而只在必要的時候專注於無障礙設計。

無障礙設計的困境

這種差別在Web設計中意味著什麼？“通用設計”和“無障礙設計”在什麼情況下會被廣泛認為是對等的？無障礙設計元素包括視頻的說明字幕（caption）和音頻文件的文字副本（text transcription）。它們被用作原始內容必需的替代品。另一方面，結構化標記（structural markup）則是一個實現通用設計的有力技巧。使用h1和h2這樣的實義標簽來按照邏輯關系組織內容，有助於形成可訪問性，因為讀者總是習慣在閱讀文字前先掃描標題。設計師能創建獨特的標題樣式，卻是由用戶個人來決定要不要接受設計師的想法。他們大可以關閉圖片顯示或者在運行過程中替換掉你的樣式。

話說至此，對很多設計師來說，因通用設計產生的交互過程的不可預見性會帶來很多麻煩。他們怨聲載道——“我完全不知道屏幕閱讀器是如何工作的”，諸如此類。作為設計師，我們始終沒能完全了解可訪問性或者通用性究竟意味著什麼。要改變局面，就必須先改變我們看待任務的方式。

不得要領

網頁設計師通常喜歡在頁面底部加一些文字和一個到第508條^[注4]的小超鏈接來宣告其網頁的可訪問性。當然，這也是一項符合法律精神的實踐。他們的說明大概都是這樣寫的：“我們盡力讓本站能無障礙訪問。我們會持續測試和修改站點的可訪問性。如果您在訪問任何內容時遇到困難，請盡管聯系我們。”但只要稍微做點可訪問性測試就會發現，很多站點擁有者和開發者都只是想靠聲明的後半部分來輕松逃脫入獄的危險^[注5]。

注4:  Section 508，美國推行的保障殘障人士能夠有效使用電子和信息產品的法律。台灣也有類似的法案，請參看維基百科網頁親和力條目。
注5:  沒有達到無障礙訪問要求的站點會受到法律制裁，作者在此諷刺部分開發者對可訪問性不夠重視。

網站開發者們有時候以為，采用基於標准的開發原則，利用外部CSS和基於DOM的浏覽器腳本技巧分離表現層和行為層，再為圖片加上alt屬性，就算達到第508條要求了。除非遇到問題的訪客找上門來，他們是不會想在網站的可訪問性上多花精力的。這裡的邏輯似乎很公平：好的商業實踐總是將各種需求按照項目約束條件和預期投資回報率（ROI）進行優先級排序。盡管規范的編碼有助於達到無障礙要求，也必須有正確的施行意圖才會產生效用。

以alt屬性為例。所有正規的HTML編輯器和驗證工具都會指出缺少alt替換文本的錯誤。大部分開發者也會糾正這個錯誤——不管是出於通過驗證的目的還是為了獲得可訪問性。不過，通過驗證並不等同於獲得了可訪問性。W3C的HTML5規范(草案) 明確指出了這一點，並詳細示范了如何撰寫基於功能和上下文的替換文本。你也許要反駁說大部分開發者都了解這一區別，但很多網站的表現恰好說明事實並非如此。

可訪問性：分寸之末

就在不久前，一個流行的Web開發論壇上的一篇帖子引起了我的注意。帖子題目是“在<img>標簽裡使用alt和使用title的對比，Firefox裡的alt不起作用”。一些回復讓我震驚了，比如下面這條（不是因為他蹩腳的語法）：

Alt被要求去驗證，但是除非是政府網站，並沒必要使用alt標簽。除非信息實在重要，並且相等的信息發揮了作用，這作用到底是什麼也不重要了……

Alt attributes are required to validate, but unless it is some sort of gov’t website they are not required to use alt tags unless the information is vital and the equal information act, or whatever that act is called.

（囧，確實蹩腳，根本不知道他到底想說個啥……）

就我在論壇上的回復，我提到了國家盲人聯合會（National Federation of the Blind, abbr. ）對Target公司的集體訴訟^[注6]。最終，Target支付了大量金錢，並且同意對他們的網頁開發者進行昂貴的關於可訪問性的強化培訓。）對Target公司的。最終，Target支付了大量金錢，並且同意對他們的網頁開發者進行昂貴的關於可訪問性的強化培訓。

注6:  Target是一家零售企業，在美國各地都有連鎖店。NFB控告他們的網站不方便盲人獲取信息，並且讓盲人無法實現線上購物。關於alt和title的問題，另外推薦Rexsong的使用Alt提升可訪問性一文。

如果一家《財富》500強企業都不能正確處理網頁可訪問性，我們就能想象小公司要達到無障礙需求是多麼的困難。由於下列原因，網頁的可訪問性總是獲得較低的優先級：

1. 我們也想實現無障礙訪問，但是我們只是一個很小的團隊。
2. 話說回來，也沒人真的抱怨過訪問障礙。
3. 無障礙網頁缺少審美上的樂趣，限制了我們的設計選擇。
4. 我們真的不知道該怎樣讓我們的網站/Web應用變得對殘障人士無障礙。
5. 我們的目標用戶不包括殘障人士。

就上面的幾點，只有第四條才算是一個網站或Web應用出現可訪問性問題的正當理由。而這一問題亦是可以解決的——給網頁設計師和開發者少量的循序漸進的可訪問性培訓，然後持續關注這一問題。至於其他幾點…… 只需一點思維上的轉變即可。這一轉變很小，卻將意義重大。

運用包容原則，提升可訪問性的地位

讓我們來探索 包容原則 的奧妙。它允許我們忘記在社交行為中根深蒂固的那種“他們”和“我們”之間的對立。聚焦於包容能夠將無障礙/通用設計的爭論從上述利益沖突中解放出來，讓我們擁抱一種更寬闊、更接近自然的設計哲學。最重要的一點，聚焦包容也幫助我們了解到，我們不僅是為了別人才重視可訪問性，也是為我們自己好。

來看一下來自包容性研究機構（Institute for Inclusion）的定義：

包容行為是指平衡且尊重眾人不同才能、信仰和生活方式之獨特性的實踐和行為。[…] 當某人被定義為某個社群的一員，人們即被他們對這個特定群體的理解和念想所限制。而包容則是在個人層次和群體層次均接受相互之間的類似點和不同點，以達到眾人齊心協力之目的。

Inclusive behaviors are those practices and behaviors that leverage and honor the uniqueness of people’s different talents, beliefs, and ways of living. [...] When one is defined by the concept of a group, people can be limited by their knowledge or beliefs about that particular group. Instead, inclusion embraces similarities and differences at the individual and group levels for the attainment of the common endeavor.

此研究機構亦對包容的核心意義（key elements）做如下探討：

通過在個人、群體和組織機構層面創建與維續條件來蘊育平等、自主賦權、自我知覺和勝任感，從而認知與支撐全人類的內在價值。

Recognizing and supporting the intrinsic value of all human beings by creating and sustaining conditions that foster equity, empowerment, awareness and competence at the personal, group and organizational levels.

只要我們敞開胸懷擁抱包容原則，我們就很難再把他人看作是一個特定群體（比如“視覺障礙用戶”），於是也不再排斥他們。如果我們肯放棄傳統的“我/他”思想，我們就不會再為逃避可訪問性找任何借口。他人的需求變成了我們自己的需求。有了包含原則，我們將不再忽視網頁可訪問性的要求。在我們眼中，可訪問性成了一個通過接受彼此異同實現自主賦權的機會（a chance to create empowerment by embracing our similarities and differences）。

現實世界的一應包容

這樣的討論似乎並無必要——對可訪問性的理論解剖。你可能會說注重包容性並不會立即解決你平常遇到的網頁設計問題。不過別忘了：重視通用設計能讓我們利用好相似性，實現無障礙設計能讓我們處理好相斥性。一些“通用的”技巧和要素如下：

• 為圖像添加恰當的alt屬性。W3C的WCAG 2.0技術規范 清楚明確地解釋了這一點。
• 使用多級標題（h1, h2,等等）結構化頁面內容。
• 如《WCAG 2.0技術規范》示范的那樣正確使用簡單數據表， 復雜數據表，以及th元素。
• 為表單的輸入域創建文本標記（label）。這在WebAIM: Creating Accessible Forms（創建無障礙表單）一文中已有描述。

當我們學會普遍運用這些技巧時，它們就成為了我們的“第二天性”（second nature），我們架設網站時的思維模型（mental model）。最終，我們不會覺得這是所謂的可訪問性技巧，而開始把它們當做固有的、普遍的Web技巧（innate, universal web techniques）。我們將會經歷從運用范例到一應設計（inclusive design）^[注4]的轉變。

注4:  inclusive design，也被翻譯為“和合設計”、“包容性設計”。“一應”是指所有一切，一應設計即包含一切的設計。

這樣做既能減少用戶的麻煩，也能減輕開發者的負擔，因為剩下的可訪問性任務已經被更好地獨立出來。這就為實現完全無障礙的網頁打好了堅實的基礎，開發者也能更加客觀地掂量如何提供額外的親和效果（provide a more objective estimate for additional accessibility efforts）。

如果說無障礙設計和通用設計更多地是以結果為導向的，那麼這一新的一應設計的模型就顯然是以過程為導向的。有一點至關重要：設計師必須認同（indentify with）項目的可訪問性需求。沒有認同，就沒有熱情；沒有熱情，我們就又走回老路——將可訪問性任務視為分寸之末。

讓我們大踏步向前

現在來看看如何將包容性原理融入實踐。試試看將其應用到那個針對可訪問性的反對意見列表中：

1. 我們也想實現無障礙訪問，但是我們只是一個很小的團隊。 要踏上無障礙設計之路並不需要多大付出。WebAIM.org 提供了一份很好的快速參考（英文）。如果你已經知道一些基本的東西，請與團隊分享你的可訪問性知識。例如，聽到其他開發者在討論Ajax時，告訴他們關於無障礙Ajax的信息。利用諸如Word或PDF的非HTML格式，與團隊成員分享核對清單（checklists），你會發現它們將帶來很大幫助。（美國衛生及服務部網站上有很好的資源。[可惜沒有中文版的]）

2. 話說回來，也沒人真的抱怨過訪問障礙。 有人在抱怨的——只是沒當著你的面罷了。上一次你遇到一件很難用的產品卻沒有寫信騷擾廠家是什麼時候？如果你的網站有可訪問性問題，不滿和抱怨無疑是與設計共生共存的。抓住機遇，投身變革！

3.無障礙網頁缺少審美上的樂趣，限制了我們的設計選擇。 恕我不敢苟同：比如尼克·戴（Nick Day），英國聚焦無障礙（Accessibility in Focus）獎的獲得者，他的網站English in Chester的外觀設計就非常出彩。多看看別人怎麼做的吧，互聯網不就是用來幫助我們學習別人的麼。

4. 我們真的不知道該怎樣讓我們的網站/Web應用變得對殘障人士無障礙。 可訪問性對於復雜的網站或者富互聯網應用（rich internet application , abbr. RIA）來說會比較難以實現。但如果你真的拿到一個復雜的、運用了多媒體的豐富應用（multimedia-rich application），那就拿出一點創意來。在附近找一個特殊教育學校，請一名殘障學生志願者為你演示他們是如何與電腦交互的；調查研究其他為影片添加注釋的方式，比方說dotSUB（一個基於wiki概念的影音翻譯網站）。

5. 我們的目標用戶不包括殘障人士。 如果事實果真如此，那就專注於你的目標客戶群。你自己是否亦算其一？想想看：你可一直都是你項目的利害關系人（stakeholder）。那麼，認真考慮你的需求，為了自己，加點猛料。猜猜看，然後結果會怎樣？

傾聽你自己

要如何才能快速入門包容原則？把你的電腦屏幕想象成《2001太空漫游》中的大黑石^[注7]，然後開始你的冒險：在腦海裡構建你的站點。接下來，更進一步，想象你正用耳朵聽你的站點，而不是盯著它看。這有助於你暫時放棄把你的網站當成一本書來對待。有時候大家都遺忘了一點，網站其實是一種形象而生動的媒體（colloquial medium），其表現力與其外顯形式是不可分割的（its narrative is not inseparable from its form）。

注7:  2001: A Space Odyssey，一部1968年拍攝的科幻電影。講述2001年人們尋找黑石根源的故事。黑石在片中的概念相當於激發人們智慧的神秘物。

你的網站聽起來如何？禁用掉樣式表，看一下你面前是什麼。突然之間，你就變得和使用屏幕閱讀器的人一模一樣了——你們有著同樣的需求。獲取最高等級的可訪問性是很有必要的，並且應該成為你日常設計活動的一部分，因為這樣你就不再需要為自己找辯護的理由。擁抱包容原則，你的網站將成為下一個可訪問性的典范。