* 07/16/96 無障礙網頁教育訓練 *.

Presentation on theme: "* 07/16/96 無障礙網頁教育訓練 *."— Presentation transcript:

1 * 07/16/96 無障礙網頁教育訓練 *

2 大綱 無障網頁規範 設計要點 如何自行檢測 協助工具 檢測碼 Freego 檢測範圍 參考資料

3 無障網頁規範-開發規範 為讓網頁設計人員在設計網頁時有所依據，訂定無障礙網頁開發規範 四項設計原則(第2頁) 三個優先等級(第6項)
* 07/16/96 無障網頁規範-開發規範 為讓網頁設計人員在設計網頁時有所依據，訂定無障礙網頁開發規範 四項設計原則(第2頁) 三個優先等級(第6項) 十四條規範(第7頁) 九十條檢測碼(第15頁) 四項設計原則 三個優先等級 十四條規範 九十條檢測碼 *

4 無障網頁規範-標章定義 第1優先等級(A)：為網站符合無障礙設計最基本的要求，以 標章代表。
定位點(:::)搭配鍵盤快速鍵(Accesskey) 網站導覽功能(Sitemap) 網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使用滑鼠點選

5 無障網頁規範-標章定義(續) 第2優先等級(AA)：符合第1及第2優先等級之無障礙設計規範，以 標章代表。
第3優先等級(AAA)：符合第1、第2及第3優先等級之無障礙設計規範，以 標章代表。

6 無障網頁規範-檢測碼格式 H 1 01 0 00 檢測碼格式代表其相關之檢測資訊 1.1：H101000 圖片需要加上替代文字說明 網頁語言
(H：HTML | X：XML) 規範的流水號碼(00~99) 檢測狀態( 0 | 1 | 2 ) 優先等級 (1 | 2 | 3) 十四條規範(01~14)

7 無障網頁規範-檢測狀態說明 0：機器辨識 /機器檢測 1：機器辨識 /人工檢測 2：人工辨識 /人工檢測 可透過檢測工具辨識、檢測。
可透過檢測工具辨識，但還需由人工的方式去檢測是否符合規範。 2：人工辨識 /人工檢測 完全需要人工的方式來辨識、檢測。 需要人工檢測

8 設計要點-替代文字 針對圖片、聲音、影像等提供聽覺及視覺的內容要提供相等的替代文字內容。
主要目的為提供在無法以聽覺或視覺來接收資訊時可以了解內容之替代方案，可彈性選擇處理方式。

9 設計要點-替代文字(圖片1/8) 非裝飾用的網頁圖示，應提供正確且符合圖片內容的替代文字說明。
當圖片無法顯示或使用文字、語音瀏覽器時才有作用。 使用 alt 屬性來指定： <img src="xxxx.png" alt="替代文字" />

10 設計要點-替代文字(圖片2/8) 正常顯示圖片時 圖片無法顯示時 原始檔案部份

11 設計要點-替代文字(圖片3/8) 清單項目圖示，使用"*" 作為替代圖示。
勿使用"項目小圖示"等內容，作為替代文字，避免語言朗讀系統重複讀取無意義的資訊。 使用 alt 屬性來指定： <img src="icon.gif" alt="*" /> 建議使用正確之清單標籤(UL)配合CSS來指定清單圖示或設為背景圖示，簡化設計。

12 設計要點-替代文字(圖片4/8) 清單項目圖示替代文字 使用CSS替代

13 設計要點-替代文字(圖片5/8) 美編、排版等裝飾圖片，使用"" 作為替代圖示。 勿使用"邊框圖片"等內容，作為替代文字。
因裝飾用圖片不是用來表達資訊，避免語言朗讀系統重複讀取無意義的資訊。 使用 alt 屬性來指定： <img src="icon.gif" alt="" />

14 設計要點-替代文字(圖片6/8) 正常顯示圖片時 圖片無法顯示時 原始檔案部份

15 設計要點-替代文字(圖片7/8) 資訊型圖片(組織圖、位置圖、流程圖等)應額外提供詳細文字說明。
無法充分表達資訊型圖片內容時，在網頁上再額外說明。 仍需使用 alt 屬性。

