Transcript accessibility_2012_05

無障礙網頁教育訓練
大綱



無障網頁規範
設計要點
如何自行檢測




協助工具
檢測碼
Freego
檢測範圍

參考資料
無障網頁規範-開發規範

為讓網頁設計人員在設計
網頁時有所依據，訂定無
障礙網頁開發規範




四項設計原則(第2頁)
三個優先等級(第6項)
十四條規範(第7頁)
九十條檢測碼(第15頁)
四項設計原則
三個優先等級
十四條規範
九十條檢測碼
無障網頁規範-標章定義


第1優先等級(A)：為網站符合無障礙設
計最基本的要求，以
標章代表。
A+：除第1優先等級外，增加三個便利使
用者瀏覽網頁的功能，以
標章代表。



定位點(:::)搭配鍵盤快速鍵(Accesskey)
網站導覽功能(Sitemap)
網頁瀏覽工具具有使用鍵盤設計，勿只設計
僅能使用滑鼠點選
無障網頁規範-標章定義(續)


第2優先等級(AA)：符合第1及第2優先等
級之無障礙設計規範，以
標章代表。
第3優先等級(AAA)：符合第1、第2及第
3優先等級之無障礙設計規範，以
標
章代表。
無障網頁規範-檢測碼格式

檢測碼格式代表其相關之檢測資訊

1.1：H101000 圖片需要加上替代文字說明
H 1 01 0 00
網頁語言
(H：HTML | X：XML)
優先等級 (1 | 2 | 3)
規範的流水號碼(00~99)
檢測狀態( 0 | 1 | 2 )
十四條規範(01~14)
無障網頁規範-檢測狀態說明

0：機器辨識 /機器檢測


1：機器辨識 /人工檢測


可透過檢測工具辨識、檢測。
可透過檢測工具辨識，但還需由人工的方式
去檢測是否符合規範。
2：人工辨識 /人工檢測

完全需要人工的方式來辨識、檢測。
需要人工檢測
設計要點-替代文字


針對圖片、聲音、影像等提供聽覺及視
覺的內容要提供相等的替代文字內容。
主要目的為提供在無法以聽覺或視覺來
接收資訊時可以了解內容之替代方案，
可彈性選擇處理方式。
設計要點-替代文字(圖片1/8)

非裝飾用的網頁圖示，應提供正確且符
合圖片內容的替代文字說明。


當圖片無法顯示或使用文字、語音瀏覽器時
才有作用。
使用 alt 屬性來指定：
<img src="xxxx.png" alt="替代文字" />
設計要點-替代文字(圖片2/8)
正常顯示圖片時
圖片無法顯示時
原始檔案部份
設計要點-替代文字(圖片3/8)

清單項目圖示，使用"*" 作為替代圖示。



勿使用"項目小圖示"等內容，作為替代文字，
避免語言朗讀系統重複讀取無意義的資訊。
使用 alt 屬性來指定：
<img src="icon.gif" alt="*" />
建議使用正確之清單標籤(UL)配合CSS
來指定清單圖示或設為背景圖示，簡化
設計。
設計要點-替代文字(圖片4/8)
清單項目圖示替代文字
使用CSS替代
設計要點-替代文字(圖片5/8)

美編、排版等裝飾圖片，使用"" 作為替
代圖示。



勿使用"邊框圖片"等內容，作為替代文字。
因裝飾用圖片不是用來表達資訊，避免語言
朗讀系統重複讀取無意義的資訊。
使用 alt 屬性來指定：
<img src="icon.gif" alt="" />
設計要點-替代文字(圖片6/8)
正常顯示圖片時
圖片無法顯示時
原始檔案部份
設計要點-替代文字(圖片7/8)

資訊型圖片(組織圖、位置圖、流程圖等)
應額外提供詳細文字說明。


無法充分表達資訊型圖片內容時，在網頁上
再額外說明。
仍需使用 alt 屬性。
設計要點-替代文字(圖片8/8)
提供資訊型圖片的內容敘述文字
設計要點-超連結

各項檔案下載或開啟，請將檔案類型(pdf、
doc或其他格式)，標示於超連結之替代
文字內，讓視障者游標移到該檔案時，
即可知道檔案下載格式。

