無障礙網頁的設計與建置

作者：黃玫瑋 / 臺灣大學計算機及資訊網路中心程式設計組

為什麼要設計無障礙網頁？無障礙網的服務對象是誰呢？無障礙的設計到最後只能呈現純文字的靜態網頁嗎？到底怎樣才算符合無障礙規範呢？

前言
行政院研考會自民國92年推動無障礙網路空間服務開始，許多政府機關紛紛開始著手進行無障礙網頁的設計。設計的同時，由於設計者沒辦法體會何謂網頁的障礙，常常感到困惑。
其實無障礙網頁的設計一點也不難，不要為了貪圖方便或一個很炫麗的頁面，而利用許多無意義的表格、圖片與動畫來設計版面，多餘而複雜的設計，只會讓身心障礙者困惑而無助的迷失在網站上。想聽身心障礙者的經驗分享，可到「無障礙空間服務網」查詢。不只身心障礙人士需要無障礙網路空間，像是身邊的長輩或有老花眼者對於文字太小有閱讀困難，或對於閃爍太快的圖片動畫而造成生理上的不適感也大有人在，不妨到「無障礙空間服務網」體驗一下「無障礙網頁」。

如何設計無障礙網頁？
依「政府網站無障礙化作業規定」之「無障礙網路空間推動時程」，民國96年底前大專院校須建置完成A+等級無障礙網站。

類別機關範圍 95年底 96年底 97年底

教育單位研究機構、大專院校全網站 A A+

高中(職)、國中、國小等全網站 A A+

【A+等級】說明：
符合第1優先等級(A等級)網站，並具有下列3種便利使用者瀏覽網頁功能，可張貼一個A+的等級標章。以下將針對A標章與A+標章之設計原則、規範以及建議提供參考：

申請A標章者，其設計原則：
1. 非裝飾用圖片，應使用有意義之替代文字說明。(1.1)
2. 組織圖、流程圖、統計圖，應額外提供詳細之文字敘述。(1.7、1.9)
3. 使用script語法設計，應提供瀏覽器不支援script時之可及性替代方案。(6.3)
4. 資料表格的行列標題，應使用正確的th標籤標示。(5.1)
5. 多媒體影音檔應提供同步相對應替代的語音或文字說明。(1.15)
A標章主要規範：
機器辨識∕機器檢測：
1.1：H101000 圖片需要加上替代文字說明
1.1範例說明 / 1.1Word說明檔(36KB) / 1.1Pdf說明檔(20KB)
1.2：H101001 對於applet提供替代文字說明
1.2範例說明 / 1.2Word說明檔(28KB) / 1.2Pdf說明檔(20KB)
1.3：H101002 對於object提供替代文字說明
1.3範例說明 / 1.3Word說明檔(32KB) / 1.3Pdf說明檔(20KB)
1.4：H101003 對於表單中的圖形按鍵提供替代文字說明
1.4範例說明 / 1.4Word說明檔(27KB) / 1.4Pdf說明檔(20KB)
1.5：H101004 影像地圖區域需要加上替代文字說明
1.5範例說明 / 1.5Word說明檔(31KB) / 1.5Pdf說明檔(20KB)
6.2：H106001 頁框連結必須是HTML檔案
6.2範例說明 / 6.2Word說明檔(38KB) / 6.2Pdf說明檔(19KB)

