94年度無障礙網路空間 服務推廣教育訓練 講師：陳育亮 世新大學資管系副教授兼電算中心主任

大綱 認識無障礙網頁開發 第ㄧ優先等級(A)規範與實例 新增等級(A+)規範與實例 第二優先等級(AA)規範與實例 FreeGo檢測工具介紹 相關製作工具介紹 人工檢視原則與要點

認識無障礙網頁開發

國際標準 W3C（World Wide Web Consortium） WAI (Web Accessibility Initiative) 「全球資訊網協會」主導國際全球資訊網技術的標準機構 http://www.w3.org/ WAI (Web Accessibility Initiative) 「資訊網可及性推動組織」，W3C的組織之ㄧ http://www.w3.org/WAI/ WCAG (Web Content Accessibility Guidelines） 「無障礙網頁內容可及性規範」，由WAI定義的文件 http://www.w3.org/TR/WAI-WEBCONTENT/ Section 508 其內容主要參考WCAG標準訂定的無障礙網頁標準。美國聯邦政府以 Section 508 作為親和力指導原則 。 http://www.section508.gov/

國內標準 我國的「無障礙網頁開發規範」 包含十四條規範以及九十條相關的檢測要點 九十條檢測要點分屬第一優先、第二優先、第三優先，又可區分為機器辨識/機器檢測、機器辨識/人工檢測、人工辨識/人工檢測三種

了解無障礙網頁 開發無障礙網頁並不困難 基於W3C的HTML規範。 是網頁設計一種具體落實的目標。 講究平權國家的進步指標。 無障礙網頁是服務「所有的使用者」，而對廣大身障者更是不可或缺的。 要騙過無障礙網頁檢驗器是很容易的，但是那樣不會讓妳的網頁無障礙。 無障礙的相關規範並不出脫於W3C的HTML規範，僅是一種網頁品質提升與改善人機介面的自我要求，沒有用到特別困難的技術。 無障礙規範其實正是對網頁設計一種具體落實的目標。 工業設計裡的人因工程學、軟體工程裡的人機介面設計 – 操作互動上要便利且舒適、訊息回饋上要充份且明確、用途功能上要實用且合邏輯習慣。 講究設計上的細節是一種對品質的要求，是進步的表徵。

網頁無障礙 對誰有好處? 無障礙的服務對象是所有人 網頁無障礙化有些額外的好處，例如： 例如：老人、視力不佳者、行動不便時… 不同的對象、不同的設備、不同的環境 網頁無障礙化有些額外的好處，例如： 圖片有 Alt，就能被正確搜尋到（search） 網頁結構清楚易維護（maintain） 網頁內容正確呈現 （減少瀏覽結果不同情況） 廣告效益（增加資訊傳達機會，見下頁範例）

網頁無障礙 對誰有好處? e-mail廣告郵件 現在mail通常會把圖片封鎖，在圖片未呈現時，有替代文字說明，也能達到廣告效果。

網頁無障礙 對誰有好處? 如沒有替代文字說明，即畫面呈現為一片空白。

另闢純文字版好不好 出發點是好的，但是應注意 如何保持各版本內容的一致及更新效率 可依照使用者需求設計網站，但應維持基本無障礙設計 並非建議全網站都為純文字版 W3C/WAI 不推薦 身心障礙朋友希望接觸(看、聽、摸)到一般的版本 Google 依據點閱率排序，純文字版網頁將更難獲得前面的排序

無障礙網頁與以往的網頁製作方式有何不同 網頁文件的結構性比視覺呈現更重要。 網頁設計師需要看懂html標籤。

不當使用html標籤： 例如<th>標籤使用 錯誤範例： 使用<th>標籤凸顯”2005南投美荔鳳梨節” </tr> 活動時間 活動主題 主辦單位 94/07/02-94/07/03 2005南投美荔鳳梨節 台北市政府 94/07/12-94/07/14 2005青年客家東勢文化學習營 行政院農業委員會

不當使用html標籤： 例如<th>標籤使用 維護建議： 應使用<strong>標籤，同時顯現粗體的效果，也能明確標示出資料的重要性。 <table width="94%" border="0" summary="活動預告表格中..."> <tr> <th>活動時間</th> <th>活動主題</th> <th>主辦單位</th> </tr> <td>94/07/02-94/07/03</td> <td><strong>2005南投美荔鳳梨節</strong></td> <td>台北市政府</td> ... </table> 活動時間 活動主題 主辦單位 94/07/02-94/07/03 2005南投美荔鳳梨節 台北市政府 94/07/12-94/07/14 2005青年客家東勢文化學習營 行政院農業委員會

檢測碼格式

檢測等級 第一優先等級(A) 新增A+等級 第二優先等級(AA) 第三優先等級(AAA) 開發網頁時必須遵循這個等級的檢測碼 具有網頁導盲磚(:::)搭配鍵盤快速鍵、網站導覽功能及網頁瀏覽工具具有使用鍵盤瀏覽設計 第二優先等級(AA) 開發網頁時應該滿足這個等級的檢測碼 第三優先等級(AAA) 開發網頁時可以納入這個等級檢的測碼 由於操作介面(網頁程式)的數量多介於數十到數百之間，工作量不大。但相對的技術性較高，並受限於開發工具。而且一些Menu、Data Grid、List的元件目前並不支援無障礙處理 Script Based的 PHP、ASP、Perl比較不受影響，反而是相對正規或複雜的語言、平台如ASP.NET、Web Sphere限制較多； 在 2003 年 6 月，Microsoft 發佈了ASP.NAT Hotfix Rollup Package 　(visual studio 2003) Microsoft已經發布聲明，在Visual Studio 2005中會提供符合508與WCAG規範的網頁檢測工具、UI控件。 Web的應用系統一定要無障礙化？應該看目標使用者是誰。 你能夠保證….

第ㄧ優先等級(A) 規範與實例

