Transcript 無障礙網路空間

94年度無障礙網路空間
服務推廣教育訓練
講師：陳育亮
世新大學資管系副教授兼電算中心主任
1
大綱








認識無障礙網頁開發
第ㄧ優先等級(A)規範與實例
新增等級(A+)規範與實例
第二優先等級(AA)規範與實例
第三優先等級(AAA)規範與實例
FreeGo檢測工具介紹
相關製作工具介紹
人工檢視原則與要點
2
 認識無障礙網頁開發
3
國際標準
 W3C（World Wide Web Consortium）
 「全球資訊網協會」主導國際全球資訊網技術的標準機構
 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/
4
國內標準
我國的「無障礙網頁開發規範」
包含十四條規範以及九十條相關的檢測要點
九十條檢測要點分屬第一優先、第二優先、第
三優先，又可區分為機器辨識/機器檢測、機器
辨識/人工檢測、人工辨識/人工檢測三種
5
了解無障礙網頁
開發無障礙網頁並不困難
基於W3C的HTML規範。
是網頁設計一種具體落實的目標。
講究平權國家的進步指標。
無障礙網頁是服務「所有的使用者」，而對廣大
身障者更是不可或缺的。
要騙過無障礙網頁檢驗器是很容易的，但是那樣
不會讓妳的網頁無障礙。
6
網頁無障礙
對誰有好處?
 無障礙的服務對象是所有人
 例如：老人、視力不佳者、行動不便時…
 不同的對象、不同的設備、不同的環境
 網頁無障礙化有些額外的好處，例如：




圖片有 Alt，就能被正確搜尋到（search）
網頁結構清楚易維護（maintain）
網頁內容正確呈現 （減少瀏覽結果不同情況）
廣告效益（增加資訊傳達機會，見下頁範例）
7
e-mail廣告郵件
網頁無障礙
對誰有好處?
現在mail通常會
把圖片封鎖，在
圖片未呈現時，
有替代文字說明，
也能達到廣告效
果。
8
網頁無障礙
對誰有好處?
如沒有替代文字
說明，即畫面呈
現為一片空白。
9
另闢純文字版好不好
出發點是好的，但是應注意
如何保持各版本內容的一致及更新效率
可依照使用者需求設計網站，但應維持基本無
障礙設計
並非建議全網站都為純文字版
W3C/WAI 不推薦
身心障礙朋友希望接觸(看、聽、摸)到一般的
版本
Google 依據點閱率排序，純文字版網頁將更難
獲得前面的排序
10
無障礙網頁與以往的網
頁製作方式有何不同
 網頁文件的結構性比視覺呈現更重要。
 網頁設計師需要看懂html標籤。
 更正許多錯誤的html標籤使用習慣。
11
不當使用html標籤：
例如<th>標籤使用
錯誤範例：
 使用<th>標籤凸顯”2005南投美荔鳳梨節”
</tr>
</tr>
活動時間
活動主題
主辦單位
94/07/02-94/07/03
2005南投美荔鳳梨節 台北市政府
94/07/12-94/07/14
2005青年客家東勢文化
學習營
行政院農業委員會
12
不當使用html標籤：
例如<th>標籤使用
維護建議：
應使用<strong>標籤，同時顯現粗體的效果，
也能明確標示出資料的重要性。
<table width="94%" border="0" summary="活動預告表格中...">
<tr>
<th>活動時間</th>
<th>活動主題</th>
<th>主辦單位</th>
</tr>
<tr>
<td>94/07/02-94/07/03</td>
<td><strong>2005南投美荔鳳梨節</strong></td>
<td>台北市政府</td>
</tr>
...
活動時間
活動主題
主辦單位
</table>
94/07/02-94/07/03
2005南投美荔鳳梨節 台北市政府
94/07/12-94/07/14
2005青年客家東勢文化
學習營
行政院農業委員會
13
檢測碼格式
14
 第一優先等級(A)
檢測等級
 開發網頁時必須遵循這個等級的檢測碼
 新增A+等級
 具有網頁導盲磚(:::)搭配鍵盤快速鍵、網站導覽功
能及網頁瀏覽工具具有使用鍵盤瀏覽設計
 第二優先等級(AA)
 開發網頁時應該滿足這個等級的檢測碼
 第三優先等級(AAA)
 開發網頁時可以納入這個等級檢的測碼
15

第ㄧ優先等級(A)
規範與實例
16
主要規範
第一優先等級(A)
圖片與替代文字
較長的替代文字
其他替代文字
Script指定不支援的辦法
影像地圖替代文字
表格設計
頁框設計
安全地使用色彩
CSS與無障礙網頁製作
17
圖片與替代文字
螢幕閱讀軟體可以讀得到這段文字
純文字瀏覽器會把這段文字顯示出來
Google 會為這段文字建立索引
視覺性瀏覽器(例如IE， Netscape)則會用工具
提示或者在狀態列顯示出來
設計原則
 對img 標籤提供alt 屬性
<img src=“a.jpg” alt=“最新消息”>
1.1：H101000 圖片需要加上替代文字說明
18
實例分析﹕
圖片與替代文字
 alt圖形替代文字顯現
http://www.yatsen.gov.tw/chinese/國立國父紀念館
ALT 圖形替代文
字顯現
19
圖片與替代文字
 條列式項目的小圖示
 不當的示範：故宮最新消息頁
http://www.npm.gov.tw/main/hmain.htm
 不當的示範：行政院農委會首頁最新消息
