《网页五四三视觉设计篇ppt课件.ppt》由会员分享，可在线阅读，更多相关《网页五四三视觉设计篇ppt课件.ppt（45页珍藏版）》请在文件跳动上搜索。

1、張秀榕、龔邦珍 主講2008-06-04及設計經驗分享1.無障礙網頁專區http:/w3.tku.edu.tw/batol/2.無障礙網路空間n以方便行善的概念為設計基礎例：生活環境中的無障礙坡道n降低網路應用上的困難與挫折感n增加生活資訊流通與應用的機會網路為資訊創造了無遠弗屆的可能，但人為的因素卻可能設下了屏障與阻礙！例：只能限制某種瀏覽解析度、某種瀏覽器或版本3.無障礙網站n在網站的設計上考量身障使用者的需求，盡量排除不必要的的障礙n使網站的操作使用的便利性，達到一定的標準國際標準(W3C,WAI,WCAG)國內標準(無障礙標章：A,A+,AA,AAA以Accessibility為標章設

2、計原由)4.無障礙網頁開發規範n四項原則n十四條規範n九十條相關的檢測要點分屬3個優先等級、3(+1)個檢測等級每個檢測等級都含機器及人工檢測2個部分標準檢測碼的檢測狀態：0：機器辨識/機器檢測1：機器辨識/人工檢測2：人工辨識/人工檢測5.無障礙網頁開發規範n國內標準與國外的差異WCAG 1.0國內優先等級3個3個規範條文14條14條規範細節65個檢測碼90個檢測碼檢測方式人工/機器人工/機器檢測等級3個3+1個認證標章3個3+1個6.無障礙網頁開發規範n四項原則多媒體相關資訊的可及性網頁內容：影像、圖形、語音、音樂、影片等，應加入替代或等值的文字網頁結構和呈現處理的可及性網頁文字為了排版或

3、美觀而採用了表格或頁框設計，卻破壞了網頁的可及性網頁開發和輸出入裝置相關技術處理的可及性不使用滑鼠的情況下，需兼顧鍵盤使用者的可及性、Script語言、特殊的媒體技術(FLASH)網站瀏覽機制的可及性身障者在特殊上網裝置瀏覽網頁時較不方便，因此網站瀏覽機制的設計應力求簡單清楚(例如下拉式選單mouse over時才出現，mouse out時又消失)7.無障礙網頁開發規範n十四條規範(http:/enable.nat.gov.tw/doc1.jsp)規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語

4、言的使用 規範五：建立編排良好的表格規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 8.無障礙網頁開發規範n十四條規範(http:/enable.nat.gov.tw/doc1.jsp)規範八：確保嵌入式使用者介面具有直接可及性規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案 規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制規範十四：確保簡單清楚的網頁內容 9.無障礙網頁開發規範n因應四個原則及十四條規範，於是有了九十個檢測要點可利用研考會網站的線上檢測功能或Freego檢測工具來進行，是否符合此

5、九十個檢測要點？10.無障礙網頁設計流程圖11.無障礙網站實例n等級A+行政院農委會(http:/www.coa.gov.tw/index_intro.php)墾丁國家公園(http:/www.ktnp.gov.tw)n等級AA交通部公路總局北區監理所(http:/www.tmvso.gov.tw)台北市政府入口網(http:/www.tcg.gov.tw)n等級AAA警政署(http:/www.npa.gov.tw)12.符合A+小撇步(一)n等級A之必要條件 tag 加註 title=“xxxx”tag 加註 alt=“替代文字”頁框要定義名稱 tag 加註 title=“xxx”排版用表

6、格加上說明 加註 summary=排版用表格“非排版用表格要用 並定義行列對應狀態若使用 css樣式表，需確保文件去除樣式表後仍能正確閱讀 tag 要加註說明範例說明13.符合A+小撇步(二)n等級A+之必要條件除需符合前述等級A之所有條件外，需再具備導盲磚(:)或叫定位點搭配快速鍵使用便捷鍵或叫快速鍵(Accesskey)網站導覽(sitemap)瀏覽網頁時，需具有使用鍵盤的設計，切勿只設計僅供使用滑鼠的情形替代文字說明：有意義的文字條列式的小圖示alt=“*”無意義的裝飾性圖檔alt=“”(空字串)14.符合A+小撇步(三)n導盲磚(:)配合便捷鍵程式範例:左側區塊左側區塊:中央區塊中央區

7、塊:右側區塊右側區塊n網站導覽範例http:/enable.nat.gov.tw/sitemap.jsphttp:/ http:/ Freego下載 http:/enable.nat.gov.tw/download_tool.jsp(要先加入會員)17.無障礙網頁檢測工具n安裝JVM步驟先將其他瀏覽器關閉或執行的程式結束立即下載(直接安裝在該台機器上)*另有手動下載(可將檔案下載到local)依操作步驟安裝(關閉彈跳視窗攔截)最後測試是否安裝成功18.無障礙網頁檢測工具nFreego操作環境工具列要檢測的網址開始檢測選擇本地端檔案功能表設定下拉選單，可選擇所要達到的等級19.無障礙網頁檢測工具