使用 title 屬性來指定：
<a href="xx.doc" title="下載報名表(DOC
檔)">報名表</a>
設計要點-超連結(續)
提供說明連結目標之檔案類型
原始碼部份
設計要點-超連結(續)

使用鍵盤瀏覽時，當焦點移至超連結上
方，需提供顯示目前焦點位置之方式(虛
線框或其它形式) 。


用以區別目前焦點在那一個連結位置。
若無特別修改，預設即有虛線框標示。
預設虛線框標示目前焦點位置
設計要點-表格處理

對於每一個存放資料的表格（不是用來
排版），標示出行和列的標題。


使用正確的 <th></th> 標籤來設置表格的標
題(該標籤的原始用途)。
除有助於理解該欄位為標題外，亦有助於簡
化頁面之樣式設計。
設計要點-表格處理(續)
使用 TH 標籤標示標題欄位
原始碼部份
設計要點-表格處理(續)

表格中超過二行/列以上的標題，須以結
構化的標記確認彼此間的結構與關係。

使用axis屬性、headers屬性及id屬性來為表
格中的資料確定之間的結構與關係。



axis：欄位內容的分類名稱
headers：設定與欄位相關標題關聯
若有此情況，建議將其分為二個Table較容
易處理。
設計要點-表格處理(續)
a4
a6
a8
a6, a8, a4
在表格中標記標題對應關係
超過二列以上之標題表格
設計要點-定位點與快速鍵

定位點為使用連續三個":"號形成":::"的連
結，有搜尋及定位的用途。


可快速移動至各主要區塊。
使用accesskey屬性：
<a accesskey="M" href="#">:::</a>



當使用者按下Alt + M時，焦點會跳至該位置。
可利用背景色或CSS將其隱藏，不影響網頁美工，
仍保有定位點功能(當焦點移至上方時需顯示)。
需於網站導覽中說明快速鍵定義。
設計要點-定位點與快速鍵(續)
定位點設計
於網站導覽中需提供快速鍵說明
設計要點-網站導覽


提供使用者能夠快速了解 網站之架構。
對於僅能用鍵盤操作或非視覺瀏覽器使
用者提供快速存取頁面之管道。


包含"定位點與快速鍵說明"及"網站地圖"二
部份。
網站地圖需維持與現況相符，並以編號方式
清楚呈現標題層次，編號需納入連結中。
設計要點-網站導覽(續)
1
2
3
4
5
6
7
8
9
10
定位點與快速鍵之說明
以列表及編號之方式列出此頁面架構
設計要點-不要單獨靠色彩來提
供特殊資訊


避免只使用色彩差異來顯示資訊的不同，
對於視障者或黑白螢幕使用者來說，無
法辯讀藉由顏色所傳達的正確訊息。
應確保除色彩外，尚有其餘形式可以了
解提供的資訊。
設計要點-不要單獨靠色彩來提
供特殊資訊(續)
一但無法顯示色彩，使用者便無法理解資訊
一般使用者
視障者或黑白
螢幕使用者
無法顯示色彩時，仍可藉由文字內容理解提供之資訊
設計要點-確保去除CSS時仍能
閱讀內容

採用CSS進行網頁排版及美工設計時，
需確定無法呈現CSS樣式時，仍能正確
的呈現欲呈現之資訊。

正確的使用HTML標籤，在CSS無作用時仍
具有原始樣式。


如：<h1></h1>、<ul><li></li></ul>
版面配置時各區塊HTML內容之放置應儘量
依呈現的順序(由上至下，由左至右)放置。
設計要點-確保去除CSS時仍能
閱讀內容(續)
去除CSS前
去除CSS後
設計要點-Script之處理

當使用Script時，需同時設置當不支援
Script的替代方案。



使用<noscript></noscript>或其它設計方法
來設置替代方案。
以能正確傳達原先欲傳達之資訊為目的，並
無規定替代方案之方式。
若不會影響資訊的呈現，則加註說明即可。
設計要點-Script之處理(續)
替代方式之一
Script啟用時
Script停用時的處理
設計要點-提供滑鼠與鍵盤皆可
操作之介面

網頁瀏覽功能應同時提供滑鼠與鍵盤同
時可操控的介面。


避免當於無滑鼠之使用環境下無法使用。
對應之事件：


