網(wǎng)頁五四三視覺設計篇課件

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

2、九十條相關的檢測要點分屬3個優(yōu)先等級、 3(+1)個檢測等級每個檢測等級都含機器及人工檢測2個部分標準檢測碼的檢測狀態(tài)：0：機器辨識/機器檢測1：機器辨識/人工檢測2：人工辨識/人工檢測無障礙網(wǎng)頁開發(fā)規(guī)範國內標準與國外的差異WCAG 1.0國內優(yōu)先等級3個3個規(guī)範條文14條14條規(guī)範細節(jié)65個檢測碼90個檢測碼檢測方式人工/機器人工/機器檢測等級3個3+1個認證標章3個3+1個無障礙網(wǎng)頁開發(fā)規(guī)範四項原則多媒體相關資訊的可及性網(wǎng)頁內容：影像、圖形、語音、音樂、影片等，應加入替代或等值的文字網(wǎng)頁結構和呈現(xiàn)處理的可及性網(wǎng)頁文字為了排版或美觀而採用了表格或頁框設計，卻破壞了網(wǎng)頁的可及性網(wǎng)頁開發(fā)和輸出入

3、裝置相關技術處理的可及性不使用滑鼠的情況下，需兼顧鍵盤使用者的可及性、Script語言、特殊的媒體技術(FLASH)網(wǎng)站瀏覽機制的可及性身障者在特殊上網(wǎng)裝置瀏覽網(wǎng)頁時較不方便，因此網(wǎng)站瀏覽機制的設計應力求簡單清楚(例如下拉式選單mouse over時才出現(xiàn)，mouse out時又消失)無障礙網(wǎng)頁開發(fā)規(guī)範十四條規(guī)範 (.tw/doc1.jsp)規(guī)範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規(guī)範二：不要單獨靠色彩來提供特殊資訊 規(guī)範三：適當?shù)厥褂脴擞浾Z言和樣式表單 規(guī)範四：闡明自然語言的使用 規(guī)範五：建立編排良好的表格規(guī)範六：確保網(wǎng)頁能在新科技下良好地呈現(xiàn) 規(guī)範七：確保使用者能處理時間敏感

4、內容的改變 無障礙網(wǎng)頁開發(fā)規(guī)範十四條規(guī)範 (.tw/doc1.jsp)規(guī)範八：確保嵌入式使用者介面具有直接可及性規(guī)範九：設計裝置獨立網(wǎng)頁 規(guī)範十：使用過渡的解決方案 規(guī)範十一：使用國際與國內官方訂定的技術和規(guī)範 規(guī)範十二：提供內容導引資訊 規(guī)範十三：提供清楚的瀏覽網(wǎng)站機制規(guī)範十四：確保簡單清楚的網(wǎng)頁內容 無障礙網(wǎng)頁開發(fā)規(guī)範因應四個原則及十四條規(guī)範，於是有了九十個檢測要點可利用研考會網(wǎng)站的線上檢測功能或Freego檢測工具來進行，是否符合此九十個檢測要點？無障礙網(wǎng)頁設計流程圖無障礙網(wǎng)站實例等級A+行政院農委會 (.tw/index_intro.php)墾丁國家公園(http:/.tw)等級AA交

5、通部公路總局北區(qū)監(jiān)理所(.tw)臺北市政府入口網(wǎng)(http:/.tw)等級AAA警政署(http:/.tw)符合A+小撇步(一)等級A之必要條件 tag 加註 title=“xxxx” tag 加註 alt=“替代文字”頁框要定義名稱 tag 加註 title=“xxx”排版用表格加上說明 加註 summary=排版用表格“非排版用表格要用 並定義行列對應狀態(tài)若使用 css樣式表，需確保文件去除樣式表後仍能正確閱讀 tag 要加註說明範例說明符合A+小撇步(二)等級A+之必要條件除需符合前述等級A之所有條件外，需再具備導盲磚(:)或叫定位點搭配快速鍵使用便捷鍵或叫快速鍵(Accesskey)網(wǎng)

6、站導覽(sitemap)瀏覽網(wǎng)頁時，需具有使用鍵盤的設計，切勿只設計僅供使用滑鼠的情形替代文字說明：有意義的文字條列式的小圖示alt=“*”無意義的裝飾性圖檔alt=“”(空字串)符合A+小撇步(三)導盲磚(:)配合便捷鍵程式範例:左側區(qū)塊:中央?yún)^(qū)塊:右側區(qū)塊網(wǎng)站導覽範例.tw/sitemap.jsphttp:/center/sitemap.asp符合A+小撇步(四)確保事件的啟發(fā)不得要求一定使用滑鼠滑鼠鍵盤OnMousedownOnKeydownOnMouseupOnkeyupOnclickOnKeypressOnMouseoverOnfocusOnMouseoutOnblur無障礙網(wǎng)頁檢測