16 設計要點-替代文字(圖片8/8) 提供資訊型圖片的內容敘述文字

17 設計要點-超連結 各項檔案下載或開啟，請將檔案類型(pdf、doc或其他格式)，標示於超連結之替代文字內，讓視障者游標移到該檔案時，即可知道檔案下載格式。 使用 title 屬性來指定： <a href="xx.doc" title="下載報名表(DOC檔)">報名表</a>

18 設計要點-超連結(續) 提供說明連結目標之檔案類型 原始碼部份

19 設計要點-超連結(續) 使用鍵盤瀏覽時，當焦點移至超連結上方，需提供顯示目前焦點位置之方式(虛線框或其它形式) 。
用以區別目前焦點在那一個連結位置。 若無特別修改，預設即有虛線框標示。 預設虛線框標示目前焦點位置

20 設計要點-表格處理 對於每一個存放資料的表格（不是用來排版），標示出行和列的標題。
使用正確的 <th></th> 標籤來設置表格的標題(該標籤的原始用途)。 除有助於理解該欄位為標題外，亦有助於簡化頁面之樣式設計。

21 設計要點-表格處理(續) 使用 TH 標籤標示標題欄位 原始碼部份

22 設計要點-表格處理(續) 表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係。
使用axis屬性、headers屬性及id屬性來為表格中的資料確定之間的結構與關係。 axis：欄位內容的分類名稱 headers：設定與欄位相關標題關聯 若有此情況，建議將其分為二個Table較容易處理。

23 設計要點-表格處理(續) a4 a6 a8 a6, a8, a4 超過二列以上之標題表格 在表格中標記標題對應關係

24 設計要點-定位點與快速鍵 定位點為使用連續三個":"號形成":::"的連結，有搜尋及定位的用途。 可快速移動至各主要區塊。
使用accesskey屬性： <a accesskey="M" href="#">:::</a> 當使用者按下Alt + M時，焦點會跳至該位置。 可利用背景色或CSS將其隱藏，不影響網頁美工，仍保有定位點功能(當焦點移至上方時需顯示)。 需於網站導覽中說明快速鍵定義。

25 設計要點-定位點與快速鍵(續) 定位點設計 於網站導覽中需提供快速鍵說明

26 設計要點-網站導覽 提供使用者能夠快速了解 網站之架構。 對於僅能用鍵盤操作或非視覺瀏覽器使用者提供快速存取頁面之管道。
包含"定位點與快速鍵說明"及"網站地圖"二部份。 網站地圖需維持與現況相符，並以編號方式清楚呈現標題層次，編號需納入連結中。

27 設計要點-網站導覽(續) 1 2 3 4 5 6 7 8 9 10 定位點與快速鍵之說明 以列表及編號之方式列出此頁面架構

28 設計要點-不要單獨靠色彩來提供特殊資訊 避免只使用色彩差異來顯示資訊的不同，對於視障者或黑白螢幕使用者來說，無法辯讀藉由顏色所傳達的正確訊息。 應確保除色彩外，尚有其餘形式可以了解提供的資訊。

29 設計要點-不要單獨靠色彩來提供特殊資訊(續)
一但無法顯示色彩，使用者便無法理解資訊 一般使用者 視障者或黑白螢幕使用者 無法顯示色彩時，仍可藉由文字內容理解提供之資訊

30 設計要點-確保去除CSS時仍能閱讀內容 採用CSS進行網頁排版及美工設計時，需確定無法呈現CSS樣式時，仍能正確的呈現欲呈現之資訊。
正確的使用HTML標籤，在CSS無作用時仍具有原始樣式。 如：<h1></h1>、<ul><li></li></ul> 版面配置時各區塊HTML內容之放置應儘量依呈現的順序(由上至下，由左至右)放置。

31 設計要點-確保去除CSS時仍能閱讀內容(續)

32 設計要點-Script之處理 當使用Script時，需同時設置當不支援Script的替代方案。
使用<noscript></noscript>或其它設計方法來設置替代方案。 以能正確傳達原先欲傳達之資訊為目的，並無規定替代方案之方式。 若不會影響資訊的呈現，則加註說明即可。