機器辨識∕機器檢測：
1.6：H101105 當影像地圖使用為上傳按鈕時，每一作用區域必須分別使用不同的按鈕
1.6範例說明 / 1.6Word說明檔(28KB) / 1.6Pdf說明檔(22KB)
1.7：H101106 當alt屬性的文字陳述大於150個英文字元時，考慮另外提供文字敘述
1.7範例說明 / 1.7Word說明檔(30KB) / 1.7Pdf說明檔(21KB)
1.8：H101007 提供longdesc以外的描述性超連結(如D超連結)，來描述longdesc的內容
1.8範例說明 / 1.8Word說明檔(30KB) / 1.8Pdf說明檔(21KB)
1.9：H101108 圖形替代文字陳述不夠清晰時，提供更多的文字描述(如使用longdesc屬性)
1.9範例說明 / 1.9Word說明檔(30KB) / 1.9Pdf說明檔(21KB)
1.10：H101109 所有語音檔案必須有文字旁白
1.10範例說明 / 1.10Word說明檔(31KB) / 1.10Pdf說明檔(21KB)
1.12：H101111視訊中的聲音必須提供同步文字型態的旁白
1.12範例說明 / 1.12Word說明檔(27KB) / 1.12Pdf說明檔(20KB)
1.13：H101112伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結
1.13範例說明 / 1.13Word說明檔(31KB) / 1.13Pdf說明檔(20KB)
5.1：H105100 對於每一個存放資料的表格（不是用來排版），標示出行和列的標題
5.1範例說明 / 5.1Word說明檔(45KB) / 5.1Pdf說明檔(24KB)
5.2：H105101 表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係
5.2範例說明 / 5.2Word說明檔(54KB) / 5.2Pdf說明檔(24KB)
6.1：H106100 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀
6.1範例說明 / 6.1Word說明檔(35KB) / 6.1Pdf說明檔(22KB)
6.3：H106102 使用Script語言需指定不支援Script時的辦法
6.3範例說明 / 6.3Word說明檔(38KB) / 6.3Pdf說明檔(20KB)
6.4：H106103 若網頁內的程式物件沒有作用時，確保網頁內容仍然可以傳達
6.4範例說明 / 6.4Word說明檔(30KB) / 6.4Pdf說明檔(20KB)
8.1：H108100對由Scripts、Applets及Objects所產生之資訊，提供可及性替代方式
8.1範例說明 / 8.1Word說明檔(42KB) / 8.1Pdf說明檔(20KB)
9.1：H109100 盡量使用客戶端影像地圖替代伺服器端影像地圖連結
9.1範例說明 / 9.1Word說明檔(46KB) / 9.1Pdf說明檔(22KB)

人工辨識∕人工檢測：
1.11：H101210 以可及性的影像來替代ASCII文字藝術
1.11範例說明 / 1.11Word說明檔(38KB) / 1.11Pdf說明檔(20KB)
1.14：H101213多媒體視覺影像呈現時，必須提供聽覺說明
1.14範例說明 / 1.14Word說明檔(31KB) / 1.14Pdf說明檔(19KB)
1.15：H101214多媒體呈現時，必須同步產生相對應替代的語音或文字說明
1.15範例說明 / 1.15Word說明檔(29KB) / 1.15Pdf說明檔(20KB)
2.1：H102100確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來
2.1範例說明 / 2.1Word說明檔(29KB) / 2.1Pdf說明檔(21KB)
4.1：H104200 明確地指出網頁內容中語言的轉換
4.1範例說明 / 4.1Word說明檔(28KB) / 4.1Pdf說明檔(21KB)
7.1：H107200 確保網頁設計不會致使螢幕快速閃爍
7.1範例說明 / 7.1Word說明檔(33KB) / 7.1Pdf說明檔(20KB)
11.1：H111200 如果你不能使這個網頁無障礙化，提供另一個相等的無障礙網頁
11.1範例說明 / 11.1Word說明檔(40KB) / 11.1Pdf說明檔(19KB)
12.1：H112000 需要定義每個頁框的名稱
12.1範例說明 / 12.1Word說明檔(36KB) / 12.1Pdf說明檔(20KB)
14.1：H114200 網頁內容要使用簡單易懂的文字
14.1範例說明 / 14.1Word說明檔(30KB) / 14.1Pdf說明檔(21KB)
A標章設計建議：
1. 圖片替代文字說明：
  A.裝飾圖片(美工圖片、項目圖片)
  �‧項目圖片以alt=“＊”標示
  �‧美工圖片以alt=“”標示
  �‧使用CSS語法改善項目符號
  B.非裝飾圖片(如標題圖片、組織圖、影像地圖、統計圖、驗証碼圖片)
  �‧加上有意義的替代文字說明，不同圖片提供不同說明
  �‧文字說明若太長，請於圖片上方(或下方)額外提供詳細說明
2. 表格、頁框設計：
  A.非行/列標題，勿以<th>標籤標示，應使用<strong>標籤顯現粗體的效果，也能明確標示出資料的重要性。
  B.定義每個頁框名稱，在frame的標籤中使用title屬性。
  C.頁框連結的內容要有意義，頁框所連結的頁面需為網頁格式，不可為圖片或物件。
