網(wǎng)頁(yè)五四三視覺(jué)設(shè)計(jì)篇課件

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

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

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

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

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

6、站導(dǎo)覽(sitemap)瀏覽網(wǎng)頁(yè)時(shí)，需具有使用鍵盤(pán)的設(shè)計(jì)，切勿只設(shè)計(jì)僅供使用滑鼠的情形替代文字說(shuō)明：有意義的文字條列式的小圖示alt=“*”無(wú)意義的裝飾性圖檔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ā)不得要求一定使用滑鼠滑鼠鍵盤(pán)OnMousedownOnKeydownOnMouseupOnkeyupOnclickOnKeypressOnMouseoverOnfocusOnMouseoutOnblur無(wú)障礙網(wǎng)頁(yè)檢測(cè)

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

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

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

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

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

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