1、張秀榕、龔邦珍 主講2008-06-04及設計經驗分享無障礙網頁專區http:/w3.tku.edu.tw/batol/無障礙網路空間n以方便行善的概念為設計基礎 例：生活環境中的無障礙坡道n降低網路應用上的困難與挫折感n增加生活資訊流通與應用的機會 網路為資訊創造了無遠弗屆的可能，但人為的因素卻可能設下了屏障與阻礙！例：只能限制某種瀏覽解析度、某種瀏覽器或版本無障礙網站n在網站的設計上考量身障使用者的需求，盡量排除不必要的的障礙n使網站的操作使用的便利性，達到一定的標準 國際標準(W3C,WAI,WCAG)國內標準(無障礙標章：A,A+,AA,AAA以Accessibility為標章設計原由
2、)無障礙網頁開發規範n四項原則n十四條規範n九十條相關的檢測要點 分屬3個優先等級、3(+1)個檢測等級 每個檢測等級都含機器及人工檢測2個部分 標準檢測碼的檢測狀態：0：機器辨識/機器檢測 1：機器辨識/人工檢測 2：人工辨識/人工檢測無障礙網頁開發規範n國內標準與國外的差異WCAG 1.0國內優先等級3個3個規範條文14條14條規範細節65個檢測碼90個檢測碼檢測方式人工/機器人工/機器檢測等級3個3+1個認證標章3個3+1個無障礙網頁開發規範n 四項原則 多媒體相關資訊的可及性網頁內容：影像、圖形、語音、音樂、影片等，應加入替代或等值的文字 網頁結構和呈現處理的可及性網頁文字為了排版或美
3、觀而採用了表格或頁框設計，卻破壞了網頁的可及性 網頁開發和輸出入裝置相關技術處理的可及性不使用滑鼠的情況下，需兼顧鍵盤使用者的可及性、Script語言、特殊的媒體技術(FLASH)網站瀏覽機制的可及性身障者在特殊上網裝置瀏覽網頁時較不方便，因此網站瀏覽機制的設計應力求簡單清楚(例如下拉式選單mouse over時才出現，mouse out時又消失)無障礙網頁開發規範n十四條規範(http:/enable.nat.gov.tw/doc1.jsp)規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的
4、使用 規範五：建立編排良好的表格 規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 無障礙網頁開發規範n十四條規範(http:/enable.nat.gov.tw/doc1.jsp)規範八：確保嵌入式使用者介面具有直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案 規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容 無障礙網頁開發規範n因應四個原則及十四條規範，於是有了九十個檢測要點 可利用研考會網站的線上檢測功能或Freego檢測工具來進行，是否符合此九十
5、個檢測要點？無障礙網頁設計流程圖無障礙網站實例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)符合A+小撇步(一)n 等級A之必要條件 tag 加註 title=“xxxx”tag 加註 alt=“替代文字”頁框要定義名稱 tag 加註 title=“xxx”排版用表格加上說明
6、 加註 summary=排版用表格“非排版用表格要用 並定義行列對應狀態 若使用 css樣式表，需確保文件去除樣式表後仍能正確閱讀 tag 要加註說明範例說明符合A+小撇步(二)n 等級A+之必要條件除需符合前述等級A之所有條件外，需再具備 導盲磚(:)或叫定位點搭配快速鍵使用 便捷鍵或叫快速鍵(Accesskey)網站導覽(sitemap)瀏覽網頁時，需具有使用鍵盤的設計，切勿只設計僅供使用滑鼠的情形 替代文字說明：有意義的文字 條列式的小圖示alt=“*”無意義的裝飾性圖檔alt=“”(空字串)符合A+小撇步(三)n 導盲磚(:)配合便捷鍵程式範例:左側區塊左側區塊:中央區塊中央區塊:右側
7、區塊右側區塊n 網站導覽範例http:/enable.nat.gov.tw/sitemap.jsphttp:/ 確保事件的啟發不得要求一定使用滑鼠滑鼠鍵盤OnMousedownOnKeydownOnMouseupOnkeyupOnclickOnKeypressOnMouseoverOnfocusOnMouseoutOnblur無障礙網頁檢測工具n Web版檢測工具http:/enable.nat.gov.tw/check.jspn 單機版檢測工具 Freego檢測程式行政院研考會免費提供 檢測程式下載 安裝Freego前，要先安裝JVM http:/ Freego下載 http:/enable
8、.nat.gov.tw/download_tool.jsp(要先加入會員)無障礙網頁檢測工具n安裝JVM步驟 先將其他瀏覽器關閉或執行的程式結束 立即下載(直接安裝在該台機器上)*另有手動下載(可將檔案下載到local)依操作步驟安裝(關閉彈跳視窗攔截)最後測試是否安裝成功無障礙網頁檢測工具nFreego操作環境工具列要檢測的網址開始檢測選擇本地端檔案功能表設定下拉選單，可選擇所要達到的等級無障礙網頁檢測工具nFreego檢測步驟 於網址列輸入所要檢測的網址 設定檢測層數(預設為全網站)選擇檢測等級(預設為A+)按下開始鍵進行檢測無障礙網頁檢測工具nFreego檢測後結果無障礙網頁檢測工具nF
9、reego修正工具(僅供純HTML網頁)符合無障礙網頁的好幫手1.先選擇一個要修正的網址列2.按下修正工具無障礙網頁檢測工具nFreego修正工具(僅供純HTML網頁)1.先點選檢測碼之規範代碼3.點選一個要修正的位置，視窗下方會出現網頁程式原始碼4.雙擊後進行修正2.會出現不合格的位置清單無障礙網頁檢測工具nFreego修正工具(僅供純HTML網頁)針對圖片的3種修正方法確定後按下修正鍵，即可再繼續進行下一個修正無障礙網頁檢測工具nFreego其他檢測說明 停止檢測按下STOP鍵 讀取報告 單網頁檢測報告 全網站檢測報告 重新檢測網頁 重新檢測單一網頁 重新檢測所有網頁無障礙網頁檢測工具nF
10、reego經驗分享 雖然提供內建的修正模式，但最好僅使用在純HTML的網頁(frameset框架網頁也除外)檢測報告非常詳細，對於伺服器端語言(.asp,.php.)的網頁可以拿來做為原始碼修改的依據標章申請步驟及流程n步驟 1：機器檢測 在local以最新單機版檢測工具(Freego 3.1)或網路版檢測工具檢測通過。n步驟 2：人工預檢(校內)-至淡江大學無障礙全球資訊網之無障礙專區申請人工預檢。-預檢流程包括機器及人工兩部份。標章申請步驟及流程n步驟 3：至研考會網站加入會員,申請標章登錄(http:/enable.nat.gov.tw/member.jsp)填寫機關資料登錄成為會員n步
11、驟 4：單一窗口登錄 通過步驟1及步驟2，即可自行張貼標章，請至無障礙標章登錄單一窗口登錄以供備查，系統並將自動產生標章連結路徑。(http:/enable.nat.gov.tw/emblem/emblem_register.jsp)標章申請步驟及流程n 步驟步驟 5：設定標章連結路徑 請將所張貼的標章，設定連結至系統自動產生之標章連結路徑，此路徑將記錄每一網站歷次的檢測情形，即檢測紀錄。替標章加上替代文字說明 實例實例:淡江大學運輸管理學系淡江大學運輸管理學系 標章下載區http:/enable.nat.gov.tw/logodesign2.jsp標章申請步驟及流程n 步驟步驟 6：抽檢，採
12、定期及不定期抽檢，原則如下：抽檢，採定期及不定期抽檢，原則如下：第1次抽檢 張貼標章並登錄後，原則上於一週內進行機器/人工抽檢。不定期機器抽檢由系統不定期地自登錄網站中抽選，進行機器檢測。不定期人工抽檢不定期抽選已登錄張貼無障礙網頁標章的網站，進行人工檢測碼抽檢。結合障礙人士定期抽檢 定期抽檢已登錄張貼無障礙標章的網站並提出建議及改善方向報告標章申請步驟及流程n 步驟步驟 7：抽測結果抽測結果 抽檢符合。(1)以電子郵件通知原申請者。(2)記錄於無障礙網路空間服務網之檢測紀錄 (張貼標章網站)。抽檢未符。(1)以電子郵件通知原申請者修正或資料已刪除。(2)於無障礙網路空間服務網公告至受測網站修
13、改 完成後，系統將會自動移除未符名單。(3)不符情況較嚴重或違反規定者則告知申請標章之登錄資料已 刪除(參考)。標章申請步驟及流程n步驟步驟 8：修改完成修改完成 以會員身分登錄，網站維護者將修正辦理情形，記錄於檢測紀錄。n步驟步驟 9：重覆步驟重覆步驟6至步驟至步驟8。標章使用規定(一)n通過無障礙檢測且張貼標章的網站，應依照以下的步驟完成標章的張貼與連結：全網站：通常置於網站首頁下方 局部網站：將無障礙網頁標章放置於通過無障礙檢測的網頁適當處 標章使用規定(二)n為了方便搜尋引擎、網站管理者和身心障礙人士瞭解網站已通過無障礙網頁檢測，應在網頁標頭加入下列的meta說明：參考網址n無障礙網路
14、空間服務網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.aspQ/A及設計經驗分享人工預檢流程(校內)會員註冊填寫申請分派檢測人員做機器機器檢測Email 通知申請人Email 通知檢測人員複檢A不符合申請人線上修正機器不符的資料符合檢測結果符合否人工預檢流程(校內)分派檢測人員做人工人工檢測Email 通知申請人Email 通知申請人員及檢測管控人員進行分派申請人線上修正人工人工不符的資料AEmail 通知檢測人員複檢完成人工預檢不符合符合檢測結果符合否Back人工預檢流程(校內)Back上網查看人工預檢流程(校內)Back人工預檢流程(校內)同時副本會寄給管控人員Back人工預檢流程(校內)Back人工預檢流程(校內)Back人工預檢流程(校內)BackBack標章申請步驟及流程