http://bulletin.coa.gov.tw/show_index.php
國立故宮博物院網站部分擷取畫面及原始碼
for(i=0; i<news02.length; i++)
{
showString += "<tr><td style='width:9px'></td>";
showString += "<td style='width:10px' class='news02' valign='top'><img src='images/
point.gif' alt='spacer'></td>";
showString += "<td class='news02'>"+news02[i]+"</td></tr>";
}
20
圖片與替代文字
標題圖像
 不適當的寫法：審計部審計法令頁
http://www.audit.gov.tw/law.asp
中華民國審計部網站部分擷取畫面及原始碼
<img src="images/content/law_1.jpg"
alt="標題圖示" align="absmiddle">
21
圖片與替代文字
 維護建議：
 有意義的替代文字。
 條列式小圖示的alt可採用“*”。
 無意義的裝飾性圖示可用alt=“”標示。
 用CSS修飾項目符號（ Use style sheets to change list bullets
http://www.w3.org/TR/WCAG10-HTML-TECHS/#list-bullets
條列式項目的圖示範例
見範例）
22
長的替代文字
設計原則：
 替代文字無法充分表達圖片內容時，需在網頁
上另外提供說明。
1.7：H101106 當alt屬性的文字陳述大於150個英文
字元時，考慮另外提供文字敘述
23
長的替代文字
 實例分析：
 http://www.boaf.gov.tw/boafwww/index.jsp?a=np&ct
Node=9&CtUnit=4&BaseDSD=7 (農業金融局)
24
長的替代文字
 http://www.fdc.gov.tw/ct.asp?xItem=598&CtNode=5
76(財政部財稅資料中心位置圖)
25
長的替代文字
 http://www.vghtpe.gov.tw/~wtjan2/nicc/SARSspec01.htm(台北榮民總醫院檢體處理流程圖)
26
另開說明網頁
長的替代文字
 http://www.vghtpe.gov.tw/~ctc/
(台北榮民總醫院癌病中心)
27
其他替代文字
提供多媒體說明，讓身心障礙者瞭解多媒體內容
影片、聲音
視覺障礙可以用聽的，建議聲音可以自由關閉
對白/獨白、字幕
使聽覺障礙可以讀取並了解內容。
歌曲、歌詞
聽覺障礙者可透過文字瞭解歌曲內容
1.2：H101001 對於applet提供替代文字說明
1.3：H101002 對於object提供替代文字說明
1.10：H101109 所有語音檔案必須有文字旁白
1.12：H101111 視訊中的聲音必須提供同步文字型態的旁白
1.14：H101213 多媒體視覺影像呈現時，必須提供聽覺說明
1.15：H101214 多媒體呈現時，必須同步產生相對應替代的語音或文字說明
28
其他替代文字
設計原則：
做法多種，以傳達多媒體資料中主要資訊為主
在object標籤中需標示文字說明
29
實例分析：
其他替代文字
 http://www.cib.gov.tw/Media/Media_Short_Film.aspx(刑事警
察局影音資料專區)
以文字敘述另外提供影片中的對白內容，在無法「聽」的情況下也可以得到
該影片的重要資訊。
30
僅通過機器檢測 (避免使用)
其他替代文字
 http://sld.judicial.gov.tw/default.htm
(台灣士林地方法院)
Flash動畫實例：
僅寫「Flash首頁
物件」，而未提供
任何其他使用該網
頁的替代方法。
31
其他替代文字
同時通過檢測並提供文字連結替代(正確範例)
 http://www.hmv.gov.tw (新竹區監理所)
32
其他替代文字
 http://www.hccg.gov.tw/intro/intro09_1.cfm
(新竹市政府交通運輸)
Flash動畫範例：
在網頁下方提供文字
連結，使用者在無法
使用flash動畫時，可
以點選進入文字說明
頁面。
33
 維護建議﹕
其他替代文字
 範例:交通部觀光局雲嘉南濱海國家風景區管
理處(http://www.swcoast-nsa.gov.tw/)擷取部
份程式碼
 在多媒體(Flash) 附近提供替代性文字式連結
34
Script指定不支援
的辦法
使用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時的辦法
35
實例分析：
Script指定不支援
的辦法
 混亂的Javascript替代方式
http://www.cwb.gov.tw/V4/index.htm(中央氣象局)
重複敘述
敘述不明
36
 保持畫面完整性，
並真正能夠提供替代方式
Script指定不支
援的辦法
 http://e-service.cwb.gov.tw/espros/serviceV4. htm
(中央氣象局便民服務網頁)
提供有用的替代方式。
（在Lynx依然可使用）
37
Script指定不支
援的辦法
維護建議：
 盡量保持畫面完整
 提供真正能夠替代的使用方式
38
影像地圖替代文字
每個連結區域AREA標籤都提供替代文字說明，
身心障礙人員才能了解區域內容
設計原則：
 個別AREA
標籤中標示
alt文字
1.5:H101004 影像地圖區域需要加上替代文字說明
1.13：H101112伺服器端影像地圖中的超連結必須
在網頁中有額外對應的文字超連結
39
影像地圖替代文字
實例分析﹕
 連結區域未標示文字
 http://ph.med.ncku.edu.tw/class.php (成功大學
公共衛生研究所網頁)
40
影像地圖替代文字
對各連結區標示文字
 http://www.klcg.gov.tw/web/mayor/may03_01.asp
(基隆市政府機關組織網頁)
41
影像地圖替代文字
 提供額外方法
 http://www.moj.gov.tw/chinese/f23_1.aspx
