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

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

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

2 大綱 無障網頁規範 開發規範 標章定義 檢測碼格式 檢測狀態說明 設計要點 如何自行檢測 檢測範圍 參考資料

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/6) 非裝飾用的網頁圖示，應提供正確的替代文字說明。 當圖片無法顯示或使用文字、語音瀏覽器時才有作用。
使用 alt 屬性來指定： <img src="xxxx.png" alt="替代文字" />

10 設計要點-替代文字(圖片2/6)

11 設計要點-替代文字(圖片3/6) 裝飾用圖示(如清單圖示、邊框等)使用 ”*” 或 “” 代替。
<img src="icon.gif" alt="*" /> <img src="icon.gif" alt="" /> 建議使用正確之清單標籤(UL)配合CSS來指定清單圖示或設為背景圖示，簡化設計。

12 設計要點-替代文字(圖片4/6) 範例檔案(HTML) 範例檔案(CSS)

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

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

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

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

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

18 設計要點-表格處理 (範例)

19 設計要點-表格處理 表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係。
使用axis屬性、headers屬性及id屬性來為表格中的資料確定之間的結構與關係。 axis：欄位內容的分類名稱 headers：設定與欄位相關標題關聯

20 設計要點-表格處理 a4 a6 a8 a6, a8, a4 (範例)

21 設計要點-定位點(:::)與快速鍵 定位點為使用連續三個:號形成:::的連結，有搜尋及定位的用途。 可快速移動至各主要區塊。
<a accesskey="M" href="#">:::</a> 當使用者按下Alt + m(Firefox 為 Shift + Alt + m) 時，焦點會自動跳到 accesskey="M"的位置。 可利用背景色將其隱藏，不影響網頁美工，仍保有定位點功能。

22 設計要點-定位點(:::)與快速鍵 (已隱藏)

23 設計要點-網站導覽 提供使用者能夠快速了解 網站之架構。 對於僅能用鍵盤操作或非視覺瀏覽器使用者提供快速存取頁面之管道。
應置於首頁，且在鍵盤移動能於三個游標內能到達。 以編號方式清楚呈現標題層次。 內容包含定位點與快速鍵之說明。

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

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

26 設計要點-提供滑鼠與鍵盤皆可操作之介面 將對應的事件內容複製 (範例)

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

28 設計要點-確保去除CSS時仍能閱讀內容

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

30 設計要點-JavaScript之處理

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

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

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

34 如何自行檢測 欲檢測之網址 開始進行檢測

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

36 如何自行檢測 未通過機器檢測的檢測碼、數量及在HTML中的行數 點選項目名稱顯示範例及說明 點選行號則跳至該行HTML原始碼
檢視單頁檢測報告 點選未通過之頁面 需人工檢測的檢測碼、數量及在HTML中的行數

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

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

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