第一優先等級(A) 主要規範 圖片與替代文字 較長的替代文字 其他替代文字 Script指定不支援的辦法 影像地圖替代文字 表格設計 頁框設計 安全地使用色彩 CSS與無障礙網頁製作

圖片與替代文字 螢幕閱讀軟體可以讀得到這段文字 純文字瀏覽器會把這段文字顯示出來 Google 會為這段文字建立索引 視覺性瀏覽器(例如IE， Netscape)則會用工具提示或者在狀態列顯示出來 設計原則 對img 標籤提供alt 屬性 <img src=“a.jpg” alt=“最新消息”> 1.1：H101000 圖片需要加上替代文字說明

圖片與替代文字 實例分析﹕ alt圖形替代文字顯現 http://www.yatsen.gov.tw/chinese/國立國父紀念館

圖片與替代文字 條列式項目的小圖示 不當的示範：故宮最新消息頁http://www.npm.gov.tw/main/hmain.htm 不當的示範：行政院農委會首頁最新消息 http://bulletin.coa.gov.tw/show_index.php

圖片與替代文字 標題圖像 不適當的寫法：審計部審計法令頁 http://www.audit.gov.tw/law.asp

圖片與替代文字 維護建議： 有意義的替代文字。 條列式小圖示的alt可採用“*”。 無意義的裝飾性圖示可用alt=“”標示。 用CSS修飾項目符號（ Use style sheets to change list bullets http://www.w3.org/TR/WCAG10-HTML-TECHS/#list-bullets 見範例） 條列式項目的圖示範例

長的替代文字 設計原則： 替代文字無法充分表達圖片內容時，需在網頁上另外提供說明。 1.7：H101106 當alt屬性的文字陳述大於150個英文 字元時，考慮另外提供文字敘述

長的替代文字 實例分析： http://www.boaf.gov.tw/boafwww/index.jsp?a=np&ctNode=9&CtUnit=4&BaseDSD=7 (農業金融局)

長的替代文字 http://www.fdc.gov.tw/ct.asp?xItem=598&CtNode=576(財政部財稅資料中心位置圖)

長的替代文字 http://www.vghtpe.gov.tw/~wtjan2/nicc/SARS-spec01.htm(台北榮民總醫院檢體處理流程圖)

長的替代文字 另開說明網頁 http://www.vghtpe.gov.tw/~ctc/ (台北榮民總醫院癌病中心)

其他替代文字 提供多媒體說明，讓身心障礙者瞭解多媒體內容 影片、聲音 視覺障礙可以用聽的，建議聲音可以自由關閉 對白/獨白、字幕 使聽覺障礙可以讀取並了解內容。 歌曲、歌詞 聽覺障礙者可透過文字瞭解歌曲內容 1.2：H101001 對於applet提供替代文字說明 1.3：H101002 對於object提供替代文字說明 1.10：H101109 所有語音檔案必須有文字旁白 1.12：H101111 視訊中的聲音必須提供同步文字型態的旁白 1.14：H101213 多媒體視覺影像呈現時，必須提供聽覺說明 1.15：H101214 多媒體呈現時，必須同步產生相對應替代的語音或文字說明

其他替代文字 設計原則： 做法多種，以傳達多媒體資料中主要資訊為主 在object標籤中需標示文字說明

其他替代文字 實例分析： http://www.cib.gov.tw/Media/Media_Short_Film.aspx(刑事警察局影音資料專區) 以文字敘述另外提供影片中的對白內容，在無法「聽」的情況下也可以得到該影片的重要資訊。

其他替代文字 僅通過機器檢測 (避免使用) http://sld.judicial.gov.tw/default.htm (台灣士林地方法院) Flash動畫實例： 僅寫「Flash首頁物件」，而未提供任何其他使用該網頁的替代方法。

其他替代文字 同時通過檢測並提供文字連結替代(正確範例) http://www.hmv.gov.tw (新竹區監理所)

其他替代文字 http://www.hccg.gov.tw/intro/intro09_1.cfm (新竹市政府交通運輸) Flash動畫範例： 在網頁下方提供文字連結，使用者在無法使用flash動畫時，可以點選進入文字說明頁面。

