无障碍网页教育训练.ppt

設計要點-定義每個頁框的名稱 在框架中定義名稱，便於使用者快速了解框架內容。 使用title屬性。 如何自行檢測 先閱讀90條檢測碼中，屬於A+等級之部分。 H1XXXXX：全部第一優先等級 H309204：對經常使用的超連結，增加快速鍵的操作 H213205：為你的網站提供網站地圖或整體性的簡介 H209002：確保事件的啟發不要求一定得使用滑鼠 如何自行檢測 使用FreeGo軟體檢測 目前版本：3.1.1 下載：.tw/wSite/ct?xItem=1087ctNode=239 將其解壓縮後，直接執行FreeGo.exe即可。 預設等級即為A+。 如何自行檢測 欲檢測之網址 開始進行檢測 如何自行檢測 若全數通過機器檢測則會浮起 通過機器檢測與否 機器檢測不通過 / 待人工檢測項目數 檢測之網址 如何自行檢測 點選未通過之頁面 檢視單頁檢測報告 未通過機器檢測的檢測碼、數量及在HTML中的行數 點選項目名稱顯示範例及說明 點選行號則跳至該行HTML原始碼 需人工檢測的檢測碼、數量及在HTML中的行數 如何自行檢測 全網站檢測報告 全站的人工檢測項目及數量 點選後列出含本項目 的全部頁面 點選頁面後開啟該頁檢測報告 檢測範圍 如何判定檢測範圍 網址前半段與登錄網址一樣的才須檢測 如登錄網址為 .tw/秘書室/ 需檢測 .tw/秘書室/emp.html .tw/秘書室/企劃組/index.asp 不需檢測 .tw/會計室/ 參考資料 無障礙網頁開發規範： .tw/wSite/lp?ctNode=187mp=1 其餘資源下載： .tw/wSite/np?ctNode=181mp=1idPath=133_181 行政院研究會網頁無障礙設計說明會講義： .tw/download_files/無障礙網頁/行政院研考會網頁無障礙設計說明會講義2010.zip * 07/16/96 * ## * 07/16/96 * ## 無障礙網頁教育訓練 大綱 無障網頁規範 開發規範 標章定義 檢測碼格式 檢測狀態說明 設計要點 如何自行檢測 檢測範圍 參考資料 無障網頁規範-開發規範 為讓網頁設計人員在設計網頁時有所依據，訂定無障礙網頁開發規範 四項設計原則(第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) 規範的流水號碼(00~99) 檢測狀態( 0 | 1 | 2 ) 十四條規範(01~14) 優先等級 (1 | 2 | 3) 無障網頁規範-檢測狀態說明 0：機器辨識 /機器檢測 可透過檢測工具辨識、檢測。 1：機器辨識 /人工檢測 可透過檢測工具辨識，但還需由人工的方式去檢測是否符合規範。 2：人工辨識 /人工檢測 完全需要人工的方式來辨識、檢測。 需要人工檢測 設計要點-替代文字 針對圖片、聲音、影像等提供聽覺及視覺的內容要提供相等的替代文字內容。 主要目的為提供在無法以聽覺或視覺來接收資訊時可以了解內容之替代方案，可彈性選擇處理方式。 設計要點-替代文字(圖片1/6) 非裝飾用的網頁圖示，應提供正確的替代文字說明。 當圖片無法顯示或使用文字、語音瀏覽器時才有作用。 使用 alt 屬性來指定：img src=xxxx.png alt=替代文字 / 設計要點-替代文字(圖片2/6) 設計要點-替代文字(圖片3/6) 裝飾用圖示(如清單圖示、邊框等)使用 ”*” 或 “” 代替。 img src=icon.gif alt=* / img src=icon.gif alt= / 建議使用正確之清單標籤(UL)配合CSS來指定清單圖示或設為背景圖示，簡化設計。 設計要點-替代文字(圖片4/6) 範例檔案(HTML) 範例檔案(CSS) 設計要點-替代文字(圖片5/6) 資訊型圖片(組織圖、位置圖、流程圖等)應額外提供詳細文字