及設計經驗分享 張秀榕、龔邦珍 主講 2008-06-04.

Presentation on theme: "及設計經驗分享 張秀榕、龔邦珍 主講 2008-06-04."— Presentation transcript:

1 及設計經驗分享 張秀榕、龔邦珍 主講

2 無障礙網頁專區

3 無障礙網路空間 以方便行善的概念為設計基礎 降低網路應用上的困難與挫折感 增加生活資訊流通與應用的機會 例：生活環境中的無障礙坡道
網路為資訊創造了無遠弗屆的可能，但人為的因素卻可能設下了屏障與阻礙！ 例：只能限制某種瀏覽解析度、某種瀏覽器或版本

4 無障礙網站 在網站的設計上考量身障使用者的需求，盡量排除不必要的的障礙 使網站的操作使用的便利性，達到一定的標準
國際標準(W3C, WAI, WCAG) 國內標準(無障礙標章：A, A+, AA, AAA→以Accessibility為標章設計原由)

5 無障礙網頁開發規範 四項原則 十四條規範 九十條相關的檢測要點 分屬3個優先等級、 3(+1)個檢測等級
每個檢測等級都含機器及人工檢測2個部分 標準檢測碼的檢測狀態： 0：機器辨識/機器檢測 1：機器辨識/人工檢測 2：人工辨識/人工檢測

6 無障礙網頁開發規範 國內標準與國外的差異 WCAG 1.0 國內 優先等級 3個 規範條文 14條 規範細節 65個檢測碼 90個檢測碼
檢測方式 人工/機器 檢測等級 3+1個 認證標章

7 無障礙網頁開發規範 四項原則 多媒體相關資訊的可及性→網頁內容：影像、圖形、語音、音樂、影片等，應加入替代或等值的文字
網頁結構和呈現處理的可及性→網頁文字為了排版或美觀而採用了表格或頁框設計，卻破壞了網頁的可及性 網頁開發和輸出入裝置相關技術處理的可及性→不使用滑鼠的情況下，需兼顧鍵盤使用者的可及性、Script語言、特殊的媒體技術(FLASH) 網站瀏覽機制的可及性→身障者在特殊上網裝置瀏覽網頁時較不方便，因此網站瀏覽機制的設計應力求簡單清楚(例如下拉式選單mouse over時才出現，mouse out時又消失)