其他替代文字 維護建議﹕ 範例:交通部觀光局雲嘉南濱海國家風景區管理處(http://www.swcoast-nsa.gov.tw/)擷取部份程式碼 在多媒體(Flash) 附近提供替代性文字式連結

Script指定不支援的辦法 設計原則： 使用<noscript>撰寫不支援的方法，範例： 使用JavaScript時，為避免瀏覽器不支援，需另行製作不支援的替代方式，便利使用者操作。 設計原則： 使用<noscript>撰寫不支援的方法，範例： <script language=“JavaScript” src=“m_menu.js”></script> <noscript> 您的瀏覽器不支援 javascript，所以無法使用本網頁上所設計的主要選單。請選擇一般<a href=“menu.html”>主要選單</a>網頁，將可繼續使用本網站其他網頁。 </noscript> <script language=“JavaScript” src=“xx.js”></script> <noscript> 您的瀏覽器不支援 javascript，請選擇本網站的<a href=“noscript.html”>純文字版</a>，將可同樣瀏覽本網站訊息。 </noscript> 6.3：H106102 使用Script語言需指定不支援Script時的辦法

Script指定不支援的辦法 實例分析： 混亂的Javascript替代方式 http://www.cwb.gov.tw/V4/index.htm(中央氣象局) 重複敘述 敘述不明

Script指定不支援的辦法 保持畫面完整性， 並真正能夠提供替代方式 http://e-service.cwb.gov.tw/espros/serviceV4. htm (中央氣象局便民服務網頁) 提供有用的替代方式。（在Lynx依然可使用）

Script指定不支援的辦法 維護建議： 盡量保持畫面完整 提供真正能夠替代的使用方式

影像地圖替代文字 每個連結區域AREA標籤都提供替代文字說明，身心障礙人員才能了解區域內容 設計原則： 個別AREA 標籤中標示 alt文字 1.5:H101004 影像地圖區域需要加上替代文字說明 1.13：H101112伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結

影像地圖替代文字 實例分析﹕ 連結區域未標示文字 http://ph.med.ncku.edu.tw/class.php (成功大學公共衛生研究所網頁)

影像地圖替代文字 對各連結區標示文字 http://www.klcg.gov.tw/web/mayor/may03_01.asp(基隆市政府機關組織網頁)

影像地圖替代文字 提供額外方法 http://www.moj.gov.tw/chinese/f23_1.aspx (法務部部內組織網頁) 1.13：H101112伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結

表格設計 為了讓視覺障礙者可清晰理解表格資訊，必需標明表格標題 、結構標示，以方便障礙人士以輔具閱讀 5.1：H105100 對於每一個存放資料的表格 『不 是用來排版』，標示出行和列的標題 5.2：H105101 表格中超過一行/列以上的標題，須以結構化標記確認彼此間的結構與關係

表格設計 設計原則： 行列標題使用 th 標籤 （見下頁實例）

表格設計 實例分析: http://bulletin.coa.gov.tw/info_act.php?cat=info_act (行政院農業委員會) 標題列沒有使用th， 導致資訊傳達可能錯誤。（見Lynx結果 與設計範例）

表格設計 設計原則： 簡易表格結構化 ：th 標籤 scope 屬性欄 ： col 、列：row 在th中可以標示 scope=“row”

表格設計 實例分析: http://163.29.105.99/intranet/rosseauism/luchu/try/new_page_12_try.html (路竹鄉戶政事務所)

表格設計 設計原則： 複雜表格結構化 ：th 標籤 中axis屬性、headers屬性及id屬性 見設計範例

表格設計 實例分析:

頁框設計 為了方便身心障礙者使用特殊瀏覽器閱讀，必需為網頁頁框加上標題資訊。 設計原則： 在FRAME的標籤中使用title屬性替頁框設定名稱 12.1:H112000 需要定義每個頁框的名稱 6.2：H106001 頁框連結必須是HTML檔案

頁框設計 實例分析： http://house-north.tccg.gov.tw/index_chi.htm (台中市北區戶政事務所)

頁框設計 維護建議： 網頁頁框不應該直接連接物件，而是連結HTML檔案，檔案對於物件或圖片再加入說明

頁框設計 實例分析： 正確範例：網頁頁框必須連結至HTML檔案，檔案中的圖片才可以加上替代文字，讓使用者可瞭解圖片內容。 <frame name="main" TITLE="主要內容頁框" src=“frame2.htm "> 可以使用ALT圖片替代文字

頁框設計 錯誤範例：如頁框直接連結圖片，則無法加上圖片的替代文字，有時無法傳達圖片資訊。 <frame name="main" TITLE="主要內容頁框" src=" a3.jpg "> 無法使用ALT圖片替代文字

安全地使用色彩 實例分析： 以底線表示重點（因易與連結混淆，故不建議在網頁上使用) 以顏色及加上斜體表示重點 (在無顏色時，仍可傳達重點) 可參考無障礙網路空間服務網上 2.1範例 以底線表示重點（因易與連結混淆，故不建議在網頁上使用) (在無顏色情況下，仍可傳達重點) 一般大眾--This link is underlined, the default behavior. 色盲--This link is underlined, the default behavior. 以顏色及加上斜體表示重點 (在無顏色時，仍可傳達重點) 一般大眾--This second link is bold and colored instead. 色盲--This second link is bold and colored instead. 僅使用顏色表示重點 (無顏色時，無法傳達重點，避免使用) 一般大眾--However this link is distinguished only by color. 色盲--However this link is distinguished only by color. 2.1：H102100 確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來

CSS與無障礙網頁製作 使文件更具結構性，更易閱讀 容易維護並可重複使用 CSS的限制 將文件結構與呈現效果分開，使文件更易維護和閱讀，特別是對於使用線性瀏覽方式的人。 (線性瀏覽方式：意即一張一張的影像或每頁以不可改變的順序彼此銜接，就像是看多媒体書一樣。線性瀏覽方式，適合在使用電腦訓練課方面的應用，或是在希望嚴密控制到訪者的瀏覽路線的情況下採用。) 容易維護並可重複使用 一個既有結構性，視覺表現又豐富的網頁。 CSS的限制 CSS不是一個完全精確的版面編排語言，且瀏覽器的支援不完整 6.1：H106100 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀

CSS與無障礙網頁製作 實例分析﹕ 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀 http://www.yatsen.gov.tw/chinese/國立國父紀念館 有Css時 無Css時除去樣式表後仍然能夠閱讀

新增等級(A+) 規範與實例

新增等級(A+) 已符合第一優先等級及以下要件 : 導盲磚(:::)搭配鍵盤快速鍵(Accesskey) 網站地圖(Sitemap) 網頁瀏覽工具除了能使用滑鼠點選之外，是否也能使用鍵盤來操作

導盲磚 導盲磚是一種輔助性的引導設計，可增加使用者瀏覽的方便性。 規劃完善且優良導盲磚設計，能正確的引導使用者連結到正確的頁面。 未標示網頁語言 我的E政府網站 http://www.gov.tw/

導盲磚 設計原則： 顯示方式 利用三個冒號(:::)來表示導盲磚 用途：定位及搜尋 優點： 　 (1)快速跳躍至不同區塊，也可以避免使用者在網頁中 迷失 。 (2)方便使用者在各框架(frame)之間快速移動與搜尋 網頁內容。 (3)可以導引使用者就可以依自己的需要，跳至所需的 區塊中，閱讀自己想要的內容。

導盲磚 顯示方式(:::) 導盲磚

導盲磚 檢視原始檔

導盲磚 原始程式碼