onmouseover(滑鼠移至此標籤上方時) =>
onfocus(焦點移至此標籤時)
onmouseout(滑鼠離開此標籤上方時) =>
onblur(焦點離開此標籤時)
設計要點-提供滑鼠與鍵盤皆可
操作之介面(續)

處理方式為，當觸發鍵盤事件時，執行
對應的滑鼠事件內容。


onmouseover => onfocus：
onfocus="this.onmouseover();"
onmouseout => onblur：
onblur="this.onmouseout();"
設計要點-提供滑鼠與鍵盤皆可
操作之介面(續)
提供對應之事件處理
設計要點-Flash 之處理

當使用 Flash 時與 Script 相同，需設置
當不支援 Flash 時的替代方案。



使用<noembed></noembed>來設置替代方
案。
以能正確傳達原先欲傳達之資訊為目的，並
無規定替代方案之方式。
若不會影響資訊的呈現，則加註說明即可。
設計要點-Flash 之處理(續)
採用Flash 之選單
替代方案
設計要點-定義每個頁框的名稱

在框架中定義名稱，便於使用者快速了
解框架內容。

使用title屬性。
定義框架名稱
設計要點-其餘項目


英文版頁面之文字及替代文字(圖片、
Script、Flash等)，必需為全英文內容，
請勿中英文夾雜。
使用Tab 鍵進行瀏覽時，需讓焦點依頁
面內容順序移動，避免中途跳離或順序
混亂，造成瀏覽者不便。
如何自行檢測-協助工具

可利用 IE 8、IE9 之開發者工具，進行
檢測停用 CSS、Script及圖片替代文字
效果。

啟動路徑為：



由選單選擇：工具 => 開發者工具
直接按F12鍵開啟
Firefox 可使用 Web Developer 替代。
如何自行檢測-協助工具(續)
啟動開發者工具(或按F12)
開發者工具介面
如何自行檢測-協助工具(續)

開啟開發者工具後，便可依下列操作，
進行測試：



停用CSS：停用 => CSS
停用Script：停用 => 指令碼
圖片替代文字效果：影像 => 停用影像(或
檢視替代文字)
停用 CSS 或 Script
圖片替代文字效果
如何自行檢測-檢測碼

先閱讀90條檢測碼中，屬於A+等級之部
分。




H1XXXXX：全部第一優先等級
H309204：對經常使用的超連結，增加快速
鍵的操作
H213205：為你的網站提供網站地圖或整體
性的簡介
H209002：確保事件的啟發不要求一定得使
用滑鼠
如何自行檢測-Freego

使用Freego軟體檢測




目前版本：3.1.1
下載：
http://www.cc.hust.edu.tw/download_files/
無障礙網頁/Freego-windows-3.1.1.zip
將其解壓縮後，直接執行FreeGo.exe即可。
預設等級即為A+。
如何自行檢測-Freego (續)
欲檢測之網址
開始進行檢測
如何自行檢測-Freego (續)
若全數通過機器檢測則會浮起
通過機器檢測與否
機器檢測不通過 / 待人工檢測項目數
檢測之網址
如何自行檢測-Freego (續)
檢視單頁檢測報告
點選未通過之頁面
未通過機器檢測的檢測碼、數量
及在HTML中的行數
點選項目名稱顯示範例及說明
點選行號則跳至該行HTML原始碼
需人工檢測的檢測碼、數量及在HTML中的行數
如何自行檢測-Freego (續)
全網站檢測報告
點選頁面後開啟該頁檢測報告
全站的人工檢測項目及數量
點選後列出含本項目
的全部頁面
檢測範圍


如何判定檢測範圍
網址前半段與登錄網址一樣的才須檢測


如登錄網址為
http://staff.hust.edu.tw/秘書室/
需檢測



http://staff.hust.edu.tw/秘書室/emp.html
http://staff.hust.edu.tw/秘書室/企劃組/index.asp
不需檢測

http://staff.hust.edu.tw/會計室/
參考資料

無障礙網頁開發規範：


其餘資源下載：


http://www.webguide.nat.gov.tw/wSite/np?ctNode=14408&mp=1
http://www.webguide.nat.gov.tw/wSite/np?ctNode=14518&mp=1&idPath=14382_1451
8
行政院研究會網頁無障礙設計說明會講義：

http://www.cc.hust.edu.tw/download_files/無障礙網頁/行政院研考會網頁無障礙設計說
明會講義2010.zip