8 無障礙網頁開發規範 十四條規範 (http://enable.nat.gov.tw/doc1.jsp)
規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的使用 規範五：建立編排良好的表格 規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變

9 無障礙網頁開發規範 十四條規範 (http://enable.nat.gov.tw/doc1.jsp)
規範八：確保嵌入式使用者介面具有直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案 規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容

10 無障礙網頁開發規範 因應四個原則及十四條規範，於是有了九十個檢測要點
可利用研考會網站的線上檢測功能或Freego檢測工具來進行，是否符合此九十個檢測要點？

11 無障礙網頁設計流程圖

12 無障礙網站實例 等級A+ 等級AA 等級AAA 行政院農委會 (http://www.coa.gov.tw/index_intro.php)
墾丁國家公園( 等級AA 交通部公路總局北區監理所( 台北市政府入口網( 等級AAA 警政署(

13 符合A+小撇步(一) 等級A之必要條件 範例說明 <a> tag 加註 title=“xxxx”
<img> tag 加註 alt=“替代文字” 頁框要定義名稱 → <frame> tag 加註 title=“xxx” 排版用表格加上說明→<table> 加註 summary="排版用表格“ 非排版用表格要用 <tr><th></th></tr>並定義行列對應狀態 若使用 css樣式表，需確保文件去除樣式表後仍能正確閱讀 <script> tag 要加註<NOSCRIPT>說明 範例說明

14 符合A+小撇步(二) 等級A+之必要條件 除需符合前述等級A之所有條件外，需再具備 導盲磚(:::)或叫定位點→搭配快速鍵使用
便捷鍵或叫快速鍵(Accesskey) 網站導覽(sitemap) 瀏覽網頁時，需具有使用鍵盤的設計，切勿只設計僅供使用滑鼠的情形 替代文字說明： 有意義的文字 條列式的小圖示→alt=“*” 無意義的裝飾性圖檔→alt=“”(空字串)

15 符合A+小撇步(三) 導盲磚(:::)配合便捷鍵程式範例 網站導覽範例
<a accesskey= "L" href="#" title="左方選單區" class="hidetxt">:::左側區塊</a> <a accesskey= "C" href="#" title="主要內容區" class="hidetxt">:::中央區塊</a> <a accesskey= "R" href="#" title="右方相關內容區" class="hidetxt">:::右側區塊</a> 網站導覽範例

16 符合A+小撇步(四) 確保事件的啟發不得要求一定使用滑鼠 滑鼠 鍵盤 OnMousedown OnKeydown OnMouseup
Onkeyup Onclick OnKeypress OnMouseover Onfocus OnMouseout Onblur

17 無障礙網頁檢測工具 Web版檢測工具 單機版檢測工具 http://enable.nat.gov.tw/check.jsp
Freego檢測程式→行政院研考會免費提供 檢測程式下載 安裝Freego前，要先安裝JVM → Freego下載→ (要先加入會員)

18 無障礙網頁檢測工具 安裝JVM步驟 先將其他瀏覽器關閉或執行的程式結束 立即下載(直接安裝在該台機器上)
*另有手動下載(可將檔案下載到local) 依操作步驟安裝(關閉彈跳視窗攔截) 最後測試是否安裝成功

19 無障礙網頁檢測工具 Freego操作環境 開始檢測 選擇本地端檔案 要檢測的網址 工具列 功能表[設定]下拉選單，可選擇所要達到的等級

20 無障礙網頁檢測工具 Freego檢測步驟 於網址列輸入所要檢測的網址 設定檢測層數(預設為全網站) 選擇檢測等級(預設為A+)
按下「開始」鍵進行檢測

21 無障礙網頁檢測工具 Freego檢測後結果

22 無障礙網頁檢測工具 Freego修正工具(僅供純HTML網頁) 符合無障礙網頁的好幫手 1. 先選擇一個要修正的網址列 2. 按下修正工具

23 無障礙網頁檢測工具 Freego修正工具(僅供純HTML網頁) 1. 先點選檢測碼之規範代碼
3. 點選一個要修正的位置，視窗下方會出現網頁程式原始碼 4. 雙擊後進行修正 2. 會出現不合格的位置清單

24 無障礙網頁檢測工具 Freego修正工具(僅供純HTML網頁) 針對圖片的3種修正方法 確定後按下修正鍵，即可再繼續進行下一個修正

25 無障礙網頁檢測工具 Freego其他檢測說明 停止檢測→按下STOP鍵 讀取報告 單網頁檢測報告 全網站檢測報告 重新檢測網頁
重新檢測單一網頁 重新檢測所有網頁

26 無障礙網頁檢測工具 Freego經驗分享 雖然提供內建的修正模式，但最好僅使用在純HTML的網頁(frameset框架網頁也除外)
檢測報告非常詳細，對於伺服器端語言(.asp, .php...)的網頁可以拿來做為原始碼修改的依據

27 標章申請步驟及流程 步驟 1： 機器檢測 步驟 2： 人工預檢(校內)
在local以最新單機版檢測工具(Freego 3.1)或網路版檢測工具檢測通過。 步驟 2： 人工預檢(校內) 至淡江大學無障礙全球資訊網之無障礙專區申請人工預檢。 預檢流程包括機器及人工兩部份。

28 標章申請步驟及流程 步驟 3： 至研考會網站加入會員,申請標章登錄(http://enable.nat.gov.tw/member.jsp)
填寫機關資料登錄成為會員 步驟 4：單一窗口登錄 通過步驟1及步驟2，即可自行張貼標章，請至「無障礙標章登錄」單一窗口登錄以供備查，系統並將自動產生「標章連結路徑」。(

29 標章申請步驟及流程 步驟 5：設定標章連結路徑 替標章加上替代文字說明
請將所張貼的標章，設定連結至系統自動產生之「標章連結路徑」，此路徑將記錄每一網站歷次的檢測情形，即「檢測紀錄」。 替標章加上替代文字說明 <a href=“(收到的標章連結路徑) ” title=“無障礙網站”> <img src=“(設定連結至您自行下載的無障礙標章圖檔位置)” border=“0”width=“88” height=“31” alt=“(網站通過檢測的範圍)通過第(1|A+|2|3)優先等級無障礙網頁檢測” ></a> 實例:淡江大學運輸管理學系 <a href=" title="無障礙網站"><img src=“images/aplus.jpg” border="0" width="88" height="31" alt="通過A+無障礙網頁檢測"></a> 標章下載區

30 標章申請步驟及流程 步驟 6： 抽檢，採定期及不定期抽檢，原則如下： 第1次抽檢 張貼標章並登錄後，原則上於一週內進行「機器/人工」抽檢。
第1次抽檢 張貼標章並登錄後，原則上於一週內進行「機器/人工」抽檢。 不定期機器抽檢 由系統不定期地自登錄網站中抽選，進行機器檢測。 不定期人工抽檢 不定期抽選已登錄張貼無障礙網頁標章的網站，進行人工檢測碼抽檢。 結合障礙人士定期抽檢 定期抽檢已登錄張貼無障礙標章的網站並提出建議及改善方向報告

31 標章申請步驟及流程 步驟 7： 抽測結果 抽檢符合。 (1)以電子郵件通知原申請者。 (2)記錄於「無障礙網路空間服務網」之「檢測紀錄 (張貼標章網站)」。 抽檢未符。 (1)以電子郵件通知原申請者修正或資料已刪除 。 (2)於「無障礙網路空間服務網」公告至受測網站修改 完成後，系統將會自動移除未符名單。 (3)不符情況較嚴重或違反規定者則告知申請標章之登錄資料已 刪除 (參考)。

32 標章申請步驟及流程 步驟 8： 修改完成 以會員身分登錄，網站維護者將修正辦理情形，記錄於「檢測紀錄」。 步驟 9： 重覆步驟6至步驟8。

33 標章使用規定(一) 通過無障礙檢測且張貼標章的網站，應依照以下的步驟完成標章的張貼與連結： 全網站：通常置於網站首頁下方
局部網站：將無障礙網頁標章放置於通過無障礙檢測的網頁適當處

34 標章使用規定(二) 為了方便搜尋引擎、網站管理者和身心障礙人士瞭解網站已通過無障礙網頁檢測，應在網頁標頭加入下列的meta說明：
<meta name="Accessible_website" content="本網站通過第(1|A+|2|3)優先等級無障礙網頁檢測">

35 參考網址 無障礙網路空間服務網 等級A及A+綜合練習 人工預檢(校內)練習(僅限97.06.04)
等級A及A+綜合練習 人工預檢(校內)練習(僅限 )

36 及設計經驗分享 Q/A

37 人工預檢流程(校內) 會員註冊 填寫申請 分派檢測人員 做機器檢測 檢測結果 符合否 申請人線上修正 機器不符的資料
通知檢測人員複檢 檢測結果 符合否 通知申請人 申請人線上修正 機器不符的資料 不符合 符合 A

38 人工預檢流程(校內) 檢測結果 符合否 申請人線上修正 人工不符的資料 完成人工預檢 Email 通知申請人員及 檢測管控人員進行分派
分派檢測人員 做人工檢測 通知檢測人員複檢 檢測結果 符合否 申請人線上修正 人工不符的資料 通知申請人 不符合 符合 完成人工預檢 Back

39 人工預檢流程(校內) 上網查看 Back

40 人工預檢流程(校內) Back

41 人工預檢流程(校內) 同時副本會寄給管控人員 Back

42 人工預檢流程(校內) Back

43 人工預檢流程(校內) Back

44 人工預檢流程(校內) Back

45 標章申請步驟及流程 Back