導盲磚 實例分析﹕ 無導盲磚 http://www.edu.tw 步驟一

導盲磚 步驟二 跳出尋找視窗

導盲磚 步驟三 跳出搜尋結果 “找不到”

導盲磚 有導盲磚 http://www.dot.gov.tw/ch/index.asp 步驟一

導盲磚 步驟二 跳出尋找視窗

導盲磚 步驟三 導盲磚 跳出搜尋結果 “已找到”

導盲磚 維護建議 導盲磚固定使用連續三個英文冒號“:”，形成“:::”，方便搜尋 將網頁內之連結以位置或功能相近的方式歸類，並配與導盲磚與快速鍵 導盲磚建議加上註解，如「左側區塊」、「中央區塊」 、 「右側區塊」等，使用時加上輔助按鍵，如ALT+L、ALT+C、ALT+R等。 導盲磚應該連結到設計使用說明頁面 可讓導盲磚顏色設計與網頁的背景色相同，藉以達到視覺隱藏的效果，也達到網頁導盲磚美化。 未標示網頁語言 我的E政府網站 http://www.gov.tw/

導盲磚 網頁導盲磚美化 （視覺上隱藏） 利用網頁背景色隱藏導盲磚 導盲磚 (背景色隱藏)

導盲磚 程式原始碼： 設定 背景色

導盲磚 不好的設置範例 : 導盲磚用圖片設計是錯誤示範： img標籤的src=“圖片導盲磚 ” 圖片格式 Img標籤

導盲磚 並不建議實際隱藏的導盲磚設計： span 標籤的style= “display:none “(隱藏導盲磚) 設定 Style:”display:none”(隱藏導盲磚) 這種設計在點選時才展開，所以不被建議。 支援CSS的瀏覽器上搜尋不到 Lynx可見到（不支援CSS）

鍵盤快速鍵 (AccessKey) 快速鍵可搭配導盲磚做配置 目的是讓使用者能夠快速地到達想要的連結群組或是表單物件所在處 未標示網頁語言 我的E政府網站 http://www.gov.tw/ 9.5：H309204 對經常使用的超連結，增加快速鍵的操作 9.6：H309105 對於表單元件考慮提供鍵盤快速鍵的操作

鍵盤快速鍵 (AccessKey) 設計原則： 設計Accesskey時，應提供足夠的操作說明，不然使用者並不知道每個按鍵的作用是什麼。 操作說明建議擺放在固定且容易存取的位置；若考慮到盲胞的使用，最好讓Screen Reader能在一開始就讀出來。 雖然某些Browser會優先保留Accesskey給網頁的內容使用，但選擇Accesskey時仍應儘量選擇非文字鍵以避免被其他應用程式攔截而產生操作上的干擾。

鍵盤快速鍵 (AccessKey) 實例分析﹕ AccessKey 操作說明頁面 & AccessKey 位置分佈圖

鍵盤快速鍵 (AccessKey) 提供導盲磚與快速鍵 http://www.cpa.gov.tw/ (行政院人事行政局全球資訊網) Alt+T 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) Alt+L 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) Alt+C 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) 未提供導盲磚與快速鍵 http://www.dba.tcg.gov.tw/html/main.htm (台北市政府工務局建築管理處) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

鍵盤快速鍵 (AccessKey) 維護建議： 選擇Accesskey時仍應儘量選擇非文字鍵 Alt +1 -主頁面 Alt +3 - 目錄 資料來源：http://dia.z6i.org/accessibility_statement.html

鍵盤快速鍵 (AccessKey) 說明: 鍵盤快速鍵 設計說明 連結至”FAQ”頁面 Alt +0 親和力聲明 詳細註明鍵盤快速鍵的設計。 Alt +1 主頁面 連結至”首頁(Home)” Alt +2 最新消息 連結至”最新消息”頁面 Alt +3 目錄(網站地圖) 連結至”sitemap”頁面 Alt +4 搜尋 連結至”search”頁面 Alt +5 FAQ 連結至”FAQ”頁面 Alt +6 site help 連結至” site help”說明頁面 Alt +7 complaints 連結至”意見區” Alt +8 使用聲明 連結至”聲明”說明頁面 如網頁版權聲明…..等 Alt +9 回饋 E-mail給網站維護者 提出對網站有任何的建議，不論是版面的設計上是否符合friendly或功能面….等，提出的建議可直接寄E-mail提供網站設計者參考。 資料來源： (1) http://dia.z6i.org/accessibility_statement.html (2) http://www.cabinetoffice.gov.uk/e-government/resources/handbook/html/2-4.asp

鍵盤快速鍵 (AccessKey) 補充說明： 依據不同瀏覽器(browser)，所預設的鍵盤快速鍵(AccessKey)使用說明 Internet Explorer Netscape Navigator Mozilla Firefox Mac (1) 使用alt鍵 (2) 搭配數字或字母 (1) 使用ctrl鍵 (2) 搭配數字或文母 有設定連結時，可接著 按” ENTER”

鍵盤快速鍵 (AccessKey) 版本說明 瀏覽器(bowser)版本 Internet Explorer 5+ (1) 使用alt鍵 (2) 搭配數字或字母 (3) 按” ENTER” Internet Explorer 4: Internet Explorer 5+ for Mac: (1) 使用ctrl鍵 Internet Explorer 4.5 for Mac: 不支援AccessKey Netscape 6+ Netscape earlier versions: Mozilla Firefox

網站地圖 為增加網站使用度及可及性，網站應提供網站地圖及網站簡介。 能清楚的呈現出整個網站的層次架構 13.6:H213205 為你的網站提供網站地圖或整體性的簡介

網站地圖 實例分析﹕ http://www.taipei.gov.tw/siteMap/ Accesskey 網站地圖： 有文字結構性的設計

網站地圖 http://society.tccg.gov.tw./www/sitemap/sitemap.asp Accesskey