7、工具Web版檢測工具http:/.tw/check.jsp單機版檢測工具Freego檢測程式行政院研考會免費提供檢測程式下載安裝Freego前，要先安裝JVM /zh_tw/download/windows_automatic.jsp Freego下載 http:/.tw/download_tool.jsp (要先加入會員)無障礙網(wǎng)頁檢測工具安裝JVM步驟先將其他瀏覽器關閉或執(zhí)行的程式結束立即下載(直接安裝在該臺機器上)*另有手動下載(可將檔案下載到local)依操作步驟安裝(關閉彈跳視窗攔截)最後測試是否安裝成功無障礙網(wǎng)頁檢測工具Freego操作環(huán)境工具列要檢測的網(wǎng)址開始檢測選擇本地端檔案功

8、能表設定下拉選單，可選擇所要達到的等級無障礙網(wǎng)頁檢測工具Freego檢測步驟於網(wǎng)址列輸入所要檢測的網(wǎng)址設定檢測層數(shù)(預設為全網(wǎng)站)選擇檢測等級(預設為A+)按下開始鍵進行檢測無障礙網(wǎng)頁檢測工具Freego檢測後結果無障礙網(wǎng)頁檢測工具Freego修正工具(僅供純HTML網(wǎng)頁)符合無障礙網(wǎng)頁的好幫手1. 先選擇一個要修正的網(wǎng)址列2. 按下修正工具無障礙網(wǎng)頁檢測工具Freego修正工具(僅供純HTML網(wǎng)頁)1. 先點選檢測碼之規(guī)範代碼3. 點選一個要修正的位置，視窗下方會出現(xiàn)網(wǎng)頁程式原始碼4. 雙擊後進行修正2. 會出現(xiàn)不合格的位置清單無障礙網(wǎng)頁檢測工具Freego修正工具(僅供純HTML網(wǎng)頁)針對

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

10、無障礙專區(qū)申請人工預檢。預檢流程包括機器及人工兩部份。標章申請步驟及流程步驟 3： 至研考會網(wǎng)站加入會員,申請標章登錄(http:/.tw/member.jsp)填寫機關資料登錄成為會員步驟 4：單一窗口登錄通過步驟1及步驟2，即可自行張貼標章，請至無障礙標章登錄單一窗口登錄以供備查，系統(tǒng)並將自動產生標章連結路徑。(http:/.tw/emblem/emblem_register.jsp)標章申請步驟及流程步驟 5：設定標章連結路徑 請將所張貼的標章，設定連結至系統(tǒng)自動產生之標章連結路徑，此路徑將記錄每一網(wǎng)站歷次的檢測情形，即檢測紀錄。替標章加上替代文字說明 實例:淡江大學運輸管理學系 標章下

11、載區(qū).tw/logodesign2.jsp標章申請步驟及流程步驟 6： 抽檢，採定期及不定期抽檢，原則如下： 第1次抽檢 張貼標章並登錄後，原則上於一週內進行機器/人工抽檢。 不定期機器抽檢由系統(tǒng)不定期地自登錄網(wǎng)站中抽選，進行機器檢測。不定期人工抽檢不定期抽選已登錄張貼無障礙網(wǎng)頁標章的網(wǎng)站，進行人工檢測碼抽檢。結合障礙人士定期抽檢 定期抽檢已登錄張貼無障礙標章的網(wǎng)站並提出建議及改善方向報告標章申請步驟及流程步驟 7： 抽測結果 抽檢符合。 (1)以電子郵件通知原申請者。 (2)記錄於無障礙網(wǎng)路空間服務網(wǎng)之檢測紀錄 (張貼標章網(wǎng)站)。 抽檢未符。 (1)以電子郵件通知原申請者修正或資料已刪除 。

12、 (2)於無障礙網(wǎng)路空間服務網(wǎng)公告至受測網(wǎng)站修改 完成後，系統(tǒng)將會自動移除未符名單。 (3)不符情況較嚴重或違反規(guī)定者則告知申請標章之登錄資料已 刪除 (參考)。標章申請步驟及流程步驟 8： 修改完成 以會員身分登錄，網(wǎng)站維護者將修正辦理情形，記錄於檢測紀錄。 步驟 9： 重覆步驟6至步驟8。標章使用規(guī)定(一)通過無障礙檢測且張貼標章的網(wǎng)站，應依照以下的步驟完成標章的張貼與連結： 全網(wǎng)站：通常置於網(wǎng)站首頁下方 局部網(wǎng)站：將無障礙網(wǎng)頁標章放置於通過無障礙檢測的網(wǎng)頁適當處 標章使用規(guī)定(二)為了方便搜尋引擎、網(wǎng)站管理者和身心障礙人士瞭解網(wǎng)站已通過無障礙網(wǎng)頁檢測，應在網(wǎng)頁標頭加入下列的meta說明： 參考網(wǎng)址無障礙網(wǎng)路空間服務網(wǎng).tw/index.jsp等級A及A+綜合練習.tw/icare/apr1ok.htm人工預檢(校內)練習(僅限97.06.04)0/batol/enable/index.aspQ/A及設計經(jīng)驗分享人工預檢流程(校內)會員註冊填寫申請分派檢測人員做機器檢測Email 通知申請人Email 通知檢測人員複檢A不符合申請人線上修正機器不符的資料符合檢測結果符合否人工預檢流程(校內)分派檢測人員做人