8、nFreego檢測步驟於網址列輸入所要檢測的網址設定檢測層數(預設為全網站)選擇檢測等級(預設為A+)按下開始鍵進行檢測20.無障礙網頁檢測工具nFreego檢測後結果21.無障礙網頁檢測工具nFreego修正工具(僅供純HTML網頁)符合無障礙網頁的好幫手1.先選擇一個要修正的網址列2.按下修正工具22.無障礙網頁檢測工具nFreego修正工具(僅供純HTML網頁)1.先點選檢測碼之規範代碼3.點選一個要修正的位置，視窗下方會出現網頁程式原始碼4.雙擊後進行修正2.會出現不合格的位置清單23.無障礙網頁檢測工具nFreego修正工具(僅供純HTML網頁)針對圖片的3種修正方法確定後按下修正鍵

9、，即可再繼續進行下一個修正24.無障礙網頁檢測工具nFreego其他檢測說明停止檢測按下STOP鍵讀取報告單網頁檢測報告全網站檢測報告重新檢測網頁重新檢測單一網頁重新檢測所有網頁25.無障礙網頁檢測工具nFreego經驗分享雖然提供內建的修正模式，但最好僅使用在純HTML的網頁(frameset框架網頁也除外)檢測報告非常詳細，對於伺服器端語言(.asp,.php.)的網頁可以拿來做為原始碼修改的依據26.標章申請步驟及流程n步驟 1：機器檢測在local以最新單機版檢測工具(Freego 3.1)或網路版檢測工具檢測通過。n步驟 2：人工預檢(校內)-至淡江大學無障礙全球資訊網之無障礙專區申

10、請人工預檢。-預檢流程包括機器及人工兩部份。27.標章申請步驟及流程n步驟 3：至研考會網站加入會員,申請標章登錄(http:/enable.nat.gov.tw/member.jsp)填寫機關資料登錄成為會員n步驟 4：單一窗口登錄通過步驟1及步驟2，即可自行張貼標章，請至無障礙標章登錄單一窗口登錄以供備查，系統並將自動產生標章連結路徑。(http:/enable.nat.gov.tw/emblem/emblem_register.jsp)28.標章申請步驟及流程n步驟步驟 5：設定標章連結路徑 請將所張貼的標章，設定連結至系統自動產生之標章連結路徑，此路徑將記錄每一網站歷次的檢測情形，即檢

11、測紀錄。替標章加上替代文字說明 實例實例:淡江大學運輸管理學系淡江大學運輸管理學系 標章下載區http:/enable.nat.gov.tw/logodesign2.jsp29.標章申請步驟及流程n步驟步驟 6：抽檢，採定期及不定期抽檢，原則如下：抽檢，採定期及不定期抽檢，原則如下：第1次抽檢 張貼標章並登錄後，原則上於一週內進行機器/人工抽檢。不定期機器抽檢由系統不定期地自登錄網站中抽選，進行機器檢測。不定期人工抽檢不定期抽選已登錄張貼無障礙網頁標章的網站，進行人工檢測碼抽檢。結合障礙人士定期抽檢 定期抽檢已登錄張貼無障礙標章的網站並提出建議及改善方向報告30.標章申請步驟及流程n步驟步驟

12、7：抽測結果抽測結果 抽檢符合。(1)以電子郵件通知原申請者。(2)記錄於無障礙網路空間服務網之檢測紀錄 (張貼標章網站)。抽檢未符。(1)以電子郵件通知原申請者修正或資料已刪除。(2)於無障礙網路空間服務網公告至受測網站修改 完成後，系統將會自動移除未符名單。(3)不符情況較嚴重或違反規定者則告知申請標章之登錄資料已 刪除(參考)。31.標章申請步驟及流程n步驟步驟 8：修改完成修改完成 以會員身分登錄，網站維護者將修正辦理情形，記錄於檢測紀錄。n步驟步驟 9：重覆步驟重覆步驟6至步驟至步驟8。32.標章使用規定(一)n通過無障礙檢測且張貼標章的網站，應依照以下的步驟完成標章的張貼與連結：全

13、網站：通常置於網站首頁下方 局部網站：將無障礙網頁標章放置於通過無障礙檢測的網頁適當處 33.標章使用規定(二)n為了方便搜尋引擎、網站管理者和身心障礙人士瞭解網站已通過無障礙網頁檢測，應在網頁標頭加入下列的meta說明：34.參考網址n無障礙網路空間服務網http:/enable.nat.gov.tw/index.jspn等級A及A+綜合練習http:/cc.shu.edu.tw/icare/apr1ok.htmn人工預檢(校內)練習(僅限97.06.04)http:/163.13.226.30/batol/enable/index.asp35.Q/A及設計經驗分享36.人工預檢流程(校內)

14、會員註冊填寫申請分派檢測人員做機器機器檢測Email 通知申請人Email 通知檢測人員複檢A不符合申請人線上修正機器不符的資料符合檢測結果符合否37.人工預檢流程(校內)分派檢測人員做人工人工檢測Email 通知申請人Email 通知申請人員及檢測管控人員進行分派申請人線上修正人工人工不符的資料AEmail 通知檢測人員複檢完成人工預檢不符合符合檢測結果符合否Back38.人工預檢流程(校內)Back上網查看39.人工預檢流程(校內)Back40.人工預檢流程(校內)同時副本會寄給管控人員Back41.人工預檢流程(校內)Back42.人工預檢流程(校內)Back43.人工預檢流程(校內)Back44.Back標章申請步驟及流程45.