(法務部部內組織網頁)
1.13：H101112伺服器端影像地圖中的超連結必須
在網頁中有額外對應的文字超連結
42
表格設計
為了讓視覺障礙者可清晰理解表格資
訊，必需標明表格標題 、結構標示，
以方便障礙人士以輔具閱讀
5.1：H105100 對於每一個存放資料的表格
『不 是用來排版』，標示出行和列的標題
5.2：H105101 表格中超過一行/列以上的標題
，須以結構化標記確認彼此間的結構與關係
43
表格設計
設計原則：
 行列標題使用 th 標籤
（見下頁實例）
44
表格設計
 實例分析:
 http://bulletin.coa.gov.tw/info_act.php
?cat=info_act (行政院農業委員會)
標題列沒有使用th，
導致資訊傳達可能錯
誤。（見Lynx結果
與設計範例）
45
設計原則：
表格設計
 簡易表格結構化 ：th 標籤 scope 屬性欄 ： col 、
列：row
在th中可以標示
scope=“col” 或是
scope=“row”
46
表格設計
 實例分析:
 http://163.29.105.99/intranet/rosseauism/luchu/try/n
ew_page_12_try.html
(路竹鄉戶政事務所)
47
表格設計
設計原則：
 複雜表格結構化 ：th 標籤 中axis屬性、
headers屬性及id屬性
見設計範例
48
表格設計
 實例分析:
49
頁框設計
為了方便身心障礙者使用特殊瀏覽器閱讀，
必需為網頁頁框加上標題資訊。
設計原則：
 在FRAME的標籤中使用title屬性替頁框設
定名稱
12.1:H112000 需要定義每個頁框的名稱
6.2：H106001 頁框連結必須是HTML檔案
50
頁框設計
實例分析：
 http://house-north.tccg.gov.tw/index_chi.htm
(台中市北區戶政事務所)
51
頁框設計
維護建議：
 網頁頁框不應該直接連接物件，而是連結
HTML檔案，檔案對於物件或圖片再加入說
明
52
頁框設計
 實例分析：
 正確範例：網頁頁框必須連結至HTML檔案，檔案中的
圖片才可以加上替代文字，讓使用者可瞭解圖片內容。
<frame name="main" TITLE="主要內容頁框" src=“frame2.htm ">
可以使用ALT圖片替代文字
53
頁框設計
 錯誤範例：如頁框直接連結圖片，則無法加上圖片的替
代文字，有時無法傳達圖片資訊。
<frame name="main" TITLE="主要內容頁框" src=" a3.jpg ">
無法使用ALT圖片替代文字
54
實例分析：
安全地使用色彩
可參考無障礙網路空間服務網上 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 確保所有藉由顏色所傳達出
來的訊息，在沒有顏色後仍然能夠傳達出來
55
CSS與無障礙網頁製作
 使文件更具結構性，更易閱讀
 將文件結構與呈現效果分開，使文件更易維護和閱讀，特別是對
於使用線性瀏覽方式的人。
(線性瀏覽方式：意即一張一張的影像或每頁以不可改變的順序
彼此銜接，就像是看多媒体書一樣。線性瀏覽方式，適合在使用
電腦訓練課方面的應用，或是在希望嚴密控制到訪者的瀏覽路線
的情況下採用。)
 容易維護並可重複使用
 一個既有結構性，視覺表現又豐富的網頁。
 CSS的限制
 CSS不是一個完全精確的版面編排語言，且瀏覽器的支援不完整
6.1：H106100 使用 CSS 樣式表編排的
文件需確保在除去樣式表後仍然能夠閱讀
56
實例分析﹕
CSS與無障礙網頁製作
使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然
能夠閱讀
http://www.yatsen.gov.tw/chinese/國立國父紀念館
有Css時
無Css時除去樣式表後仍然能夠閱讀
57
 新增等級(A+)
規範與實例
58
新增等級(A+)
已符合第一優先等級及以下要件 :
導盲磚(:::)搭配鍵盤快速鍵(Accesskey)
網站地圖(Sitemap)
網頁瀏覽工具除了能使用滑鼠點選之外，是否
也能使用鍵盤來操作
59
導盲磚
導盲磚是一種輔助性的引導設計，可增加使
用者瀏覽的方便性。
規劃完善且優良導盲磚設計，能正確的引導
使用者連結到正確的頁面。
60
導盲磚
設計原則：
 顯示方式
利用三個冒號(:::)來表示導盲磚
 用途：定位及搜尋
 優點：
(1)快速跳躍至不同區塊，也可以避免使用者在網頁中
迷失 。
(2)方便使用者在各框架(frame)之間快速移動與搜尋
網頁內容。
(3)可以導引使用者就可以依自己的需要，跳至所需的
區塊中，閱讀自己想要的內容。
61
 顯示方式(:::)
導盲磚
導盲磚
62
導盲磚
檢視原始檔
63
導盲磚
 原始程式碼
64
實例分析﹕
導盲磚
無導盲磚 http://www.edu.tw
步驟一
65
導盲磚
步驟二
跳出尋找視窗
66
導盲磚
步驟三
跳出搜尋結果
“找不到”
67
導盲磚
有導盲磚 http://www.dot.gov.tw/ch/index.asp
步驟一
68
導盲磚
步驟二
跳出尋找視窗
69
導盲磚
步驟三
導盲磚
跳出搜尋結果
“已找到”
70
導盲磚
 維護建議
 導盲磚固定使用連續三個英文冒號“:”，形成“:::”，