網站地圖 http://www.cy.edu.tw./map.asp Accesskey 網站地圖

A+確保事件的啟發 不要求一定得使用滑鼠 滑鼠的使用是“視窗”系統思維下的產物 視障者無法使用滑鼠，所以滑鼠對全盲者等於不存在，如果網頁上的功能除了滑鼠點選之外無法作用，那麼這些功能便無法被身障者使用 6.5:H206104 若網頁物件使用事件驅動時，確定勿僅使用滑鼠操作 8.1:H208100 對由Scripts、Applets及Objects所產生之資訊， 提供可及性替代方式 9.2:H209201 對所有網頁內容元素，確保有滑鼠以外的操作介面 9.3:H209002 確保事件的啟發不要求一定得使用滑鼠

A+確保事件的啟發 不要求一定得使用滑鼠 對映關係 參考範例

A+確保事件的啟發 不要求一定得使用滑鼠 實例分析﹕ 功能選單 http://www.dot.gov.tw 也可用鍵盤展開功能選單

A+確保事件的啟發 不要求一定得使用滑鼠 鍵盤操作 http://www.dot.gov.tw 鍵盤操作

A+確保事件的啟發 不要求一定得使用滑鼠 鍵盤設定: 原始碼 第一層(功能選單) :onFocus 鍵盤設定

第二優先等級(AA) 規範與實例

第二優先等級(AA) 主要的規範 避免使用marquee標籤移動文字 避免使用動態gif圖片 確保前景顏色與背景顏色彼此呈現明顯的對比 加上版本宣告 網頁加上標題 不要隨便開啟一個新視窗 CSS樣式表單應該要使用相對尺寸(如 %) ，而非絕對尺寸(如像素 ) 在表單控制項上，應以label標籤提示資訊 使用真實鏈結

跑馬燈 跑馬燈是將文字或圖形，以定速滑過畫面指定區域來顯示文字訊息 現已不那麼炫了(曾經是) 使用代價很高 applet 或 ActiveX，瀏覽器將會變慢。 如關閉或不支援JavaScript，將失效。 IE裡自訂的“Marquee”是不被允許的。 7.3：H207002 避免使用marquee標籤移動文字

跑馬燈 實例分析： 圖片跑馬燈是可以利用任一圖片區域來顯示文字訊息。 http://ezhost.apol.com.tw/service/program-library/javascript/script10.html 以跑馬燈方式說明圖片內容 點 選

跑馬燈 文字跑馬燈 中央健康保險局http://www.nhi.gov.tw/00chinese/c_index.asp 文字跑馬燈內容顯示區

跑馬燈 參考原始碼： 維護建議： 可使用EM標籤來代替marquee標籤

閃爍圖片 避免使用： 實例分析： 跳動的圖片容易分心及造成眼睛的不適。 較容易剌激心臟病及氣喘等患者。 (7.4：H207103 避免使用動態gif圖片) 實例分析： gif圖片反覆旋轉--教育部全球資訊網 http://www.edu.tw/EDU_WEB/EDU_MGT/E0001/EDUION001/hot/hot02.htm?CAPTION=活動訊息&FILEID=136628

閃爍圖片 反覆旋轉

閃爍圖片 1 3 反覆閃爍 反覆晃動 2 4 反覆旋轉 反覆閃爍+移動

色彩使用 實例分析: 避免使用： 前景和背景色澤太接近，會混淆顯示內容。 在閱讀上，眼睛會比較吃力。 淡色系文字 白底淡色系文字。 深色系文字 黑底深色系文字。 2.2：H202101 確保前景顏色與背景顏色彼此呈現明顯的對比

版本宣告 遵照W3C所規範，必須宣告網頁所使用的HTML版本，並遵照宣告使用標籤。 適當宣告＋正確使用 3.3：H203002在doctype標籤中，使用標準規範的敘述以識別HTML版本類型，並遵照宣告使用標籤

版本宣告 設計原則： 版本宣告

網頁標題 設定標題<title>的用意: 設計原則： 簡單清楚的說明標題內容，避免籠統不清。 1.讓使用者儲存我的最愛時，有清楚的網頁名稱。 2.讓搜索引擎快速正確找到。 3.純文字瀏覽器上會先顯示網頁名稱。 設計原則： 簡單清楚的說明標題內容，避免籠統不清。 在HTML Tag中設定網頁的標題名稱。 <title>無障礙網路空間服務網</title> 13.5：H213004 為你的網頁加上標題。

網頁標題 實例分析﹕ 無標題 http://www.lukanhr.gov.tw/introduce/introduce/right.htm (彰化縣鹿港鎮戶政事務所)

網頁標題 籠統標題 http://www.nhi.gov.tw/00chinese/c_index.asp (中央健康保險局)

網頁標題 維護建議﹕ TITLE內容標示清楚

開新視窗 由於視覺障礙者難以察覺正在瀏覽的網頁將轉換至其他網頁，及跳回原瀏覽網頁的困難，須告知使用者開新視窗。 若網頁中有需要開啟新視窗，則須讓使用者自行操作。 10.1：H210100 除非使用者知道將會開啟一個新視窗，不要隨便開啟一個新視窗

開新視窗 設計原則：

開新視窗 實例分析： http://www.nyc.gov.tw/main.php (行政院青年輔導委員會) 開一個新視窗

開新視窗 維護建議： 告知此連結會開新視窗

相對尺寸的設計 相對尺寸的相關設計原則﹕ 設計資料表格時使用相對尺寸(如%) 若使用Font標籤則用“+”或 “-” (如“smaller”、 “larger”、 “em”) 如需尺寸或文字可在CSS中設定 3.5:H203004 應該要使用相對尺寸(如 %) ，而非絕對尺寸(如像素 )

