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

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

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

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

4、內(nèi)容的改變 無障礙網(wǎng)頁開發(fā)規(guī)範(fàn)十四條規(guī)範(fàn) (.tw/doc1.jsp)規(guī)範(fàn)八：確保嵌入式使用者介面具有直接可及性規(guī)範(fàn)九：設(shè)計裝置獨立網(wǎng)頁 規(guī)範(fàn)十：使用過渡的解決方案 規(guī)範(fàn)十一：使用國際與國內(nèi)官方訂定的技術(shù)和規(guī)範(fàn) 規(guī)範(fàn)十二：提供內(nèi)容導(dǎo)引資訊 規(guī)範(fàn)十三：提供清楚的瀏覽網(wǎng)站機制規(guī)範(fàn)十四：確保簡單清楚的網(wǎng)頁內(nèi)容 無障礙網(wǎng)頁開發(fā)規(guī)範(fàn)因應(yīng)四個原則及十四條規(guī)範(fàn)，於是有了九十個檢測要點可利用研考會網(wǎng)站的線上檢測功能或Freego檢測工具來進行，是否符合此九十個檢測要點？無障礙網(wǎng)頁設(shè)計流程圖無障礙網(wǎng)站實例等級A+行政院農(nóng)委會 (.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=排版用表格“非排版用表格要用 並定義行列對應(yīng)狀態(tài)若使用 css樣式表，需確保文件去除樣式表後仍能正確閱讀 tag 要加註說明範(fàn)例說明符合A+小撇步(二)等級A+之必要條件除需符合前述等級A之所有條件外，需再具備導(dǎo)盲磚(:)或叫定位點搭配快速鍵使用便捷鍵或叫快速鍵(Accesskey)網(wǎng)

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

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

8、能表設(shè)定下拉選單，可選擇所要達到的等級無障礙網(wǎng)頁檢測工具Freego檢測步驟於網(wǎng)址列輸入所要檢測的網(wǎng)址設(shè)定檢測層數(shù)(預(yù)設(shè)為全網(wǎng)站)選擇檢測等級(預(yù)設(shè)為A+)按下開始鍵進行檢測無障礙網(wǎng)頁檢測工具Freego檢測後結(jié)果無障礙網(wǎng)頁檢測工具Freego修正工具(僅供純HTML網(wǎng)頁)符合無障礙網(wǎng)頁的好幫手1. 先選擇一個要修正的網(wǎng)址列2. 按下修正工具無障礙網(wǎng)頁檢測工具Freego修正工具(僅供純HTML網(wǎng)頁)1. 先點選檢測碼之規(guī)範(fàn)代碼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)驗分享雖然提供內(nèi)建的修正模式，但最好僅使用在純HTML的網(wǎng)頁(frameset框架網(wǎng)頁也除外)檢測報告非常詳細(xì)，對於伺服器端語言(.asp, .php.)的網(wǎng)頁可以拿來做為原始碼修改的依據(jù)標(biāo)章申請步驟及流程步驟 1： 機器檢測在local以最新單機版檢測工具(Freego 3.1)或網(wǎng)路版檢測工具檢測通過。步驟 2： 人工預(yù)檢(校內(nèi))至淡江大學(xué)無障礙全球資訊網(wǎng)之

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

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

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