方便搜尋
 將網頁內之連結以位置或功能相近的方式歸類，並
配與導盲磚與快速鍵
 導盲磚建議加上註解，如「左側區塊」、「中央區
塊」 、 「右側區塊」等，使用時加上輔助按鍵，如
ALT+L、ALT+C、ALT+R等。
 導盲磚應該連結到設計使用說明頁面
 可讓導盲磚顏色設計與網頁的背景色相同，藉以達
到視覺隱藏的效果，也達到網頁導盲磚美化。
71
網頁導盲磚美化 （視覺上隱藏）
利用網頁背景色隱藏導盲磚
導盲磚
導盲磚
(背景色隱藏)
72
導盲磚
程式原始碼：
設定
背景色
73
不好的設置範例 :
 導盲磚用圖片設計是錯誤示範：
img標籤的src=“圖片導盲磚 ”
導盲磚
圖片格式
Img標籤
74
導盲磚
 並不建議實際隱藏的導盲磚設計：
span 標籤的style= “display:none “(隱藏導盲磚)
1. 這種設計在
點選時才展
開，所以不
被建議。
2. 支援CSS的
瀏覽器上搜
尋不到
3. Lynx可見到
（不支援
CSS）
設定
Style:”display:none”(隱藏導盲磚)
75
鍵盤快速鍵
(AccessKey)
快速鍵可搭配導盲磚做配置
目的是讓使用者能夠快速地到達想要的連結
群組或是表單物件所在處
9.5：H309204 對經常使用的超連結，增加快速鍵的操作
9.6：H309105 對於表單元件考慮提供鍵盤快速鍵的操作
76
設計原則：
鍵盤快速鍵
(AccessKey)
設計Accesskey時，應提供足夠的操作說明，不
然使用者並不知道每個按鍵的作用是什麼。
操作說明建議擺放在固定且容易存取的位置；若
考慮到盲胞的使用，最好讓Screen Reader能在
一開始就讀出來。
雖然某些Browser會優先保留Accesskey給網頁
的內容使用，但選擇Accesskey時仍應儘量選擇
非文字鍵以避免被其他應用程式攔截而產生操作
上的干擾。
77
實例分析﹕
鍵盤快速鍵
(AccessKey)
 AccessKey 操作說明頁面 & AccessKey 位置分佈圖
AccessKey
位置分佈圖
Accesskey
操作說明
78
 提供導盲磚與快速鍵
鍵盤快速鍵
(AccessKey)
 http://www.cpa.gov.tw/ (行政院人事行政局全球資訊網)
 Alt+T
79
鍵盤快速鍵
(AccessKey)
80
Alt+L
鍵盤快速鍵
(AccessKey)
81
鍵盤快速鍵
(AccessKey)
82
Alt+C
鍵盤快速鍵
(AccessKey)
83
鍵盤快速鍵
(AccessKey)
84
 未提供導盲磚與快速鍵
鍵盤快速鍵
(AccessKey)
 http://www.dba.tcg.gov.tw/html/main.htm
(台北市政府工務局建築管理處)
85
維護建議：
鍵盤快速鍵
(AccessKey)
選擇Accesskey時仍應儘量選擇非
文字鍵
Alt +1 -主頁面
Alt +3 - 目錄
Alt +4 - 搜尋
Alt +8 - 使用聲明
Alt +9 - 回饋
Alt +0 - 親和力聲明
資料來源：http://dia.z6i.org/accessibility_statement.html
86
鍵盤快速鍵
(AccessKey)
說明:
鍵盤快速鍵
設計說明
Alt +0 親和力聲明
連結到” Access key的操作說明頁”
詳細註明鍵盤快速鍵的設計。
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
87
鍵盤快速鍵
(AccessKey)
補充說明：
 依據不同瀏覽器(browser)，所預設的鍵盤快速鍵
(AccessKey)使用說明
Internet
Explorer
Netscape
Navigator
Mozilla
Firefox
(1) 使用alt鍵
(1) 使用alt鍵
(1) 使用alt鍵
(2) 搭配數字或字母 (2) 搭配數字或字母 (2) 搭配數字或字母
Mac
(1) 使用ctrl鍵
(2) 搭配數字或文母
有設定連結時，可接著 按” ENTER”
88
 版本說明
瀏覽器(bowser)版本
鍵盤快速鍵
(AccessKey)
鍵盤快速鍵(AccessKey)操作說明
Internet Explorer 5+
(1) 使用alt鍵
(2) 搭配數字或字母
(3) 按” ENTER”
Internet Explorer 4:
(1) 使用alt鍵
(2) 搭配數字或字母
Internet Explorer 5+ for
Mac:
(1) 使用ctrl鍵
(2) 搭配數字或字母
Internet Explorer 4.5 for
Mac:
不支援AccessKey
Netscape 6+
(1) 使用alt鍵
(2) 搭配數字或字母
Netscape earlier versions:
不支援AccessKey
Mozilla Firefox
(1) 使用alt鍵
(2) 搭配數字或字母
89
網站地圖
為增加網站使用度及可及性，網站應提供網站
地圖及網站簡介。
能清楚的呈現出整個網站的層次架構
13.6:H213205 為你的網站提供網站地圖或整體性的簡介
90
實例分析﹕
網站地圖
 http://www.taipei.gov.tw/siteMap/
Accesskey
網站地圖：
有文字結構性的設計
91
網站地圖
 http://society.tccg.gov.tw./www/sitemap/sitemap.asp