3. 多媒體設計-影音、聲音、動畫：
  A.多媒體檔案應提供同步文字型態旁白或相對應的替代文字說明
  �‧在object標籤中標示文字說明
  �‧提供額外文字資訊
  �‧提供替代方案連結
  B.Flash應提供替代文字說明或替代方案
4. Script設計：
  A.使用<noscript>撰寫不支援的方法，提供替代文字說明或替代方案。
  B.勿提供網站導覽做為替代方案。
  C.常見範例，如：
  回上頁功能：請提示使用者使用Backspace鍵或ALT+ ←替代。
  列印功能：使用Ctrl + P替代。
申請A+標章者，其設計原則：
1. 上述A標章檢測項目。
2. 網站主選單及其它操作性功能，應確保滑鼠以外(如：鍵盤)之介面操作。(6.5、9.2、9.3)
3. 提供「網站導覽(或網站地圖)」頁面。(13.6)
4. 提供「定位點(:::)搭配快速鍵設計」，鍵盤游標需能依序移動，且快速鍵需能發揮應有之功用。(9.5)
A+標章主要規範：
機器辨識∕人工檢測：
6.5：H206104 若網頁物件使用事件驅動時，確定勿僅使用滑鼠操作
6.5範例說明 / 6.5Word說明檔(36KB) / 6.5Pdf說明檔(21KB)

人工辨識∕人工檢測：
9.2：H209201 對所有網頁內容元素，確保有滑鼠以外的操作介面
9.2範例說明 / 9.2Word說明檔(38KB) / 9.2Pdf說明檔(18KB)
9.3：H209002 確保事件的啟發不要求一定得使用滑鼠
9.3範例說明 / 9.3Word說明檔(46KB) / 9.3Pdf說明檔(23KB)
9.5：H309204 對經常使用的超連結，增加快速鍵的操作
9.5範例說明 / 9.5Word說明檔(41KB) / 9.5Pdf說明檔(20KB)
13.6：H213205 為你的網站提供網站地圖或整體性的簡介
13.6範例說明 / 13.6Word說明檔(31KB) / 13.6Pdf說明檔(21KB)

A+標章設計建議：

定位點與快速鍵：
‧使用3個冒號(:::)來表示定位點。
‧定位點可搭配快速鍵(Access key)一起設計。
‧依版面架構設計定位點(:::)，並設置於區塊的起始處。
‧快速鍵多設計於常用的連結，如主選單、回首頁、全文檢索、…等。
‧定位點可用背景色隱藏，勿將定位點尺寸縮小。
‧將快速鍵說明置於網站導覽(sitemap)上方以便瀏覽，提昇網站親和力。

滑鼠相對應鍵盤的事件：

滑鼠	鍵盤
Onmousedown	Onkeydown
Onmouseseup	Onkeyup
Onclick	Onkeypress
Onmouseover	Onfocus
Onmouseout	Onblur

實作經驗
看了以上的條文說明後，大家可能會對於如何開始感到困惑。首先可以利用無障礙網路空間服務網所提供的線上檢測(或下載檢測工具)，先對於自己的網頁作一個體檢，然後再針對未通過的部分加以修改。反覆檢測/修改幾次容易犯錯的部分之後，應該就可以知道什麼叫做無障礙網路空間。駕輕就熟之後，即使是一個新的設計，也會自然而然地符合無障礙之要求。雖然目前研考會的要求只有到A+等級，但在同仁們的努力下，臺大首頁已經得到AAA頂級評等，這應該對於臺大在世界大學網路排名的提升有所貢獻。值得一提的是，2009年1月份世界大學網路排名Webometrics(World Universities’ Ranking on the Web)，臺灣大學的網路最新排名為世界 55 (去年73)，亞洲第2，再次創下優秀的成績！

結語
另外設計一個相等的無障礙網頁並不是最好的解決辦法，通常身心障礙者想瀏覽的是能常態維護更新的網頁。無障礙網路空間的最終目的，就是希望大家能提供一個更具有親和力的網站，並非要求設計一個過多的特效或炫麗的網頁，只是希望在設計同時能盡量使用正確的HTML與CSS語法，並加註有意義的替代文字說明，降低網路應用的困難與挫折。讓我們一起努力創造「無障礙網路空間」，讓更多人能更方便取得網路資訊，享有便利的網路生活。

※ 資料來源：無障礙空間服務網 / 行政院研究發展考核委員會
※ 參考網址：http://enable.nat.gov.tw/management.do?funId=index