33 設計要點-Script之處理(續) 替代方式之一 Script啟用時 Script停用時的處理

34 設計要點-提供滑鼠與鍵盤皆可操作之介面 網頁瀏覽功能應同時提供滑鼠與鍵盤同時可操控的介面。 避免當於無滑鼠之使用環境下無法使用。
對應之事件： onmouseover(滑鼠移至此標籤上方時) => onfocus(焦點移至此標籤時) onmouseout(滑鼠離開此標籤上方時) => onblur(焦點離開此標籤時)

35 設計要點-提供滑鼠與鍵盤皆可操作之介面(續)
處理方式為，當觸發鍵盤事件時，執行對應的滑鼠事件內容。 onmouseover => onfocus： onfocus="this.onmouseover();" onmouseout => onblur： onblur="this.onmouseout();"

36 設計要點-提供滑鼠與鍵盤皆可操作之介面(續)
提供對應之事件處理

37 設計要點-Flash 之處理 當使用 Flash 時與 Script 相同，需設置當不支援 Flash 時的替代方案。
使用<noembed></noembed>來設置替代方案。 以能正確傳達原先欲傳達之資訊為目的，並無規定替代方案之方式。 若不會影響資訊的呈現，則加註說明即可。

38 設計要點-Flash 之處理(續) 採用Flash 之選單 替代方案

39 設計要點-定義每個頁框的名稱 在框架中定義名稱，便於使用者快速了解框架內容。 使用title屬性。 定義框架名稱

40 設計要點-其餘項目 英文版頁面之文字及替代文字(圖片、Script、Flash等)，必需為全英文內容，請勿中英文夾雜。
使用Tab 鍵進行瀏覽時，需讓焦點依頁面內容順序移動，避免中途跳離或順序混亂，造成瀏覽者不便。

41 如何自行檢測-協助工具 可利用 IE 8、IE9 之開發者工具，進行檢測停用 CSS、Script及圖片替代文字效果。 啟動路徑為：
由選單選擇：工具 => 開發者工具 直接按F12鍵開啟 Firefox 可使用 Web Developer 替代。

42 如何自行檢測-協助工具(續) 啟動開發者工具(或按F12) 開發者工具介面

43 如何自行檢測-協助工具(續) 開啟開發者工具後，便可依下列操作，進行測試： 停用CSS：停用 => CSS
停用Script：停用 => 指令碼 圖片替代文字效果：影像 => 停用影像(或檢視替代文字) 停用 CSS 或 Script 圖片替代文字效果

44 如何自行檢測-檢測碼 先閱讀90條檢測碼中，屬於A+等級之部分。 H1XXXXX：全部第一優先等級

45 如何自行檢測-Freego 使用Freego軟體檢測 目前版本：3.1.1
下載： 將其解壓縮後，直接執行FreeGo.exe即可。 預設等級即為A+。

46 如何自行檢測-Freego (續) 欲檢測之網址 開始進行檢測

47 如何自行檢測-Freego (續) 若全數通過機器檢測則會浮起 通過機器檢測與否 檢測之網址 機器檢測不通過 / 待人工檢測項目數

48 如何自行檢測-Freego (續) 未通過機器檢測的檢測碼、數量及在HTML中的行數 點選項目名稱顯示範例及說明
檢視單頁檢測報告 點選未通過之頁面 需人工檢測的檢測碼、數量及在HTML中的行數

49 如何自行檢測-Freego (續) 全網站檢測報告 點選頁面後開啟該頁檢測報告 點選後列出含本項目 的全部頁面 全站的人工檢測項目及數量

50 檢測範圍 如何判定檢測範圍 網址前半段與登錄網址一樣的才須檢測 如登錄網址為 http://staff.hust.edu.tw/秘書室/
如登錄網址為 需檢測 不需檢測

51 參考資料 無障礙網頁開發規範： 其餘資源下載： 行政院研究會網頁無障礙設計說明會講義：
其餘資源下載： 行政院研究會網頁無障礙設計說明會講義：