Accesskey
網站地圖
92
網站地圖
http://www.cy.edu.tw./map.asp
Accesskey
網站地圖
93
A+確保事件的啟發
不要求一定得使用滑鼠
滑鼠的使用是“視窗”系統思維下的產物
視障者無法使用滑鼠，所以滑鼠對全盲者等於不存
在，如果網頁上的功能除了滑鼠點選之外無法作用，
那麼這些功能便無法被身障者使用
6.5:H206104 若網頁物件使用事件驅動時，確定勿僅使用滑鼠操作
8.1:H208100 對由Scripts、Applets及Objects所產生之資訊，
提供可及性替代方式
9.2:H209201 對所有網頁內容元素，確保有滑鼠以外的操作介面
9.3:H209002 確保事件的啟發不要求一定得使用滑鼠
94
A+確保事件的啟發
不要求一定得使用滑鼠
對映關係
Device Handler Correspondences
Use...
onmousedown
onmouseup
onclick
onmouseover
onmouseout
參考範例
...with
onkeydown
onkeyup
onkeypress
onfocus
onblur
95
實例分析﹕
A+確保事件的啟發
不要求一定得使用滑鼠
功能選單 http://www.dot.gov.tw
也可用鍵盤展開
功能選單
96
A+確保事件的啟發
不要求一定得使用滑鼠
鍵盤操作 http://www.dot.gov.tw
鍵盤操作
97
鍵盤設定: 原始碼
A+確保事件的啟發
不要求一定得使用滑鼠
 第一層(功能選單) :onFocus
鍵盤設定
98

第二優先等級(AA)
規範與實例
99
主要的規範
第二優先等級
(AA)
 避免使用marquee標籤移動文字
 避免使用動態gif圖片
 確保前景顏色與背景顏色彼此呈現明顯的對比
 加上版本宣告
 網頁加上標題
 不要隨便開啟一個新視窗
 CSS樣式表單應該要使用相對尺寸(如 %) ，而非絕
對尺寸(如像素 )
 在表單控制項上，應以label標籤提示資訊
 使用真實鏈結
100
跑馬燈
跑馬燈是將文字或圖形，以定速滑過
畫面指定區域來顯示文字訊息
現已不那麼炫了(曾經是)
使用代價很高
applet 或 ActiveX，瀏覽器將會變慢。
如關閉或不支援JavaScript，將失效。
IE裡自訂的“Marquee”是不被允許的。
7.3：H207002 避免使用marquee標籤移動文字
101
跑馬燈
 實例分析：
 圖片跑馬燈是可以利用任一圖片區域來顯示
文字訊息。
http://ezhost.apol.com.tw/service/program
-library/javascript/script10.html
點 選
以跑馬燈方式說明圖片內容
102
跑馬燈
 文字跑馬燈
 中央健康保險局
http://www.nhi.gov.tw/00chinese/c_index.asp
文字跑馬燈內容顯示區
103
參考原始碼：
維護建議：
跑馬燈
可使用EM標籤來代
替marquee標籤
104
避免使用：
閃爍圖片
 跳動的圖片容易分心及造成眼睛的不適。
 較容易剌激心臟病及氣喘等患者。
(7.4：H207103 避免使用動態gif圖片)
實例分析：
 gif圖片反覆旋轉--教育部全球資訊網
http://www.edu.tw/EDU_WEB/EDU_MGT/E0001/
EDUION001/hot/hot02.htm?CAPTION=活動訊息
&FILEID=136628
105
閃爍圖片
反覆旋轉
106
閃爍圖片
1
反覆閃爍
3
反覆晃動
2
4
反覆閃爍+移動
反覆旋轉
107
色彩使用
避免使用：
 前景和背景色澤太接近，會混淆顯示內容。
 在閱讀上，眼睛會比較吃力。
實例分析:
白底淡色系文字。
淡色系文字
黑底深色系文字。
深色系文字
2.2：H202101 確保前景顏色與背景顏色彼此呈現明顯的對比
108
版本宣告
 遵照W3C所規範，必須宣告網頁所使用的
HTML版本，並遵照宣告使用標籤。
 適當宣告＋正確使用
3.3：H203002在doctype標籤中，使用標準規範的
敘述以識別HTML版本類型，並遵照宣告使用標籤
109
版本宣告
設計原則：
版本宣告
110
網頁標題
設定標題<title>的用意:
 1.讓使用者儲存我的最愛時，有清楚的網頁名稱。
 2.讓搜索引擎快速正確找到。
 3.純文字瀏覽器上會先顯示網頁名稱。
設計原則：
 簡單清楚的說明標題內容，避免籠統不清。
 在HTML Tag中設定網頁的標題名稱。
<title>無障礙網路空間服務網</title>
13.5：H213004 為你的網頁加上標題。
111
網頁標題
實例分析﹕
無標題
http://www.lukanhr.gov.tw/introduce/introduce/
right.htm (彰化縣鹿港鎮戶政事務所)
112
籠統標題
網頁標題
 http://www.nhi.gov.tw/00chinese/c_index.asp
(中央健康保險局)
113
維護建議﹕
網頁標題
TITLE內容標示清楚
114
開新視窗
由於視覺障礙者難以察覺正在瀏覽的網頁將
轉換至其他網頁，及跳回原瀏覽網頁的困難，
須告知使用者開新視窗。
若網頁中有需要開啟新視窗，則須讓使用者
自行操作。
10.1：H210100 除非使用者知道將會開啟
一個新視窗，不要隨便開啟一個新視窗
115
開新視窗
設計原則：
116
 實例分析：