表格的相對尺寸 實例分析﹕ 所設定的表格雖然會隨著視窗大小而有所變化，但版面配置不會因此亂跑。 http://w2kdmz1.moea.gov.tw/index.asp (經濟部首頁)

表格的相對尺寸 標準視窗大小 縮小視窗文字會折行不影響版面美化

相對尺寸 所設定的字型不會隨著檢視設定而改變是錯誤的設計。 CSS也一樣可以設計相對使寸 http://www.cepd.gov.tw/ (經建會首頁) (font-size：13px) 錯誤的設計 http://enable.nat.gov.tw/index.jsp (無障礙空間服務網) 字型沒變 大小已改變

表單控制項 必須在表單控制項上，以LABEL標籤標示提示資訊。 必須明確顯示表單的控制項與控事項說明之間的關聯性。 12.6：H212105 在表單控制項上，以label標籤提示資訊

表單控制項 實例分析﹕ http://www.ntl.gov.tw/service_mailform.asp 表單內容

表單控制項 設計原則﹕ 內容相對應

真實鏈結 有瀏覽器不支援 JavaScript。 若JavaScript是一個假鏈結，對不支援JavaScript的環境是不能使用的，最好是使用真實鏈結!!

真實鏈結 實例分析： 假鏈結(避免使用) JavaScript的鏈結說明 使用JavaScript的鍵結

真實鏈結 真實鏈結(正確範例) 使用真實網址 網址的鏈結

第三優先等級(AAA) 規範與實例

第三優先等級 (AAA) 主要的規範 使用Lang屬性，明確指出網頁文字所使用的自然語言 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結 表格須提供表格摘要說明 資料表格須提供標題說明 允許使用者依照個人喜好設定網頁呈現方式與內容 對經常使用的超連結，增加快速鍵的操作 對於表單元件考慮提供鍵盤快速鍵的操作 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 目的是讓語音系統可以正確辨識網頁所使用的自然語言。 設計原則： 在HTML標籤中設定lang屬性，中文為“zh-TW” Charset與lang的差別 <meta http-equiv="Content-Type" content="text/html; charset=big5"> 未標示網頁語言 我的E政府網站 http://www.gov.tw/ 4.3:H304002 明確指出網頁文字所使用的自然語言 13.4:H213203 使用metadata標籤來記載電腦可以了解運用的網頁資訊 (第二優先等級)

lang屬性 實例分析： 標明網頁語言(使用XHTML) http://www.mof.gov.tw/ (財政部全球資訊網) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標明網頁語言 http://www.gov.tw/ (我的e政府網站 ) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 未標示網頁語言 我的E政府網站 http://www.gov.tw/

lang屬性 維護建議： 在HTML標籤中設定lang屬性，例如“zh-TW”則讓瀏覽器得知該網頁所使用的的自然語言是繁體中文。 XHTML網頁同時使用xml:lang=“zh-TW” 和 lang=“zh-TW” 未標示網頁語言 我的E政府網站 http://www.gov.tw/