開新視窗
 http://www.nyc.gov.tw/main.php (行政院青年輔導委員會)
開一個新視窗
117
開新視窗
維護建議：
告知此連結會開新視窗
118
相對尺寸的設計
相對尺寸的相關設計原則﹕
 設計資料表格時使用相對尺寸(如%)
 若使用Font標籤則用“+”或 “-” (如
“smaller”、 “larger”、 “em”)
 如需尺寸或文字可在CSS中設定
3.5:H203004 應該要使用相對尺寸(如 %) ，而非絕對尺寸(如像素 )
119
表格的相對尺寸
實例分析﹕
 所設定的表格雖然會隨著視窗大小而有所變化，
但版面配置不會因此亂跑。
 http://w2kdmz1.moea.gov.tw/index.asp
(經濟部首頁)
120
表格的相對尺寸
標準視窗大小
縮小視窗文字會折行
不影響版面美化
121
相對尺寸
 所設定的字型不會隨著檢視設定而改變是錯誤的設計。
CSS也一樣可以設計相對使寸
http://www.cepd.gov.tw/ (經建會首頁)
(font-size：13px) 錯誤的設計
http://enable.nat.gov.tw/index.jsp (無障礙空間服務網)
字型沒變
大小已改變
122
表單控制項
 必須在表單控制項上，以LABEL標籤標示提
示資訊。
 必須明確顯示表單的控制項與控事項說明之
間的關聯性。
12.6：H212105 在表單控制項上，以label標籤提示資訊
123
實例分析﹕
表單控制項
http://www.ntl.gov.tw/service_mailform.asp
表單內容
124
表單控制項
設計原則﹕
內容相對應
125
真實鏈結
有瀏覽器不支援 JavaScript。
若JavaScript是一個假鏈結，對不支援
JavaScript的環境是不能使用的，最好是
使用真實鏈結!!
126
真實鏈結
實例分析：
 假鏈結(避免使用)
使用JavaScript的鍵結
JavaScript的鏈結說明
127
 真實鏈結(正確範例)
真實鏈結
使用真實網址
網址的鏈結
128
 第三優先等級(AAA)
規範與實例
129
第三優先等級
(AAA)
主要的規範
 使用Lang屬性，明確指出網頁文字所使用
的自然語言
 客戶端影像地圖中的超連結必須在網頁中
有額外對應的可及性超連結
 表格須提供表格摘要說明
 資料表格須提供標題說明
 允許使用者依照個人喜好設定網頁呈現方
式與內容
 對經常使用的超連結，增加快速鍵的操作
 對於表單元件考慮提供鍵盤快速鍵的操作
130
lang屬性
目的是讓語音系統可以正確辨識網頁所使用的自
然語言。
設計原則：
 在HTML標籤中設定lang屬性，中文為“zh-TW”
 <html lang="zh-TW">
 Charset與lang的差別
 <meta http-equiv="Content-Type"
content="text/html; charset=big5">
4.3:H304002 明確指出網頁文字所使用的自然語言
13.4:H213203 使用metadata標籤來記載電腦可以
了解運用的網頁資訊 (第二優先等級)
131
lang屬性
實例分析：
 標明網頁語言(使用XHTML)
 http://www.mof.gov.tw/ (財政部全球資訊網)
132
lang屬性
133
lang屬性
134
lang屬性
135
lang屬性
未標明網頁語言
 http://www.gov.tw/ (我的e政府網站 )
136
lang屬性
137
lang屬性
138
lang屬性
139
lang屬性
維護建議：
 在HTML標籤中設定lang屬性，例如“zh-TW”
則讓瀏覽器得知該網頁所使用的的自然語言是
繁體中文。
 XHTML網頁同時使用xml:lang=“zh-TW” 和
lang=“zh-TW”
140
影像地圖的處理
考慮提供影像地圖以外的可及性方式(文字連結)
設計原則：
 影像地圖(IMG標籤中採用usemap=“#Map”)需加alt
<A HREF="/cgi-bin/serverside.map">
<IMG SRC="homepages.GIF" ALT="Map to select homepages" ISMAP
USEMAP="#csmap" HEIGHT=200 WIDTH=200>
</A>
<MAP NAME="csmap">
<AREA SHAPE="RECT" COORDS="5,5,100,40" HREF="jim.html"
ALT="Jim's Home Page">
<AREA SHAPE="RECT" COORDS="150,1,195,140" HREF="alice.html"
ALT="Alice's Home Page">
</MAP>
[<A HREF="jim.html">Jim's Home Page</A>]
額外的文字連結
[<A HREF="alice.html">Alice's Home Page</A>]
1.5:H101004 影像地圖區域需要加上替代文字說明 (第二優先等級)
1.16:H301015 客戶端影像地圖中的超連結必須在網頁中有額外對
應的可及性超連結
141
影像地圖的處理
實例分析：
 http://www.moj.gov.tw/chinese/f23_1.aspx
(法務部部內組織網頁)
142
影像地圖的處理
143
影像地圖的處理
144
影像地圖的處理
145
影像地圖的處理
146
影像地圖的處理
147
summary屬性
Table tag須使用summary屬性
障礙者的網頁閱讀系統能夠讀取Summary
資訊，可以讓障礙者事先得知表格內的資
料種類，藉以增加閱讀網頁的便利性。
5.1:H105100 對於每一個存放資料的表格(不是用來排版)，
標示出行和列的標題(第一優先等級)
5.2:H105101 表格中超過二行/列以上的標題，須以結構化
的標記確認彼此間的結構與關係(第一優先等級)
5.5:H305004 表格須提供表格摘要說明
5.6:H305105 資料表格須提供標題說明
148
summary屬性
實例分析：
台灣主要城市氣溫與紫外線強度
主要城市
氣溫溫度
紫外線強度
基隆
33度
普通
台北
32度
普通
台中
34度
良好
台南
35度
過量
149
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>
150
實例分析：
summary屬性
 http://www.cpa.gov.tw/default.htm (行政
院人事行政局網頁)
151
summary屬性
152
summary屬性
153
summary屬性
 http://www.moea.gov.tw/ (經濟部全球資
訊網)
154
summary屬性
155
summary屬性
156
summary屬性
 維護建議：
對於資料性表格，提供敘述性摘要說明
對於排版型表格，可簡略標示為“排版表
格”，或用於何種用途的排版表格，如
“主選單排版表格”。
157
共通性高的資訊內容
網頁內容可正常顯示於各種瀏覽器
提供多樣化的下載檔案格式
 目的是讓使用者能夠選擇他們所喜好方式或
是使用上較為方便的網頁瀏覽方式進行網站
瀏覽。
11.4：H311203 允許使用者依照個人喜好設定網頁呈現方式與內容
158
實例分析
共通性高的資訊內容
 網頁內容可正常顯示於各種瀏覽器
 http://www.dot.gov.tw/ch/index.asp (財政部賦稅署)
 使用 Internet Explorer
159
共通性高的資訊內容
 網頁內容可正常顯示於各種瀏覽器
 http://www.dot.gov.tw/ch/index.asp (財政部賦稅署)
 使用 FireFox
160
共通性高的資訊內容
 網頁內容無法正常顯示於各種瀏覽器
 http://www.mof.gov.tw/ (財政部全球資訊網)
 使用 Internet Explorer
161
共通性高的資訊內容
 網頁內容無法正常顯示於各種瀏覽器
 http://www.mof.gov.tw/ (財政部全球資訊網)
 使用 FireFox 時，部份網頁內容無法呈現
162
實例分析
共通性高的資訊內容
 提供多格式檔案下載
 http://enable.nat.gov.tw/download.jsp
(無障礙網路空間服務網 )
163
 未提供多格式檔案下載
共通性高的資訊內容
 http://www.gov.tw/ESERVICE/web_service_choice.phtml?Ca
seID=315000000H0058&c=0 (我的e政府)
164
共通性高的資訊內容
維護建議
 網頁製作時應考慮與各瀏覽器間之共通性
 並非每台電腦都有Word或MS Office
 多利用PDF之類的開放性文件格式
 提供壓縮檔格式下載，可讓使用者有更多的選擇，
壓縮內之文件同樣應符合開放性文件格式之精神
165
 Freego檢測工具的介紹
166
FreeGo簡介
無障礙網頁網路版、單機版檢測軟體
檢測種類。
顯示檢測結果報表。
提供設定檢測網站層級。
提供即時「申請標章登錄」功能。
單機版及操作手冊下載位址：
http://enable.nat.gov.tw/download_tool.jsp
167
主畫面
網址列
3
1
2
檢測清單
工具列
168
停止檢測按鈕
1
工具列
單網頁重新檢測
全網頁重新檢測
單網頁檢視報告
全網頁檢視報告
設定目錄排除項目
設定網頁排除項目
設定檔案排除項目
說明
169
網址工具列
試定檢測層數
2
開始檢測按鈕
網址列
選擇檢測本地端網頁
申請標章登錄按鈕
170
檢測清單
檢測網址個數欄位
機器檢測欄位
3
網址欄位
各優先等級機器檢測與人工檢測錯誤個數欄位
171
單網頁檢測報告
檢測時間
直接瀏覽檢測報告
原網頁畫面加
上插入檢測碼
錯誤位置圖
是否通過檢測等級
172
單網頁檢測報告
文字檢測報告
(顯示錯誤檢測
碼及錯誤個數
與錯誤行數)
網頁原始碼
173
全網站檢測報告
受測網站
資料
是否通過
檢測之優先等級
174
全網站檢測報告
檢測碼錯誤個數連結，可
列出所有本項檢測碼檢測
錯誤之網址
進入檢測碼
說明連結
175
全網站檢測報告
檢測碼編號與內容說明
本項檢測錯誤之總數
本項檢測錯誤之所有網址
點擊可進入單網頁檢測
176
申請標章
當檢測結果符合申請標準
時，此按鈕將呈啟動狀態
申請標章手冊下載http://enable.nat.gov.tw/download.jsp
177
張貼標章
178
 相關工具的介紹
179
瀏覽器
字型尺寸放大功能比較
 MS Internet Explorer
檢視  字型  [最大、較大、適中、較小、最小]
 Netscape Navigator
View  Text Zoom (100%)  Other (300%) 
Ok (Button)
 Firefox
檢視文字大小[放大(Ctrl++)、縮小(Ctrl+-)、ㄧ
般(Ctrl+0)]
180
Internet Explorer
181
Internet Explorer
182
Internet Explorer
183
Netscape
184
Netscape
185
Netscape
186
Netscape
187
Firefox
188
Firefox
189
Firefox
190
 img Tag使用alt屬性功能比較
瀏覽器
 http://www.moj.gov.tw/chinese/index.aspx
(法務部全球資訊網)
191
Internet Explorer
192
Netscape
193
Firefox
194
製作工具
Dreamweaver MX
Frontpage 2003
195
Dreamweaver MX
 當插入Table等物件時，對話框增加有關與
無障礙的標籤或屬性輸入欄位。
 「目標瀏覽器檢查」功能，能對各種
Browser的相容性提出檢測報告。
 無障礙網頁檢測功能
UsableNet Accessibility Reference
196
無障礙屬性欄位
Dreamweaver MX
197
無障礙屬性欄位
Dreamweaver MX
198
無障礙屬性欄位
Dreamweaver MX
199
Browser相容性檢測
Dreamweaver MX
200
Browser相容性檢測
Dreamweaver MX
201
無障礙網頁檢測
Dreamweaver MX
202
無障礙網頁檢測
Dreamweaver MX
203
Frontpage 2003
瀏覽器相容性檢測功能
WCAG & Section 508檢測功能
提供檢測報告
204
瀏覽器相容性檢測功能
Frontpage 2003
205
瀏覽器相容性檢測功能
Frontpage 2003
206
瀏覽器相容性檢測功能
Frontpage 2003
207
瀏覽器相容性檢測報告
Frontpage 2003
208
無障礙檢測功能
Frontpage 2003
209
無障礙檢測功能
Frontpage 2003
210
無障礙檢測功能
Frontpage 2003
211
無障礙檢測報告
Frontpage 2003
212
檢測工具
免費檢測工具 收費檢測工具
FreeGo
A-Prompt
Tidy
Bobby
AccVerify
LIFT
WAVE
 The Illinois Accessible
Web Publishing Wizard
for Microsoft Office
 STEP508
213
免費檢測工具
FreeGo
http://enable.nat.gov.tw/index.jsp
提供單網頁、全網站檢測功能與報告。
依循行政院研考會頒布之無障礙網頁規範。
唯一中文介面之檢測工具。
歡迎多多利用。
214
免費檢測工具
A-Prompt (by ATRC， U of Toronto)
 http://aprompt.snow.utoronto.ca/index.html
簡單易用。
提供檢測與導引式的修訂；適合用來做少量的網
頁修改。
215
A-Prompt
216
免費檢測工具
Tidy
http://tidy.sourceforge.net.
可修正寫網頁時所發生的錯誤，並可自動產
生建議修正的檔案。
使用JAVA撰寫，Open Source。
使用前需要Compile，因著每台PC的JVM以
及參數設定的不同，容易發生無法Compile
成功的問題。
217
收費檢測工具
Bobby (by CAST and Watchfire)
http://www.watchfire.com/
以前3.x的版本免費提供大眾使用。
現在5.0的版本是商業軟體，由Watchfire重新
以開發，只提供單網頁檢測報告。
Brown U.的e-Government對無障礙網站的檢
測一直都是用Bobby。
218
收費檢測工具
AccVerify (by HiSoftware)
http://www.hisoftware.com/
功能很完整，提供檢測與修復功能，甚至有簡
單的專案管理機制 - 相對的難操作，也較貴，
是一種Frontpage的Plug-in。
219
LIFT(by UsableNet)
收費檢測工具
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，讓使用者在瀏覽網頁時也順便將
該頁面送檢測。
220
收費檢測工具
The Illinois Accessible Web Publishing Wizard
for Microsoft Office (by UIUC)
 http://cita.rehab.uiuc.edu/software/office/index.ht
ml
 可將MS Office的檔案轉換成符合Section 508與
WCAG 1.0的2A標準的HTML檔。
STEP508(Simple Tool for Error Prioritization)
 http://www.section508.gov/
 由美國政府所開發，須配合LIFT或Bobby 3.x，用來產
製508無障礙檢測結果的管理報表。
221
 人工檢視原則與要點
222
人工檢測原則
許多指導原則無法被科學評鑑或自動測試
 注意項目：
Flash 裡的鏈結
(請額外提供可及性鏈結)
確實標明網頁標題及圖片說明
網站地圖的導覽協助
色彩與鏈結裝飾的問題
(不依賴色彩及假鏈結)
適切的使用導盲磚及快捷鍵
撰寫親和力聲明
提供不支援script替代方案
 避免項目：
閃爍的圖片
使用結構不明確的表格
主要內容未先呈現
223
該怎麼進行
人工檢測?
自我處理的方式
用文字網頁瀏覽器Lynx來模擬操作。
 Windows版
http://www.jim.spath.com/lynx_win32/ftp.html
 Web版
http://www.delorie.com/web/lynxview.html
 Linux版
http://lynx.isc.org/
224
該怎麼進行
人工檢測?
 若使用一般GUI瀏覽器，可試試以下情況
是否還能操作網頁：
關掉JavaScript、聲音播放、圖形顯示的支
援選項。
調整字體大小、螢幕解析度。
放下滑鼠只用鍵盤操作。
看看用黑白印表機印出的網頁內容。
225
對於人工檢測Flash、
PDF、Word
的無障礙建議
 網頁提供這些檔案的連結時，要對這些
檔案連結/物件做足夠的說明。
Flash範例
http://www.swcoast-nsa.gov.tw
Word及PDF範例
http://enable.nat.gov.tw/download.jsp
226
結語
 在實務上，雖然沒有任何二套檢測軟體
其結果是完全一致的，但它們都符合無
障礙的精神。
 請多利用FreeGo，除了遵循 W3C的規
範外，而且擁有中文介面。
 請多比較，多使用各種工具，也請對
FreeGo多批評指教
 歡迎任何寶貴的意見。
227