影像地圖的處理 考慮提供影像地圖以外的可及性方式(文字連結) 設計原則： 影像地圖(IMG標籤中採用usemap=“#Map”)需加alt 1.5:H101004 影像地圖區域需要加上替代文字說明 (第二優先等級) 1.16:H301015 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結

影像地圖的處理 實例分析： http://www.moj.gov.tw/chinese/f23_1.aspx (法務部部內組織網頁)

影像地圖的處理

影像地圖的處理

影像地圖的處理

影像地圖的處理

影像地圖的處理

summary屬性 Table tag須使用summary屬性 5.1:H105100 對於每一個存放資料的表格(不是用來排版)，標示出行和列的標題(第一優先等級) 5.2:H105101 表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係(第一優先等級) 5.5:H305004 表格須提供表格摘要說明 5.6:H305105 資料表格須提供標題說明

summary屬性 實例分析： 台灣主要城市氣溫與紫外線強度 主要城市 氣溫溫度 紫外線強度 基隆 33度 普通 台北 32度 台中 34度 良好 台南 35度 過量

summary屬性 設計原則： <TABLE border="1" summary="此台灣主要城市氣溫與紫外線強度表格中，第一直欄是主要城市，第二直欄是氣溫溫度，第三直欄是紫外線強度。"> <CAPTION>台灣主要城市氣溫與紫外線強度</CAPTION> <TR><TH scope=“col”>主要城市</TH><TH scope=“col”>氣溫溫度</TH><TH scope=“col”>紫外線強度</TH></TR> <TR><TD>基隆</TD><TD>33度</TD><TD>普通</TD></TR> <TR><TD>台北</TD><TD>32度</TD><TD>普通</TD></TR> <TR><TD>台中</TD><TD>34度</TD><TD>良好</TD></TR> <TR><TD>台南</TD><TD>35度</TD><TD>過量</TD></TR> </TABLE> Caption&Summary=第三優先 TH=第二優先

summary屬性 實例分析： http://www.cpa.gov.tw/default.htm (行政院人事行政局網頁)

summary屬性

summary屬性

summary屬性 http://www.moea.gov.tw/ (經濟部全球資訊網)

summary屬性

summary屬性

summary屬性 維護建議： 對於資料性表格，提供敘述性摘要說明 對於排版型表格，可簡略標示為“排版表格”，或用於何種用途的排版表格，如“主選單排版表格”。 Caption&Summary=第三優先 TH=第二優先

共通性高的資訊內容 網頁內容可正常顯示於各種瀏覽器 提供多樣化的下載檔案格式 目的是讓使用者能夠選擇他們所喜好方式或是使用上較為方便的網頁瀏覽方式進行網站瀏覽。 未標示網頁語言 我的E政府網站 http://www.gov.tw/ 11.4：H311203 允許使用者依照個人喜好設定網頁呈現方式與內容

共通性高的資訊內容 實例分析 網頁內容可正常顯示於各種瀏覽器 http://www.dot.gov.tw/ch/index.asp (財政部賦稅署) 使用 Internet Explorer 未標示網頁語言 我的E政府網站 http://www.gov.tw/

共通性高的資訊內容 網頁內容可正常顯示於各種瀏覽器 http://www.dot.gov.tw/ch/index.asp (財政部賦稅署) 使用 FireFox 未標示網頁語言 我的E政府網站 http://www.gov.tw/

共通性高的資訊內容 網頁內容無法正常顯示於各種瀏覽器 http://www.mof.gov.tw/ (財政部全球資訊網) 使用 Internet Explorer 未標示網頁語言 我的E政府網站 http://www.gov.tw/

共通性高的資訊內容 網頁內容無法正常顯示於各種瀏覽器 http://www.mof.gov.tw/ (財政部全球資訊網) 使用 FireFox 時，部份網頁內容無法呈現 未標示網頁語言 我的E政府網站 http://www.gov.tw/

共通性高的資訊內容 實例分析 提供多格式檔案下載 http://enable.nat.gov.tw/download.jsp (無障礙網路空間服務網 ) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

共通性高的資訊內容 未提供多格式檔案下載 http://www.gov.tw/ESERVICE/web_service_choice.phtml?CaseID=315000000H0058&c=0 (我的e政府) 未標示網頁語言 我的E政府網站 http://www.gov.tw/

共通性高的資訊內容 維護建議 網頁製作時應考慮與各瀏覽器間之共通性 並非每台電腦都有Word或MS Office 多利用PDF之類的開放性文件格式 提供壓縮檔格式下載，可讓使用者有更多的選擇，壓縮內之文件同樣應符合開放性文件格式之精神 未標示網頁語言 我的E政府網站 http://www.gov.tw/

Freego檢測工具的介紹

FreeGo簡介 無障礙網頁網路版、單機版檢測軟體 單機版及操作手冊下載位址： 檢測種類。 顯示檢測結果報表。 提供設定檢測網站層級。 提供即時「申請標章登錄」功能。 單機版及操作手冊下載位址： http://enable.nat.gov.tw/download_tool.jsp 「無障礙網頁單機版檢測軟體」(Freego)為檢測網站是否符合無障礙網頁開發規範，其主要功能簡述如下： 使用者能於個人電腦上對網頁(Web)或檔案(Local File)進行無障礙檢測。 顯示檢測網頁之列表數據與通過之優先等級，並提供單網頁與全網站檢測之檢測報告供網頁修正之用。 提供設定檢測網站層級(至第一層、至第二層、至第三層、至第四層、至第五層及全網站)、設定檢測等級(A、AA、AAA及A+)、設定檢測排除功能等之檢測方式。 提供即時「申請標章登錄」功能，讓使用者可以在通過自我檢測後第一時間進行申請標章登錄，以及獲得標章連結資料等作業。

主畫面 網址列 3 1 2 檢測清單 工具列

工具列 1 停止檢測按鈕 單網頁重新檢測 全網頁重新檢測 單網頁檢視報告 全網頁檢視報告 設定目錄排除項目 設定網頁排除項目 設定檔案排除項目 說明

網址工具列 試定檢測層數 開始檢測按鈕 2 網址列 選擇檢測本地端網頁 申請標章登錄按鈕

各優先等級機器檢測與人工檢測錯誤個數欄位 檢測清單 檢測網址個數欄位 機器檢測欄位 3 網址欄位 各優先等級機器檢測與人工檢測錯誤個數欄位

單網頁檢測報告 檢測時間 直接瀏覽檢測報告 原網頁畫面加上插入檢測碼錯誤位置圖 是否通過檢測等級

單網頁檢測報告 文字檢測報告(顯示錯誤檢測碼及錯誤個數與錯誤行數) 網頁原始碼

全網站檢測報告 受測網站資料 是否通過 檢測之優先等級

全網站檢測報告 檢測碼錯誤個數連結，可列出所有本項檢測碼檢測錯誤之網址 進入檢測碼說明連結 檢測碼overview 機器檢測~~>依檢測等級列出所有不符合的檢測碼及錯誤個數 人工檢測~~>依檢測等級列出所有可能錯誤的檢測碼及其個數 點選檢碼超連結至錯誤細項頁面

全網站檢測報告 檢測碼編號與內容說明 本項檢測錯誤之總數 本項檢測錯誤之所有網址 點擊可進入單網頁檢測

申請標章 申請標章手冊下載http://enable.nat.gov.tw/download.jsp 當檢測結果符合申請標準時，此按鈕將呈啟動狀態 申請標章手冊下載http://enable.nat.gov.tw/download.jsp

張貼標章

相關工具的介紹

瀏覽器 字型尺寸放大功能比較 MS Internet Explorer 檢視  字型  [最大、較大、適中、較小、最小] Netscape Navigator View  Text Zoom (100%)  Other (300%)  Ok (Button) Firefox 檢視文字大小[放大(Ctrl++)、縮小(Ctrl+-)、ㄧ般(Ctrl+0)]

Internet Explorer

Internet Explorer

Internet Explorer

Netscape

Netscape

Netscape

Netscape

Firefox

Firefox

Firefox

瀏覽器 img Tag使用alt屬性功能比較 http://www.moj.gov.tw/chinese/index.aspx (法務部全球資訊網)

Internet Explorer

Netscape

Firefox

製作工具 Dreamweaver MX Frontpage 2003

Dreamweaver MX 當插入Table等物件時，對話框增加有關與無障礙的標籤或屬性輸入欄位。 「目標瀏覽器檢查」功能，能對各種Browser的相容性提出檢測報告。 無障礙網頁檢測功能 UsableNet Accessibility Reference

Dreamweaver MX 無障礙屬性欄位

Dreamweaver MX 無障礙屬性欄位

Dreamweaver MX 無障礙屬性欄位

Dreamweaver MX Browser相容性檢測

Dreamweaver MX Browser相容性檢測

Dreamweaver MX 無障礙網頁檢測

Dreamweaver MX 無障礙網頁檢測

Frontpage 2003 瀏覽器相容性檢測功能 WCAG & Section 508檢測功能 提供檢測報告

Frontpage 2003 瀏覽器相容性檢測功能

Frontpage 2003 瀏覽器相容性檢測功能

Frontpage 2003 瀏覽器相容性檢測功能

Frontpage 2003 瀏覽器相容性檢測報告

Frontpage 2003 無障礙檢測功能

Frontpage 2003 無障礙檢測功能

Frontpage 2003 無障礙檢測功能

Frontpage 2003 無障礙檢測報告

檢測工具 免費檢測工具 收費檢測工具 FreeGo A-Prompt Tidy Bobby AccVerify LIFT WAVE The Illinois Accessible Web Publishing Wizard for Microsoft Office STEP508

免費檢測工具 FreeGo http://enable.nat.gov.tw/index.jsp 提供單網頁、全網站檢測功能與報告。 依循行政院研考會頒布之無障礙網頁規範。 唯一中文介面之檢測工具。 歡迎多多利用。

免費檢測工具 A-Prompt (by ATRC， U of Toronto) 簡單易用。 http://aprompt.snow.utoronto.ca/index.html 簡單易用。 提供檢測與導引式的修訂；適合用來做少量的網頁修改。

A-Prompt

免費檢測工具 Tidy http://tidy.sourceforge.net. 可修正寫網頁時所發生的錯誤，並可自動產生建議修正的檔案。 使用JAVA撰寫，Open Source。 使用前需要Compile，因著每台PC的JVM以及參數設定的不同，容易發生無法Compile成功的問題。

收費檢測工具 Bobby (by CAST and Watchfire) http://www.watchfire.com/ 以前3.x的版本免費提供大眾使用。 現在5.0的版本是商業軟體，由Watchfire重新以開發，只提供單網頁檢測報告。 Brown U.的e-Government對無障礙網站的檢測一直都是用Bobby。

收費檢測工具 AccVerify (by HiSoftware) http://www.hisoftware.com/ 功能很完整，提供檢測與修復功能，甚至有簡單的專案管理機制 - 相對的難操作，也較貴，是一種Frontpage的Plug-in。

收費檢測工具 LIFT(by UsableNet) WAVE(by WebAIM) http://www.usablenet.com/ 有Web與Windows版本、Plug-ins for DW and FP、Text Transcoder。 Windows的版本具備Fix Wizard與ALT Editor。 WAVE(by WebAIM) http://www.wave.webaim.org/index.jsp 提供Web版的線上檢測服務，可以爲不同的瀏覽器安裝Toolbar，讓使用者在瀏覽網頁時也順便將該頁面送檢測。

收費檢測工具 The Illinois Accessible Web Publishing Wizard for Microsoft Office (by UIUC) http://cita.rehab.uiuc.edu/software/office/index.html 可將MS Office的檔案轉換成符合Section 508與WCAG 1.0的2A標準的HTML檔。 STEP508(Simple Tool for Error Prioritization) http://www.section508.gov/ 由美國政府所開發，須配合LIFT或Bobby 3.x，用來產製508無障礙檢測結果的管理報表。

人工檢視原則與要點

人工檢測原則 許多指導原則無法被科學評鑑或自動測試 注意項目： 避免項目： Flash 裡的鏈結 (請額外提供可及性鏈結) 確實標明網頁標題及圖片說明 網站地圖的導覽協助 色彩與鏈結裝飾的問題 (不依賴色彩及假鏈結) 適切的使用導盲磚及快捷鍵 撰寫親和力聲明 提供不支援script替代方案 避免項目： 閃爍的圖片 使用結構不明確的表格 主要內容未先呈現

該怎麼進行 人工檢測? 自我處理的方式 用文字網頁瀏覽器Lynx來模擬操作。 Windows版 http://www.jim.spath.com/lynx_win32/ftp.html Web版 http://www.delorie.com/web/lynxview.html Linux版 　http://lynx.isc.org/

該怎麼進行 人工檢測? 若使用一般GUI瀏覽器，可試試以下情況是否還能操作網頁： 關掉JavaScript、聲音播放、圖形顯示的支援選項。 調整字體大小、螢幕解析度。 放下滑鼠只用鍵盤操作。 看看用黑白印表機印出的網頁內容。

對於人工檢測Flash、PDF、Word 的無障礙建議 網頁提供這些檔案的連結時，要對這些檔案連結/物件做足夠的說明。 Flash範例 http://www.swcoast-nsa.gov.tw Word及PDF範例 http://enable.nat.gov.tw/download.jsp 下載或開啟後，由於WCAG只對HTML網頁作規範，所以Flash、PDF、Word檔是否為『無障礙』，客觀的檢測標準應是該檔案的內容能否被相關輔具所讀取；這個輔具或瀏覽裝置最好還是不需額外花費取得的。 Macromedia Flash MX – 支援在動態文字、文字輸入框、按鍵、影片、檔案本體等物件上加注可讓Screen Reader讀取的背景說明文字。 Microsoft Word – 特別是在Windows的平台下，幾乎所有的Screen Reader都能正確讀出其內容。 Adobe PDF – 於5.0後的版本支援Tagged PDF格式，讓PDF檔案裡的物件也可以加上說明；甚至在新版的Acrobat Reader中還提供了如「朗讀」等Accessibility輔助工具。編輯者要注意的是，產製PDF檔案時要保留文字屬性，不然就變成一堆向量圖片了。

結語 在實務上，雖然沒有任何二套檢測軟體其結果是完全一致的，但它們都符合無障礙的精神。 請多利用FreeGo，除了遵循 W3C的規範外，而且擁有中文介面。 請多比較，多使用各種工具，也請對FreeGo多批評指教 歡迎任何寶貴的意見。